Спецификация CSS2



         

Псевдоэлемент :first-letter


Псевдоэлемент :first-letter можно использовать для "начальных заглавных" и "зависающих заглавных", которые являются распространёнными типографскими эффектами. Этот тип начальных букв похож на инлайн-элемент, если его свойство 'float' - 'none', иначе он похож на всплывающий элемент.

Вот свойства, применимые к псевдоэлементу :first-letter: свойства шрифта, свойства цвета, свойства фона, 'text-decoration', 'vertical-align' (только если 'float' установлен в 'none'), 'text-transform', 'line-height', свойства полей, свойства заполнения, свойства рамок, 'float', 'text-shadow' и 'clear'.

Следующий CSS2 сделает начальную заглавную зависающую букву, захватывающую две строки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>

Этот пример может быть сформатирован так:


[D]

Последовательность фиктивных тэгов такова:

<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>

Обратите внимание, что тэги псевдоэлемента :first-letter примыкают к содержимому (т.е. к начальному символу), поскольку начальный тэг псевдоэлемента :first-line вставлен справа после начального тэга элемента, к которому он присоединён.

Чтобы выполнить форматирование традиционных зависающих заглавных букв, ПА могут выровнять размеры шрифта, например, по базовой линии. Также и контуры глифов могут быть приняты в расчёт при форматировании.

Пунктуация (т.е. символы, определённые в Unicode [UNICODE] в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po)), которая предшествует первой букве, должна включаться, как в этом примере:


[D]




Содержание  Назад  Вперед