+7 (906) 033-01-52

Создание хороших сайтов: от дизайн-макета до продвижения в интернет.

• RUS | 
• ENG | 
• JPN

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

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

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

Кавычки

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

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

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

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

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

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

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

Итак, чтобы адекватно сверстать текст с цитатами, необходимо скачать скрипт «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 }

Источники:

• http://habrahabr.ru/blogs/typography/22163/
• http://сеоша.рф/
• http://www.w3school.ru/blog/css/better-blockquotes-with-css.html

html,  CSS,  cтили 

06.08.2011, 1016 просмотров.