quotes: кавычки для вложенных цитат
Quotes задаёт пары кавычек, которые CSS использует для открывающего и закрывающего цитирования. Это помогает согласовать оформление вложенных коротких цитат с выбранной редакционной практикой.
Назначение
Quotes задаёт пары кавычек, которые CSS использует для открывающего и закрывающего цитирования. Это помогает согласовать оформление вложенных коротких цитат с выбранной редакционной практикой.
Как это работает
Последовательные пары относятся к уровням вложенности. В примере собственные псевдоэлементы q используют open-quote и close-quote, а само содержимое не содержит вручную продублированных кавычек.
Пример
<style>.quoted-text{quotes:"«" "»" "„" "“"}.quoted-text q::before{content:open-quote}.quoted-text q::after{content:close-quote}</style>
<p class="quoted-text">В придуманном учебном диалоге редактор сказал: <q>Подпишите раздел словами <q>Проверка результата</q>.</q></p>Что должно получиться
Внешняя и внутренняя цитаты получают разные пары кавычек. Реплика придумана для демонстрации и не приписывается реальному источнику.
Граница применения и частая ошибка
Quotes не заменяет языковую редактуру и корректную пунктуацию. Созданные CSS символы могут иначе вести себя при копировании и в вспомогательных технологиях. Не используйте декоративные кавычки как единственный признак происхождения настоящей цитаты.
Самостоятельная проверка
Добавьте третий уровень вложенности и посмотрите, какие пары используются. Сравните копирование и линейное чтение. Для реального цитирования укажите источник отдельно и не ограничивайтесь визуальным оформлением.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.