leading-trim in CSS (now text-box)

It's part of the CSS Inline Layout Module Level 3, and allows you to control the half-leading for better better visual alignment of text.

This is the native solution to what Capsize aims to achieve. Text reserves space based on the font's cap height (or other heights), not just the line height. Line heights can get particularly tricky when you need your component to be a certain height, but using a [[20240711115020-unitless-line-height]] gets you a decimal value, which may round strangely. #todo - better explanation

https://github.com/w3c/csswg-drafts/issues/3240 https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

As of 2025, this has started to be implemented as text-box-trim and text-box-edge. The former lets you choose if you trim the start/end, and the latter picks what you trim (e.g. cap, ex, etc). #todo - examples

There's some good imagery in https://drafts.csswg.org/css-inline-3/#text-edges

https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-trim

[[20210726164300-line-height-css]]

[[css]] [[typography]]