Hanging and each-line for text-indent

concepts

1. Hanging Indent Demo

   Compare standard first-line indent with hanging indent — where the first line starts at the left edge and subsequent lines are indented, as used in bibliographies and dictionary entries.

2. Each-Line Demo

   The each-line keyword applies the indent not just to the first line but to every line that follows a forced line break (e.g. after a <br> or in a pre block). Useful for stanza-based poetry and verse formatting.

3. Combined keywords lab

   Live-tune the indent length and toggle hanging + each-line simultaneously against a long paragraph. The CSS declaration recomputes underneath.

4. Bibliography Formatter

   The canonical real-world use case: format academic bibliography entries with text-indent: hanging. Toggle between no indent, regular first-line indent, and hanging — and adjust depth — to see exactly why hanging is the right tool for reference lists.

5. Poetry Formatter

   A two-column poetry layout (The Road Not Taken) with live indent keyword and depth controls. each-line indents every forced line break equally; hanging keeps the first line flush. Toggle between none, normal, each-line, hanging, and both combined.

why it shipped

The standard text-indent property only indents the first line of a block — a common convention for Western prose paragraphs. But typography needs two additional patterns: hanging indents (bibliographies, glossaries, bullet lists where the label hangs left) and per-line indents after hard breaks (poetry, code listings, verse). Before Chrome 146, achieving a hanging indent required negative left padding and positive margin hacks. The hanging and each-line keywords, defined in CSS Text Module Level 4, make both patterns first-class CSS primitives.

the syntax

/* Standard first-line indent */
p { text-indent: 2em; }

/* Chrome 146+: Hanging indent — all lines EXCEPT the first */
p { text-indent: 2em hanging; }

/* Chrome 146+: Each-line indent — after every forced break */
p { text-indent: 2em each-line; }

/* Combine: hanging + each-line */
p { text-indent: 2em hanging each-line; }

/* Works with percentage values too */
p { text-indent: 5% hanging; }

references

• ChromeStatus entry
• MDN — text-indent
• CSS Text Level 4 spec