Summary:
The text-box-trim and text-box-edge CSS properties (and associated text-box shorthand) allows authors to control the leading space above and below text, enabling simpler and consistent vertical spacing and alignment.
We intend to enable these functions in Firefox Nightly builds behind the layout.css.text-box.enabled pref.
Note that this feature is still in development. Block trimming and inline box trimming is implemented, but multi-column support is still in progress.
Bugs:
Bug 1816038 - [css-inline-3] Implement `text-box-trim` (formerly `leading-trim`)
Specification:
https://drafts.csswg.org/css-inline-3/#text-box-trim
Standards Body:
CSSWG / W3C
Platform Coverage:
All
Preference:
layout.css.text-box.enabled — Bug 2050138 to enable in Nightly
DevTools Bug:
N/A
Extensions Bug:
N/A
Use Counter:
css_text_box_edge and css_text_box_trim
Standards-Positions Discussion:
https://github.com/mozilla/standards-positions/issues/1105 — Positive
Other Browsers:
- Blink: Shipped since Chrome 133 (note: missing inline box trimming support and ideographic / ideographic-ink support)
- WebKit: Shipped since Safari 18.2 (note: missing multi-column support and ideographic / ideographic-ink support)
web-platform-tests:
https://wpt.fyi/results/css/css-inline/text-box-trim - Existing test suite is being amended to add tests for inline box trimming, trim propagation into block formatting contexts, and ideographic / ideographic-ink edges.