Сниппет: Буквица в тексте с помощью CSS

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

Для тех кто еще не совсем в теме, поясню что за чудо такое «Буквица». Буквица или по другому инициа́л это такой художественный приём оформления заглавных букв текста, который наверняка знаком каждому по печатным изданиям, представляет собой увеличенную первую букву, украшенную миниатюрами или орнаментом. Такой приём замечательно перекачивал в веб-типографику и довольно широко используется в разных формах.
Просто увеличенная первая буква абзаца или отдельного слова, это самый привычный вариант оформления. Более интересное решение, когда базовая линия увеличенной буквы находится ниже на одну или несколько строк базовой линии основного текста, и это не просто очередной увеличенный символ, буквица в этом случае не выступает над блоком текста, а является его частью, выровнена по левому краю и обтекаемая текстом.
Как писал выше, существует несколько разных способов для создания буквицы.

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

Второй метод более интересный, во всяком случае для меня, c использованием свойств CSS и дополнительных псевдоклассов: :first-child и :first-letter. Уже довольно давно, стало возможным создавать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению базовым шрифтом. Такой способ во многом хорош, он не требует дополнительной разметки и наличия картинок, создание буквицы в какой-то мере автоматизируется. Но, недостаток состоит в том, что теряется некий контроль, и может возникнуть путаница при практическом использовании непосредственно в записях. Да и в браузерах типа IE8 и ниже, в следствии неправильного «восприятия» означенных псевдоклассов, получается так что все последующие параграфы с тегом <P>, будут выводиться с буквицей, а оно не всегда нам надо))).

Что касаемо шрифта, можете подключить какой-нибудь нестандартный, рукописный шрифт с орнаментом например, в статье и «демо» я использовал стандартный «Georgia» без изысков.

/* Использование псевдоклассов для создания Буквицы */
p:first-child:first-letter {
    float: left;
    color: #903;
    font-size: 70px;
    line-height: 55px;
    padding-top: 4px;
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia;
}

Третий способ, наверное всё же нужно было поставить на первое место, так как это проверенное годами и стопроцентно кроссбраузерное решение. Учитывая то, что не всегда и не во всех случаях применение «Буквицы» востребовано и оправдано, всё же лучше использовать метод с дополнительной разметкой. Например, начальную букву параграфа обернуть тегом span с определенным классом и уже непосредственно в .css, прописать для него нужные вам свойства, сформировав внешний вид заглавной буквы(размер, цвет, расположение и т.п.) В этом случае вы получаете контроль над созданием буквицы именно там где вам нужно, т.е. в том параграфе, в котором считаете наличие буквицы необходимым.
Вот как будет выглядеть простейший код CSS для буквицы с использованием дополнительного контейнера:

.firstletter {
    float: left;
    color: #008e36;
    font-size: 70px;
    line-height: 55px;
    padding-top: 4px;
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia;
}

Как видите всё очень просто, создаём отдельный класс с более или менее разумным и логичным названием, я не стал особо фантазировать и для примера присвоил имя .firstletter, вы можете выбрать любое другое, главное чтобы оно вам хоть как-то указывало на своё предназначение. Затем приступаете к формированию внешнего вида будущей Буквицы, используйте любые доступные на сегодняшний день свойства CSS3. Уверен, немного фантазии и у вас получится множество различных вариантов «буквицы».

Для того чтобы на странице в записи появилась «буквица» во всей своей красе, остаётся только нужную вам букву, в нашем случае это начальная буква параграфа, поместить в дополнительный контейнер, у нас в этой роли использован тег <span>, с заранее определённым классом class="firstletter", и всё, параграф текста будет явно, и более чем конкретно обозначен.

<span class="firstletter">С</span>помощью свойств CSS.....

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

С уважением, Андрей