Создание буквицы - контентовая версия

Буквица является художественным приемом оформления контента и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного контента. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком контента, а является его частью (рис. 1).

Буквица в виде картинки

Буквица привлекает внимание читателя к началу контента, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются Имаги растений, животных и других объектов. Это, конечно, не обязательно, но может придать определенный настрой содержанию. Если хочется именно так сделать на сайте, лучше всего для этого подойдет рисунок, выровненный по левоой стороне (пример 1).

Пример 1. Создание буквицы с помощью рисунка

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Буквица</title>
</head>
<body>
<p><img src="d.gif" width="70" height="70" align="left" hspace="4" alt="Д">олго ли, коротко ли, скоро сказка сказывается, да не скоро дело делается, - приходит Иван-царевич к избушке; стоит в чистом поле избушка, на куриных лапках повертывается.</p>
</body>
</html>

Расстояние от контента до Имаги управляется параметрами hspace — отступы вокруг рисунка по горизонтали и vspace — отступы по вертикали. Выравнивание рисунка по левоой стороне и одновременно его обтекание контентом создается параметром align тега <IMG> со значением left.

Достоинства рисунков в качестве буквицы следующие:

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

Буквица в контенте

Можно создать буквицу не в виде рисунка, а в качестве простого контента, увеличенного по сравнению с базовым шрифтом. Для того чтобы контент огибал первую букву, ее необходимо поместить в контейнер <SPAN> и для него задать свойство float со значением left, как показано в примере 2.

Пример 2. Использование стилей для разработки буквицы

Рис. 2. Вид буквицы, созданной с помощью стилей

Размер шрифта буквицы управляется с помощью параметра font-size, а цвет символа через color. Чтобы добавляем небольшое пространство между буквицей и контентом используется атрибут padding-right. Также можно слегка сдвигать букву вверх или вниз за счет добавленного свойства line-height. Значение подбирается самостоятельно, исходя из гарнитуры шрифта, размера контента и собственны х предпочтений.

На самом деле создание буквицы можно автоматизировать, если вспомнить о псевдоэлементе first-letter. Он через двоеточие добавляется к требуемому селектору и определяет стиль первого символа контента. Таким образом, запись p:first-line будет задавать стиль первой буквы каждого абзаца контента (тега <P>). Так что в простейшем случае CSS (ЦСС) перепишется, как показано в примере 3.

Пример 3. Использование псевдоэлемента first-letter

P:first-letter {
font-size: 220%; /* Размер шрифта буквицы */
float: left; /* Выравнивание по левоой стороне */
color: blue; /* Цвет буквицы */
padding-right: 3px; /* Отступ между буквицей и контентом */
}

Пойдем дальше и сделаем так, чтобы буквица добавлялась только для первого абзаца контента. Для этой цели конечно можно ввести новый класс и применять его к первому тегу <P> в контенте, но проще опять же применить всей мощью стилей и по максимуму автоматизировать свою работу. В частности, существуют соседние селекторы, благодаря которым и можно установить, чтобы стиль первого абзаца отличался от последующих. Общая запись в этом случае будет следующей.

P {
/* Стиль для первого абзаца */
}

P + P { /* Соседние селекторы */
/* Стиль для всех абзацев, кроме первого */
}

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к контентовому абзацу только в том случае, если перед ним был еще один абзац. Поскольку перед первым абзацем ничего нет (на то он и первый), то стиль соседнего селектора к нему не применим.

Соседние селекторы не поддерживаются браузером Internet Эксплорер.

Для разработки буквицы требуется добавляем псевдоэлемент first-letter к селектору P и определить вид первого символа. Но поскольку это действие будет распространяться на все параграфы контента, то с помощью соседних селекторов требуется придать буквице вид обычного контента (пример 3).

Пример 4. Использование дочерних селекторов

<!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=utf-8">
<title>Буквица</title>
<style type="text/CSS (ЦСС)">
p:first-letter {
font-size: 30pt; /* Размер шрифта буквицы */
float: left; /* Выравнивание по левоой стороне */
background-color: #fc0; /* Цвет фона */
padding: 3px; /* Поля вокруг буквы */
margin-right: 4px; /* Отступ от фона до контента */
}
p + p:first-letter {
color: black; /* Черный цвет контента */
font-size: 12pt; /* Размер шрифта в пунктах */
background-color: #fff; /* Белый цвет фона */
padding: 0; /* Обнуляем поля */
margin: 0; /* Обнуляем отступы */
}
</style>
</head>
<body>
<h1>Ловля льва методом случайных чисел</h1>
<p>Разделим пустыню, в которой живет лев, на ряд элементарных прямоугольников. После чего перебираем выделенные фрагменты пустыни, каждый раз выбирая фрагмент случайным образом. На каждом цикле итерации проверяем, находится ли здесь лев. Если да, то лев окажется пойман.</p>
<p>Некоторым читателям может показаться, что этот вариант похож на метод простых итераций, в котором происходит простой перебор участков пустыни для поиска льва. Это действительно так, за исключением того, что прямоугольники выбираются не последовательно, а случайно. Таким образом, в лучшем случае поиск может закончиться сразу же, а в худшем - превратиться в метод последовательного перебора.</p>
<p>Во всех случаях предполагается, что лев стационарен и не покидает своего места. Для поиска мобильного льва следует применить методом обратной реверберации или методом искривленного квазипространства.</p>
</body>
</html>

Результат данного примера показан ниже. В браузере Internet Эксплорер буквица будет добавлена к каждому абзацу без исключений.

Команда p + p:first-letter определяет стиль первой буквы всех абзацев кроме первого и предназначена для того, чтобы преобразовать буквицу в рядовой контент. Впрочем, ничего не мешает изменить цвет символов и получить тем самым новое оформление контентового материала.