Семантичная HTML-вёрстка многострочной цитаты?

Question

[Олег Торбасов]

Вопрос к приверженцам семантичной HTML-разметки.


Как следует верстать многострочную цитату? Понятно, что тегом blockquote, но тут мне видится затруднение в весьма распространённом случае, когда в последнем абзаце после завершения цитаты идёт ещё какой-либо текст: обычно это указание источника в скобочках, знак сноска или даже банальная точка вне цитаты. Что делать с таким текстом?


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


Совсем худо становится, если расставлять кавычки с помощью CSS; тогда они захватывают и этот текст, что совершенно неправильно. Можно, конечно, исхитриться, обернув этот тег в span, которому задать абсолютное позиционирование и небольшой отступ слева; тогда он выпадет из контекста и пойдёт после завершающей кавычки. Но это имеет всякие нежелательные побочные следствия: появление в определённых ситуациях полосы прокрутки, не соответствующее видимому порядку текста копирование…


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

Comments

[Олег Торбасов]

P. S. Оказывается, что неудивительно, не я первый задаюсь такими вопросами. Ещё восемь лет назад писали, что этот тег неудовлетворителен: «The blockquote element is mostly an illusion, and for adequate markup, better methods would be needed. In HTML as currently defined, blockquote should be used for bulky quotations but not relied upon. You should include both a «prelude» that verbally expresses that a quotation follows and a «postlude» that specifies the source or otherwise indicates that the quote ends. Moreover, CSS can be used to distinguish quotations visually».

Это всё замечательно. Но я не вижу выхода, когда верстальщик не может свободно выбирать представление, а должен до какой-то степени следовать исходному оформлению, скажем, в бумажном первоисточнике. Проблема состоит в том, чтобы визуально запихнуть это «postlude» внутрь последнего абзаца, но вне кавычек. Неужто остаётся прибегнуть к помощи ECMAscript? Я привык рассматривать его в такой роли как временный «костыль», пока в браузерах не заработают очередные фичи HTML и CSS. Но я не вижу даже призрака такого будущего решения в HTML5 и CSS3. Увы.

Answer 1

[MikhailEdoshin]

Семантическая верстка — миф. Простой пример — вы хотите выделить слово. В «семантической» верстке для этого есть «семантический» тэг <em>, который на печати обычно выводится курсивом. Но в вашей фразе аккурат за этим словом идет, например, точка с запятой. По типографским правилам точку с запятой тоже надо выделить курсивом. Варианты: 1) оставить точку с запятой как есть, хоть это и неправильно; или 2) поместить точку с запятой внутрь «семантического» тэга, что странно, или же выделить ее отдельно тем же <em>, что еще более странно; или, наконец 3) забыть про «семантику» и верстать как правильно.

Форма сообщения — его неотъемлемая часть, в общем случае сообщение нельзя разделить на форму и содержание. The medium is the message.

Comments

[Олег Торбасов]

И что делать? Как «правильно»? Включать точку с запятой в тег? А то, что это затруднит автоматическую обработку текста скриптом или XPath, это правильно?

Ясно, что типографские правила с трудом впихиваются в современный CSS. Тут так и напрашивается что-то вроде em:next-letter:contains(';'){test-style: italic;}. Хотя em, по-моему, в русских текстах вообще делать нечего, но со strong точно то же затруднение.

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

[Павло Пономаренко]

разработчики стандартов вообще далеки от реальной жизни

[Delka]

мы вот так верстаем:

<blockquote>
  <q>I am so happy and lucky to have worked with Net-Craft to design my website.
     They were so easy to communicate with and have such a fast turnaround.</q>
  <cite><a href="http://net-craft.com/portfolio/portfolio.php#ftb">FindtheBoutiques.com</a></cite>
</blockquote>

[MikhailEdoshin]

Я не совсем понимаю, почему затруднит обработку скриптом :) Но даже если и затруднит — скрипты для того и нужны, чтобы решать сложные задачи, в то время как люди все время добавляют нужную им сложность. Я обычно привожу в пример шрифты — мало того, что их сотни тысяч и все время создаются новые, но еще и внутри шрифтов добавляются, например, разные двоеточия или разные написания цифр. Понятно, что CSS с этим не управится. (Ему хотя бы с переносами управится, что уж говорить про более сложные типографские идеи.)

Answer 2

[Delka]

Готовый код выше опубликовал.

Указание автора — тоже часть цитаты, вы ведь не публикуете цитату без указания авторства. Это cite.
Кавычки расставляем через q.

Comments

[Олег Торбасов]

Не годится. Во-первых, указание автора не является частью цитаты. Цитата, согласно толковому словарю Ожегова, это «точная дословная выдержка из какого-н. текста, высказывания». Во-вторых, грядущий HTML 5 очень строго и ясно настаивает, что тег cite должен включать в себя название источника и ничего более. Никаких имён авторов, скобок и тем более завершающих точек. В-третьих, Ваш код не валиден: q и cite — строчные элементы, а blockquote должен содержать только блочные. В-четвёртых, я не вполне чётко это оговорил, но имелась в виду цитата, занимающая несколько абзацев, так что q для неё не годится.

Answer 3

[Delka]

окей, а как же тогда называть блок «выдержка из текста + указание источника»?

про cite — помню где-то недавно как раз читал про эти изменения, глупость это я считаю. но html5 — это пока ещё working draft, посмотрим что дальше будет.

код валиден:
* clip2net.com/clip/m20050/1288856845-clip-131kb.png
* clip2net.com/clip/m20050/1288856999-clip-144kb.png

если цитата занимает несколько абзацев заменяем q на div, можно добавить внутрь p по вкусу.

Comments

[Олег Торбасов]

Не знаю, как называть такой блок. Нет такого блока, недоработка HTML.

Насчёт валидности — я по привычке проверял в XHTML Strict 1.0, там не валидно. Ну, да не в cite проблема, он легко заменяется на <span class="cite"> или что-нибудь в этом роде.

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

Answer 4

[tick]

>если цитата занимает несколько абзацев заменяем q на p, можно добавить внутрь div по вкусу.

исправлено ради большей семантичности.

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

я бы вообще сделал так
div
blockquote
p текст /p
p текст /p
/blockquote
cite адрес /cite
/div

Comments

[tick]

мм… насчет div внутри p, это я дал маху… :(

[Олег Торбасов]

Вот и моя мысль крутится вокруг такой структуры. Но как теперь сделать средствами CSS, чтобы адрес шёл в завершение последнего абзаца цитаты, а не отдельным абзацем? Конечно, работает следующее:

blockquote, blockquote>p:last-child, blockquote>cite{display: inline;}

Но проявляются безобразные побочные эффекты.

[tick]

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

Если рассуждать в идеологии HTML5, то надо так:

<article>
 <blockquote>
   <p>I am so happy and lucky to have worked with Net-Craft to design my website.</p>
   <p>They were so easy to communicate with and have such a fast turnaround.</p>
 </blockquote>
 <footer>
   <address><a type="author" href="http://net-craft.com/portfolio/portfolio.php#ftb">FindtheBoutiques.com</a></address>
 </footer>
</article>

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

Средствами CSS менять display:block у тега blockquote на inline — о какой тогда семантике вообще идёт речь?

Если надо сделать универсальную версию для всех браузеров IE7+, то о CSS3 c last-child придётся забыть. Как говорится, не до жиру. Семантическая вёрстка — это сферический конь в вакууме, который натыкается на IE и разбивается вдребезги.

А поизвращаться можно вот так, например:

 <blockquote cite="http://net-craft.com/portfolio/portfolio.php#ftb" title="FindtheBoutiques.com">
   <p>I am so happy and lucky to have worked with Net-Craft to design my website.</p>
   <p>They were so easy to communicate with and have such a fast turnaround.</p>
 </blockquote>

blockquote[title]:after {
content: attr(title); float: right;
}

Проблема в том, что браузеры никак не используют аттрибут cite, хотя он появился у blockquote еще в HTML4.01, т.е. в 1999г.
Вот такая семантическая вёрстка, увы.

Так что либо шашечки (семантическая верстка), либо ехать (вёрстка по визуальному драфту).

[Олег Торбасов]

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

Можно не cite, можно p.blockquote-postlude или article/footer; как понимаете, проблема совершенно не в этой детали.

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

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

Средствами CSS менять display:block у тега blockquote на inline — о какой тогда семантике вообще идёт речь?

Тут как раз не вижу никакого затруднения. Стиль display меняет представление, к семантике это никаким боком.

Если надо сделать универсальную версию для всех браузеров IE7+, то о CSS3 c last-child придётся забыть.

Тут тоже никакой проблемы; недопонимание CSS оправданно фиксить Jscript’ом.

Так что либо шашечки (семантическая верстка), либо ехать (вёрстка по визуальному драфту).

Да нет, совместить их можно. Но чую — только HTML/CSS тут не обойтись. Нужно скриптовать, а правильнее, наверное,— применять XSLT.