demo · v130

balance vs pretty

Chrome 130 adds text-wrap-style as a longhand, making balance and pretty first-class spec values. They look similar at a glance — both avoid single-word orphans — but they use different algorithms with different trade-offs. Resize the container below to feel the difference on real typographic text.

420px

Algorithm comparison

Propertybalanceprettywrap (default)
Algorithm goal Equal line lengths Avoid orphans / rivers Greedy line-break
Short text (< 4 lines) Ideal Rarely helps Often unbalanced
Long paragraphs Adds reflow cost Ideal Acceptable
Prevents last-line orphan Yes (equal length) Yes (look-ahead) No guarantee
Ragged right margin Minimised Preserved Preserved
Performance O(n²) reflow Look-ahead per line O(n) greedy
CSS spec name text-wrap-style: balance text-wrap-style: pretty text-wrap-style: auto 
/* Chrome 130+: use the new syntax */
.headline    { text-wrap: balance; }   /* = text-wrap-style: balance */
.body-copy   { text-wrap: pretty;  }   /* = text-wrap-style: pretty  */

/* Longhand equivalents */
.headline {
  text-wrap-mode: wrap;
  text-wrap-style: balance;
}

/* Old pre-spec Chrome syntax (still works) */
.legacy { text-wrap: balance; }        /* same result, different path */

/* Detect support */
@supports (text-wrap: pretty) {
  p { text-wrap: pretty; }
}

see also