« prev | all | next »

CSS: quotes // Mash

Предисловие: лично я расставляю кавычки ручками, но знаю людей, которые смотрят на тэг <q> с сожалением.

Выдержка из спецификации HTML 4.01:

9.2.2 Кавычки: элементы BLOCKQUOTE и Q.

Эти два элемента обозначают текст в кавычках. BLOCKQUOTE предназначен для полной формы (содержимое уровня блока), а Q — для краткой формы (инлайн содержимое), которая не требует разрывов параграфов.

[ … ]

Представление кавычек

Визуальные ПА обычно отображают BLOCKQUOTE как блок текста с отступом.

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

Выдержка из спецификации CSS2:

12.4 Знаки кавычек

В CSS2 авторы могут специфицировать, в чувствительной к стилю и контекстно-зависимой манере, как ПА должны отображать знаки кавычек. Свойство 'quotes' специфицирует пары знаков кавычек для каждого уровня внедрённого закавычивания. Свойство 'content' даёт доступ к таким знакам кавычек и вставляет их до и после закавычивания.

[ … ]

12.4.1 Спецификация кавычек свойством 'quotes'

Это свойство специфицирует знаки кавычек для любого количества внедрённых закавычиваний.

[ … ]

Применение следующей таблицы стилей:

/* Специфицируются пары кавычек двух уровней для двух языков */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }
/* Вставляются кавычки до и после содержимого элемента Q */
Q:before { content: open-quote }
Q:after  { content: close-quote }

к данному фрагменту HTML:

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

позволит ПАгенту выдать:

"Quote me!"

«Позволит». Хорошее слово. Ну что ж, посмотрим:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Quotes</title>
</head>
<body>
<style type="text/css">
	q {
	quotes: '\00AB' '\00BB' '\201E' '\201C' '\00AB' '\00BB';
	}
	q:before {content: open-quote;}
	q:after {content: close-quote;}
</style>
	<p>Обычный текст: <q>Цитирование1 <q>Цитирование2 <q>Цитирование 3</q> цитирование2</q> цитирование1</q>. Обычный текст.</p>
</body>
</html>

Результат:

  • Opera 7.11:
    Обычный текст: «Цитирование1 „Цитирование2 «Цитирование 3» цитирование2“ цитирование1». Обычный текст.
  • Mozilla 1.4:
    Обычный текст: «Цитирование1 «Цитирование2 «Цитирование 3» цитирование2» цитирование1». Обычный текст.
  • IE6/Win:
    Обычный текст. Цитирование1 Цитирование2 Цитирование 3 цитирование2 цитирование1. Обычный текст.

«Седьмой, седьмой, у нас проблема. Как слышно? Приём.»

Один из путей решения:

CSS:
q {
  behavior: url('quotesfix.htc');
  quotes: '\00AB' '\00BB' '\201E' '\201C' '\00AB' '\00BB';
}
q:before {content: open-quote;}
q:after {content: close-quote;}
q q {behavior: none;}

html:root[xmlns] q {quotes: '\00AB' '\00BB';}
html:root[xmlns] q q {quotes: '\201E' '\201C';}
html:root[xmlns] q q q {quotes: '\00AB' '\00BB';}

/* nevermind: */
q {color: green;}
q q {color: blue;}
q q q {color: red; font-style: italic;}

Селектор html:root[xmlns] в настоящее время понимает только Mozilla.

quotesfix.HTC:
<public:component />
<public:attach event="oncontentready" onevent="fix();" />
<script language="JScript">
function fix() {
	element.innerHTML = '&#171;'+element.innerHTML.replace(/<Q>(.+?)(<Q>(.+?)<\/Q>(.+?))?<\/Q>/, "<Q>&#8222;$1<Q>&#171;$3&#187;</Q> $4&#8220;</Q>")+'&#187;';
	element.innerHTML = element.innerHTML.replace(/«»/g, "");
}
</script>

Мои познания в javascript оставляют желать лучшего, но вещь получилась вполне рабочая:

  • Обычный текст: Цитирование1. Обычный текст.
  • Обычный текст: Цитирование1 Цитирование2 цитирование1. Обычный текст.
  • Обычный текст: Цитирование1 Цитирование2 Цитирование 3 цитирование2 цитирование1. Обычный текст.

Download: quotes.zip

9 сентября 2003 (last modified: 28 декабря)

« prev | all | next »