Вёрстка текста для веб-страниц

Кирилл Панфилов

1. Мнения

Есть два полярных взгляда на правильную вёрстку текстов на веб-страницах. Первый, популяризируемый Артемием Лебедевым, состоит в том, что экранная типографика должна быть максимально приближена к типографике хорошей печатной продукции: привязывание коротких слов к длинным, правильные кавычки, тире (а не дефис как заменитель) и его место в строке, правильное употребление буквы «ё», запрет переносов телефонных номеров и слов с дефисом (с помощью <NOBR>), употребление спецсимволов (например, ©), а не их заменителей вроде (с) и, наконец, как крайнее проявление — висячая пунктуация. По поводу текстов, не следующих этим правилам, раздаются ламентации:

Подавляющее большинство современной печатной продукции делается дизайнерами, которым известен только один знак: дефис. Получилось так потому, что на клавиатуре персонального компьютера только он доступен без дополнительных усилий.

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

Перед публикацией текста в Интернете, если только на вашем сервере не предусмотрены специальные меры для правильного показа "спецсимволов", необходимо заменять все виды кавычек на простые кавычки, тире - на дефис, знак номера - на букву N или слово "номер", и так далее.
Михаил Волович. «Как это пишется в Интернете» (оформление текста сохранено. Под простыми кавычками понимается знак дюйма)

В жопу такую экранную типографику.

Нет никаких свидетельств, что применение всех правил бумажного набора к экрану приводит к автоматическому улучшению читабельности. ...получившийся код дольше загружается (процента на 4, что много), потому что его больше. Единственное правило, которое безусловно работает и на бумаге и на экране - дефисы в начале строки. Всё остальное по меньшей мере сомнительно в своем императивном проявлении. Разумеется, союз “в” в конце строки часто нужно прилеплять к следующему слову, но только тогда, когда этот союз бросается в глаза (что зависит от конкретного текста), т.е. всё равно нужна ручная работа.

Оффтопик. «В» — это предлог, Влад.

Третьей точки зрения придерживаются те, кто не делает официальных заявлений по этому поводу: они оформляют тексты согласно своим правилам, частично соответствующим первой или второй точкам зрения. Например, употребляют правильные кавычки, но не привязывают неразрывными пробелами тире к концу строки или предлоги к смысловым словам.

2. Правило

Каждый знак текста должен функционально соответствовать своему предназначению, а не подменять собой другие и не подменяться другими.

Следствия из этого правила:

• Есть тире (—), и его нельзя заменять дефисом (-).
• Есть знак номера (№), и его нельзя подменять буквой N. Правда, в браузере Opera старых версий знак номера отображается некорректно.
• Есть русские кавычки («ёлочки»), и они не должны подменяться знаком дюйма ("). Существует старое правило, согласно которому внутри кавычек-ёлочек употребляются кавычки другого вида («кавычки „лапки“»).
• Есть буква «ё», и её совершенно незачем подменять буквой «е».
• Спецсимволы, например, ©, не должны подменяться последовательностями символов вроде (с).
• Апостроф ’ нельзя подменять знаком «одинарной кавычки» '.

Все эти символы можно написать в тексте веб-страницы при помощи цифровых или мнемонических последовательностей, более того, в обычном тексте они вполне нормально сохраняются и при наборе с клавиатуры (например, чтобы напечатать длинное тире, достаточно набрать на цифровой клавиатуре 0151, удерживая нажатой клавишу Alt).

Употребление символов-заменителей по старинке, когда для этого были действительные технологические причины, сейчас просто странно. Компьютер — не печатная машинка, и всегда можно указать кодировку, в которой текст будет загружаться на экран. Следовательно, все указанные символы сейчас доступны для употребления. Их неупотребление — свидетельство лени.

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

Далее, неразрывный пробел удобен, чтобы привязывать предлоги и союзы к следующему за ними слову. Это особенно актуально для веб-страниц с большой шириной абзаца. Можно (во избежание появления висячих строк) привязывать последние короткие слова абзацев к предпоследним тем же неразрывным пробелом.

Следует оставлять на одной строке цифры телефонного номера для его целостного восприятия: для этого есть парный тэг <NOBR>.

Почти оффтопик. Я готов смириться с тем, что всеми этими правилами будут жертвовать, если все будут писать без орфографических и пунктуационных ошибок. Но употребление дефиса на месте тире — разве не пунктуационная ошибка?

3. Бумага и экран

Тезис первый. Подвижность текста на экране — главное отличие от текста, свёрстанного для бумажной страницы. Вследствие этого часть правил бумажной типографики реализовать на веб-страницах трудно, часть — невозможно, а ещё часть просто не нужно.

Тезис второй. На веб-страницах уже есть сложившиеся правила набора и оформления абзацев и других элементов текста. Например, в бумажной вёрстке не принято делать отступы между абзацами, но приняты горизонтальные отступы первой строки, на веб-страницах — наоборот. Уже отсюда следует, что не стоит все принципы бумажной типографики механически переносить на веб-страницы.

Рассмотрим принципы типографики подробнее и в соответствующих контекстах.

Оформление абзацев «в стиле веб» — с отступами между абзацами и без горизонтального отступа первой строки — выработано в связи с тем, что восприятие текста с экрана несколько сложнее, чем с листа бумаги. Или до сих пор менее привычно. Поэтому все объёмы текста, большие, чем одна строка, желательно разделять на более мелкие фрагменты. Средства CSS позволяют при необходимости преобразовывать любой абзац в «книжный» вид на лету. Например, так:

P {text-indent:15px; margin-top:0px}

К веб-типографике можно применять и другие правила бумажной типографики. Но даже в этом случае не стоит доходить до казусов.

В частности, дело касается так называемой висячей пунктуации. Суть её состоит в том, что за вертикальную линию набора текста должны немного свешиваться символы, имеющие «неполноценный» вес по сравнению с буквами: кавычки, скобки и т. п. В этом случае визуально вертикальная линия набора будет казаться ровной, тогда как при математически ровной линии набора будет казаться, что строки, начинающиеся с кавычки или скобки, чуть «вдавлены в строку». Кроме этого, за линию набора должны незначительно свешиваться округлые буквы (О, С) и знаки с «неполным весом» (Т, 1).

На веб-страницах (особенно если есть поддержка серверных технологий, преобразующих страницы на лету) реализовать такие выступы несложно: достаточно слова в кавычках и скобках заключить в парный тэг <span> с параметром margin-left:-0.1em (что, естественно, лучше делать через глобальные таблицы стилей). Решение, которое применила в этом случае Студия Лебедева, не лучшее: во-первых, визуально ровной вертикальной линии набора не получается, а получается сверхпрыгающая строка, а во-вторых, это решение не универсально: слева скриншот из Internet Explorer (то же самое в Mozilla Firefox), справа — из Opera. Смысла в таком решении я не вижу.

Возможно, сильное свешивание влево за край набора и смотрится симпатично на гигантских экранах и в больших массивах текста, но о фрагментарности текстов для веба я уже писал выше. Особенно нелепо полное свешивание смотрится в случае, если абзац состоит из двух строк, а несколькими абзацами ниже свешивания вообще нет:

Выше я сознательно писал о висячих знаках только слева вертикальной линии набора. Следование правилам висячей пунктуации по правой линии безмерно затрудняется отсутствием поддержки переносов в текстах. Отсутствие переносов порождает следующие проблемы:

• Невозможность нормально выровнять («выключить») текст по формату (по ширине, чтобы рваными не были ни левый, ни правый края абзаца). При растягивании слов в строке многие пробелы выглядят безобразно. Соответственно, разные строки в абзаце выглядят по-разному разреженными. Единственный выход — выключать текст влево.
• Пробелы составляют отдельную проблему. Например, пробелы по бокам тире должны быть уже, чем между словами (этого можно добиться при помощи неразрывных пробелов и средств CSS, но даже в современных книгах этого никто не делает). При наличии в строке длинных слов, особенно на экранах с низким разрешением, вёрстка абзаца выглядит неряшливо из-за пробелов разной длины. Пробельные дорожки («коридоры») в тексте абзаца вообще нельзя регулировать.
• При выключке текста влево возникает рваный правый край. Более или менее нормально он смотрится в широких абзацах, а в узких разница длин строк иногда составляет критическую величину. Для жёстко свёрстанных абзацев некоторые дизайнеры применяют вручную расставленные переносы, но в колонках новостей, обновляемых не вручную, следить за аккуратным рваным правым краем нет возможности.
• Наконец, при рваном правом крае висячую пунктуацию справа смысла использовать вообще нет. А если даже и выравнивать текст по формату, то применение висячей пунктуации справа будет минимальным, поскольку знаков переноса там нет. Можно будет выносить за линию набора только знаки препинания — точку, запятую, двоеточие, точку с запятой, кавычку, скобку...

Решение проблемы — то есть реализация переносов на веб-страницах — теоретически существует. Для этого придётся верстать тексты с жёстко заданным диапазоном количества символов в строке, а переносы расставлять клиентским скриптом уже в браузере пользователя перед выводом на экран. Разумеется, скрипт должен учитывать правила переносов конкретного языка.

Бо­лее про­стое и дей­ствен­ное ре­ше­ние со­сто­ит в пред­ва­ри­тель­ной (или он­лай­но­вой, при по­мо­щи сер­вер­но­го скрип­та) рас­ста­нов­ке т. наз. «мяг­ких» пе­ре­но­сов, или спец­сим­вол­ов, ко­то­рые ука­зы­ва­ют про­грам­ме, в ка­ком мес­те мож­но тео­ре­ти­чес­ки по­ста­вить пе­ре­нос. Ес­ли по­зи­ция это­го спец­сим­во­ла по­па­да­ет на ко­нец стро­ки, знак пе­ре­но­са ото­бра­жа­ет­ся, в про­тив­ном слу­чае игно­ри­ру­ет­ся. В брау­зе­рах In­ter­net Ex­plo­rer и Ope­ra та­кая тех­но­ло­гия дей­ству­ет (в пер­вом с не­ко­то­рой за­держ­кой в про­ри­сов­ке стра­ни­цы при из­ме­не­нии раз­ме­ра ок­на брау­зе­ра, во вто­ром не все­гда кор­рект­но), в брау­зе­рах Gecko (Net­scape, Mo­zil­la, Fire­fox и по­доб­ных) не дей­ству­ет. В брау­зе­ре Kon­que­ror (в Li­nux) на мес­те «мяг­ко­го» пе­ре­но­са об­ра­зу­ет­ся про­бел. Вста­вить та­кой спец­сим­вол мож­но с по­мощью по­сле­до­ва­тель­но­сти сим­во­лов ­ (или ­) либо ком­би­на­ции кла­виш Alt и 0173. Ми­нус (по­ми­мо не­пол­ной под­держ­ки брау­зе­ров) — в су­щест­вен­ном уве­ли­че­нии ко­да стра­ни­цы. В ка­чест­ве ил­лю­стра­ции в этом аб­за­це рас­став­ле­ны пе­ре­но­сы.

4. Справочник

Символ	Описание	Числовой код	Мнемоника	С клавиатуры
«	Левая кавычка	«	«	Alt+0171
»	Правая кавычка	»	»	Alt+0187
„	Открывающая лапка	„	„	Alt+0132
“	Закрывающая лапка	“	“	Alt+0147
—	Тире	—	—	Alt+0151
©	Авторское право	©	©	Alt+0169
®	Зарегистрированный товарный знак	®	®	Alt+0174
™	Торговая марка	™	™	Alt+0153
°	Знак градуса	°	°	Alt+0176
§	Параграф	§	§	Alt+0167
×	Умножение	×	×	Alt+0215
№	Знак номера	№	—	№
’	Апостроф	’	—	Alt+0146
Неразрывный пробел		 	 	Alt+0160

Большое количество спецсимволов можно найти на сайте HTMLHelp.

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

Справка. В других языках правила расстановки кавычек отличаются от русских. В английском языке используются кавычки-лапки, но отличные от русских (открывающая “ и закрывающая ”); во французском, итальянском и испанском языках используются кавычки-ёлочки, но отделённые от слов тонкими или неразрывными пробелами; в немецком же языке используются разные виды кавычек, наиболее характерные из которых — кавычки-ёлочки, развёрнутые по отношению кавычкам остальных языков в обратную сторону (»Die Zeitung«). Во французском языке вопросительный и восклицательный знаки отделяются от предшествующего слова тонким или неразрывным пробелом. В испанском языке восклицательный и вопросительный знаки имеют в начале предложения перевёрнутые вверх ногами дубликаты.

Кроме того, при указании сумм в евро (€, мнемоника €), фунтах (£, мнемоника £) и долларах ($) даже в русских текстах указанные знаки ставятся перед суммой без пробела.

← Дайте меню ← Веб-дизайн ← По ту сторону веб-страницы