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 establishes both as system defaults: its style entry provides four text utility classes, .tx-heading, .tx-prose, .tx-description and .tx-help-text, and TxModal declares balance on its title itself.

// packages/tuffex/packages/components/style/index.scss
// 1. Headings and short titles: keep the lines close in width
.tx-heading {
  text-wrap: balance;
}

// 2. Body prose, descriptions and help text: keep the last line from holding a word or two
.tx-prose p,
.tx-description,
.tx-help-text {
  text-wrap: pretty;
}

// packages/tuffex/packages/components/src/modal/src/TxModal.vue
.tx-modal__title {
  text-wrap: balance;
}

Give a heading tx-heading, a description tx-description and the help text under a form field tx-help-text, and put tx-prose on the container of a run of rich text (it applies to the <p> elements inside). TxCard has no title element of its own (its title comes in through the header slot), so give a card title tx-heading. The header of these docs (DocHero) does the same: balance on the title, pretty on the description.

• 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.

Streaming output is the exception: a paragraph still receiving tokens keeps plain wrap and switches to pretty once it is complete, so each arriving word does not re-run the whole paragraph's line breaking. TxStreamElement switches its paragraphs and headings this way; TxStreamText does the same where it is itself a block container (a block tag, or a reserve playback), and inside a host's paragraph the host's paragraph decides. Both set the longhand text-wrap-style, leaving a host's nowrap alone; by MDN's compatibility data its pretty works from Chrome 130 and Safari 26, and browsers without it wrap as wrap does.

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.