Волшебные кавычки
По ходу текста некоторые слова, такие как цитаты или названия книг и фильмов, приходится брать в кавычки. При этом существует несколько типов кавычек, которые применяются в зависимости от правил языка и контекста. С помощью CSS процесс добавления кавычек можно упростить и добавлять кавычки желаемого вида в нужное место автоматически.
В русской типографике используется три вида кавычек, их вид и описание приведены в табл. 1.
| Вид | Описание | Код HTML |
|---|---|---|
| "текст" | Такие кавычки перешли по наследию от пишущих машинок. В настоящее время применяются в языках программирования и коде HTML. Значения параметров тегов указываются именно в таких кавычках. | "текст" или "текст" |
| «текст» | Эти кавычки встречаются в текстах чаще всего. | «текст» или «текст» |
| „текст“ | Применяется в тексте самостоятельно вместо предыдущего типа кавычек или совместно с ним. Например, если требуется добавить кавычки в кавычках, пишем так: «Грязно ругаясь и поминая недобрым словом сопромат, он протянул искореженную „вжепурезку“ мне». | „текст“ или „текст“ |
Как видно из данной таблицы, кавычки в код документа добавляются двумя способами. Первый включает в себя прямую вставку символов кавычек в текст. Но поскольку многие HTML-редакторы не поддерживают подобные символы, то приходится набирать текст в специализированных программах (Microsoft Word, например), а затем добавлять его в код веб-страницы через буфер обмена. Второй способ состоит в применении спецсимволов, которые в браузере отображаются нужным нам образом.
Теперь зададимся вопросом, а как быстро можно поменять в тексте один вид кавычек на другой? Увы, но автоматизировать этот процесс сложно и в конечном итоге приходится вычитывать текст и править его вручную. Поиск и замена текста тоже не всегда дает нужный результат — попробуйте, например, поменять везде " на «, интересный эффект получится.
В CSS для управления кавычками используется свойство quotes, с помощью которого можно определять вид кавычек для заданных элементов. Это позволяет ставить те кавычки, которые подходят по контексту.
Замечание
Браузер Internet Explorer не поддерживает множество возможностей CSS, в том числе свойства quotes и content, поэтому нижеприведенные примеры в нем работать не будут.
Так, для выделения цитат предназначен тег <Q>. Его особенностью является то, что текст, заключенный в этот контейнер автоматически берется в кавычки. Другое дело, что кавычки по умолчанию ставятся вида "/". Однако это дело можно поправить, как показано в примере 1.
Пример 1. Использование тега <Q>
<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. Добавление кавычек к тексту цитаты
В данном примере в качестве значения свойства quotes использовалась строка "«" "»". Первый символ определяет открывающую кавычку, а второй через пробел — закрывающую кавычку. В качестве значений можно указывать любой текст, а также символы юникода, которые приведены в табл. 2.
| Вид | Спецсимвол HTML | Юникод |
|---|---|---|
| " | " | \0022 |
| « | « или « | \00ab |
| » | » или » | \00bb |
| “ | “ | \201c |
| „ | „ | \201e |
Используя приведенные в табл. 2 символы юникода, пример 1 можно изменить следующим образом (пример 2).
Пример 2. Применение юникода
<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>
<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. Добавление к тексту угловых скобок
Разберем данный пример подробнее. Для выделения в тексте тегов вводим новый класс tag, к тексту которого добавляются кавычки вида </> с помощью свойства quotes. Но чтобы они отображались этого не достаточно. Поэтому используем псевдоэлемент before, он вставляет определенный контент перед указанным элементом, и after, добавляющий контент после элемента. Открывающая скобка генерируется через значение open-quote параметра content, а закрывающая — через close-quote.
Можно вообще отказаться от использования параметра quotes, поскольку атрибут content позволяет добавлять определенный текст до и после элемента. В качестве значения этого параметра в кавычках указываем нужный символ в виде обычного текста или юникода. Опять же в данном случае не обойтись без применения псевдоэлементов before и after, как показано в примере 4.
Пример 4. Применение параметра content
<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.
| Статья опубликована: 30.10.2005 | Последнее обновление: 20.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Mr.Floppy
22.02.2007
>> попробуйте, например, поменять везде " на «, интересный эффект получится
Можно заменить " "" и "" " на " «" и "» " соответственно. А так же ""." на "».". Или же, если вокруг цитаты нет пробелов, можно искать по закрывающему/открывающему тегу (">"" на ">«"). Вот и вс?.
Сергей
05.04.2007
HTMLCODER.exe
08.06.2007
Мнфсруыдфм
18.07.2007
Влад Мержевич
10.09.2007
yegor
26.07.2008
content: '.';