Управляйте буквицами с помощью начальной буквы CSS

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

Свойство CSS initial-letter значительно упростит задачу.

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

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

Проверьте поддержку initial-letter с помощью:

@supports (initial-letter: 1 1) { /* Your supported styles */ }

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

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

Псевдоэлемент ::first-letter помогает нам в этом.

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

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

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

Введение новых модулей 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;
}

Знакомство с начальной буквой

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

p::first-letter {
  initial-letter: 3.5 3;
}
  • Первый аргумент определяет размер буквы и количество строк, которые она будет занимать. Буква увеличится, сохраняя при этом соотношение сторон. Вы не можете использовать отрицательное значение, но можете использовать десятичные значения.
  • Второй аргумент определяет приемник буквы. Это можно рассматривать как смещение места, где будет располагаться буква. Второе значение является необязательным и не может быть отрицательным. Если он отсутствует, он принимает значение размера буквы, округленное до ближайшего целого числа. Это эквивалентно использованию ключевого слова «drop». Приемник также принимает другое значение ключевого слова, «raise», которое эквивалентно приемнику, равному 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: css 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;
}

Или прикрепите фон к тексту:

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;
}

У вас есть много возможностей!

Вот и все, более точный контроль над стилем буквицы с помощью initial-letter ! Вы бы добавили буквицы в свою типографику? Как бы вы могли их стилизовать? Дайте нам знать!