quotes в CSS — які лапки підставляти в цитатах тега q

Властивість quotes становлює тип лапок, який застосовується для цитат <q> в документі.\

Ця властивість працює тільки для контейнера <q>, це обмеження можна обійти застосовуючи стильову властивість content зі значенням open-quote (відкриваюча лапка) або close-quote (закриваюча лапка).

У типографії та різних мовах лапки можуть сильно відрізнятися. У американській мові найпоширенішою умовою є використання лівої подвійної лапки (“), щоб відкрити цитату та правильну подвійну лапку (”), щоб закрити її.

Якщо інша цитата вкладена в цю цитату, то вона оточується лівою одинарною лапкою (‘) та правильною однією лапкою (’).

Однак це не єдині символи, які можна використовувати для цитат. Наприклад, для багатьох латинських марок використовується guillemet (або подвійний шеврон). Вони представлені символами Unicode U + 00AB («)» та U + 00BB (»). У французькій мові ці, як правило, використовуються з символом без перерви (U + 00A0).

Таким чином, властивість quotes дозволяє точно вказати, які символи використовуються при відкритті та закритті цитат.

Ви також можете використовувати властивість content, щоб оточити елемент лапками, використовуючи псевдоелементи ::before і ::after. Як тут:

q { 
  quotes: '\201c' '\201d' '\2018' '\2019';
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Можливо, ви помітили, що під час використання елемента <q> браузер автоматично робить його цитатою (відповідно до специфікації HTML5.1), навіть якщо ви не вказали жодних лапок у вашій таблиці стилів:

Цитатна пунктуація (наприклад, лапки), яка цитує вміст елемента, не повинна з'являтися безпосередньо перед, після або в елементах <q>; вони будуть вставлені в рендеринг браузером.

Крім того, браузери, як очікується, використовуватимуть відповідні лапки для мови (як описано в специфікації HTML5.1). Тому вам не потрібно буде додавати лапки у власній таблиці стилів для елемента <q>.

Як значення використовується символ тексту (наприклад, quotes: "« "" »") або символ Unicode. Деякі з них перераховані в табл. 1.

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

quotes: none|string|initial|inherit;

Властивість quotes може отримувати 4 значень:

none

Властивість не задана

автор: Svitlana

правити

string

Вказує, які лапки використовувати. Перші два значення визначають перший рівень цитування, наступні два значення визначають наступний рівень і т.д.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	11	1.5	9	4	12	8

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	9

Приклади

+ запропонувати свій приклад у пісочниці

<p><q>Зовнішня цитата з <q>вкладеною</q> всередині</q></p>

q {
    quotes: "«" "»" "‹" "›";
}

<p>Вибери потрібне значення для <code>quotes</code>:</p>

<input type="text" id="val" value="'">

<hr>

<div id="block">
  <q>Це звичайна цитати українською мовою. Для неї не застосовано жодних правил!</q>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p {
  margin-top: 0;
}

#block {
  padding: 10px;
  background: gold;
}

#block q {
  quotes: "'" "'";
}

document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
  var q = this.value;
  document.querySelectorAll('#block q').forEach((n) => n.style.setProperty('quotes', '"' + q + '" "' + q + '"'));
}));

<div class="cols">
    <div>
        <p class="cap">quotes: auto — пара за мовою оточення</p>
        <p lang="uk">українська: <q>цитата в тексті</q></p>
        <p lang="en">english: <q>a quote inside text</q></p>
        <p lang="de">deutsch: <q>ein Zitat im Text</q></p>
        <p lang="fr">francais: <q>une citation</q></p>
        <p lang="uk">цитата з власним lang="en" усередині українського
            абзацу — лапки все одно кутові:
            <q lang="en">an english quote</q></p>
        <p lang="uk">вона ж в обгортці &lt;span lang="en"&gt; — тепер англійські:
            <span lang="en"><q>an english quote</q></span></p>
    </div>

    <div>
        <p class="cap">Власні пари й вимкнення</p>
        <p lang="uk" class="pairs">два рівні: <q>зовні <q>всередині</q> кінець</q></p>
        <p lang="uk" class="off">quotes: none: <q>цитата зовсім без лапок</q></p>
        <blockquote lang="uk" class="bq">Цитата в блоці: лапок тут не буває,
            доки не написати правило з ::before і content: open-quote.</blockquote>
    </div>
</div>

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.cols > div {
    flex: 1 1 280px;
}

.cap {
    margin: 0 0 8px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

p {
    margin: 0 0 8px;
    font: 15px/1.5 system-ui, sans-serif;
}

q {
    color: #1b4f9c;
}

.pairs {
    quotes: "«" "»" "„" "“";
}

.off {
    quotes: none;
}

.bq {
    quotes: "«" "»";
    margin: 12px 0 0;
    padding: 8px 12px;
    background: #eef1f5;
    border-left: 4px solid #2f6fd0;
    font: 15px/1.5 system-ui, sans-serif;
}

.bq::before {
    content: open-quote;
    color: #c0392b;
}

.bq::after {
    content: close-quote;
    color: #c0392b;
}

<p>
  <q>Це звичайна цитати українською мовою. <q>Для неї не застосовано жодних правил!</q> Також вона містить вкладену цитату.</q>
</p>

<p lang="en">
  Англійською мовою (з лапками спецально для цієї мови): <q>Outer quote says <q>what inner quote said</q>!</q>
</p>

<p lang="fr">
  Французькою мовою (з лапками спецально для цієї мови):  <q lang="fr">Ah ! mon vieux ! comment vas-tu ?</q>
</p>

p {
  font-size: 3.5vw;
  background-color: #f1f1f1;
  padding: 6px;
}

p:lang(en) q {
  quotes: "\201c" "\201d" "\2018" "\2019";
}

p:lang(fr) q {
  quotes: "\00AB\00A0" "\00A0\00BB";
}