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

Статьи Дизайн и верстка

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

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

Кавычки


Полное описание «Цитат пунктуационное оформление»

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

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

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

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

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

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


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

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


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

Если в месте разрыва цитаты отсутствуют знаки препинания, либо разрыв происходит на месте запятой, точки с запятой, двоеточия или тире, то слова цитирующего отделяются с двух сторон запятой и тире “, —» (не забывайте, что перед тире должен стоять неразрывный пробел!).
В источнике В тексте с цитатой
Я стал неспособен к благородным порывам… «Я, — признается Печорин, — стал неспособен к благородным порывам…»
…Моё сердце превращается в камень, и ничто его не разогреет снова. «… Моё сердце превращается в камень, — безнадёжно заключает Печорин, — и ничто его не разогреет снова».
Слишком однобокий и сильный интерес чрезмерно увеличивает напряжение человеческой жизни; ещё один толчок, и человек сходит с ума. «Слишком однобокий и сильный интерес чрезмерно увеличивает напряжение человеческой жизни, — размышляет Д. Хармс, — ещё один толчок, и человек сходит с ума».
Цель всякой человеческой жизни одна: бессмертие. «Цель всякой человеческой жизни одна, — записывает в своём дневнике Д. Хармс, — бессмертие».
Подлинный интерес — это главное в нашей жизни. «Подлинный интерес, — утверждает Д. Хармс, — это главное в нашей жизни».
Если на месте разрыва цитаты в источнике стоит точка, то перед словами цитирующего ставят запятую и тире “, —», а после его слов — точку и тире “. —» (не забываем про неразрывный пробел!), причём вторая часть цитаты начинается с прописной буквы (в простонародье называемой также «большой» или «заглавной»).
В источнике В тексте с цитатой
…Моё сердце превращается в камень, и ничто его не разогреет снова. Я готов на все жертвы, кроме этой… «…Моё сердце превращается в камень, и ничто его не разогреет снова, — заключает Печорин. — Я готов на все жертвы, кроме этой…»
Если на месте разрыва цитаты в источнике стоит вопросительный знак, восклицательный знак или многоточие, то перед словами цитирующего ставят этот знак и тире “? —;!  —; … —», а после его слов — точку и тире “. —», если вторая часть цитаты начинается с прописной. Если вторая часть цитаты начинается со строчной буквы (в простонародье называемой также «маленькой“), то после слов цитирующего ставится запятая и тире “, —».
В источнике В тексте с цитатой
Я иногда себя презираю… не оттого ли я презираю и других?.. Я стал неспособен к благородным порывам; я боюсь показаться смешным самому себе. «Я иногда себя презираю… не оттого ли я презираю и других?.. — признаётся Печорин. — Я стал неспособен к благородным порывам…»
…Прости любовь! моё сердце превращается в камень, и ничто его не разогреет снова. «…Прости любовь! — пишет Печорин в своём журнале, — моё сердце превращается в камень…»
Это какой-то врождённый страх, неизъяснимое предчувствие… Ведь есть люди, которые безотчётно боятся пауков, тараканов, мышей… «Это какой-то врождённый страх, неизъяснимое предчувствие… — ищет объяснения Печорин. — Ведь есть люди, которые безотчётно боятся пауков, тараканов, мышей…»

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

Многие забывают, что в стандарте HTML 4.01 уже предусмотрены элементы для оформления цитат, набранных внутри текста, и либо вообще их не используют, либо (что ещё хуже) помещают цитаты внутрь тегов  или . Также приводилось наблюдать использование элемента 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 < IE 7]>
<script type= «text/javascript» src= «quotes.js»></script>
<![endif]→

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

// Добавление в CSS-файл
// Внешние кавычки-ёлочки
q { quotes: “\00ab»“\00bb»; }

// Вложенные кавычки-лапки
q q { quotes:» \201e“»\201c»; }

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

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

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

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

Update: Поправка от besisland — конечно же для установки рисунка кавычек в CSS не нужно описывать вложенные стили, достаточно стандартной функциональности свойства quotes: q {quotes: “\00ab»“\00bb“»\201e“»\201c»;}

Теперь примеры реализации CSS

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url (images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url (images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

----

blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }

blockquote { border: 3px 0 solid #000; padding-left:1px; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px 'Arial Black'; }

blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee }

Источники:

htmlCSS 

06.08.2011, 8232 просмотра.