Об использовании кавычек и тире в текстовом содержимом элементов

Виды кавычек и традиции их использования

В полиграфии существует три вида кавычек: «ёлочки» («…»), «верхние лапки» (“…”) и «рукописные лапки» („…“). По давно сложившейся традиции в российской полиграфии основным видом кавычек являются «ёлочки» (иногда их ещё называют французскими кавычками). «Верхние» же и «рукописные лапки» традиционно являются основным видом кавычек в западных странах, а потому обычно используются в печатных изданиях на английском, немецком и других языках.

Очевидно, что этих же правил следует придерживаться и при вёрстке сайтов. Понятно, что всех этих разновидностей кавычек нет на клавиатуре, но для этого в HTML и были введены так называемые ссылки на символы (character references) — специальные последовательности, которые при формировании страницы в браузере заменяются соответствующими символами. Вот некоторые из них:

Символ	Ссылка на символ	Описание
«	«	Левая двойная угловая кавычка («ёлочка»)
»	»	Правая двойная угловая кавычка («ёлочка»)
“	“	Левая верхняя двойная кавычка («лапки»)
”	”	Правая верхняя двойная кавычка («лапки»)
„	&bdquo;	Нижняя двойная кавычка («лапки»)
‘	‘	Левая верхняя одиночная кавычка («лапка»)
’	’	Правая верхняя одиночная кавычка («лапка»)
‚	&sbquo;	Нижняя одиночная кавычка («лапка»)

Пример использования ссылок на символы в исходном коде:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
</head>
<body>
   <p style="background-color: #FFEFD5"><b>Примечание:</b> С 1994 года
      предприятие является открытым акционерным обществом, полное название
      &mdash; ОАО &laquo;Завод &ldquo;Красное Сормово&rdquo;&raquo;.
      В 2015 году завод сменил свой статус с ОАО на Публичное Акционерное
      Общество.</p>
</body>
</html>

Результат в браузере:

Виды тире и их использование

Ситуация с символом «тире» во многом аналогична ситуации с кавычками. В полиграфии существует три, как нам кажется, похожих символа: «длинное тире», «короткое тире» и «дефис». На компьютерной же клавиатуре есть только последний. Именно его зачастую и используют во всех случаях, когда в тексте нужно поставить дефис, тире или знак «минус». Однако существуют чёткие правила пунктуации относительно того, когда следует использовать каждый из этих знаков.

Так, например, дефис ставится только внутри слов или между цифрами. Длинное тире, или просто тире («—»), ставится между словами в предложении и отделяется от этих слов пробелами. Короткое тире ставится между цифрами без букв или между словами, набранными прописными буквами, а также может использоваться в формулах в качестве знака «минус». Между этим знаком и словами пробел не ставится.

Для вставки всех этих символов (кроме дефиса) в текст HTML-документа следует использовать соответствующие ссылки на символы:

Символ	Ссылка на символ	Описание
–	–	Короткое тире (шириной в букву «n»)
—	—	Длинное тире (шириной в букву «m»)
−	−	Знак «минус»

Примечание: Символ «короткое тире» очень похож на знак «минус», однако последний расположен несколько выше, так как цифры выше строчных букв.

Установка вида кавычек, генерируемых автоматически

Для выделения в тексте HTML-документов цитат используется строчный элемент <q> (сокр. от англ. quote — «цитата»). Содержимое данного элемента, согласно спецификации, должно автоматически заключаться в кавычки. Вид кавычек, генерируемых при этом браузером, определяется CSS-свойством quotes.

Синтаксис свойства:

quotes: "тип_левой_кавычки" "тип_правой_кавычка"

Для указания типа кавычек в значении свойства могут использоваться либо соответствующие текстовые символы (например, quotes: "«" "»"), либо коды этих символов в Unicode (см. таблицу ниже).

Символ	Код символа в Unicode	Описание
«	\00ab	Левая двойная угловая кавычка («ёлочка»)
»	\00bb	Правая двойная угловая кавычка («ёлочка»)
“	\201c	Левая верхняя двойная кавычка («лапки»)
”	\201d	Правая верхняя двойная кавычка («лапки»)
„	\201e	Нижняя двойная кавычка («лапки»)
‘	\2018	Левая верхняя одиночная кавычка («лапка»)
’	\2019	Правая верхняя одиночная кавычка («лапка»)
‚	\201a	Нижняя одиночная кавычка («лапка»)

Пример использования стилевого свойства quotes:

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      q {quotes: "\00ab" "\00bb";
         color: navy;}
   </style>
</head>
<body>
   <p>Русская народная пословица гласит:
      <q>Ешь просто, проживёшь лет до ста</q>.</p>
</body>
</html>

Результат в браузере:

В качестве значений свойства quotes могут также использоваться ключевые слова:

none — отменяет вывод кавычек;
auto — указывает на то, что вид кавычек браузер должен устанавливать автоматически, руководствуясь значением атрибута lang;
inherit — указывает на то, что вид кавычек должен быть унаследован от родительского элемента.

Пример использования свойства quotes с ключевым словом:

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      q {quotes: auto;}
   </style>
</head>
<body>
   <div lang="fr">
      <q>Ceci est une citation française.</q>
   </div>
   <hr>
   <div lang="ru">
      <q>Это русская цитата</q>
   </div>
   <hr>
   <div lang="de">
      <q>Dies ist ein deutsches Zitat</q>
   </div>
   <hr>
   <div lang="en">
      <q>This is an English quote. </q>
   </div>
</body>
</html>

Результат в браузере:

Другие статьи по схожей тематике