quotes

Свойство для управления внешним видом кавычек.

Время чтения: меньше 5 мин

Кратко

Скопировано

CSS-свойство, позволяющее задать вид кавычек на сайте или в отдельном блоке. В каждом языке принято использовать определённый вид кавычек. Например, в русском используются кавычки-ёлочки «», а в английском кавычки-лапки “”.

Указанный в значении вид кавычек будет автоматически выставляться вокруг текста, обёрнутого в тег <q>, или при указании у свойства content псевдоэлементов ::before и ::after значений open-quote или close-quote.

Пример

Скопировано

Этому свойству можно указать сразу несколько значений: 1 открывающая кавычка, 2 закрывающая кавычка, 3 открывающая кавычка вложенной цитаты, 4 закрывающая кавычка вложенной цитаты:

        
          
          body {  quotes: "«" "»" "„" "“";}span::before {  content: open-quote;}span::after {  content: close-quote;}
          body {
  quotes: "«" "»" "„" "“";
}

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

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

        
        
          
        
      
        
          
          <p>  <q>Скажи <span>церемония</span> по слогам</q>, — попросила она.</p>
          <p>
  <q>Скажи <span>церемония</span> по слогам</q>, — попросила она.
</p>

        
        
          
        
      

В итоге текст будет выглядеть так:

Открыть демо в новой вкладке

Как пишется

Скопировано

Ключевые слова:

        
          
          div {  quotes: none;  quotes: auto;}
          div {
  quotes: none;
  quotes: auto;
}

        
        
          
        
      

Кавычки:

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

        
        
          
        
      

none — ключевое слово, сбрасывает любые настройки, кавычки не будут отображаться.

auto — кавычки будут соответствовать языку документа.

Подсказки

Скопировано

💡 Попробуйте скопировать текст из интерактивного примера выше и вставить куда-нибудь, например, в блокнот. Во вставленном тексте не будет кавычек. Всё потому что их не существует физически в тексте, они расставлены при помощи стилей. Об этой особенности стоит помнить.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Это свойство может быть очень полезно когда вы разрабатываете большой сайт, который будут наполнять контентом другие люди. Чтобы созданный дизайн соблюдался во всех мелочах вы можете принудительно прописать тот вид кавычек, который будет расставляться в текстах. Но при других обстоятельствах это свойство редко пригождается 🤷‍♀️