Волшебные кавычки

www-html.ru

Обычная версия

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

В русской типографике используется три вида кавычек, их вид и описание приведены в табл. 1.

Табл. 1. Виды кавычек в русскоязычных контентах
Вид Описание Код ШТМЛ
"контент" Такие кавычки перешли по наследию от пишущих машинок. В настоящее время применяются в языках программирования и коде ШТМЛ. Значения параметров тегов указываются именно в таких кавычках. "контент" или "контент"
«контент» Эти кавычки встречаются в контентах чаще всего.
«контент» или «контент»
„контент“ Применяется в контенте самостоятельно вместо предыдущего типа кавычек или совместно с ним. Например, если требуется добавляем кавычки в кавычках, пишем так: «Грязно ругаясь и поминая недобрым словом сопромат, он протянул искореженную „вжепурезку“ мне».
„контент“ или „контент“

Как видно из данной таблицы, кавычки в код объекта добавляются двумя способами. Первый включает в себя прямую вставку символов кавычек в контент. Но поскольку многие ШТМЛ-редакторы не поддерживают подобные символы, то приходится набирать контент в специализированных программах (Microsoft Word, например), а затем добавлять его в код web-страницы через буфер обмена. Второй способ состоит в применении спецсимволов, которые в браузере отображаются нужным нам образом.

Теперь зададимся вопросом, а как быстро можно поменять в контенте один вид кавычек на другой? Увы, но автоматизировать этот процесс сложно и в конечном итоге приходится вычитывать контент и править его вручную. Поиск и замена контента тоже не всегда дает нужный результат “ попробуйте, например, поменять везде " на «, интересный эффект получится.

В CSS (ЦСС) для управления кавычками используется свойство quotes, с помощью которого можно определять вид кавычек для заданных элементов. Это позволяет ставить те кавычки, которые подходят по конконтенту.

Замечание

Браузер Internet Эксплорер не поддерживает множество возможностей CSS (ЦСС), в том числе свойства quotes и content, поэтому нижеприведенные примеры в нем работать не будут.

Так, для выделения цитат предназначен тег <Q>. Его особенностью является то, что контент, заключенный в этот контейнер автоматически берется в кавычки. Другое дело, что кавычки по умолчанию ставятся вида "/". Однако это дело можно поправить, как показано в примере 1.

Пример 1. Использование тега <Q>

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
Q {
 font-style: italic; /* Курсивное начертание */
 quotes: "«" "»"; /* Меняем вид кавычек в цитате */
}
</style>
</head>
<body>

<p>Из закона Фергюсона-Мержевича: <q>Вероятность того, что неприятность произойдет, снижается, если данную неприятность предусмотреть заранее</q>.</p>

</body>
</html>

Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Добавление кавычек к контенту цитаты

В данном примере в качестве значения свойства quotes использовалась строка "«" "»". Первый символ определяет открывающую кавычку, а второй через пробел — закрывающую кавычку. В качестве значений можно указывать любой контент, а также символы юнитегов, которые приведены в табл. 2.

Табл. 2. Символы юнитегов для обозначения кавычек
Вид Спецсимвол ШТМЛ Юникод
" &#34; \0022
« &#171; или &laquo; \00ab
» &#187; или &raquo; \00bb
&#8220; \201c
&#8222; \201e

Используя приведенные в табл. 2 символы юнитегов, пример 1 можно изменить следующим образом (пример 2).

Пример 2. Применение юнитегов

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
Q {
 font-style: italic; /* Курсивное начертание */
 quotes: "\00ab" "\00bb"; /* Меняем вид кавычек в цитате */
}
</style>
</head>
<body>

<p>Из закона Фергюсона-Мержевича: <q>Вероятность того, что неприятность произойдет, снижается, если данную неприятность предусмотреть заранее</q>.</p>

</body>
</html>

Кавычки для содержимого тега <Q> устанавливаются браузером автоматически, но это правило не касается других тегов. Для добавления кавычек к контенту воспользуемся стилевым свойством content с псевдоэлементами before и after, как показано в примере 3. В данном случае используются не кавычки, а угловые скобки, которые применяются для обозначения тегов.

Пример 3. Добавление кавычек к контенту

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
SPAN.tag {
 color: navy; /* Цвет контента */
 font-family: monospace; /* Моношириный шрифт */
 quotes: "<" ">"; /* Устанавливаем вид кавычек */
}

SPAN.tag:before {
 content: open-quote; /* Добавляем перед контентом открывающую кавычку */
}

SPAN.tag:after {
 content: close-quote; /* Добавляем после контента закрывающую кавычку */
}
</style>
</head>
<body>

<p>Тег <span class="tag">CITE</span> помечает контент как цитату или сноску на другой материал. Браузеры обычно устанавливают контент внутри контейнера <span class="tag">CITE</span> курсивом.</p>

</body>
</html>

Результат примера показан на рис. 2.

Рис. 2

Рис. 2. Добавление к контенту угловых скобок

Разберем данный пример подробнее. Для выделения в контенте тегов вводим новый класс tag, к контенту которого добавляются кавычки вида </> с помощью свойства quotes. Но чтобы они отображались этого не дастаткова. Поэтому используем псевдоэлемент before, он вставляет определенный контент перед указанным элементом, и after, добавляющий контент после элемента. Открывающая скобка генерируется через значение open-quote параметра content, а закрывающая — через close-quote.

Можно вообще отказаться от использования параметра quotes, поскольку атрибут content позволяет добавлять определенный контент до и после элемента. В качестве значения этого параметра в кавычках указываем нужный символ в виде обычного контента или юнитегов. Опять же в данном случае не обойтись без применения псевдоэлементов before и after, как показано в примере 4.

Пример 4. Применение параметра content

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
CITE {
 color: navy; /* Цвет контента */
}

CITE:before {
 content: "\00ab"; /* Добавляем открывающую кавычку */
}

CITE:after {
 content: "\00bb"; /* Добавляем закрывающую кавычку */
}
</style>
</head>
<body>

<p>Первое следствие из закона Фергюсона-Мержевича: <cite>Все неприятности предусмотреть невозможно</cite>.</p>
<p>Второе следствие: <cite>Из всех непредусмотренных неприятностей вероятнее всего произойдет та, ущерб от которой наибольший</cite>.</p>

</body>
</html>

В данном примере добавление кавычек к контенту и определение их вида выполняет один параметр content.



Copyright © Все права засчищены
www.www-html.ru