По ходу текста некоторые слова, такие как цитаты или названия книг и фильмов,
приходится брать в кавычки. При этом существует несколько типов кавычек, которые
применяются в зависимости от правил языка и контекста. С помощью CSS процесс
добавления кавычек можно упростить и добавлять кавычки желаемого вида в нужное
место автоматически.
В русской типографике используется три вида кавычек, их вид и описание
приведены в табл. 1.
Табл. 1. Виды кавычек в русскоязычных текстах |
Вид |
|
Описание |
|
Код HTML |
|
|
|
|
|
"текст" |
|
Такие кавычки перешли по наследию от пишущих машинок. В настоящее
время применяются в языках программирования и коде HTML. Значения
параметров тегов указываются именно в таких кавычках. |
|
"текст" или "текст" |
|
|
|
|
|
«текст» |
|
Эти кавычки встречаются в текстах чаще всего. |
|
«текст» или «текст» |
|
|
|
|
|
„текст“ |
|
Применяется в тексте самостоятельно вместо предыдущего типа кавычек
или совместно с ним. Например, если требуется добавить кавычки в кавычках,
пишем так: «Грязно ругаясь и поминая недобрым словом сопромат, он протянул
искореженную „вжепурезку“ мне». |
|
„текст“ или „текст“ |
Как видно из данной таблицы, кавычки в код документа добавляются двумя
способами. Первый включает в себя прямую вставку символов кавычек в текст. Но
поскольку многие HTML-редакторы не поддерживают подобные символы, то приходится
набирать текст в специализированных программах (Microsoft Word, например), а
затем добавлять его в код веб-страницы через буфер обмена. Второй способ состоит
в применении спецсимволов, которые в браузере отображаются нужным нам
образом.
Теперь зададимся вопросом, а как быстро можно поменять в тексте один вид
кавычек на другой? Увы, но автоматизировать этот процесс сложно и в конечном
итоге приходится вычитывать текст и править его вручную. Поиск и замена текста
тоже не всегда дает нужный результат — попробуйте, например, поменять везде " на «,
интересный эффект получится.
В CSS для управления кавычками используется свойство quotes, с помощью которого можно определять вид кавычек для
заданных элементов. Это позволяет ставить те кавычки, которые подходят по
контексту.
Примечание |
Браузер Internet Explorer не поддерживает множество возможностей
CSS, в том числе свойства quotes и content, поэтому нижеприведенные примеры в нем работать не
будут. |
Так, для выделения цитат предназначен тег <Q>.
Его особенностью является то, что текст, заключенный в этот контейнер
автоматически берется в кавычки. Другое дело, что кавычки по умолчанию ставятся
вида "/". Однако это дело можно поправить, как показано в примере 1.
Пример 1. Использование тега <Q> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
Q {
font-style: italic;
quotes: "«" "»"
}
</style>
</head>
<body>
<p>Из
закона Фергюсона-Мержевича: <q>Вероятность того, что неприятность
произойдет, снижается, если данную неприятность предусмотреть
заранее</q>.</p>
</body>
</html> |
Результат примера показан ниже.
Из закона Фергюсона-Мержевича: Вероятность того, что
неприятность произойдет, снижается, если данную неприятность предусмотреть
заранее . |
В данном примере в качестве значения свойства quotes использовалась строка "«" "»". Первый символ определяет открывающую
кавычку, а второй через пробел — закрывающую кавычку. В качестве значений
можно указывать любой текст, а также символы юникода, которые приведены в
табл. 2.
Табл. 2. Символы юникода для обозначения кавычек |
Вид |
|
Спецсимвол HTML |
|
Юникод |
|
|
|
|
|
" |
|
" |
|
\0022 |
|
|
|
|
|
« |
|
« или « |
|
\00ab |
|
|
|
|
|
» |
|
» или » |
|
\00bb |
|
|
|
|
|
“ |
|
“ |
|
\201c |
|
|
|
|
|
„ |
|
„ |
|
\201e |
Используя приведенные в табл. 2 символы юникода, пример 1 можно изменить
следующим образом (пример 2).
Пример 2. Применение юникода |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<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. Добавление кавычек к тексту |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<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> |
Результат примера показан ниже.
Тег CITE помечает текст как цитату или
сноску на другой материал. Браузеры обычно устанавливают текст внутри контейнера CITE курсивом. |
Разберем данный пример подробнее. Для выделения в тексте тегов вводим новый
класс tag, к тексту которого добавляются кавычки вида </> с помощью свойства quotes. Но чтобы они отображались этого не достаточно.
Поэтому используем псевдоэлемент before, он вставляет
определенный контент перед указанным элементом, и after, добавляющий контент после элемента. Открывающая
скобка генерируется через значение open-quote параметра content, а закрывающая — через close-quote.
Можно вообще отказаться от использования параметра quotes, поскольку атрибут content позволяет добавлять определенный текст до и после
элемента. В качестве значения этого параметра в кавычках указываем нужный символ
в виде обычного текста или юникода. Опять же в данном случае не обойтись без
применения псевдоэлементов before и after, как показано в примере 4.
Пример 4. Применение параметра content |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<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.