CSS leading-trim

[agusterodin]

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.

[nileshprajapati]

Hi All

I was wondering if there is any update on leading-trim spec.

I am very interested in this CSS coming to reality for all browsers.

Thanks,
Nilesh

[dutchcelt]

I'd love to see this in CSS, as it provides a clean, consistent, and purposeful way to align text in various cases. It makes explicit that text flow using the box model is inappropriate and forces developers to implement work-a-rounds to get the text composition to 'behave' in a typographical manner.

This proposal fixes that and will help content become more legible and its context more discernable.

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there was only a single mention of leading-trim, so not enough to make the top list in #248.

However, it came up 13 times (out of 1502) in the question "What features do you feel are currently missing from CSS altogether?" which I haven't fully analyzed yet, but "leading-trim (including trimming side bearing, vertical centering)" is the one with the most detail.

[foolip]

In the MDN short survey on CSS & HTML, "CSS leading-trim property" was selected by ~6% of survey takers, putting it in the bottom third of the 20 options. (There is some uncertainty as with any survey data.)

[foolip]

I searched for "leading-trim" in WPT and it looks like there aren't any tests for it yet, unfortunately.

[nairnandu]

Thank you for proposing leading-trim for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. Leading trim is an exciting new idea in CSS, but the standards process has not yet reached a point where inclusion in the Interop project makes sense. Resubmitting a proposal for this feature as part of a future round of Interop would be welcome.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.