Ненависть к PRE|Переносы в PRE

Чтобы многострочный код отображался правильно, естественно, использую <pre><code>. Второй тег говорит нам, что это код, первый же отображает текст, не сжимая последовательности пустых символов и превращая разрывы строк в переводы каретки уже в браузере.

Возможно, из десятка известных мне хайлайтеров выберу один — пока предпочтение идет в сторону js, как более выгодного в свете оптимизации метода. Хотя, конечно, придется выбранный скрипт подсократить и убрать лишние цвета.

Но вот вчера в мессенджер постучался Антон Веринов и указал мне на известную ошибку с pre, который игнорирует ширину родительского блока и вылезает за нее. Ну и плюс силком заставил уменьшить размер шрифта (все равно коду не так требуется читаемость).

Если решать проблему переносов в pre, то мы сталкиваемся с довольно неприятным поведением браузеров, не предоставляющих этого по умолчанию. Краткое решение нашел здесь, а уже потом — у Slaff'а вроде как более полное. Однако, не совсем так.

pre {
	<del>white-space: pre;			/* CSS2 */</del>
	white-space: pre-wrap;		/* CSS 2.1 */
	<del>white-space: pre-line;		/* CSS 2.1/3 */</del>
	white-space: -moz-pre-wrap;	/* Mozilla */
	<del>white-space: -hp-pre-wrap;	/* HP printers */</del>
	white-space: -o-pre-wrap;	/* Opera 7 */
	white-space: -pre-wrap;		/* Opera 4-6 */
	word-wrap: break-word;		/* IE 5.5+ */
}

Собственно, первый атрибут удаляем, т.к. он бесполезен. Третий — потому как pre-line — это тот же pre-wrap, но сжимающий последовательности символов пустого пространства (что нам не надо). А пятый — из-за отсутствия смысла. Комментарии (они не «условные») также можно удалить, т.к. они загромождают место.

А если взять за предположение, что пользователи Оперы и Фаерфокса все-таки знают, что такое обновление, достаточно и двух строчек:

white-space: pre-wrap;
	word-wrap: break-word;

Соответственно, такое решение позволяет встраивать многострочный код, который, наконец, будет подстраиваться по ширине блока. Без всяких дополнительных тегов, но за счет места в CSS.

{16 комментариев}

Сестра

Я разучился писать кратко.

{14 комментариев}

Обзор PublicWeb

Вот знают люди, на каких струнках моей души играть. Любовь к критике (основательной, конструктивной — ну и далее по списку) — это, пожалуй, единственное мое положительное качество, покрывающее даже нудность.

Вот отдали мне на съедение блог Кузьмина Евгения. Это типичный авторский бложек, претендующий на настоящую топовость (а то 180 читателей — это тьфу, просто автор еще не развернулся в полную силу). Содержание и материалы — мэйнстрим, приемы тоже. Но это скорее плюс для блоггера именно как «блоггера».

Зато блог — авторский и часто попадающий в десяточку со своими постами. Впрочем, не нравился бы мне местами контент (<irony>а мне сложно угодить, даааа</irony>), я бы не повелся на предложение. Единственное, насчет самого Евгения у меня не сложилось четкой картинки личности, но виной всему, наверное, моя невнимательность (плюс отсутствие общения с человеком и то, что он подписывается у других как milax), а не недостаток персональности в блоге.

Критика под катом

{18 комментариев}

Линия Молотова против спамеров|Параноидальная защита от спама

Хабрачеловек ruskar по собственной воле и в здравом уме усложнил простой алгоритм защиты от автоматического спама, сделав название поля комментария хеш-суммой, изменяющейся через каждые два часа. При этом, естественно, учитывается, что кто-то может отправить коммент на границе «пересаливания».

Таким образом, спамерам не поможет база данных полей. Ведь можно изменить алгоритмы кодирования и уникальный ключ для хеширования.

Окончательное решение спамерского вопроса →

Конечно, от умных парсеров это не спасет, но — готовое решение для встраивания в блоговые движки.

(и не забудьте повысить карму ruskar'у)

{нет комментариев}

Списки

Как активист движения «Нет спискам» (про безэмоциональные блоги — я думаю, массы не поймут), заявляю всему миру: списки — не единственный способ организации контента!

Да-да, многие тексты можно написать абзацами.

Или использовать подзаголовки <h2> или <h3> с нормальными текстами внутри.

Для списков терминов же есть списки терминов (удивительно, да?) <dl>, внутри которых ставят название термина <dt> и его определение <dd> (или несколько).

А маркированные списки использовать только тогда, когда порядок имеет значение — в пошаговых алгоритмах, математической индукции, в связи со временем.

Некоторым это покажется удивительным, но существуют также списки в списках — и это нужно учитывать. В таких случаях вложения делают так: буквы (a) — со скобкой) внутри цифр (4. — с точкой), арабские цифры (4.) внутри римских (IV.), подпункты (1.5.2.).

Для всего остального есть списки немаркированные. И они, кстати, делаются не отбивкой абзацев дефисами, а тегами <li> внутри <ul> (маркированные — <ol>, если кто-то забыл). Буллиты, конечно, тоже нехорошо, но кроссплатформенно это пока не решается.

Да, статьи «100 самых глупейших поступков», «30 бесполезных поступков», «50 ссылок на списки для идиотов», простыни из подборок RSS-иконок и подобные, — безусловно, нужны. Их можно распечатывать и пускать на растопку в долгие холодные вечера.

Черт, я забыл оформить это списком.

{13 комментариев}