Page 62 - Сила CSS3 Освой новейший стандарт
P. 62
62 • Глава 2. Облачка с текстом
Благодаря такому коду фрагмент HTML <p class=«caption»>Isn’t my cat cute?</p>
на самой странице в браузере будет отображаться так:
Figure: Isn’t my cat cute?
Поскольку перед нами стоит задача сгенерировать хвостики к облачкам с текстом,
в нашем случае отображаться должны только рамки сгенерированного содержимо-
го, а не само содержимое. Чтобы добиться этого, давайте сгенерируем невидимое
содержимое — неразрывный пробел.
В HTML неразрывный пробел обозначается мнемоникой , однако внутри
свойства content невозможно применять мнемоники HTML. Вместо этого при-
дется использовать шестнадцатеричную часть элемента кода Unicode для данного
символа. Многим из вас может показаться, что эта китайская грамота доступна
лишь самым продвинутым разработчикам, но не пугайтесь — в Сети можно найти
массу удобных таблиц, содержащих подобные значения.
Например, на сайте http://www.digitalmediaminute.com/reference/entity/ вы видите
252 маленьких поля, в каждом из которых отображается одна допустимая мнемо-
ника (X)HTML. В поле Filter entities by keyword
Еще один полезный инструмент — (Фильтровать записи по ключевому слову) вве-
конвертер Unicode Code Converter, дите «non-breaking space». 251 поле пропадет, и на
адрес которого http://rishida.net/ странице останется только одно поле, содержа-
tools/conversion. Здесь вы вводите щее имя мнемоники в HTML, . Подведите
символ или его мнемонику HTML указатель мыши к этому полю (рис. 2.8). Появят-
в текстовое поле и можете пре- ся еще два кода: числовой код мнемоники (в дан-
образовать ее в разнообразные ном случае ) и ее код Unicode (u00A0). Вас
форматы, в том числе получить интересует шестнадцатеричная часть кода Uni-
шестнадцатеричный элемент кода.
code, т. е. то, что находится после «u». Скопируй-
те текст 00A0 в буфер обмена.
Почти все готово. Но, хотя мы и получили код Unicode, его невозможно напрямую
добавить в свойство content, например, так:
blockquote:after {
content:"00A0";
}
Если бы мы так сделали, то браузер вполне логич-
Элементы кода Unicode часто за- но посчитал бы, что мы просим его отобразить
писываются с префиксом «U+» текст «00A0», а не неразрывный пробел. Для того
вместо простого «u». В любом слу- чтобы сообщить браузеру, что это не текст, а код
чае, в свойстве content вы указы- специального символа, необходимо добавить
ваете только шестнадцатеричную
часть, включающую четыре циф- управляющий символ. Программистам должна
ры и следующую за префиксом. быть знакома эта концепция: вы добавляете
перед кодом обратную косую черту, указывая,
www.trk.kg