Евгений Резниченко - Спецификация CSS2
5Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'block': решение о том, как форматировать элемент 'run-in'/'compact', принимается с учётом результирующего бокса блока из псевдоэлемента :before.
6Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'inline': решение о том, как форматировать элемент 'run-in'/'compact', зависит от значения 'display' элемента, к которому присоединён :before.
Это заголовок 'run-in' с псевдоэлементом :after, после которого идёт параграф с псевдоэлементом :before. В этом примере все псевдоэлементы являются инлайн (по умолчанию).
Когда таблица стилей:
H3 { display: run-in } H3:after { content: ": " } P:before { content: "... " }
применяется к такому документу-источнику:
<H3>Centaurs</H3> <P>have hoofs <P>have a tail
визуальное форматирование будет таким:
Centaurs: ... have hoofs ... have a tail
В CSS2 авторы могут специфицировать, в чувствительной к стилю и контекстно-зависимой манере, как ПА должны отображать знаки кавычек. Свойство 'quotes' специфицирует пары знаков кавычек для каждого уровня внедрённого закавычивания. Свойство 'content' даёт доступ к таким знакам кавычек и вставляет их до и после закавычивания.
'quotes'
Значение: [<string> <string>]+ | none | inherit
Начальное: зависит от ПА
Применяется: ко всем элементам
Наследуется: да
Процентное: N/A
Носитель: визуальный
Это свойство специфицирует знаки кавычек для любого количества внедрённых закавычиваний. Значения имеют следующий смысл:
none
Значения 'open-quote' и 'close-quote' свойства 'content' не производят знаков кавычек.
[<string> <string>]+
Значения для 'open-quote' и 'close-quote' свойства 'content' берутся из данного списка пар знаков кавычек (закрывающих и открывающих). Первая (самая левая) пара представляет самый внешний уровень закавычивания, вторая пара - первый уровень внедрения и т.д. ПА обязан применять подходящие пары знаков кавычек в соответствии с уровнем внедрения.
Применение следующей таблицы стилей:
/* Специфицируются пары кавычек двух уровней для двух языков */ Q:lang(en) { quotes: '"' '"' "'" "'" } Q:lang(no) { quotes: """ """ "<" ">" } /* Вставляются кавычки до и после содержимого элемента Q */ Q:before { content: open-quote } Q:after { content: close-quote }
к данному фрагменту HTML:
<HTML lang="en"> <HEAD> <TITLE>Quotes</TITLE> </HEAD> <BODY> <P><Q>Quote me!</Q> </BODY> </HTML>
позволит ПАгенту выдать:
"Quote me!"
а данный фрагмент HTML:
<HTML lang="no"> <HEAD> <TITLE>Quotes</TITLE> </HEAD> <BODY> <P><Q>Trondere grater nar <Q>Vinsjan pa kaia</Q> blir deklamert.</Q> </BODY> </HTML>
выдаст:
"Trondere grater nar <Vinsjan pa kaia> blir deklamert."
Примечание. Хотя знаки кавычек, специфицированные в 'quotes' предыдущего примера, по соглашению находятся на клавиатурах компьютера, установки для высококачественного вывода потребуют других символов ISO 10646. В следующей информативной таблице приведён список некоторых символов кавычек ISO 10646:
Ориентировочное представлениекод ISO 10646 (hex)Описание"0022КАВЫЧКА [двойная кавычка ASCII]'0027АПОСТРОФ [одиночная кавычка ASCII]<2039ОДИНОЧНАЯ ЛЕВАЯ УГЛОВАЯ КАВЫЧКА >203AОДИНОЧНАЯ ПРАВАЯ УГЛОВАЯ КАВЫЧКА «00ABЛЕВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА »00BBПРАВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА `2018ЛЕВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-6] '2019ПРАВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-9]``201CЛЕВАЯ ДВОЙНАЯ КАВЫЧКА [double high-6]''201DПРАВАЯ ДВОЙНАЯ КАВЫЧКА [double high-9],,201EДВОЙНАЯ КАВЫЧКА LOW-9 [double low-9]
Знаки кавычек вставляются в соответствующих местах документа значениями 'open-quote' и 'close-quote' свойства 'content'. Каждое вхождение 'open-quote' или 'close-quote' замещается одной их строк значения 'quotes', базируясь на глубине вложения.
'Open-quote' относится к первой кавычке из пары, 'close-quote' относится ко второй. То, какая пара кавычек используется, зависит от уровня вложения кавычек: число вхождений 'open-quote' во всём сгенерированном тексте перед текущим вхождением минус число вхождений 'close-quote'. Если глубина - 0, используется первая пара, если глубина - 1, вторая пара и т.д. Если глубина вложения больше, чем число пар, повторяется последняя пара.
Обратите внимание, что глубина вложения кавычек не зависит от вложения документа-источника или структуры форматирования.
Некоторые стили печати требуют, чтобы знак открывающей кавычки повторялся перед каждым параграфом блока кавычек, охватывающего несколько параграфов, но только последний параграф оканчивался знаком закрывающей кавычки. В CSS этого можно добиться вставкой "фантома" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень кавычек, но не вставляет знак кавычки.
Следующая таблица стилей помещает знаки открывающей кавычки в каждом параграфе в BLOCKQUOTE и вставляет одиночную закрывающую кавычку в конце:
BLOCKQUOTE P:before { content: open-quote } BLOCKQUOTE P:after { content: no-close-quote } BLOCKQUOTE P.last:after { content: close-quote }
Это относится к последнему параграфу, маркированному классом "last", поскольку нет селекторов, которые могут совпадать с последним потомком элемента.
Для симметрии имеется также ключевое слово 'no-open-quote', которое ничего не вставляет, а увеличивает глубину закавычивания на единицу.
Примечание. Если язык закавычивания отличается от языка окружающего текста, то лучше использовать знаки кавычек языка окружающего текста, а не языка закавычивания.
Французский внутри английского:
The device of the order of the garter is "Honi soit qui mal y pense."
Английский внутри французского:
Il disait: " Il faut mettre l'action en < fast forward >."
Таблица стилей типа следующей установит свойство 'quotes' таким образом, что 'open-quote' и 'close-quote' будут корректно работать во всех элементах.
Это правила для документов, содержащих только английский, французский или оба этих языка. Одно правило понадобится для каждого дополнительного языка.
Обратите внимание на использование комбинатора-потомка (">") для установки кавычек в элементы на базе языка окружающего текста:
[LANG|=fr] > * { quotes: """ """ "2039" "203A" } [LANG|=en] > * { quotes: "201C" "201D" "2018" "2019" }
Знаки кавычек для английского показаны здесь в такой форме, что большинство людей будет способно их напечатать.
Если Вы можете печатать их напрямую, то они будут выглядеть примерно так:
[LANG|=fr] > * { quotes: """ """ "<" ">" } [LANG|=en] > * { quotes: """ """ "'" "'" }
Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment' и 'counter-reset. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'.
'counter-reset
Значение: [ <identifier> <integer>? ]+ | none | inherit
Начальное: none
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: все
'counter-increment'
Значение: [ <identifier> <integer>? ]+ | none | inherit
Начальное: none
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: все
Свойство 'counter-increment' принимает одно или более имён счётчиков (идентификаторы), за каждым из которых может следовать целое число. Это число обозначает, насколько счётчик увеличивается при каждом появлении элемента. Увеличение по умолчанию - 1. Допустимы 0 и негативные значения.
Свойство 'counter-reset также содержит список из одного или более имён счётчиков, за каждым из которых может следовать целое число. Целое число задаёт значение, в которое счётчик сбрасывается при каждом появлении элемента. По умолчанию - 0.
Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset, то принимается, что счётчик установлен в 0 корневым элементом.
