v146 · css

Poetry Formatter

Poetry formatting benefits from both text-indent: each-line (every stanza line gets the same indent after line breaks) and text-indent: hanging (first line flush, subsequent lines indented). Toggle between modes and adjust depth to see the difference live.

Feature detection: checking…
indent keyword
depth: 1.5em
The Road Not Taken — Robert Frost (1916)
With text-indent
The Road Not Taken
— Robert Frost
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;
Then took the other, as just as fair, And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same,
And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back.
I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.
No indent (reference)
The Road Not Taken
— Robert Frost
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;
Then took the other, as just as fair, And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same,
And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back.
I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.

each-line

Applies the indent after every forced line break (<br>, white-space: pre-line, etc.) — not just at the start of the block. Perfect for poetry where each physical line should start with the same indent.

hanging

Reverses the indent: the first line starts flush with the container edge, while all subsequent lines are indented. Used in bibliographies, glossaries, and pull-quote callouts.

/* Poetry stanza: indent every line equally */
.stanza {
  white-space: pre-line;     /* preserves line breaks */
  text-indent: 1.5em each-line;  /* each line indented */
}

/* Hanging indent for bibliographies */
.bibliography-entry {
  text-indent: 2em hanging;
}

/* Both keywords combined */
.verse {
  text-indent: 1em hanging each-line;
}

see also