Генерируемые кавычки

Особой формой генерируемого содержимого являются кавычки. CSS2.x предоставляет мощную поддержку обоих типов кавычек и их поведения в случае вложенности. Это стало возможным благодаря сочетанию значения open-quote свойства content и свойства quotes. Изучая синтаксис значений, мы обнаруживаем, что кроме ключевых слов none и inherit единственным действительным значением является одна или несколько пар строковых значений. Первое строковое значение пары определяет символ открывающей кавычки, а второе – символ закрывающей кавычки. Таким образом, из следующих двух объявлений действительно только первое:

quotes: ' " ' " ' "; /* действительное */
quotes: ' " '; /* НЕДЕЙСТВИТЕЛЬНОЕ */

Первое правило также иллюстрирует один из способов, позволяющих заключить в кавычки сами кавычки. Двойные кавычки заключаются в одинарные, и наоборот.Обратимся к простому примеру. Предположим, вы создаете XML-формат для хранения списка любимых цитат. Вот одна из записей списка:


I hate quotations.
Ralph Waldo Emerson


Чтобы с представленными данными было удобно иметь дело, можно применить следующие правила:

quotation: {display: block;}
quote {quotes: '"' '"';}
quote:before {content: open-quote;}
quote:after {content: close-quote;}
quotee:before {content: " (";}
quotee:after {content: ")";}

Значения open-quote и close-quote применяются для вставки любых подходящих символов кавычек (поскольку в различных языках применяются разные кавычки).


Так, эта цитата начинается и заканчивается двойными кавычками. Если обычные для большинства печатных устройств вертикальные прямые кавычки требуется заменить «скругленными»1 (curly quotes), правило quote примет вид:

quote {quotes: '\201C' '\201D';}

Здесь заданы шестнадцатеричные коды Unicode символов «скругленных» кавычек, и в результате применения данного правила к предыдущему выражению цитата Эмерсона будет заключена в скругленные. Свойство quotes позволяет определять шаблоны цитат с любым количеством уровней вложенности. В английском языке, например, цитаты обычно начинаются с двойных кавычек, а вложенные цитаты выделяются одинарными кавычками. Следующие правила задают применение «скругленных» кавычек:

quotation: display: block;}
quote {quotes: '\201C' '\201D' '\2018' '\2019';}
quote:before, q:before{content: open-quote;}
quote:after, q:after {content: close-quote;}

Если применить эти правила к следующей разметке, получится результат:


In the beginning, there was nothing. And God said: Let there
be light!
And there was still nothing, but you could see it.



Если уровень вложенности кавычек превышает количество заданных для них пар, то для всех более глубоких уровней применяется последняя пара.


Таким образом, если применить к разметке, то внутренняя цитата, как и внешняя, будет заключена в двойные кавычки:

quote {quotes: '\201C' '\201D';}

Генерируемые кавычки делают возможным еще один обычный типографский прием. Если в кавычки заключается несколько абзацев, то закрывающие кавычки во всех абзацах, кроме последнего, обычно опускаются, и показываются только открывающие кавычки. Этого можно добиться, задав значение no-close-quote:

blockquote {quotes: '"' '"' "'" "'" '"' '"';}
blockquote p:before {content: open-quote;}
blockquote p:after {content: no-close-quote;}

При этом каждый абзац будет начинаться двойными открывающими кавычками, но закрывающих кавычек не будет. Это касается и последнего абзаца, поэтому, если потребуется добавить закрывающие кавычки, надо будет классифицировать последний абзац и объявить close-quote для его :after-содержимого.

Важность этого значения в том, что оно уменьшает уровень вложенности цитаты, не вставляя символ. Вот почему каждый абзац начинается именно с двойных кавычек и двойные и одинарные кавычки не чередуются. Значение no-close-quote закрывает вложенный уровень в конце каждого абзаца, и таким образом все абзацы имеют один уровень вложенности.


Это важно потому, что, как отмечает спецификация CSS2.1, «Глубина цитирования не зависит от вложенности исходного документа или форматирующей структуры». Иначе говоря, когда вы начинаете уровень цитирования, он сохраняется для всех элементов до тех пор, пока не встретится закрывающая кавычка, которая понижает уровень вложенности.

Для полноты картины необходимо упомянуть и ключевое слово no-open-quote, имеющее противоположный no-close-quote эффект. Это ключевое слово увеличивает на единицу уровень вложенности цитаты, но не вставляет никакие символы.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Вставка генерируемого содержимого
Вставка значений атрибутов
Генерируемое содержимое
Изображения для элементов списка
Компоновка списка