glu
Alignment and line breaking

Alignment and line breaking

text-align

The four classic values work as expected, plus the logical pair start and end, which follow the paragraph’s reading direction: in a left-to-right document start means left, in a right-to-left one it means right. The default is start.

Paragraphs set with text-align start, center, right and justify

Behind justify sits the TeX line-breaking algorithm: the paragraph is broken as a whole, weighing all possible break points against each other, instead of filling one line at a time and living with the consequences. Tight and loose lines balance out across the paragraph, which is most visible in narrow measures.

Hyphenation

Justification needs hyphenation to keep word spacing even, and it is on by default (hyphens: auto) using the language’s patterns; see Languages for how the lang attribute picks them.

The same justified paragraph without and with hyphenation

The CSS values behave as in the browser:

p  { hyphens: auto; }    /* pattern hyphenation, the default */
h1 { hyphens: none; }    /* headings usually go unhyphenated */
td { hyphens: manual; }  /* only where the text offers ­ */

Under manual, soft hyphens (­, U+00AD) mark the permitted break points by hand; under auto they are respected too and win over the patterns for that word. How eagerly the engine hyphenates is tunable with -bag-linebreak-hyphen-penalty.

First lines: text-indent and initial letters

text-indent indents the first line of a paragraph, the classic alternative to inter-paragraph margins:

p + p { text-indent: 1.5em; margin: 0; }

initial-letter sets the first letter as a drop cap spanning the given number of lines, indenting exactly that many first rows:

.opener { initial-letter: 3; }
A paragraph opening with a three-line drop cap