Буквица в CSS: основные свойства

Development | Amber | Комментировать запись

Буквица долгое время использовалась в печати в качестве декоративного элемента в начале первого абзаца раздела или главы. Это помогает привлечь внимание, и часто для буквицы используют сложный стилизованный шрифт, потому что одна буква не влияет на читабельность текста. В 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