WebCraft

Home / Elements / text

initial-letter

A drop cap the browser measures for you

Drop caps used to mean a float, a hand-guessed font size and a line-height that had to be re-tuned every time the copy changed. Two numbers replace all of it: how many lines tall, and how many lines down.

Caveatinitial-letter sizes and sinks the letter vertically and does nothing horizontally, so the text still runs flush against it until you add your own margin-right. Two numbers are also not one: initial-letter: 3 means three lines tall and sunk three, which drops the cap below the first line where you almost certainly wanted 3 2. It applies to ::first-letter in a block container and is ignored anywhere else, including on a flex item.

FallbackAn engine without it ignores the declaration and renders an ordinary first letter at whatever size and colour you also set, so the paragraph stays readable and merely loses its cap. That degrades better than the float version, which leaves a large letter jammed against the text when the line-height guess is wrong.

CSS 
p::first-letter {
  /* tall three lines, sunk two.
     one number sinks it by its
     own height, which is lower
     than you meant */
  initial-letter: 3 2;

  /* vertical only — the gutter
     is still your problem */
  margin-right: 8px;
}

Published

Questions

<details name>

Why is initial-letter not working on my paragraph?

Check where the declaration sits. It applies to ::first-letter (or an inline first child) of a block container, so a rule on the paragraph itself, on a flex or grid container, or on an inline element is ignored. An engine without support also drops it silently and shows a plain first letter.

Why does ::first-letter not work on a span?

::first-letter only matches block containers such as blocks, list items, table cells and inline-blocks. A plain inline <span> has no first letter in that sense, so either give it display: inline-block or put the selector on the enclosing paragraph.

Why does my drop cap include the opening quotation mark?

Punctuation that comes before the first letter belongs to ::first-letter by definition, so a paragraph starting with a quote mark gets a drop cap of the mark and the letter together. Start the paragraph with the letter, or move the quote outside the paragraph.

Also tagged text