x
 
Дарья Кружкова
5 июля 2012

Добрый день!

Вопрос касается ХТМЛ. Скажите пожалуйста, действительно ли необходимо цитаты внутри предложения заключать в тег <q> (с прописанными в ЦСС кавычками)? Или вполне уместно обойтись без него и вручную ставить &laquo;...&raquo;?

Спасибо.



Текст внутри тега <q> заключается в кавычки по умолчанию.

Такой код:

<p>А. Н. Соколов пишет: <q>Непонимание
   есть отсутствие объединения</q>.</p>

даст результат:

А. Н. Соколов пишет: Непонимание есть отсутствие объединения.

Кавычки (на самом деле дюймы) добавят все браузеры, кроме ИЕ 6 и 7.

Такое поведение мне кажется неправильным, и я бы советовал отменять автоматические кавычки по крайней мере на русских сайтах. Вот так:

q:before, q:after {
  content: '';
}

Я убеждён, что кавычки для обрамления цитат внутри строки нужно набирать руками по правилам пунктуации так же, как мы набираем запятые, тире и точки. Можно даже без <q>:

<p>Печорин спрашивает: «И зачем было судьбе
   кинуть меня в мирный круг честных
   контрабандистов?»</p>
Пунктуационное оформление цитат

Прописанные в ЦСС кавычки могут быть полезны в случае с многострочными цитатами, начинающимися с новой строки. Такие цитаты не заключаются в кавычки, а отграничиваются от остального текста отступами или другим кеглем. Кавычки в этом случае могут служить лишь дополнительной декорацией, поэтому логично не загромождать ими разметку:

<style>
  blockquote {
    margin-left: 0;
  }
  
  blockquote > *:first-child:before,
  blockquote > *:last-child:after {
    position: absolute;
    font-size: 64px;
    line-height: 64px;
    margin-top: -20px;
  }
  
  blockquote > *:first-child:before {
    content: '«';
    margin-left: -.7em;
  }
  
  blockquote > *:last-child:after {
    content: '»';
  }
</style>

<p>Лучший фрагмент моего реферата:</p>
<blockquote>
  <p><!-- Текст, текст, --></p>
  <p><!-- текст... --></p>
</blockquote>

Лучший фрагмент моего реферата:

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

Манерничанье интегрирует художественный идеал, но не рифмами. Целостность, так или иначе, просветляет конструктивный мимезис.


Кстати, в бюро предпочитают настоящие символы «...» мнемоникам &laquo;...&raquo;.

Выделение цитат

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вадим Макеев
5 июля 2012

> Кавычки (на самом деле дюймы) добавят все браузеры…

Двойная программистская кавычка, она же «Quotation Mark» U+0022 и дюйм, он же «Double Prime» U+2033 — это разные вещи.

А элемент q решает узкую задачу по интернационализации текстов, когда кавычки, в том числе и вложенные, можно менять, например, на основе атрибутов lang прямо из CSS. Поэтому не «поведение неправильное», а задачи у него другие.

Артём Сапегин
5 июля 2012

Да и вообще кавычки должны быть на «языке» страницы, а не цитаты, поэтому правила вроде:

q:lang(no) { quotes: « «~»; }

которые в изобилии раньше можно было найти почти в любом CSS-фреймворке, кажутся мне совсем лишёнными смысла.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

1 7 Практика: формулировка полезного действия 8 4