CSS-свойство `initial-letter`

Свойство initial-letter CSS задаёт размер и глубину погружения выносных, поднятых и опущенных инициалов. Это свойство применяется к псевдоэлементам ::first-letter и первым дочерним элементам строчного уровня блочных контейнеров.

Синтаксис

/* Keyword values */
initial-letter: normal;

/* One value */
initial-letter: 3; /* 3 lines tall, baseline at line 3 */
initial-letter: 1.5; /* 1.5 lines tall, baseline at line 2 */

/* Two values */
initial-letter: 3 2; /* 3 lines tall, baseline at line 2 (raised 1 line) */
initial-letter: 3 1; /* 3 lines tall, baseline unchanged (raised 2 lines) */

/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

Значения

Это свойство задаётся как normal или <number>, за которым может следовать <integer>:

normal

Специальный эффект для инициала не применяется. Текст отображается обычным образом.

<number>

Задаёт размер инициала, выраженный количеством занимаемых им строк. Отрицательные значения недопустимы.

<integer>

Задаёт количество строк, на которое должен опуститься инициал, если указан его размер. Значения должны быть больше нуля. Если значение не указано, оно дублирует значение размера, округлённое вниз до ближайшего положительного целого числа.

Формальное определение

Формальный синтаксис

initial-letter = 
  normal |
  [ <number> <integer>? ]

<integer> = 
  <number-token>

Примеры

Задание размера инициала

HTML

<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>

CSS

.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

p {
  outline: 1px dashed red;
}

Результат

Задание значения погружения

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

HTML

<p class="four">Initial letter: Sink value = 4</p>
<p class="same">Initial letter: Sink value not declared (same as size)</p>
<p class="two">Initial letter: Sink value = 2</p>
<p class="one">Initial letter: Sink value = 1</p>

CSS

.four::first-letter {
  -webkit-initial-letter: 3 4;
  initial-letter: 3 4;
}

.same::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

.two::first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}

.one::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
}

p {
  outline: 1px dashed red;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• ::first-letter
• :first-child
• Буквицы в CSS от Oddbird (2017)