Продолжение темы «Дизайн текста».

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

Цитаты

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

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

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

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

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

/* для русского и латышского языка */
q:before { content: "«" }	q:after  { content: "»" }

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

/* для английского языка */
q:before { content: "“" }	q:after  { content: "”" }

q q:before { content: "‘" }	q q:after  { content: "’" }
blockquote q:before { content: "‘" }	blockquote q:after  { content: "’" } 

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

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

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

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

Пример вёрстки упомянутых в статье элементов

Продолжение: Списки