Description

Leading-trim is a new CSS property that works like a text box scissor. You can trim off all the extra space from reference points of your choice with just a few lines of CSS.

Rationale

Developers currently resort to adjusting paddings into their designs to fix alignment issues caused by half leading space that text rendered by browsers includes. As a result, pixel perfect spacing with a design system spacing scale is inherently broken in the web world. The leading-trim property will allow for more accurate spacing when implementing designs and will greatly help designer to developer handoff.

This is elaborated on here: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202.

Specification

https://www.w3.org/TR/css-inline-3/#propdef-leading-trim

Tests

No tests currently exist.