Все, что Вам необходимо знать о кавычках: досье и примеры

Автор: SmashingMagazine.com
Перевод: Всеволод Козлов

Цитирование используется для выделения отрывков текста. Поскольку пользователи не читают содержимое веб-страниц, а сканируют, веб-мастерам необходимо искать визуальные уловки, способные притянуть к себе их внимание. Обычно цитаты используются для выделения отзывов или фраз других собеседников (обычно на форумах и в чатах).

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

Перед тем как начать, мне бы хотелось напомнить Вам о других статьях из этой серии:

А не все ли цитаты одинаковы?

Нет! Перво-наперво давайте условимся, что: кавычки ≠ блочной цитате ≠ отдельной цитате, выделяемой шрифтом. Отдельные цитаты, выделяемые шрифтом — наиболее важные отрывки из текста, на которых акцентируется особое внимание пользователей (смотрите пример ниже):

Очень похожей на предыдущий пример является блочная цитата.

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

Различия между Blockquote, Q и Cite

Если обратиться к HTML спецификации, то мы найдем там 3 элемента, предназначенные для семантического выделения цитат: <blockquote>, <q> и <cite>. Каждый из них используется в своей, конкретной ситуации. Давайте разберем их!

<blockquote>

blockquote — блочная цитата. Должен содержать блочные элементы, такие как заголовки, списки, абзацы или блоки (div’ы). Помимо этого блочная цитата может обладать атрибутом cite, показывающим, откуда взята данная цитата. Например:

<blockquote cite=”http://www.htmldog.com/reference/htmltags/blockquote/”>
<p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s.</p>
<p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>
</blockquote>

<q>

q — малая цитата. Содержимым могут являться строчные элементы. Поскольку современные браузеры знают как интерпретировать этот элемент, Вы можете задавать для него различные оформления с помощью CSS. Например:

<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

Хотя <q> уже почти не используется, он обладает некоторыми полезными свойствами. Например, Вы можете точно определить визуальное отображение кавычек с помощью CSS. Это актуально, т.к. в разных языках используются кавычки разного типа, смотрите пример ниже:

Q {}
Q { quotes: '»' '«' }
Q { quotes: '„' '“' }

Современные браузеры это поддерживают! Конечно, Internet Explorer (даже 8 версия) не поддерживает этого, хотя с элементом <q> знаком.

Согласно веб-стандартам, можно реализовать подстановку соответствующего типа кавычек в зависимости от языка браузера пользователя:

:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '2039' '203A' }

<cite>

cite служит для упоминания внешнего источника. Например:

<p>And <cite>Bob</cite> said <q>No, I think it’s a banana</q>.</p>

Подытожим: для объемных цитат используйте blockquote, для малых — q, для упоминания внешних источников — cite.

Галерея красиво оформленных цитат

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

Помните, что цитат не должно быть много: 1-2 на статью вполне достаточно. Ну и конечно же использовать цитаты нужно по их непосредственному назначению!

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

1. Простое оформление

2. Использование открывающих кавычек

3. Использование линий

4. Цитаты с цветовым выделением

5. Вынесенные цитаты

6. Креативные решения

7. Цитаты в качестве самостоятельных элементов

8. Бонус: Сноски

Оригинал статьи: Block Quotes and Pull Quotes: Examples and Good Practices

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*