Цитирование в HTML

Цитирование в HTML

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

В цитатах используются три основных элемента HTML: <blockquote>, <q>, <cite>. Давайте рассмотрим их по порядку.

blockquote

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

По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.

Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:

<blockquote> <p></p> <p></p>
</blockquote>

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

<blockquote> <h2></h2> <ul> <li></li> <li></li> </ul>
</blockquote>

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

blockquote,
.callout-block { /* These could share styling */
}

q

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

Стандартные кавычки так же действительны для встроенных цитат с элементом <q>. Преимущества использования <q>, однако, заключаются в том, что он включает атрибут cite, автоматическую обработку кавычек и автоматическую обработку уровней кавычек. Элементы <q> не должны использоваться для сарказма. Или собственного описания автора. Но если вы можете четко определить, как размечать подобные цитаты, пожалуйста, дайте мне знать. Потому что это было бы «круто».

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами. (Я не уверен, почему это указано, но если вы хотите разозлить божеств семантического кода, вам придется сделать больше, чем просто выбросить пробелы.)

<p>The officer left a note saying <q cite="https://johnrhea.com/summons">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

Атрибут cite не виден пользователю по умолчанию. Вы можете добавить его с помощью магии CSS, как показано в следующей демонстрации. Вы можете даже повозиться с тем, чтобы цитата появлялась при наведении.

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

Элемент cite

Тег cite следует использовать для ссылки на авторскую работу, а не на человека, который сказал или написал цитируемую фразу. Другими словами, его не нужно выделять кавычками. Вот примеры из спецификации:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

Вот еще один пример:

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

По умолчанию браузеры выделяют курсивом теги cite, для элемента cite не требуется наличие <q> или blockquote. Если вы хотите процитировать книгу или другую творческую работу, добавьте ее в элемент cite. Семантические божества будут благосклонны к вам, если вы не используете <i> либо <em>.

Но где добавлять элемент cite? Внутри? За пределами? Если положить его в blockquote или <q> мы делаем его частью цитаты. Спецификацией запрещено делать это только по данной причине.

<!-- This is apparently wrong -->
<blockquote> Quote about cupcake distribution from an article <cite>The Article</cite>
</blockquote>

Выносить его наружу просто кажется неправильным, а также требует, чтобы у вас был содержащий элемент, например, div, если вы хотите объединить их вместе.

<div class="need-to-style-together"> <blockquote> Quote about cupcake distribution from an article </blockquote> <cite>The Article</cite>
</div>

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

Эй, а как насчет элемента figure?

Один из способов разметки цитаты — и таким образом, чтобы угодить божествам семантического кода — это поместить блочную цитату в элемент figure. Затем поместите элемент cite и любую другую информацию об авторе или цитировании в figcaption.

<figure class="quote"> <blockquote> But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity. </blockquote> <figcaption> &mdash; Jeremy Keith, <cite>Mental models</cite> </figcaption>
</figure>

Хотя это удваивает количество необходимых элементов, у этого подхода есть несколько преимуществ:

Это семантически верно для всех четырех элементов.

Это позволяет вам включать и инкапсулировать информацию об авторе, не упоминая название работы.

Это дает вам простой способ оформить цитату, не прибегая к div, span или чему-то в этом роде.

Ничего из этого не относится к dialog

Никакого <dialog>! Он предназначен для модалов, привлекающих внимание. Диалог — это, например, разговорный обмен между людьми, говорящими или печатающими друг другу.

Ни blockquote, ни другое <q>, ни cite не должны использоваться для диалога и подобных обменов фразами между ораторами. Если вы размечаете диалог, вы можете использовать все, что вам нужно. Не существует единственного семантического способа сделать это. Тем не менее, в спецификации предлагаются теги <p> и знаки пунктуации с тегами span или <b> для обозначения динамики, и теги <i> для обозначения направления разговора.

Доступность цитат

Согласно исследованию, которое я провел, экранные дикторы не должны иметь проблем с пониманием меток <q>, blockquote или cite.

Больше «способов» «цитирования»

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

Но вы не можете, как и я, предполагать, что вышеизложенное всегда даст вам умные открывающие и закрывающие. Даже если шрифт поддерживает умные кавычки, иногда отображаются прямые кавычки. Чтобы обезопасить себя, лучше использовать CSS-свойство quotes.

blockquote { quotes: "“" "”" "‘" "’";
}

Многоуровневое цитирование

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

Ограничений на глубину вложения нет. Вложенные элементы <q> могут даже находиться внутри цитаты, которая находится внутри цитаты.

Если вы добавляете кавычки в цитату, знайте, что кавычки не изменяют уровень цитаты, как это делает тег <q>. Если вы ожидаете, что в цитате есть кавычки, вы можете добавить правило селектора потомков, чтобы начать элементы <q> внутри цитаты на уровне одинарных кавычек (или двойных кавычек, если вы следуете британским соглашениям).

blockquote q { quotes: "‘" "’" "“" "”";
}

Последний введенный вами уровень цитаты будет продолжаться до последующих уровней цитаты. Чтобы использовать соглашение в виде двойные кавычки, одинарные, двойные, одинарные…, добавьте больше уровней в свойство кавычек CSS.

q { quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}

Выносная пунктуация

Многие эксперты по типографии скажут вам, что вынос кавычек в цитатах выглядит лучше (и они правы). Выносная пунктуация — это, в данном случае, кавычки, которые выводятся из текста, так что символы текста располагаются вертикально, с отступом от них.

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

blockquote { text-indent: -0.45em;
}

Есть лучший способ решить это, используя свойство CSS hanging-punctuation. Оно на момент написания этой статьи поддерживается только в Safari, поэтому нам придется вводить прогрессивное улучшение:

/* Fallback */
blockquote { text-indent: -0.45em;
} /* If there's support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) { blockquote { text-indent: 0; hanging-punctuation: first; }
}

Использование hanging-punctuation лучше, потому что это менее неудобно.

Можем ли мы анимировать кавычки?

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

Автор: John Rhea

Источник: https://css-tricks.com

Редакция: Команда webformyself.