Управляйте буквицей с помощью CSS-свойства initial-letter

Искусство оформления буквиц существует уже сотни, если не тысячи лет. Его использование в стилях печати для обозначения начала нового раздела или главы можно увидеть в истории. Но в цифровую эпоху всегда был проблематичным стилизовать буквиц, не было «чистого» решения для этого.

CSS-свойство initial-letter поможет сделать это намного проще.

Свойство CSS initial-letter обеспечивает бОльший контроль и стиль над первой буквой в текстовом блоке. Это означает, что мы можем применить немного больше фантазии с нашей типографикой без хакерских трюков.

Поддержка браузерами

Где уже можно использовать initial-letter? Оно доступно в Safari и в Chrome 110. В Safari для этого свойства требуется префикс -webkit-. Существует open issue для его реализации в Firefox.

Существует также open issue Chromium с подробным описанием связанных свойств initial-letter-align и initial-letter-wrap, которые еще предстоит реализовать в соответствии со спецификацией CSSWG.

Для того, чтобы использовать свойство initial-letter там, где оно поддерживается:

@supports (initial-letter: 1 1) { /* Ваши поддерживаемые стили */ }

Текущие решения

Как бы вы могли оформить буквицу в CSS сегодня?

Псевдокласс :first-letter дает нам часть решения.

p:first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}

https://codepen.io/web-dot-dev/pen/qByPXby

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

p:first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}

https://codepen.io/web-dot-dev/pen/rNrGzGJ

Введение новых единиц CSS, таких как lh, могло бы частично облегчить эту боль. Но они также имеют ограниченную поддержку (в настоящее время lh поддерживается только в Chrome).

p:first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}

https://codepen.io/web-dot-dev/pen/QWBqMmp

Итак, initial-letter

Свойство initial-letter дает вам более точный контроль над стилем этой буквицы. Он принимает два значения, разделенных пробелом:

p:first-letter {
  initial-letter: 3.5 3;
}

Первый аргумент определяет размер буквы и количество строк, которое она будет занимать. Буква будет увеличиваться, сохраняя соотношение сторон. Вы не можете использовать отрицательное значение, но можете использовать десятичные значения.
Второй аргумент определяет приемник буквы. Это можно рассматривать как смещение того места, где будет располагаться буква. Второе значение является необязательным и не может быть отрицательным. Если он отсутствует, он принимает значение размера буквы, округленное до ближайшего целого числа. Это эквивалентно использованию ключевого слова «drop». Приемник также принимает другое значение ключевого слова, «повышение», которое эквивалентно приемнику, равному 1.

В следующем примере можно изменить значения, чтобы увидеть, как это влияет на стиль буквицы.

Совместив с :first-line , получим примерно такой результат:

p:first-line {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25rem;
}
p:first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  text-shadow: 0.25rem 0.25rem #be4bdb;
}

Или, возможно, задать ему border. Обратите внимание, как в следующем примере используется ключевое слово «drop», которое будет использоваться по умолчанию, если его не указать, и равно 3:

p:first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 drop;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  border: 0.25rem dashed #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
}

Можно добавить background или box-shadow:

p:first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: var(--surface-1);
  background: #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}

https://codepen.io/web-dot-dev/pen/MWBErvv

Или background для текста:

p:first-letter {
  background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: transparent;
  -webkit-background-clip: text;
  padding: 0.5rem;
}

https://codepen.io/web-dot-dev/pen/OJwxZOy

У вас появилось много возможностей и есть более точный контроль над стилем вашей буквицы с initial-letter!

Сила этого свойства заключается в возможности убрать хаки, связанные со стилем и позиционированием первой буквы блока текста. Ваша первая буква не заключена в div или что-то в этом роде. Возможность изменения размера на основе высоты строки также хорошо масштабирует букву, а также эта функция предоставляет несколько простых в реализации возможностей для хорошей типографики в Интернете.

Оригинал на английском: https://developer.chrome.com/blog/control-your-drop-caps-with-css-initial-letter/