CSS Inline `text-box`, `text-box-trim`, `text-box-edge`

[kojiishi]

WebKittens

@fantasai @nt1m

Title of the proposal

CSS Inline text-box, text-box-trim, text-box-edge

URL to the spec

https://drafts.csswg.org/css-inline-3/#leading-trim

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

https://kojiishi.github.io/explainers/text-box-trim

TAG Design Review URL

w3ctag/design-reviews#1021

Mozilla standards-positions issue URL

mozilla/standards-positions#1105

WebKit Bugzilla URL

No response

Radar URL

No response

Description

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.

[nt1m]

I'll mark this as position: support pending objections week from now.

[Schweinepriester]

Shipping this already is probably even better than just marking as support? :D

https://webkit.org/blog/16301/webkit-features-in-safari-18-2/

Originally called "leading trim", this feature is now simply text-box. It's a shorthand for two longhands properties--- text-box-trim and text-box-edge --- which you can declare separately if you need to control how each cascades. Safari 18.2 is the first browser to ship Text Box

👏

[argyleink]

ISSUE 12 in the spec draft says "Do not ship (yet)."?

https://drafts.csswg.org/css-inline-3/#leading-trim

[Schweinepriester]

ISSUE 12 in the spec draft says "Do not ship (yet)."?

https://drafts.csswg.org/css-inline-3/#leading-trim

Chrome is also just shipping :D

• https://groups.google.com/a/chromium.org/g/blink-dev/c/4NeTpgsi64A/m/hDMkvOs2AQAJ
• https://chromestatus.com/feature/5174589850648576

[jensimmons]

Safari shipped text-box, text-box-trim, and text-box-edge today, Dec 11, 2024.

[yisibl]

@jensimmons @fantasai I was wondering if Safari supports ideographic and ideographic-ink? I haven't seen a demo for it.

[yisibl]

@kojiishi I've noticed that it works differently in Chrome canary than Safari, can you investigate this before Ship?

https://codepen.io/jensimmons/full/gbYMERz/d04ddec1bd31a5ce3792d3bfcb34dffb