Перевод статьи «Quoting in HTML: Quotations, Citations, and Blockquotes».
Неправильное использование HTML-тегов для обозначения цитат встречается слишком часто. В этой статье мы углубимся в эту тему, разберем разные ситуации и рассмотрим, какие теги для них подходят.
При оформлении цитат используются три основных элемента:
- <blockquote>
- <q>
- <cite>
Давайте по ним пройдемся.
Элемент <blockquote>
Теги <blockquote> используются для выделения цитаты на фоне остального контента. Мой учитель английского языка в старшей школе крепко вбил мне в голову, что любая цитата длиной в четыре строки и больше должна отделяться от остального текста. В спецификациях HTML таких требований нет, но если у вас есть в тексте цитата и вы хотите, чтобы она была выделена на фоне всего остального, тег <blockquote> это ваш семантический выбор.
По умолчанию браузеры выделяют цитату при помощи отступа, добавляя margin с каждой стороны.
See the Pen The Blockquote Tag by Undead Institute (@undeadinstitute) on CodePen.
Как блочный элемент, <blockquote> может содержать внутри себя другие элементы. Например, мы без проблем можем разбить цитату на абзацы:
<blockquote> <p></p> <p></p> </blockquote>
Но дело не ограничивается абзацами! Внутри блока <blockquote> могут быть и заголовки, и списки:
<blockquote>
<h2></h2>
<ul>
<li></li>
<li></li>
</ul>
</blockquote>
Важно помнить, что <blockquote> используется для выделения цитат, а не как декоративный элемент дизайна. Пользователи, использующие скринридеры, могут перемещаться между цитатами. Поэтому использование <blockquote> для чисто эстетических нужд может сбивать этих пользователей с толку. Если вам просто нужно выделить какой-то текст, не являющийся цитатой, пожалуй, лучшим решением будет элемент <div> с заданным классом.
blockquote,
.callout-block {
/* These could share styling */
}
Выделение цитаты при помощи тега <q>
Теги <q> предназначены для цитат внутри текста. Мой учитель английского сказал бы, что речь идет о цитатах длиной меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки к цитатам в виде псевдоэлементов, но для более старых браузеров стоит иметь запасной вариант.
See the Pen The Q Tag by CSS-Tricks (@css-tricks) on CodePen.
Обычные кавычки в тексте так же валидны для встроенных в предложения цитат, как и элемент <q>. Но использование <q> имеет преимущества, поскольку у этого элемента есть атрибут cite, автоматическая вставка кавычек и автоматическое управление уровнями цитирования. Элементы <q> не следует использовать для обозначения саркастических замечаний и воображаемых кавычек, при разговоре передаваемых жестами. Но если вы знаете, как правильно выделить воображаемые кавычки, расскажите и мне, пожалуйста.
Атрибут cite
Оба элемента — <q> и <blockquote> — могут использовать атрибут cite (от англ. «citation» — ссылка). Этот атрибут содержит 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-магии, как в приведенном ниже примере. Можно даже сделать так, чтобы источник появлялся при наведении мыши на цитату.
See the Pen Attributable citations by CSS-Tricks (@css-tricks) on CodePen.
Но эти подходы нельзя назвать хорошими. Если вам нужно, чтобы пользователь видел источник цитаты и мог перейти по ссылке, стоит это делать при помощи 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>
Вот еще пример:
See the Pen Cite This! by CSS-Tricks (@css-tricks) on CodePen.
Если автор этой статьи скажет, что даст вам пирожок, чтобы вы окружили тегами <cite> его имя, это будет семантически неправильно, так что пирожка вам не видать. А если вы окружите этими тегами название статьи, в которой вам предлагался пирожок, это будет семантически правильно, но пирожок предлагался не за это, так что очень жаль, но он вам все же не достанется.
По умолчанию браузеры выделяют элемент cite курсивом. Сам элемент не привязан к элементами <q> или <blockquote>, так что их может вообще не быть. Если вы хотите упомянуть какое-нибудь произведение и выделить название, поместите его в элемент <cite>. Семантические божества будут довольны, что вы не использовали элементы <i> или <em>.
Но куда вставить элемент <cite>, если хочешь указать источник цитаты? Внутри блока цитаты? Снаружи? Если мы поместим его внутри <blockquote> или <q>, этот элемент станет частью цитаты. По этой причине такое расположение запрещено спецификацией.
<!-- Это неправильно --> <blockquote> Quote about cupcake distribution from an article <cite>The Article</cite> </blockquote>
Помещать элемент <cite> вне блока цитаты тоже кажется неправильным. Кроме того, если вы захотите стилизовать цитату и источник совместно, вам придется заключить оба элемента в какой-нибудь другой элемент, например, в <div>.
<div class="need-to-style-together">
<blockquote>
Quote about cupcake distribution from an article
</blockquote>
<cite>The Article</cite>
</div>
А как насчет элемента <figure>?
Все же есть один способ подписать цитату так, чтобы семантические божества были довольны: вы можете поместить элемент <blockquote> внутрь элемента <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>
— Jeremy Keith, <cite>Mental models</cite>
</figcaption>
</figure>
Несмотря на то что при таком подходе количество необходимых элементов удваивается, он имеет ряд преимуществ:
- Это семантически правильное использование всех четырех элементов.
- Это позволяет и включить имя автора, и отделить его от названия произведения.
- Вы получаете простой способ оформить цитату без всяких <div> и <span>.
See the Pen It Figures You’d Say That by CSS-Tricks (@css-tricks) on CodePen.
Ничто из перечисленного не предназначено для оформления диалогов
Все перечисленные элементы предназначены для привлечения внимания. А диалоги это просто обмен репликами между людьми, которые разговаривают или переписываются друг с другом. (Прим. перев.: в английском языке диалоги передаются непрямой речью, при помощи кавычек).
Для диалогов не должны использоваться ни <blockquote>, ни <q>, ни <cite>. В остальном диалог можно оформлять как угодно, для этого нет прописанного семантического способа. То есть, спецификация предлагает элементы <p> и знаки пунктуации, а также <span> или <b> для обозначения говорящего.
Доступность цитат
Исходя из того, что я читал, у скринридеров не должно быть проблем с распознаванием семантически правильно использованных тегов <q>, <blockquote> и <cite>.
Еще немного о кавычках
К <blockquote> можно добавлять кавычки, используя псевдоэлементы CSS. Элемент <q> сам по себе добавляет кавычки, но можно добавить их в виде псевдоэлементов — в качестве костыля для более старых браузеров, где они не добавляются автоматически. Это не повредит отображению цитаты в современных браузерах: они перезаписывают установленные по умолчанию псевдоэлементы, а не просто добавляют дополнительные.
Но не следует предполагать, что так вы точно получите «умные» открывающие и закрывающие кавычки. Даже если браузер поддерживает умные кавычки, порой отображаются просто прямые. Чтобы обезопасить себя, лучше использовать свойство CSS quotes:
blockquote {
quotes: "“" "”" "‘" "’";
}
See the Pen "Quot-a-tizing" the blockquote by CSS-Tricks (@css-tricks) on CodePen.
Многоуровневое цитирование
Теперь давайте обратим внимание на уровни цитирования. Тег <q> автоматически их учитывает.
Допустим, вы работаете в регионе, где применяется британское соглашение об использовании одинарных кавычек. Вы можете прописать очередность применения разных типов кавычек в правило CSS quotes, указав одинарные кавычки (открывающую и закрывающую) первыми в списке. Вот пример с двумя вариантами:
See the Pen Quote Within a Quote by CSS-Tricks (@css-tricks) on CodePen.
Вложенность цитирования не ограничена. Вложенные элементы <q> могут быть даже внутри блока <blockquote>, находящегося внутри другого блока <blockquote>.
Если вы добавляете кавычки к цитате, оформленной с помощью элемента <blockquote>, не забывайте, что в нем не предусмотрена автоматическая смена кавычек в зависимости от уровня цитирования (как в <q>). Если вы хотите иметь кавычки внутри <blockquote>, возможно, нужно добавить правило для комбинированного селектора, чтобы элементы <q> внутри <blockquote> выделялись одинарными кавычками (или двойными, если вы следуете британскому соглашению).
blockquote q {
quotes: "‘" "’" "“" "”";
}
Последний указанный вами вариант кавычек будет использоваться для всех последующих уровней цитирования. Если вы хотите, чтобы во вложенных цитатах чередовались одинарные и парные кавычки, добавьте в свойство quotes побольше уровней.
q {
quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}
Висячая пунктуация
Многие эксперты в сфере типографии скажут вам, что висячая пунктуация в цитатах выглядит лучше (и они правы). По сути, висячая пунктуация это кавычки, вынесенные за текст, выровненный по вертикали.
Для достижения такого эффекта можно использовать небольшое отрицательное значение свойства 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 лучше, потому что это свойство просто работает, если может.
See the Pen Hanging Your Punctuation by CSS-Tricks (@css-tricks) on CodePen.
Можно ли анимировать кавычки?
Естественно.
See the Pen Dancing Quotes by CSS-Tricks (@css-tricks) on CodePen.
Я не очень представляю, зачем вам это может понадобиться, но тем не менее. Кавычки, добавляемые к цитате, окруженной тегами <q>, добавляют псевдоэлементы в таблицу стилей, так что их можно оформить как угодно, включая добавление анимации.
Погодите, возможно, это как раз неплохой вариант для оформления воображаемых кавычек!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]