1816038 - [css-inline-3] Implement `text-box-trim` (formerly `leading-trim`)

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[709922234]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0

Comment 1

[Daniel Holbert [:dholbert]]

This property has been renamed to text-box-trim and the spec has been updated.
https://github.com/w3c/csswg-drafts/issues/8067#issuecomment-1493065304

(The anchor link in the spec is still #leading-trim, presumably so that old links continue to work. :) I'm updating the URL to point at the editor's draft so that we've got the latest notes there.)

Also: it looks like some WPT tests were added recently here:
https://github.com/web-platform-tests/wpt/pull/39535
https://github.com/web-platform-tests/wpt/pull/39706

Comment 3

[DamianGlowala]

Firefox is a bit left behind - any ETA for this feature?

Comment 4

[Michael Cummings]

Just want to advocate for prioritizing this. It is baseline on Chrome and Safari. Would greatly improve UX and make the web more beautiful for all 🤩

Comment 5

[Michal Čaplygin [:myf]]

Just want to advocate for prioritizing this.

Staff, correct me if I am wrong, but I guess that's the purpose of the "Vote" button here, right? Is it still relevant? (I see none of the "pingers" here actually used it at this point.)

Welcome to Bugzilla, Michael, by the way! 👋

Comment 6

[Michael Cummings]

(In reply to Michal Čaplygin [:myf] from comment #5)

Just want to advocate for prioritizing this.

Staff, correct me if I am wrong, but I guess that's the purpose of the "Vote" button here, right? Is it still relevant? (I see none of the "pingers" here actually used it at this point.)

Welcome to Bugzilla, Michael, by the way! 👋

Ahhhhh sorry this is new for me. I'll vote.

Comment 7

[DING Zhuocheng]

Attachment: Segoe-UI-vertical-alignment-comparison.png

FYI, this can solve the annoying vertical alignment issue for Segoe UI, the system font of Windows. See https://gitlab.com/gitlab-org/gitlab/-/work_items/16789, https://bugs.openjdk.org/browse/JDK-8115125 for details.

Basically, when you want to vertically align the text in UI elements, such as a button, Segoe UI always feels a bit off. This is because has a very large top half leading compared to its bottom half leading, so the letters appear not centered but a little bit downwards in the text box. The font is intentionally designed this way so that tall letters such as vietnamese letters will never be clipped.

To make Segoe UI visually centered in the Y axis, one can use text-box-edge: cap alphabetic; text-box-trim: trim-both;. This way, the top and bottom half leading are both removed. The result in chrome is shown in the screenshot. Left is Segoe UI with the css tweak, middle is Segoe UI without css tweak, right is Gitlab Sans without css tweak.