Буквица является художественным приёмом оформления текста и представляет собой увеличенную первую букву, базовая линия которой находится на одну или несколько строк ниже базовой линии основного текста. Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определённый настрой содержанию. Если хочется применить на сайте этот эффект, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).
Пример 1. Создание буквицы с помощью рисунка
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Буквица</title>
<style>
.cap {
float: left; /* Выравнивание по левому краю */
margin: 0 2px 2px 0; /* Отступы вокруг буквы */
}
</style>
</head>
<body>
<p><img src="images/n.png" width="92" height="85" class="cap">еобходимо,
манипулируя полученными предметами материального мира и фрагментами
информационного поля, эмпирическим путем достигнуть логического
завершения конкурса.</p>
</body>
</html>
Отступ от буквицы до текста задаётся свойством margin, в данном случае оно одновременно устанавливает пустое пространство справа и снизу от изображения. Результат примера показан на рис. 1.
Рис. 1. Рисунок в качестве буквицы
Достоинства рисунков в качестве буквицы заключаются в следующем: применение любого шрифта и разных эффектов, простота метода, а также возможность использования в качестве формата анимированный GIF-файл, что даёт дополнительные возможности оформления. Но есть и недостатки: если буквица на сайте применяется довольно часто, то нужно подготовить множество рисунков разных букв; также усложняется возможность редактирования текста, т. к. придётся вместо простого изменения буквы вставлять новый рисунок.
Буквица в тексте
Можно создать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению с базовым шрифтом. Для того чтобы текст огибал первую букву, её необходимо выделить с помощью псевдоэлемента ::first-letter и задать свойство float, как показано в примере 2.
Пример 2. Использование ::first-letter для создания буквицы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Буквица</title>
<style>
p::first-letter {
font-size: 3em; /* Размер буквы */
color: red; /* Цвет буквы */
float: left; /* Выравнивание по левому краю */
margin: 0 4px 2px 0; /* Отступы вокруг буквы */
}
</style>
</head>
<body>
<p>Необходимо, манипулируя полученными предметами
материального мира и фрагментами информационного поля,
эмпирическим путем достигнуть логического
завершения конкурса.</p>
</body>
</html>
С помощью стилей также удобно сразу задать цвет буквицы и необходимые отступы между символами. Результат примера показан на рис. 2.
Рис. 2. Буквица
Буквица на поле
Ничто не мешает расположить буквицу слева, чётко отделив её от основного текста, как показано на рис. 3. Таким образом, можно добиться простого выразительного эффекта.
Рис. 3. Расположение буквицы на поле
Разница с предыдущим методом только в том, что буквица не обтекается текстом снизу. Для этого мы должны весь текст абзаца сдвинуть вправо через margin-left, а буквицу сдвинуть влево на то же расстояние (пример 3).
Пример 3. Буквица на поле
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Буквица</title>
<style>
p::first-letter {
font-size: 36px; /* Размер буквы */
color: red; /* Цвет буквы */
float: left; /* Выравнивание по левому краю */
margin: 0 2px 2px -30px; /* Отступы вокруг буквы */
}
p {
margin-left: 30px; /* Сдвигаем текст вправо */
}
</style>
</head>
<body>
<p>Необходимо, манипулируя полученными предметами
материального мира и фрагментами информационного поля,
эмпирическим путем достигнуть логического
завершения конкурса.</p>
</body>
</html>
