---
title: Modern Soft Wrapping & Zero Tracking
description: "text-wrap: pretty orphan prevention, balance heading symmetry, banning hard breaks, and zero tracking on body copy."
---

# Modern Soft Wrapping & Zero Tracking

The refinement of typography surfaces in the subtlest line breaks and letter spacing. Arbitrary manual breaks and loose tracking silently degrade interface quality.

## The Visual Flaw of Typographic Orphans

In descriptive cards or modals, a paragraph frequently concludes with **a single orphan word or lonely punctuation mark trailing on the final line**.
These orphans unbalance the bottom boundary of the paragraph, leaving awkward negative space that reads unpolished.

## Modern CSS Soft Wrapping: pretty and balance

According to MDN's compatibility data, `balance` works from Chrome 114, Firefox 121 and Safari 17.5; `pretty` from Chrome 117 and Safari 26, and Firefox does not support it yet. Browsers without support simply wrap as `wrap` does. TuffEx components do not declare `text-wrap` today; the header of these docs (DocHero) uses both:

:::TuffCodeBlock{lang="scss"}
---
code: |
  // apps/nexus/app/components/docs/DocHero.vue (excerpt)
  // Title: keep the lines close in width
  .docs-hero__title {
    text-wrap: balance;
  }

  // Description: keep the last line from holding a word or two
  .docs-hero__desc {
    text-wrap: pretty;
  }
---
:::

- `text-wrap: balance`: The layout engine minimizes character variance across lines, rendering harmonious inverted-pyramid or balanced blocks; Chrome applies it only to text of six lines or fewer.
- `text-wrap: pretty`: Targets terminal orphans. When a single trailing word is detected, it pulls the preceding word down to form a balanced couplet.

## Banning Hardcoded Line Breaks

**Injecting artificial `<br>` or `\n` into dynamic copy is strictly prohibited**!
Hard breaks hardcode current viewport assumptions into text models. When users resize windows, hard breaks split sentences prematurely, destroying readability. Wrapping belongs strictly to the engine's soft-breaking algorithms.

## Zero Tracking on Body Copy and Permitted Exceptions

Type foundries spend years tuning kerning pairs (e.g. `AV`, `To`, `We`). Injecting `letter-spacing: 1px` onto body text does not remove those pairs: CSS adds the 1px between adjacent characters on top of kerning, diluting the rhythm the foundry tuned. CSS Text also says that once letter-spacing is non-zero, browsers should stop applying optional ligatures such as `fi` and `fl`.

TuffEx mandates: **Zero tracking on body text**. Letter-spacing is permitted strictly across three edge cases:
1. **≤11px Uppercase Micro-labels**: Prevents small caps from collapsing together. `TxSidebarNav` group labels at 10.5px and `0.08em`, `TxSelect` group labels at 11px and `0.06em`, `TxCodeBlock` language labels at 11px and `0.04em`; `TxTag`'s 11px labels keep `0.05em` too.
2. **≥17px Titles and Display Numerals**: Tightens large type, always by `-0.01em`. `TxInsightMetric` values and `TxBlowDialog` titles at 17px, `TxModal` and `TxBottomDialog` titles at 18px, `TxStatCard` values at 28px.
3. **Centered Avatar Initials** (`TxAvatar` at `0.02em`): The glyph functions as graphic art rather than prose.

:::TuffDemoWrapper{demo="ConceptTextWrapDemo"}
:::