Polishing Editorial Paragraphs with CSS text-wrap Pretty
Typographic orphans—single words left isolated on the final line of a paragraph or article column—have plagued responsive digital typesetting for decades. In traditional print publishing, skilled compositors manually adjusted tracking, hyphenation, and word spacing to ensure a pleasing rag along the trailing margin. On the web, where screen widths, fluid layout containers, and user-selected zoom levels fluctuate continuously, relying on non-breaking spaces ( ) or brittle manual line breaks frequently created awkward line breaks on mobile viewports.
While the CSS property text-wrap: balance was introduced to solve visual imbalance, it was specifically engineered for short titles and headings. Because balancing requires iterative binary search calculations across every line break, browsers cap its application to blocks of six lines or fewer to prevent severe layout thrashing. The CSS Text Module Level 4 introduces text-wrap: pretty specifically for editorial body copy and long-form prose. Rather than balancing the entire block, the engine selectively inspects the final four lines of a paragraph, nudging line breaks to eliminate lonely orphans without sacrificing rendering performance.
Example
/* Balance short headings without orphan words */
h1, h2, h3 {
text-wrap: balance;
}
/* Eliminate typographic orphans in body copy and long-form text */
p, li, blockquote {
text-wrap: pretty;
}Implementation
/**
* Modern Editorial Typography Architecture
* Leveraging text-wrap: balance and text-wrap: pretty with progressive enhancement
*/
.editorial-article {
max-width: 68ch;
margin-inline: auto;
padding-inline: 1.5rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-prose-text, #1e293b);
line-height: 1.75;
}
/* 1. Headings: High-impact balancing for short line counts */
.editorial-article h1,
.editorial-article h2,
.editorial-article h3 {
color: var(--color-prose-heading, #0f172a);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
margin-block-start: 2em;
margin-block-end: 0.75em;
/* Balances line lengths evenly across titles (limited to <= 6 lines) */
text-wrap: balance;
}
/* 2. Body Copy: Orphan prevention without full rebalancing cost */
.editorial-article p {
margin-block-end: 1.5em;
font-size: 1.125rem;
/* Evaluates the final lines to prevent single trailing words */
text-wrap: pretty;
}
/* 3. Pull quotes and callouts */
.editorial-article blockquote {
margin-block: 2rem;
padding-inline: 1.5rem;
border-inline-start: 4px solid var(--color-accent, #3b82f6);
font-size: 1.25rem;
font-style: italic;
color: var(--color-prose-muted, #475569);
/* Ensures quote attribution and lines do not strand lone words */
text-wrap: pretty;
}
/* 4. Progressive enhancement fallback check */
@supports not (text-wrap: pretty) {
.editorial-article p {
/* Graceful degradation maintains natural browser wrapping */
text-wrap: wrap;
}
}Main Point: Modern CSS text-wrap: pretty eliminates typographic orphans across multi-line paragraphs by evaluating only the final four lines, avoiding the heavy performance cost of full balancing.
Credits
Photo by Derek Thomson on Unsplash