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	Опис
"	"	\0022	Лапки, застосовується зазвичай в моноширинних шрифтах, для позначення символу дюйма, а також кутових секунд.
'	'	\0027	Апостроф. Символ кутових хвилин, в латиниці застосовується для позначення м'якого знака (popalas 'lisa).
«	« або «	\00ab	Відкриваюча подвійна кутова лапка.
»	» або »	\00bb	Закриваюча подвійна кутова лапка.
‘	‘	\2018	Відкриваюча одинарна лапка.
’	’	\2019	Закриваюча одинарна лапка.
“	“	\201c	Відкриваюча подвійна лапка в англомовних текстах або закриваюча для російської мови.
”	”	\201d	Закриваюча подвійна лапка в англомовних текстах.
„	„	\201e	Відкриваюча подвійна лапка. Застосовується в російській мові.

автор: Svitlana

Синтаксис

quotes: none|string|initial|inherit;

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

none

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

автор: Svitlana

string

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

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
quotes	11.0	1.5	5.1	4.0	12.0	8.0

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

Приклади

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

Перша пара лапок — для зовнішнього рівня цитати, друга — для вкладеного: браузер сам розставляє «» і ‹› навколо кожного <q>.

HTML

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

CSS

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

автор: Svitlana

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

автор: Svitlana

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

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!