Буквица долгое время использовалась в печати в качестве декоративного элемента в начале первого абзаца раздела или главы. Это помогает привлечь внимание, и часто для буквицы используют сложный стилизованный шрифт, потому что одна буква не влияет на читабельность текста. В CSS буквицу можно создать с помощью псевдоэлемента ::first-letter и свойства initial-letter.
Псевдоэлемент ::first-letter
::first-letter — это селектор псевдоэлементов, похожий на ::before и ::after. Он стилизует первую букву элемента так, как если бы это был отдельный элемент, и делает он все это без необходимости добавлять какую-либо дополнительную разметку.
Взгляните на простой пример, где мы оформляем 1-ю букву 1-го абзаца или элемента статьи:
article p:first-child::first-letter {
color: hotpink;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: "IBM Plex Mono", monospace;
}
Однако у этого псевдокласса все же есть проблемы. Посмотрите, что произойдет, если мы выберем больший размер шрифта (а больший шрифт – одна из основных особенностей буквицы):
article p:first-child::first-letter {
color: hotpink;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: "IBM Plex Mono";
font-size: 4rem;
line-height: 1;
}
Помимо большего размера шрифта, мы также устанавливаем низкое значение для высоты строки, чтобы высота первой строки не зависела от начальной высоты первой буквы. Проблема в том, что буквица остается выше всей строки, а это неправильно. Одним из решений данной проблемы являются старые добрые числа с плавающей точкой:
article p:first-child::first-letter {
color: hotpink;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 4rem;
float: left;
line-height: 1;
}
Свойство ::first-letter практически универсально и поддерживается почти всеми браузерами.
Свойство initial-letter
Альтернативой предыдущему методу является использование нового свойства initial-letter, которое принимает числовое значение, представляющее количество строк, до которых должна расширяться буквица. Затем браузер автоматически вычисляет правильный размер шрифта:
article p:first-child::first-letter {
color: hotpink;
padding-right: 8px;
-webkit-initial-letter: 3;
initial-letter: 3;
}
Примечание: На момент написания этой статьи последний пример будет работать только в Safari. В отличие от ::first-letter, поддержка initial-letter на данный момент, к сожалению, практически отсутствует. Так что пока нам придется некоторое время продолжать использовать числа с плавающей точкой. Если вы все же хотите использовать начальную букву, используйте ее с правилом @supports, чтобы буквица не выглядела странно в браузерах, которые ее не поддерживают.
Читайте также: Шпаргалка по селекторам CSS