Text alignment

The edge text lines up against: left, right, center, or both edges when justified. Paragraphs usually follow the reading direction.

line up text on the leftcenter this paragraphmake both sides of the paragraph straightshould I center this whole paragraphnewspaper style text blockstext alingmentright aligned writingcentered text is hard to read isnt itwhy are there big gaps between words

See it

Live demo coming soon

What it is

Text alignment decides which edge of a text block lines up: left, right, centered, or justified. Left-aligned Latin text makes a straight left edge and a ragged right edge. Justification adjusts spacing so both edges align, producing the newspaper and book-column look.

Use the alignment that follows the reading direction for paragraphs, center short display lines sparingly, and reserve right alignment for small, deliberate structures such as numeric columns or dates. Jan Tschichold made the argument in Die neue Typographie in 1928: drop the centered symmetry and set asymmetrically, flush to one edge. On the web, `text-align: start` and `end` adapt to left-to-right and right-to-left writing modes better than physical `left` and `right`.

The gotcha is the rag. Centered long copy makes every line begin in a new place, while narrow justified columns can open ugly channels of white space called rivers. Good justification needs enough measure, careful hyphenation, and a typeface that spaces well.

Ask AI for it

Build a text-alignment comparison with the same 300-word article set to CSS text-align: start, center, end, and justify in four equal panels. Use max-inline-size: 65ch, line-height: 1.55, lang="en", and hyphens: auto for the justified sample. Add an LTR and RTL toggle using the HTML dir attribute so start and end visibly follow reading direction. Mark rivers in the justified panel, preserve a readable rag in the start-aligned panel, and keep the final line unforced with text-align-last: auto.

You might have meant

ragmeasureleadingwidows and orphansbidirectional text

Go deeper