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

К моему большому удивлению, данная тема очень редко поднимается и объяснятся, по этому рекомендую подойти к ней с большим вниманием. Сегодня речь пойдет о цитатах в тексте.

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

Цитаты

Существует три вида элементов, отвечающих за размещение цитат на веб-странице:

• <blockquote> — блок цитаты. Блочный элемент, как правило используемый для публикации большого объёма цитируемого текста;
• <cite> — источник цитаты;
• <q> — короткая цитата.

В основном используют только <blockquote> для вывода целого блока цитируемого текста. Источник этой большой или короткой строчной (<q>) цитаты если и указывают, то только не в элементе <cite>. Может по незнанию, может по непониманию. Но не используют. А зря.

Элементы <q> и <cite> не такие сложные в понимании и использовании, чтобы их не любить. А какой оригинальный внешний вид можно порой им придать! Опять же если бы все веб-разработчики соблюдали стандарты семантической вёрстки, гораздо проще можно было бы настраивать поиск по этим элементам.

Блок цитаты традиционно отображается со втяжкой, источник цитаты — курсивом, а элемент <q> помещает текст в кавычки, которые на самом деле не кавычки а знаки дюйма. Поэтому нужно не забывать прописывать нечто подобное:

/* для русского языка */


q:before { content: "«" } q:after { content: "»" }

/* или */

q:before { content: "„" } q:after { content: "“" }

/* для английского языка */

q:before { content: "“" } q:after { content: "”" }

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

Источник цитаты, не обязательно должен отображаться курсивом, чаще всего в качестве указания источника используется ссылка. Так вот следует ссылку помещать в элемент <cite> и соответственно форматировать так, чтобы было понятно, что это ссылка. Можно слегка изменить, чтобы источник цитаты как-то отличался от обычной ссылки.

В случае, если источник цитаты не опубликован в интернете, его следует выделить особым способом, например, добавить пунктирное подчёркивание, добавить подсказку (tooltip) с разъяснением, где конкретно взят источник, слегка изменить цвет или даже сделать его жирным, но курсив будет неуместен.

Если у блока цитаты есть втяжка, то она должна быть с обоих сторон (слева и справа), причём такая, чтобы не было ощущения отрыва от всего стиля и слишком сильной концентрации текста в центре. В тоже время, втяжка не должна быть слишком маленькой, чтобы не возникало ощущение небрежности. Уместно использование графических кавычек в начала и в конце блока цитаты, а так же изменение цвета фона всего блока и добавления границ.

Статьи по теме:

• Дизайн текста: часть пятая
• Дизайн текста: часть четвертая
• Дизайн текста: часть третья
• Дизайн текста: часть первая
• Требования к контенту