Советы

Специальные символы

Эта заметка послужила поводом для небольшой реконструкции всей Кухни Сидорова.

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

-- Как хорошо на "Кухне", -- раньше говорил Мячиков.

— На “Кухне” стало просто замечательно! — восклицает теперь Петр.

Действительно, настоящее тире “—” смотрится гораздо лучше своей модели из двух дефисов: “--”.

Что произошло

Можно сказать, что терпение дизайнеров лопнуло! Хотя нормальный вывод тире, “лапок” и других специальных (но таких необходимых) типографских знаков и сейчас возможен не на всех платформах, унижение дизайнеров достигло черты, у которой Артемий Лебедев в конце 2000 года выпустил специальный 62 параграф своего ру/ководства (www.design.ru/kovodstvo) под названием “Экранная типографика”.

Данный параграф ру/ководства берет на себя смелость служить основным настольным (надесктопным) справочником по экранной типографике. К сожалению, уровень отечественных теоретических и практических исследований в области восприятия информации с экрана не превышает нулевой отметки. Поэтому приходится не только проводить подобные исследования, но и составлять стандарты.

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

С недавних пор в Студии Лебедева все тексты в HTML должны обязательно верстаться в “обогащенном” варианте. Ни один текст не должен появиться на публике в “сыром” виде.

Артемий Лебедев

Вся Кухня Сидорова, включая кота Скриптовича, тоже проголосовала “за”!

Краткий справочник

Ниже приводится краткий справочник специальных символов.

название знак мнемоника код
амперсант & &
NN1,2,3,4,6 | IE3,4,5
&
NN1,2,3,4,6 | IE3,4,5
знак “меньше” < &lt;
NN1,2,3,4,6 | IE3,4,5
&#060;
NN1,2,3,4,6 | IE3,4,5
знак “больше” > &gt;
NN1,2,3,4,6 | IE3,4,5
&#062;
NN1,2,3,4,6 | IE3,4,5
неразрывный пробел   &nbsp;
NN1,2,3,4,6 | IE3,4,5
&#160;
NN1,2,3,4,6 | IE3,4,5
параграф § &sect;
NN3,4,6 | IE3,4,5
&#167;
NN1,2,3,4,6 | IE3,4,5
copyright © &copy;
NN1,2,3,4,6 | IE3,4,5
&#169;
NN1,2,3,4,6 | IE3,4,5
registered ® &reg;
NN1,2,3,4,6 | IE3,4,5
&#174;
NN1,2,3,4,6 | IE3,4,5
знак градуса ° &deg;
NN3,4,6 | IE3,4,5
&#176;
NN1,2,3,4,6 | IE3,4,5
левая елочка « &laquo;
NN3,4,6 | IE3,4,5
&#171;
NN1,2,3,4,6 | IE3,4,5
правая елочка » &raquo;
NN3,4,6 | IE3,4,5
&#187;
NN1,2,3,4,6 | IE3,4,5
нижняя лапка   &#132;
NN2,3,4,6 | IE3,4,5
многоточие   &#133;
NN2,3,4,6 | IE3,4,5
один. откр. кавычка   &#145;
NN1,2,3,4,6 | IE3,4,5
один. закр. кавычка   &#146;
NN1,2,3,4,6 | IE3,4,5
левая лапка   &#147;
NN2,3,4,6 | IE3,4,5
правая лапка   &#148;
NN2,3,4,6 | IE3,4,5
жирная точка   &#149;
NN2,3,4,6 | IE3,4,5
средняя точка · &middot;
NN3,4,6 | IE3,4,5
&#183;
NN1,2,3,4,6 | IE3,4,5
среднее тире   &#150;
NN2,3,4,6 | IE3,4,5
длинное тире   &#151;
NN2,3,4,6 | IE3,4,5
trademark &trade;
IE3,4,5
&#153;
NN2,3,4,6 | IE3,4,5
плюс-минус ± &plusmn;
NN3,4,6 | IE3,4,5
&#177;
NN1,2,3,4,6 | IE3,4,5
номер   &#8470;
NN4,6 | IE3,4,5

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

Больше, меньше, амперсант

Знаки “<” и “>” служат для обрамления тегов, поэтому для показа на экране их приходится кодировать.

Текст предыдущего абзаца записан в HTML-коде так:

Знаки &#147;&lt;&#148; и &#147;&gt;&#148;
служат для обрамления тегов, поэтому для показа
на экране их приходится кодировать.

Но чтобы показать эти коды пришлось закодировать амперсант:

Знаки &amp;#147;&amp;lt;&amp;#148; и
&amp;#147;&amp;gt;&amp;#148;
служат для обрамления тегов, поэтому для показа
на экране их приходится кодировать.

Неразрывный пробел

Пробел &nbsp; потому и называется неразрывным, что браузеру запрещается использовать его место для разрыва строки при автоматическом форматировании текста.

Вот характерные случаи использования этого символа (рекомендации Дмитрия Кирсанова):

Неразрывный блок NOBR

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

вид код
9-87-74 <NOBR>9-87-74</NOBR>
во-первых <NOBR>во-первых</NOBR>


Кавычки

Дмитрий Кирсанов в свой книге “Веб-дизайн” пишет:

Всего существует четыре типа кавычек: «французские» (иначе называемые «елочки»), „немецкие“ („лапки“), “английские обычные, или двойные”, и ‘английские одинарные’. В русском языке традиционно применяются французские «елочки», а для «кавычек „внутри“ кавычек» — немецкие „лапки“.

Дмитрий Кирсанов

Артемий Лебедев считает, что “одноуровневые (верхние) лапки стали de facto стандартом за последние 10 лет” (из частной переписки).

На Кухне внимательно посмотрели на „немецкие“ и “английские” лапки и решили, что английские — более красивые.

Во всяком случае, знаком "дюйма" для кавычек мы больше пользоваться не будем.

Тире и дефис

Тире в два-три раза длиннее дефиса. Тире можно моделировать при помощи дефиса: “--”, но гораздо приятнее записывать его в натуральном виде: “—”.

Тире в середине предложения окружается: слева — неразрывным, а справа — обычным пробелом.

Код предыдущего абзаца записывается так:

Тире в середине предложения окружается:
слева&nbsp;&#151; неразрывным,
а&nbsp;справа&nbsp;&#151; обычным пробелом.

Кодовые таблицы (справка)

ASCII

Эта кодировка (American Standart Code for Information Interchange) — восьмибитная (однобайтовая), но охватывает только 128 символов. Она включает латинский алфавит, цифры и основные знаки пунктуации. Все остальные стандартные кодировки совместимы с ней, то есть, размещают на первых 128 местах те же символы и в том же порядке. Вот почему люди часто говорят “ASCII”, хотя реально используют совсем другие кодировки.

КОИ-8

Первый стандарт кодирования русских букв (Код Обмена Информации 8 битный). Кодировка применялась еще в 80-х годах на ЕС ЭВМ. Сейчас это стандарт для русскоязычной электронной почты. Понятно, что символы ASCII в ней остались на своих местах (как и в других 8-битных кодировках).

CP1251

Кодировка Windows (Code Page 1251). Содержит русские буквы.

CP866

Или альтернативная кодировка. Или DOS-кодировка. Используется в операционной системе MS DOS. Эта кодировка принята в качестве стандартной в OS/2 и некоммерческой сети Фидо. Содержит русские буквы.

Latin-1

ISO (International Standart Organization) — международная организация по стандартизации для упорядочивания 8-битных кодировок создала серию ISO-8859, расширяющих таблицу ASCII:

ISO-8859-1 — латиница с дополнительными символами
ISO-8859-5 — кириллица
ISO-8859-6 — арабский алфавит
ISO-8859-7 — греческий алфавит
ISO-8859-8 — иврит

Кодировка ISO-8859-5 для кириллицы не прижилась. А вот кодировка ISO-8859-1 для расширенной латиницы стала общепринятым стандартом Latin-1.

В эту кодировку входят символы немецкого, французского, испанского и других алфавитов. Но русских букв в ней, конечно, нет!

Unicode

Стало понятно, что для кодов всех на свете символов одного байта никак не хватит! Так была придумана двухбайтовая кодировка Unicode. Эту кодировку “обязаны” понимать браузеры, начиная с 4-ых версий.

В этой кодовой таблице (65 636 знакомест) есть все: китайский, корейский, японский… и даже русский! Все живые, мертвые языки и 30% пока еще свободного места.

Unicode совместим с ASCII. Это означает, что первые 128 мест заняты под те же самые символы.


[содержание] [советы] [тестирование] [грамматика и дизайн]       Иван Сидоров kurs@robotland.pereslavl.ru