css властивість quotes


Властивість 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.

Вид Спецкод HTML Unicode Опис
" &#34; \0022 Лапки, застосовується зазвичай в моноширинних шрифтах, для позначення символу дюйма, а також кутових секунд.
' &#39; \0027 Апостроф. Символ кутових хвилин, в латиниці застосовується для позначення м'якого знака (popalas 'lisa).
« &#171; або &laquo; \00ab Відкриваюча подвійна кутова лапка.
» &#187; або &raquo; \00bb Закриваюча подвійна кутова лапка.
&#8216; \2018 Відкриваюча одинарна лапка.
&#8217; \2019 Закриваюча одинарна лапка.
&#8220; \201c Відкриваюча подвійна лапка в англомовних текстах або закриваюча для російської мови.
&#8221; \201d Закриваюча подвійна лапка в англомовних текстах.
&#8222; \201e Відкриваюча подвійна лапка. Застосовується в російській мові.

Синтаксис

quotes: none|string|initial|inherit;

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

none

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

string

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

initial

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

inherit

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

Значення без задання: Залежить від браузера, його налаштувань і операційної системи. Найчастіше використовується лапки виду "/"
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: object.style.quotes="'«' '»'"

Переглядачі

Переглядач
quotes

8.0

1.5

5.1

4.0

11.0

12.0

Переглядач
quotes

2.1

2.0

5.1


Мобільних переглядачів ще не додано.

Приклади


Значення у дії

Приклад використання

Встановлення типу лапок

q {


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


}

Додаткові посилання