CSS-свойство `quotes`

CSS-свойство CSS quotes задаёт, как браузер должен отображать кавычки, которые автоматически добавляются в HTML-элемент <q> или добавляются с помощью значений open-quotes или close-quotes (либо опускаются с помощью значений no-open-quote и no-close-quote) CSS-свойства content.

Браузеры вставляют кавычки в начале и конце элементов <q>, а также для значений open-quote и close-quote свойства content. Каждая открывающая или закрывающая кавычка заменяется одной из строк, указанных в значении quotes, в зависимости от уровня вложенности; если же quotes явно задано как auto или разрешается в это значение, используемые кавычки зависят от языка.

Попробуйте

quotes: none;

quotes: initial;

quotes: "'" "'";

quotes: "„" "“" "‚" "‘";

quotes: "«" "»" "‹" "›";

<section id="default-example">
  <q id="example-element"
    >Show us the wonder-working <q>Brothers,</q> let them come out publicly—and
    we will believe in them!</q
  >
</section>

q {
  font-size: 1.2rem;
}

Синтаксис

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;

Значения

none

Значения open-quote и close-quote свойства content не выводят кавычки, как если бы были заданы no-open-quote и no-close-quote соответственно.

auto

Кавычки, типографически подходящие для унаследованного языка (то есть заданного атрибутом lang у родительского или другого предка).

<string>

Задаёт одну или несколько пар кавычек для открывающих и закрывающих кавычек. В каждой паре первая строка используется как значение для open-quote, а вторая — для close-quote.

Первая пара задаёт кавычки внешнего уровня. Вторая пара, если она есть, задаёт кавычки первого вложенного уровня. Следующая пара используется для двойного вложения и так далее. Если уровень вложенности кавычек превышает число пар, последняя пара в значении quotes повторяется.

Используемая пара кавычек зависит от уровня вложенности: числа вхождений <q> кавычек или open-quote (либо no-open-quote) во всём сгенерированном тексте перед текущим вхождением минус число вхождений закрывающих кавычек — как </q>, close-quote или no-close-quote. Если уровень вложенности равен 0, используется первая пара; если он равен 1 — вторая и так далее.

Формальное определение

Формальный синтаксис

quotes = 
  none |
  auto |
  [ <string> <string> ]+

Примеры

Кавычки по умолчанию и переопределение

В этом примере сравниваются кавычки по умолчанию, предоставляемые семантическим HTML-элементом <q>, с кавычками, заданными с помощью CSS-свойства quotes.

Значение quotes по умолчанию — auto. В этом примере для первого элемента списка задано quotes: auto, поэтому используются кавычки по умолчанию для указанного языка; результат такой же, как если бы свойство quotes не было задано. Во втором элементе списка указано, какие кавычки использовать для обычных и вложенных кавычек; эти кавычки будут использоваться для потомков элемента с классом specialQuotes независимо от языка (как и любые заданные значения атрибута lang).

HTML

<ul>
  <li>
    Default quotes:
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <li class="specialQuotes">
    Defined by <code>quotes</code> property :
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
</ul>

CSS

li {
  quotes: auto;
}

.specialQuotes {
  quotes: "“" "”" "‘" "’";
}

Результат

По умолчанию браузер предоставляет кавычки, соответствующие языку, если используется элемент <q>. Если задано свойство quotes, указанные значения переопределяют настройки браузера по умолчанию. Обратите внимание, что свойство quotes наследуется. Свойство quotes задано для элемента <li> с классом specialQuotes, но кавычки применяются к элементам <q>.

Обратите внимание, что каждая открывающая и закрывающая кавычка заменяется одной из строк, указанных в значении quotes, в зависимости от уровня вложенности.

Автоматические кавычки

Значение quotes по умолчанию — auto. В этом примере это значение не задаётся явно.

HTML

<ul>
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>

CSS

q {
  quotes: auto;
}
li:not(:last-of-type) {
  border-bottom: 1px solid;
}

li {
  padding: 0.5em 0;
}

Результат

Обратите внимание, что атрибут lang указан у предка элемента <q>, а не у самого элемента <q>. Если цитата написана на языке, отличном от языка окружающего текста, обычно её заключают в кавычки, принятые для языка окружающего текста, а не для языка самой цитаты.

С помощью генерируемого содержимого

В этом примере вместо элемента <q> мы добавляем кавычки с помощью псевдоэлементов ::before и ::after перед содержимым и после содержимого каждого элемента с определённым именем класса.

HTML

<p>
  <span class="quote">I should be using quotes</span>, I thought,
  <span class="quote"
    >But why use semantic HTML elements when I can add classes to
    <span class="quote">ALL THE THINGS!</span>?
  </span>
</p>

CSS

.quote {
  quotes: '"' '"' "'" "'";
}
.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}

Результат

Текст вместо кавычек и пустые кавычки

В этом примере показано использование чего-либо, отличного от кавычек, в качестве значений <string>. Открывающая кавычка обозначает говорящего, а закрывающая кавычка пуста, поскольку открывающей кавычки нет. (Создание пары из <string> и перечисляемого ключевого слова не поддерживается.) Для вложенных кавычек задаётся auto. Такие вложенные кавычки будут ограничены теми символами, которые язык обычно использует для вложенных цитат.

HTML

<ul>
  <li><q data-speaker="karen">Hello</q></li>
  <li><q data-speaker="chad">Hi</q></li>
  <li><q data-speaker="karen">this conversation is not interesting</q></li>
  <li>
    <q data-speaker="pat"
      >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
    >
  </li>
</ul>

CSS

[data-speaker="karen" i] {
  quotes: "She said: " "";
}
[data-speaker="chad" i] {
  quotes: "He said: " "";
}
[data-speaker="pat" i] {
  quotes: "They said: " "";
}
[data-speaker] q {
  quotes: auto;
}

li {
  padding: 0.5em 0;
}

Результат

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

Совместимость с браузерами

См. также

• Модуль генерируемого содержимого CSS
• contain
• content