Rag

Rag

No JavaScript files on this page

text-wrap: wrapnot supported here

010203040506070

Where each line breaks is a choice the browser makes for you

Browsers break lines greedily unless told otherwise. Each line takes words until the next one cannot fit, then the rest move on. It is fast and predictable, and it leaves a ragged right edge, often with a short word stranded on the last line. Balance evens out the lengths of the lines in a short block, which suits headings. Pretty spends extra work on the last few lines to avoid that stray word, which suits paragraphs such as this one.

text-wrap: balancenot supported here

010203040506070

Where each line breaks is a choice the browser makes for you

Browsers break lines greedily unless told otherwise. Each line takes words until the next one cannot fit, then the rest move on. It is fast and predictable, and it leaves a ragged right edge, often with a short word stranded on the last line. Balance evens out the lengths of the lines in a short block, which suits headings. Pretty spends extra work on the last few lines to avoid that stray word, which suits paragraphs such as this one.

text-wrap: prettynot supported here

010203040506070

Where each line breaks is a choice the browser makes for you

Browsers break lines greedily unless told otherwise. Each line takes words until the next one cannot fit, then the rest move on. It is fast and predictable, and it leaves a ragged right edge, often with a short word stranded on the last line. Balance evens out the lengths of the lines in a short block, which suits headings. Pretty spends extra work on the last few lines to avoid that stray word, which suits paragraphs such as this one.

Measure

30ch 45ch 60ch Free

Drag the corner of any column to set its measure.

60ch needs a wider screen.

45ch and 60ch need a wider screen.

If your browser doesn’t support pretty, the third column falls back to normal wrapping. The same goes for balance in the second. A column flags it when that happens.

# Things to try

• Read the last line of each paragraph. At every measure wrap strands a single word there, and pretty brings a second word down to keep it company. At 60ch it does the same for the headline.
• Watch the headlines as you change the measure. balance keeps their lines close to equal. In Chromium, the paragraph under it is too long to balance and wraps normally.
• With a mouse or trackpad, choose Free and drag a column’s corner slowly. Lines in the wrap column only change when a word crosses the edge, while pretty sometimes moves a word early to keep the last line full.

# How it works

The three columns share their markup and their measure. The only difference is one declaration: text-wrap: wrap, balance or pretty.

wrap is the greedy algorithm browsers default to: each line takes as many words as fit. balance evens out the lengths of every line in a block, which is why it suits headings. Chromium balances blocks of six lines or fewer and Firefox ten, so in Chromium the long paragraph wraps as if nothing were set; Safari balances any length. pretty keeps greedy breaking for most of the paragraph and reconsiders the end, to avoid a short final line. Engines differ in how far back they look.

The measure control is four native radio buttons, and CSS does the rest. A rule such as .rag:has(#rag-w30:checked) .rag-col { width: 30ch } resizes every column when the first radio is checked. Free switches on resize: horizontal, so the browser’s own corner handle takes over. Safari on iOS and Firefox for Android ignore resize, so Free needs a desktop browser.

ch is the advance width of the zero in the element’s font. The rulers are set in the same font as the text, so a tick every 1ch and a taller one every 10ch measure in the same unit as the width. Container queries in that unit stack the columns unless all three fit.

No JavaScript files load on this page, and the footer says so. A build check fails the deploy if a page that makes that claim loads a script file.

# Keyboard

Key	Action
Tab	Move to the measure control
Arrow keys	Choose a measure
Space	Select the focused measure