Orphan words

Orphan words

Prevent single short words (and short trailing phrases) from sitting alone on a line. Prefer CSS first; use hand-authored glue for what CSS cannot fix. Do not invent a JS rewriter or CSS orphans/widows unless the project already uses them.

Quick Reference

Category	When to Use
CSS wrapping	text-wrap: balance / pretty, Tailwind classes, when to skip
Editorial glue	 , phrase binders, false positives

Workflow

1. Check the measure — a too-narrow column causes orphans that no glue fixes cleanly; confirm the container has a sane measure before patching text
2. CSS role split — headings/short titles → text-wrap: balance; body/ledes/meta → text-wrap: pretty; contenteditable/animated text → text-wrap-style: stable
3. Preserve existing glue — keep   and nowrap binders when editing nearby copy; re-apply the same rules to new sentences
4. Editorial   — glue short function words, multi-word titles/units, and end-of-phrase clusters (not a pure “last two words” rule); scope to non-translated copy only
5. Phrase binder — wrap preposition + linked name in white-space: nowrap (e.g. .text-bind)
6. Skip false positives — animation spaces, date/sr-only nowrap, print orphans/widows, CJK/non-space-delimited scripts
7. Verify — check the result at a narrow and a wide viewport (e.g. ~360px and ~1440px); confirm no new orphan or overflow was introduced by a binder or  

Core principles

1. CSS before content hacks

Let the browser improve wrapping first. Hand   only for residual orphans CSS cannot fix (short words, titles, linked phrases).

2. Balance headings, pretty body

Text role	Property
Headings / short titles	text-wrap: balance
Body / multi-line prose	text-wrap: pretty

3. Glue with intent

Not every space needs  . Target short function words (a, the, to, from, for, of, I, …), multi-word titles (Series B), and short trailing clusters that would orphan.

4. Bind linked phrases

Keep at Company (and similar) together with a nowrap wrapper so the preposition does not strand alone before a link.

5. Fix what's visibly bad, not everything

Chasing a perfectly even rag on every paragraph is its own defect (Butterick's rule). Apply this stack where an orphan actually reads as awkward, not as a blanket pass over all copy. Scope is English/Latin-script, non-translated copy by default — see editorial.md for i18n and CJK caveats.

Examples

<span class="text-bind">at <a href="...">Klarity</a></span> from&nbsp;first prototype until Series&nbsp;B.

I’m a product design leader … from prototype to Series B … I work with founders …

as a product partner … before the first design hire … when it’s time to scale.

Anti-patterns

Mistake	Fix
Join last two words of every paragraph via script	Prefer pretty + selective  
Over-nbsp mid-sentence on wide viewports	Glue only short words / titles / last-line clusters
Long nowrap binders	Keep binders short; avoid overflow on narrow screens
Stripping   during cleanup	Preserve glue when rewriting copy
CSS orphans/widows or a JS rewriter	Use this stack unless the project already differs
  hardcoded into i18n-sourced strings	Scope glue to non-translated copy; see editorial.md
balance/pretty applied blanket to CJK copy	Can break mid-word; see css.md
Chasing a perfect rag on every paragraph	Fix only visibly bad orphans

Review checklist

• Column measure checked before reaching for glue
• Headings/titles use text-wrap: balance
• Body/ledes/meta use text-wrap: pretty
• Short function words and titles glued with   where needed
• Preposition + linked name uses a nowrap binder
• Existing   / binders preserved
• No animation/date nowrap mistaken for orphan prevention
•   not hardcoded into translated/i18n-sourced strings
• balance/pretty not applied blanket to CJK or non-space-delimited scripts
• Checked at a narrow and wide viewport after changes

Reference files

• css.md — balance / pretty, Tailwind, browser notes
• editorial.md —  , phrase binders, false positives