v133 · css

CSS text-box, text-box-trim, and text-box-edge

To achieve optical balance of text content, the text-box-trim and text-box-edge properties, along with the text-box shorthand property, make finer control of vertical alignment of text possible.

concepts

  1. text-box-trim

    text-box / text-box-trim / text-box-edge — surgical control over the leading whitespace baked into text runs. Stops the perennial 'why does my heading have extra padding' bug.

  2. Button & card fit

    The three places designers actually hit the half-leading bug: pill buttons, big number tiles, and coloured card headings — toggle the trim and see the visible glyph centre snap into place.

  3. Edge keyword matrix

    text-box-edge takes a pair of keywords — cap/ex/alphabetic/text/ideographic. Choose any combination and watch the rendered box reduce to those optical references.

  4. Icon baseline aligner

    Icon + text pills, stat tiles, and tabs are the worst sufferers of half-leading. Toggle text-box: trim-both cap alphabetic on and watch optical centres line up.

  5. Typographic Rhythm

    A full article layout showing how half-leading inflates spacing between headings and body paragraphs. Toggle text-box: trim-both and see that spacing comes from margins alone — not from invisible font padding.

  6. Component Spacing

    A design system component kit — buttons, cards, badges, list items — with trimming on/off toggle and bounding-box overlay. Shows exactly where half-leading inflates component height and how trim makes padding intent precise.

why it shipped

To achieve optical balance of text content, the text-box-trim and text-box-edge properties, along with the text-box shorthand property, make finer control of vertical alignment of text possible.

references