Unicode и HTML

В HTML есть несколько способов включить символ в текст документа. Помимо непосредственного ввода символа можно использовать ссылки (character references). Ссылки могут быть десятичными, шестнадцатеричными или именованными.

Десятичные символьные ссылки

Возьмём произвольный символ Unicode, например, тильду (~). Её можно ввести с клавиатуры, но мы попробуем сделать это с помощью десятичной ссылки.

Код символа в таблице: U+007E.
Переводим в десятичный формат: 7E16 = 7*16 + 14 = 12610
Чтобы отобразить символ в HTML документе, нужно поместить его код между "&#" и ";".

<span>Это тильда: &#126;</span>

Шестнадцатеричные символьные ссылки

Аналогично десятичному представлению можно использовать шестнадцатеричное, добавим большую или малую латинскую "x" (икс) перед шестнадцатеричным кодом символа.

<span>Это тоже тильда: &#x7E;</span>

Через числовые ссылки можно сослаться на любой символ таблицы Unicode, за исключением символов с кодами U+0000 и U+000D, перманентно не определённых символов, суррогатов (U+D800–U+DFFF) и управляющих символов помимо пробельных.
 

Именованные символьные ссылки

В начале было слово..  (с)

А в нашем случае был метаязык SGML (Standard Generalized Markup Language), на котором определялись языки разметки документов. HTML до версии 4 включительно был приложением SGML, а XML является подмножеством SGML.

В частности, SGML помимо декларативной разметки и описания типов документов (document type definition, DTD), обладал механизмом строковой подстановки, когда некоторая последовательность символов заменяется при обработке некоторой другой последовательностью (для обеспечения переносимости нестандартных символов).

В SGML строки, для которых определены подстановки, назывались entities (иногда их переводят как "объекты", Википедия называет их "символ-мнемоника"). После того, как entities объявлен, на него можно ссылаться в любом месте документа, используя его имя, перед которым ставится символ "&", а после которого - точка с запятой. Точка с запятой может быть опущена, если за ссылкой на entities следует пробел или конец записи.

В HTML определено много entities для специальных символов, вроде валют и математических знаков, а также для отображения символов, имеющих специальное значение для HTML (например, < и >). Их описание можно найти на официальном сайте консорциума. Для HTML 4 пример описания дроби 3/4 (U+00BE) выглядит так:

<!ENTITY frac34 CDATA "&#190;" -- vulgar fraction three quarters
                                  = fraction three quarters, U+00BE ISOnum -->

Затем символ можно использовать в документе:

<span>Платформа 9&frac34;</span>

Такое описание выглядит нагляднее, но по факту просто заменяется на:

<span>Платформа 9&#190;</span>
 

Unicode и CSS

В CSS тоже можно обращаться к символам через их коды, но формат записи отличается от HTML. Код символа предваряется обратным слешем (\).

.test1:after {
 content: "\7E";
}
<span class="test1">Это всё та же тильда:</span>

Подобным образом можно заэкранировать символ, имеющий специальное значение в CSS-разметке, например, кавычку:

.test2:after {
 content: "\"Hello\"";
}
<span class="test2">Он сказал:</span>

Однако, если мы захотим написать "примерно 15км", то есть "~15км", такой код не сработает:

.test3:after {
 content: "\7E15км";
}
<span class="test3">Расстояние:</span>

Поскольку символы, которые могут быть интерпретированы как шестнадцатеричные цифры (0-9, a-f, A-F), будут восприняты как часть кода символа. Есть два способа исправить ситуацию: поставить пробел после кода символа (этот первый пробел не будет отображён при выводе) или использовать 6-циферный код символа.

.test4:after {
 content: "\7E 15км"; /* или "\00007E15км" */
}

Сводная табличка в качестве резюме:

Ссылки

1. Character entity references in HTML 4 (in HTML 5)
2. Character references in HTML 4 (in HTML 5)
3. Using character escapes in markup and CSS