Оформление цитат на сайтах

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

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Типографическое оформление цитат

Кавычки

Стоящие внутри текста цитаты, набранные так же, как и основной текст, заключаются в кавычки. Если цитата выделена цветом, кеглем шрифта, другим шрифтом, курсивным начертанием, либо цитата вынесена в отдельный графически выделенный блок текста, то кавычки не ставятся. Также не выделяются кавычками цитаты-эпиграфы, если они не сопровождаются нецитатным текстом.

Кавычки ставятся только в начале и конце цитаты, независимо от размера цитаты и количества абзацев в ней.

Цитаты заключаются в кавычки такого же рисунка, что и применяемые в основном тексте в качестве основных — в подавляющем числе случаев это кавычки-ёлочки « ».

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

Если в цитате встречаются кавычки «третьей ступени», то есть внутри заключённых в кавычки словосочетаний цитаты есть, в свою очередь, слова, взятые в кавычки, то в качестве последних рекомендуются кавычки второго рисунка, то есть лапки. Пример из Мильчина и Чельцовой: М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из „Фауста“. Я очень люблю эту тему“». Но вообще, лучше попытаться так перестроить оформление цитаты, чтобы таких случаев не возникало.

Знаки препинания после цитаты, стоящей в конце предложения

Если предложение заканчивается цитатой, то точка всегда ставится после закрывающей кавычки. Точка не ставится в следующих случаях.

1. Если перед закрывающими кавычками стоит многоточие, восклицательный или вопросительный знак, а цитата, заключенная в кавычки, является самостоятельным предложением (таковы, как правило, все цитаты после двоеточия, отделяющего их от слов цитирующего). При этом знак препинания ставится внутри кавычек. Пример из Мильчина и Чельцовой:
   Печорин писал: «Я не помню утра более голубого и свежего!»
   Печорин признавался: «Я иногда себя презираю...»
   Печорин спрашивает: «И зачем было судьбе кинуть меня в мирный круг честных контрабандистов?»
2. То же, если самостоятельным предложением заканчивается цитата, первое предложение которой начинается со строчной буквы. Например: Печорин размышляет: «…зачем было судьбе кинуть меня в мирный круг честных контрабандистов? Как камень, брошенный в гладкий источник, я встревожил их спокойствие...»
3. Если перед закрывающими цитату кавычками стоит вопросительный или восклицательный знак, а цитата не является самостоятельным предложением и после всей фразы с цитатой должен был бы стоять вопросительный или восклицательный знак. Например: Лермонтов восклицает в предисловии, что это «старая и жалкая шутка!»

Ещё раз подчеркнём, в остальных случаях в конце предложения ставится точка, и ставится она после закрывающей кавычки.

Цитата со словами цитирующего внутри

Несмотря на то, что внутри цитаты находится речь цитирующего, кавычки всё равно ставятся только один раз — в начале и конце цитаты. Ставить закрывающую кавычку перед словами цитирующего и снова открывающую после них не нужно.

Если в месте разрыва цитаты отсутствуют знаки препинания, либо разрыв происходит на месте запятой, точки с запятой, двоеточия или тире, то слова цитирующего отделяются с двух сторон запятой и тире «, —» (не забывайте, что перед тире должен стоять неразрывный пробел!).

Если на месте разрыва цитаты в источнике стоит точка, то перед словами цитирующего ставят запятую и тире «, —», а после его слов — точку и тире «. —» (не забываем про неразрывный пробел!), причём вторая часть цитаты начинается с прописной буквы (в простонародье называемой также «большой» или «заглавной»).

Если на месте разрыва цитаты в источнике стоит вопросительный знак, восклицательный знак или многоточие, то перед словами цитирующего ставят этот знак и тире «? —; ! —; … —», а после его слов — точку и тире «. —», если вторая часть цитаты начинается с прописной. Если вторая часть цитаты начинается со строчной буквы (в простонародье называемой также «маленькой»), то после слов цитирующего ставится запятая и тире «, —».

Оформление цитат в коде

Многие забывают, что в стандарте HTML 4.01 уже предусмотрены элементы для оформления цитат, набранных внутри текста, и либо вообще их не используют, либо (что ещё хуже) помещают цитаты внутрь тегов <em>…</em> или <strong>…</strong>. Также приводилось наблюдать использование элемента blockquote для создания отступов, что так же недопустимо с точки зрения соблюдения семантичности вёрстки.

Итак, для выделения цитат используется два элемента: блочный blockquote и инлайновый q. Кроме того, инлайновый элемент cite используется для описания источника, откуда была взята цитата. Обратите внимание, что cite используется единственно и необходимо для указания ссылки на источник, сама цитата внутрь элемента cite не включается!

Согласно спецификации HTML 4.01, элементы blockquote и q могут использовать атрибут cite="…", указывающий на URL, откуда была заимствована цитата (не путать с отдельным элементом cite), и атрибут title="…", содержимое которого будет всплывать в качестве подсказки при наведении на цитату курсором мыши.

К сожалению, браузеры ещё не совсем хорошо обрабатывают эти HTML-элементы. Так, атрибут cite="…" никакими браузерами не рендерится вообще. Для того, чтобы обойти эту недоработку, есть скрипт Пола Дэйвиса, выводящий в отдельном слое всплывающую подсказку со ссылкой, указанной в атрибуте cite.

Вторая глобальная недоработка, связанная с выводом инлайновых цитат, связана (сюрприз, сюрприз!) с семейством браузеров Internet Explorer. Опять же, согласно спецификации, автор документа не должен набирать кавычки при использовании элемента q. Кавычки должны рендериться браузером, причём в случае наличия вложенных цитат — ещё и разного рисунка. Ладно, допустим, Опера не соблюдает последнего требования, и кавычки у вложенных цитат одинаковые. Но IE до седьмой версии включительно не рендерит их вообще!

Кроме того, IE не понимает CSS-свойства quotes, before, after и content, чем, скотина, полностью хоронит надежды решить проблему с помощью семантически корректной вёрстки с использованием CSS.

Решается эта проблема несколькими способами:

• с использованием проприетарного CSS-свойства behavior (решение Пола Дэйвиса), запускающего JavaScript, расставляющий кавычки в IE, при этом рисунок вложенных кавычек чередуется;
• с помощью условных комментариев, простым выполнением JavaScript при загрузке страницы (решение Джеза Лемона из «Juicy Studio»), при этом рисунок вложенных кавычек постоянен;
• или обнулением кавычек в CSS с помощью свойства quotes и расстановкой кавычек в тексте вручную, но (внимание!) вне элемента q, чтобы не нарушать рекомендации W3C (решение Стейси Кордони на сайте «A List Apart»).

Последний способ мне кажется такой же сделкой с совестью, как попытка изыскать способ обойти ограничения в шаббат — нарушением духа при соблюдении буквы рекомендаций.

Поэтому, выбирая из первых двух второй способ, мы пользуемся слегка модифицированным для русского языка скриптом Джеза Лемона. Да, при отключённом JavaScript пользователь IE останется без кавычек, мы принимаем это как необходимое зло.

Наше решение по оформлению цитат

Итак, чтобы адекватно сверстать текст с цитатами, необходимо скачать скрипт «quotes.js», после чего внутри элемента head подключить его с помощью условных комментариев:

<!--[if lte IE 7]>
<script type="text/javascript" src="quotes.js"></script>
<![endif]-->

Кроме того, для браузеров, адекватно рендерящих кавычки, нужно в CSS-файле указать рисунок кавычек для русского языка. К счастью, в русской типографике вложенные кавычки имеют один рисунок независимо от уровня вложенности (что реализуется стандартными свойствами CSS без привлечения дополнительных классов), но мы ещё раз настойчиво рекомендуем избегать кавычек глубокой вложенности на стадии написания текста.

// Добавление в CSS-файл
q {quotes: "\00ab" "\00bb" "\201e" "\201c";}

В случае выбора чередующегося рисунка кавычек при глубокой вложенности можно ввести, например, классы q.odd и q.even и указывать класс руками непосредственно при вёрстке цитаты.

Теперь легко и семантично верстаем следующую цитату:
Успех кампании „Жальгириса“, — заявил в интервью „Russia Today“ Владимирас Пупкинс, — обусловлен не только выбором вендоров зубной пасты, но и тому, что Марк Твен называл прыжком за дверь, ведущую внутрь.

<q cite="http://russiatoday.com.org.uk.lv" title="Интервью Владимираса Пупкинса для «Russia Today»">Успех кампании „Жальгириса“, — заявил в интервью „Russia Today“ <cite>Владимирас Пупкинс</cite>, — обусловлен не только выбором вендоров зубной пасты, но и тому, что <cite>Марк Твен</cite> называл <q title="Один из рассказов Марка Твена">прыжком за дверь, ведущую внутрь</q></q>.

Самый смак заключается в том, что атрибуты title="…" для вложенных тегов браузерами отрабатываются корректно.

Написание примера для корректного совместного использования вложенных элементов blockquote, q и cite оставляется читателю в качестве домашнего задания. :)

Эта статья также опубликована в блоге «Типографика» на сайте «Хабрахабр».

Ключевые слова: цитата кавычки blockquote q cite