Свойство CSS initial-letter
Узнайте, как CSS-свойство initial-letter создаёт буквицы: синтаксис, значения, поддержка браузеров и рабочие примеры.
CSS-свойство initial-letter создаёт буквицу (drop cap): оно увеличивает первую букву блока так, чтобы она занимала несколько строк текста и аккуратно выравнивалась с окружающим абзацем. Это та самая увеличенная начальная буква, которую часто встречают в книгах, журналах и длинных статьях.
До появления этого свойства буквицы имитировались с помощью float вместе с вручную подобранными font-size и отрицательными отступами — хрупкое решение, которое ломалось при смене шрифта или межстрочного интервала. initial-letter берёт вычисления на себя: вы указываете, насколько высокой должна быть буква в строках, а браузер автоматически подбирает размер и положение так, чтобы базовая линия и высота заглавных символов совпадали с основным текстом.
Свойство применяется к псевдоэлементу ::first-letter (или к первому строчному дочернему элементу блочного контейнера), а не ко всему абзацу.
| Начальное значение | normal |
|---|---|
| Применяется к | Псевдоэлементам ::first-letter и первому строчному дочернему элементу блочного контейнера. |
| Наследуется | Нет |
| Анимируется | Нет |
| Версия | CSS3 |
| DOM-синтаксис | element.style.initialLetter = "2 1"; |
Синтаксис
initial-letter: normal | <integer> | <integer> <integer>;Свойство принимает ключевое слово normal или одно либо два положительных целых числа, разделённых пробелом.
Принцип работы
- Первое значение (
size) определяет высоту буквы в строках.3означает, что глиф занимает высоту трёх строк текста — браузер автоматически корректируетfont-sizeдля достижения этого. - Второе значение (
sink) необязательно и определяет, на сколько строк буква опускается ниже первой базовой линии текста. Если оно не указано, глубина погружения равна размеру, что даёт классическую буквицу (dropped cap). Значение1удерживает букву у верхнего края первой строки, создавая эффект приподнятой буквы (raised cap).
/* 3 lines tall, sunk 3 lines (classic dropped cap — sink defaults to size) */
initial-letter: 3;
/* 3 lines tall, sunk only 1 line — letter rises above the paragraph */
initial-letter: 3 1;
/* Reset to no effect */
initial-letter: normal;Оба целых числа должны быть положительными — нулевые и отрицательные значения недопустимы. Значение sink не должно превышать значение size.
Значения
| Значение | Описание |
|---|---|
normal | Эффект initial-letter отсутствует. Это значение по умолчанию. |
<integer> | Одно положительное целое число задаёт размер в строках; sink по умолчанию равен этому же значению, создавая буквицу. |
<integer> <integer> | Первое значение — размер (высота в строках). Второе — погружение (на сколько строк опускается буква). Используйте 1 для sink, чтобы получить приподнятую букву. |
initial | Сбрасывает свойство до его значения по умолчанию (normal). |
inherit | Наследует вычисленное значение от родительского элемента. |
Пример initial-letter
В этом примере первая буква занимает две строки в высоту при sink равном 1 (буква стоит у верхнего края первой строки, частично приподнята, частично погружена). margin-right не даёт следующему тексту вплотную прилегать к буквице.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Slabo 27px';
font-size: 1.5em;
line-height: 1.5;
padding: 40px 0;
}
article {
width: 80%;
}
.example::first-letter {
-webkit-initial-letter: 2 1;
initial-letter: 2 1;
color: #8ebf42;
font-weight: bold;
margin-right: .60em;
}
</style>
</head>
<body>
<article class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</article>
</body>
</html>
Пример приподнятой буквы
Задайте sink (второе значение) равным 1, чтобы увеличенная буква располагалась у верхнего края первой строки и возвышалась над абзацем, а не опускалась в него:
.example::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
color: #8ebf42;
font-weight: bold;
margin-right: 0.1em;
}Значение sink равное 1 при size равном 3 означает, что буква занимает три строки в высоту, но только её нижний край опускается до первой базовой линии — остальная часть возвышается над начальной строкой.
Оформление начальной буквы
К буквице можно применить любое свойство, которое также работает с ::first-letter. Распространённые подходы включают:
color— используйте фирменный или акцентный цвет, чтобы буквица выделялась.font-size— не задавайте это свойство в том же правиле;initial-letterсамостоятельно управляет размером шрифта.font-family— используйте декоративный дисплейный шрифт для буквицы, тогда как основной текст набирается другой гарнитурой.font-weight— жирные буквицы традиционны в редакционной типографике.margin-right— добавьте небольшой отступ (0.1–0.6 em) между буквицей и следующим текстом.padding— добавьте пространство между глифом иbackground-colorилиborder.color— задайте контрастный цвет текста.
p::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
font-family: Georgia, serif;
color: #b5451b;
font-weight: bold;
margin-right: 0.15em;
padding: 0.05em 0.1em;
background-color: #fdf3ee;
}Поддержка браузеров и запасной вариант
initial-letter широко поддерживается в Safari и Chrome/Edge (Blink), однако Firefox пока не реализовал это свойство. Всегда предусматривайте запасной вариант, чтобы страница нормально отображалась в неподдерживаемых браузерах.
Используйте префикс -webkit-initial-letter вместе с версией без префикса, чтобы обеспечить поддержку старых версий WebKit/Blink.
Запасной вариант с прогрессивным улучшением
Правило @supports позволяет применять современное свойство только там, где оно поддерживается, а в остальных случаях использовать более простую вёрстку на основе float:
/* Fallback for Firefox and older browsers */
p::first-letter {
font-size: 3.5em;
font-weight: bold;
float: left;
line-height: 0.65;
margin: 0.05em 0.1em 0 0;
}
/* Override with the proper property where supported */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
p::first-letter {
font-size: unset;
float: unset;
line-height: unset;
margin: unset;
-webkit-initial-letter: 3;
initial-letter: 3;
}
}Подход на основе float требует ручной подстройки line-height и margin для визуального выравнивания буквы — это именно та хрупкая схема, которую заменяет initial-letter. Блок @supports аккуратно сбрасывает эти ручные значения и применяет стандартное свойство.
Когда использовать initial-letter
Используйте initial-letter, когда:
- Вам нужны редакционные буквицы, которые остаются выровненными даже при изменении читателем размера шрифта в браузере.
- Вы создаёте макеты в журнальном стиле, длинные статьи или страницы глав книги.
- Вы можете мириться с отсутствием поддержки в Firefox при наличии запасного варианта на float.
Избегайте использования, когда:
- Первым «символом» является цифра, эмодзи или знак препинания — визуальное выравнивание может оказаться неожиданным.
- Вам нужен попиксельный контроль над положением во всех браузерах без запасного варианта на float.
Связанные свойства
::first-letter— псевдоэлемент, на который нацеленinitial-letter.::first-line— оформление первой строки блока.float— классический (до CSS3) способ имитировать буквицу.font-size— ручное задание размера текста, когдаinitial-letterне поддерживается.line-height— определяет строчную сетку, к которой привязывается буквица.text-indent— ещё один инструмент типографики для первой строки, часто используемый вместе с буквицами.