Грамотное применение спецсимволов

Охота за спецсимволами

Тебе, конечно, встречались на различных сайтах надписи на подобие таких: «© 2009–2010 Мегаверстальщег Inc.™». Такие значки не найдешь на клавиатуре. Как же они это делают? Давай посмотрим вместе.

Откроем, например, google:

Хороший урожай! С первого взгляда видно три спецсимвола: копирайт, апостроф и стрелка. В коде эти фрагменты выглядят так:

<u>more</u> <small>&#9660;</small>
I&#39;m Feeling Lucky
&copy;2010

Например, на w3.org также сразу находим спецсимволы:

А это уже официальный сайт Microsoft:

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

Немного теории

Умные дядьки из W3C написали, что: «a character entity reference is an SGML construct that references a character of the document character set». То есть символьная мнемоника (ссылка на символ, спецсимвол) — это конструкция SGML, которая ссылается на символ из набора символов документа. Как всегда, ими же были разработаны рекомендации по употреблению спецсимволов в документах SGML (а старый добрый HTML, как ты наверное знаешь, это его приложение).

Чтобы вставить в текст определенный спецсимвол, нужно указать соответствующий ему числовой код, который состоит из знака амперсанда (&), решетки (#), номера кода и точки с запятой. Так, как запомнить кучу разных цифр обычному человеку нереально, была придумана вторая форма записи — мнемонический код. Он состоит амперсанда (&), буквенного сокращения и точки с запятой. Реально проще запомнить, что амперсанд — это amp, a альфа — alpha, чем что их коды 38 и 945.

Их много и они разные…

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

Мы не поленились собрать в специальном разделе наиболее употребительные (а главное — правильно понимаемые популярными браузерами) спецсимволы. Пользуйтесь на здоровье:

• Спецсимволы на базе букв — значки порожденные от букв — торговая марка, копирайт и др.
• Метки и знаки пунктуации — тире, кавычки, многоточие …
• Математические — знаки операций, степени, логические операторы и т.д.
• Стрелки — они и в Африке стрелки
• Денежные знаки — без них никуда
• Греческие буквы — да-да, весь алфавит
• Буквы с метками — ударения, тильды и прочее

С помощью спецсимволов можно решать, например, такие задачи верстки, как вставка стрелок в страничную навигацию.

Старые знакомые

Может ты удивишься, но некоторые символы, которые есть на клавиатуре тоже нужно заменять кодами! В первую очередь это относится к служебным символам, необдуманное употребление которых может стать фатальным для верстки. Например, символы < и > — мнемоники &lt; и &gt; соответственно. Браузер привык, что так определяются теги, не стоит вводить его в заблуждение (если тебе, конечно, не безразлично, что пользователь увидит на экране). Также собственно знак & требует замены мнемоникой &amp; — ведь это служебный символ. Если использовать эти три спецсимвола в прямом виде, не заменяя кодами, страничка не пройдет валидацию!

На самом первом рисунке (скриншот Гула) есть еще один критичный значок — апостроф или одинарная кавычка. Так как кавычками выделяются значения атрибутов, не трудно догадатся, что браузер, встретив, например такой код:

<input type="text" value="Закусочная "Колобок" " />

просто запутается. Этот фрагмент будет понят, как <input value=»Закусочная » Колобок=»» type=»text»/>, то есть сразу же появляется ошибка значения поля.

Отсюда правило: как одинарные, так и двойные кавычки всегда заменяй спецсимволами!

Многие спецсимволы похожи между собой. Правильный выбор в такой ситуации — это просто хороший тон. Например, известный российский дизайнер Артемий Лебедев пишет, что:

1. Знак дефис (-) употребляется:
   — для разделения сложных слов (физико-химический, желто-зеленый),
   — в словосочетаниях (Web-сайт, бизнес-ланч),
   — в качестве знака переноса,
   — в качестве знака сокращения (физ-ра),
   — для присоединения префиксов (по-английски, во-вторых),
   — для присоединения частиц (кто-то, где-либо);
2. специальный символ минус &minus; (−) употребляется в математических формулах;
3. специальный символ короткого тире &ndash; (–) применяется в качестве интервала значений или диапазона (2002–2010) не отделяясь пробелами.
4. специальный символ тире &mdash; (—) употребляется для пауз в предложениях по правилам русского языка.

Не менее щепетильно Лебедев рекомендует относиться и к кавычкам в тексте:

В русском языке используются парные кавычки &laquo; («) и &raquo; (»), а также &bdquo; („) и &ldquo; (“).
В английском языке используются парные кавычки &ldquo; (“) и &rdquo; (”), а также &lsquo; (‘) и &rsquo; (’).

Так же не забывай, что троеточие — это один символ! Его мнемонический код &hellip;

Символ неразрывного пробела &nbsp; применяется в тех случаях, когда нужно принудительно удержать элементы на одной строке (например, инициалы и фамилию или предлог и слово). Некоторые не очень грамотные верстальщики иногда используют эти символы для организации отступов. Так поступать неправильно. Для отступов существует специальное css свойство margin.

Регистрозависимость мнемоник

Регистрозависимость — это не заболевание, а ситуация, когда значение мнемонического кода различается регистром букв. Например, &Alpha; — это большая буква Α, a &alpha; — маленькая α.

Про это важно помнить, ведь, например, если ошибочно написать в коде &Empty; (правильно пишется &empty;) для символа «пустое множество» браузер вместо значка ∅ просто напишет слово &Empty;! Такие ляпы могут серьезно подпортить репутацию.

Подытожим

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

Итак, когда я встечаю при верстке:

• Символы <, >, & заменяю кодами &lt; &gt; &amp; это самый ответственный случай — на карте валидность кода.
• Символы ©, ®, ™ заменяю кодами &copy; &reg; &trade; — забочусь об корректном отображении данных на странице.
• Разного рода кавычки «, », «, апостроф ‘ заменяю кодами &laquo; &raquo; &quot; &#39; в соответствии с языком текста (или фантазией дизайнера — как повезет).
• Длинное, короткое тире — заменяю на коды &mdash; &ndash; — это правила хорошего тона
• Остальные спецсимволы (например €, ∅) встречаются гораздо реже. Но их тоже нужно заменять кодами для кроссбраузерного отображения

В качестве post scriptum

В данной статье среди прочих буковок уютно расположились 134 спецсимвола.

Материалы

• www.w3.org: Character entity references in HTML 4
• Ководство. §97. Тире, минус и дефис, или Черты русской типографики
• Ководство. §104. Кавычки