Верстка грамотного текста
С таким же успехом я мог назвать эту главу «Грамотная верстка текста».
1. Мнения
Есть два полярных взгляда на правильную верстку текстов на вебстраницах. Первый, популяризируемый Артемием Лебедевым, состоит в том, что экранная должна быть максимально приближена к типографике хорошей печатной продукции: привязывание коротких слов к длинным, правильные кавычки, тире (а не дефис как заменитель) и его место в строке, правильное употребление буквы «ё», запрет переносов телефонных номеров и слов с дефисом (с помощью <NOBR>), употребление спецсимволов (например, ©), а не их заменителей вроде (с) и, наконец, как крайнее проявление — висячая пунктуация.. По поводу текстов, не следующих этим правилам, раздаются ламентации:
|
Верстка |
|
|
Подавляющее большинство современной печатной продукции делается дизайнерами, которым известен только один знак: дефис. Получилось так потому, что на клавиатуре персонального компьютера только он доступен без дополнительных усилий. Второй состоит в том, что нечего увеличивать время загрузки страницы, к тому же есть разные кодировки, браузеры и ОС, не все из которых понимают нужные символы, а значит: Перед публикацией текста в Интернете, если только на вашем сервере не предусмотрены специальные меры для правильного показа "спецсимволов", необходимо заменять все виды кавычек на простые кавычки, тире — на дефис, знак номера — на букву N или слово "номер", и так далее. Михаил Волович. «Как это пишется в Интернете» (оформление текста сохранено. Под простыми кавычками Понимается знак дюйма) Такую точку зрения поддерживает и Влад Головач: В жопу такую экранную типографику. Более детальные аргументы против такой типографики он приводит в другой заметке: Нет никаких свидетельств, что применение всех правил бумажного набора к экрану приводит к автоматическому улучшению читабельности. ...получившийся код дольше загружается (процента на 4, что много), потому что его больше. Единственное правило, которое безусловно работает и на бумаге и на экране — дефисы в начале строки. Все остальное по меньшей мере сомнительно в своем императивном проявлении. Разумеется, союз “в" в конце строки часто нужно прилеплять к следующему слову, но только тогда, когда этот союз бросается в глаза (что зависит от конкретного текста), т. е. все равно нужна ручная работа. Оффтопик. «В» — это предлог. Третьей точки зрения придерживаются те, кто не делает официальных заявлений по этому поводу: они оформляют тексты согласно своим правилам, частично соответствующим первой или второй точкам |
|
|
198 |
|
Верстка грамотного текста |
3.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. Смысла в таком решении я не вижу.
Утверждать, что все необходимое до экране, — то же, что и утверждать, б «Преступление и наказание» должны абзаце. (А чего его тогда читать?) То первый экран вам не поможет. А есл перелистнут. [...]
Утверждать, что все необходимое до экране, —то же, что и утверждать, б «Преступление и наказание» должнь абзаце. (А чего его тогда читать?) То первый экран вам не поможет. А есл перелистнут. [...]
Возможно, сильное свешивание влево за край набора и смотрится симпатично на гигантских экранах и в больших массивах текста, но о фрагментарности текстов для веба я уже писал выше. Особенно нелепо полное свешивание смотрится в случае, если абзац состоит из двух строк, а несколькими абзацами ниже свешивания вообще нет:
22 декабря
Простые люди стали обнаруживать спрятанные в секретных точках! М «Союзника». Например, некто еИу нафоткал восемь пикчей в Плешке и
4 августа
Начинается прием на учебный курс дополнительного профессионала «Дизайн в интерактивной среде» продолжительностью 2 учебных сем разработанный специалистами Студии Артемия Лебедева и Британск дизайна.
Выше я сознательно писал о висячих знаках только слева вертикальной линии набора. Следование правилам висячей пунктуации по правой линии безмерно затрудняется отсутствием поддержки переносов в текстах. Отсутствие переносов порождает следующие проблемы:
• Невозможность нормально выровнять («выключить») текст по формату (по ширине, чтобы рваными не были ни левый, ни правый края абзаца). При растягивании слов в строке многие пробелы выглядят безобразно. Соответственно, разные строки в абзаце выглядят по-разному разреженными. Единственный выход — выключать текст влево.
• Пробелы составляют отдельную проблему. Например, пробелы по бокам тире должны быть уже, чем между словами (этого мож-
|
Верстка |
|
|
Но добиться при помощи неразрывных пробелов и средств CSS, но даже в современных книгах этого никто не делает). При наличии в строке длинных слов, особенно на экранах с низким разрешением, верстка абзаца выглядит неряшливо из-за пробелов разной длины. Пробельные дорожки («коридоры») в тексте абзаца вообще нельзя регулировать. • При выключке текста влево возникает рваный правый край. Более или менее нормально он смотрится в широких абзацах, а в узких разница длин строк иногда составляет критическую величину. Для жестко сверстанных абзацев некоторые дизайнеры применяют вручную расставленные переносы, но в колонках новостей, обновляемых не вручную, следить за аккуратным рваным правым краем нет возможности. • Наконец, при рваном правом крае висячую пунктуацию справа смысла использовать вообще нет. А если даже и выравнивать текст по формату, то применение висячей пунктуации справа будет минимальным, поскольку знаков переноса там нет. Можно будет выносить за линию набора только знаки препинания — точку, запятую, двоеточие, точку с запятой, кавычку, скобку... Решение проблемы — то есть реализация переносов на веб-страницах — теоретически существует. Для этого придется верстать тексты с жестко заданным диапазоном количества символов в строке, а переносы расставлять клиентским скриптом уже в браузере пользователя перед выводом на экран. Разумеется, скрипт должен учитывать правила переносов конкретного языка. Более простое и действенное решение состоит в предварительной (или онлайновой, при помощи серверного скрипта) расстановке т. наз. «мягких» переносов, или спецсимволов, которые указывают программе, в каком месте можно теоретически поставить перенос. Если позиция этого спецсимвола попадает на конец строки, знак переноса отображается, в противном случае игнорируется. В браузерах Internet Explorer и Opera такая технология действует (в первом с некоторой задержкой в прорисовке страницы при изменении размера окна браузера, во втором не всегда корректно), в браузерах Gecko (Netscape, Mozilla, Firefox и подобных) не действует. В браузере Konqueror (в Linux) на месте «мягкого» переноса образуется пробел. Вставить такой спецсимвол можно с помощью последовательности символов  3; (или ­) либо комбинации клавиш Alt и 0173. Минус (помимо неполной поддержки браузеров) — в существенном увеличении кода страницы. Существует сценарий, который позволяет расставлять переносы автоматически. Он известен под названием «алгоритм П. Христова в модификации Дымченко и Варсанофьева». |
|
|
202 |
|
Верстка грамотного текста |
3.4 |
|
<script language="JavaScript"> Text = document. getElementsByTagName("body")[0]. innerHTML; Var RusA = "[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]"; Var RusV = "[аеёиоуыэюя]"; Var RusN = "[бвгджзклмнпрстфхцчшщ]"; Var RusX = "[йъь]"; Var Hyphen = "xAD"; Var re1 = New RegExp("("+RusX+")("+RusA+RusA+")","ig"); var re2 = New RegExp("("+RusV+")("+RusV+RusA+")","ig"); var re3 = New RegExp("("+RusV+RusN+")("+RusN+RusV+")","ig"); var re4 = New RegExp("("+RusN+RusV+")("+RusN+RusV+")","ig"); var re5 = New RegExp("("+RusV+RusN+") ("+RusN+RusN+RusV+")","ig") ; var re6 = New RegExp("("+RusV+RusN+RusN+")("+RusN+RusN+RusV+")", "ig"); Text = text. replace(re1, "$1"+Hyphen+"$2"); text = text. replace(re2, "$1"+Hyphen+"$2"); text = text. replace(re3, "$1"+Hyphen+"$2"); text = text. replace(re4, "$1"+Hyphen+"$2"); text = text. replace(re5, "$1"+Hyphen+"$2"); text = text. replace(re6, "$1"+Hyphen+"$2"); Document. getElementsByTagName("body")[0].innerHTML = text; </script> Его следует поместить после между закрывающими тэгами </body> и </html>. Он извлекает содержимое тэга <body> — то есть все содержание страницы, проходится по нему алгоритмом с шестью условиями и расставляет переносы. Единственный минус — переносы расставляются и в тэгах, а на экран содержимое, например, параметра alt выводится не с мягкими переносами, а с обычными дефисами, что портит картину. Как уже было сказано, не все браузеры отображают мягкие переносы, поэтому можно с помощью серверного сценария оставить в коде страницы сценарий расстановки переносов только для браузеров, корректно их отображающих: |
<?
$uag = $HTTP_USER_AGENT;
If(strpos($uag,"MSIE")!=false || strpos($uag,"Opera")!==false || strpos($uag,"Safari") !==false || strpos($uag,"AppleWebKit")!==false)
{
?>
...сценарий...
<?
}
?>
Кроме того, переносы нужно расставлять не на всех страницах. Например, на страницах, изобилующих формами и полями, переносы не нужно расставлять вообще, потому что в этом случае могут происходить ошибки, когда данные формы будут посылаться с переносами, а это не нужно — ведь сценарий расставляет переносы в режиме реального времени.
В заключение вашему вниманию предлагается таблица, с помощью данных из которой вы сможете вставлять в веб-страницы правильные кавычки, тире и прочие необходимые символы.
|
Символ |
Описание |
Числовой код Мнемоника |
С клавиатуры |
|
|
« |
Левая кавычка |
« |
&^ио; |
АИ+0171 |
|
» |
Правая кавычка |
» |
» |
АИ+0187 |
|
„ |
Открывающая лапка |
„ |
„ |
АИ+0132 |
|
“ |
Закрывающая лапка |
“ |
“ |
АИ+0147 |
|
— |
Тире |
— |
— |
АИ+0151 |
|
© |
Авторское право |
© |
&сору; |
АИ+0169 |
|
® |
Зарегистрированный товарный знак |
® |
® |
АИ+0174 |
|
Тм |
Торговая марка |
™ |
™ |
АИ+0153 |
|
° |
Знак градуса |
° |
° |
АИ+0176 |
|
§ |
Параграф |
§ |
§ |
АИ+0167 |
|
X |
Умножение |
× |
× |
АИ+0215 |
|
№ |
Знак номера |
№ - |
№ |
|
|
’ |
Апостроф |
’ |
— |
АИ+0146 |
|
Неразрывный пробел |
  |
|
АИ.+0160 |
Большое количество спецсимволов можно найти на сайте HTMLHelp (Http://Www.Htmlhelp.Com/Reference/Html40/Entities/).
|
|
Правильно размечать текст для публикации на веб-страницах можно вручную, а можно воспользоваться онлайн-программой «Devanagari» (Www.Erlang.Com.Ru/Devanagari).
Справка. В других языках правила расстановки кавычек отличаются от русских. В английском языке используются кавычки-лапки, но отличные от русских (открывающая “ и закрывающая ”); во французском, итальянском и испанском языках используются кавычки - елочки, но отделенные от слов тонкими или неразрывными пробелами; в немецком же языке используются разные виды кавычек, наиболее характерные из которых — кавычки-елочки, развернутые по отношению кавычкам остальных языков в обратную сторону (»Die Zeitung«). Во французском языке вопросительный и восклицательный знаки отделяются от предшествующего слова тонким или неразрывным пробелом. В испанском языке восклицательный и вопросительный знаки имеют в начале предложения перевернутые вверх ногами дубликаты.
Кроме того, при указании сумм в евро (€, мнемоника €), фунтах (£, мнемоника £) и долларах ($) даже в русских текстах указанные знаки ставятся перед суммой без пробела.
