How to Inspect CSS text-wrap: pretty and balance in Safari Web Inspector

Typographic orphans—single lingering words left stranded on the final line of a paragraph or heading—degrade editorial presentation and disrupt natural reading cadence. Historically, designers resolved typographic orphans using manual non-breaking spaces ( ) or brittle JavaScript formatting scripts. CSS Text Module Level 4 introduces native typographic wrapping controls via text-wrap: balance and text-wrap: pretty. Safari Web Inspector provides visual tools to inspect line-breaking calculations and verify responsive typography.

Understanding text-wrap: balance vs text-wrap: pretty

Modern CSS provides two complementary algorithms to solve distinct typesetting challenges:

• text-wrap: balance: Designed specifically for headings, captions, and short promotional callouts (bounded to 4–6 lines). The browser computes all possible line break permutations to equalize the horizontal length of each line, producing an aesthetically balanced block.
• text-wrap: pretty: Designed for multi-line body prose. Unlike balance (which reshapes all lines), pretty evaluates only the final four lines of a paragraph, adjusting hyphenation and word placement just enough to prevent a lonely orphan word on the last line.
• Performance Boundaries: Balancing lines requires iterative layout passes; hence, browsers deliberately clamp balance on long paragraphs to preserve 60fps scrolling performance.

Configuring Safari Web Inspector for Typographic Inspection

To inspect line wrapping rules in Safari:

1. Open Safari and launch Web Inspector by pressing Option + Command + I.
2. Select the Elements tab.
3. Click the target heading or article paragraph in the DOM tree.
4. In the right-hand sidebar, switch to the Styles panel.
5. Switch to the Computed panel to verify effective typographic properties.

Inspecting text-wrap Declarations in Practice

Review the CSS styling rules applied to titles and article content:

/* Headline styling with balanced line lengths */
.article-headline {
  font-size: 2.25rem;
  line-height: 1.25;
  text-wrap: balance;
  max-width: 680px;
}

/* Body paragraph styling preventing orphans */
.article-body p {
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

Inside Safari Web Inspector:

1. Select .article-headline: locate text-wrap: balance; in the Styles panel.
2. Toggle the checkbox beside text-wrap: balance to observe before-and-after line length symmetry in the browser viewport.
3. Resize the browser window or use Responsive Design Mode (Command + Option + R) to verify that headings re-balance smoothly across diverse device widths without overflowing.
4. Select .article-body p: verify that text-wrap: pretty is active and confirmed in the Computed styles panel without fallback warnings.

Diagnosing Common Typography Pitfalls

When line wrapping rules fail to produce balanced lines:

• Line Limit Caps: If a heading exceeds 6 lines, Safari automatically falls back to standard greedy line breaking (text-wrap: auto) to prevent layout freezing.
• White-Space Conflicts: Ensure white-space: nowrap or overflow-wrap: anywhere is not declared on the same element, which overrides wrapping algorithms.
• Container Width Constraints: If the container width is too narrow to hold two words on any line, balancing algorithms cannot split words without CSS hyphenation enabled (hyphens: auto).

Validating Progressive Enhancement and Browser Fallbacks

Older browser engines simply ignore unsupported text-wrap properties and render standard greedy line wrapping without throwing errors. You can declare conditional enhancement rules using @supports:

@supports (text-wrap: balance) {
  h1, h2, h3 {
    text-wrap: balance;
  }
}

Safari Web Inspector visually verifies that modern typographic rules apply cleanly, ensuring polished editorial presentation across all devices.