Post

Finally catching up on this! But is there no syntax for "trim at the edge of the current text, whatever it is?" Some fonts have characters that don't fit neatly on the cap/ex lines…

there is syntax for it; but 100%, some fonts simply won't / can't benefit from it nerdy.dev/notebook/tex... you can change fonts there and see which provide good data to the browser engine and which don't (or intentionally don't)

Love the post! Thank you! Question: Is it possible to apply some sort of prefers-reduced-motion rules to the page to stop the animations or only play them on hover? I realize this might be a platform thing, not post thing, of course.

oh like the video's from auto playing? a very hot/cold UX thing; some folks love it and some hate it you could try an extension that pauses all video/gifs on a page, regardless of muted autoplay but no, OS's / prefers reduced motion doesnt do anything for autoplaying gifs or videos. not yet?!

Yep, exactly! Applying reduced motion at the OS level doesn't do anything for that page, unfortunately. I'll have to take a look if there are extensions, but I thought I'd ask in the mean time to see if it were possible for the chrome blog, since it's a fairly standard place for really good stuff.

5 minutes with this text-box syntax and feature explorer is all you need to ramp up! nerdy.dev/notebook/tex...

Is there an equivalent for the X-axis? Dealing with a particularly annoying left edge alignment issue using a specific font face and wanting to avoid negative left margin on all headings

there isnt… a couple variable fonts have a setting for it, but it's super rare. in my Super Rad Design demo i use margin-inline: -.1ch or some "magic value" like that to fix this inline space. the engineer and i researched this more and we don't know of a good way to expose this space

this is one of those things, when you realize how important this is, you have to ask... why did CSS have such a weird, awkward text model to begin with?? 😅 this is super effin cool, I'm so excited this is finally landing. now we just need Firefox and Edge to pick it up. 😁

Documents. The original idea was probably to make document writing easier so styles wouldn't be needed to set leading and be able to just get something that looks ok for academic papers.

okay, but that changed at least 20 years ago, when web design started becoming important how did it take 20+ years before someone realized how fonts work and decided to fix the web 😅

Doesn’t Edge get this by being Chromium based?

In Chrome (v131 with text-box-trim flag), `border` seems to disable `text-box`. Is that expected behavior? codepen.io/samlittlefai...

Yay! 1. Are MDN docs yet to be written for this? 2. Is there a way to do trim the space horizontally as well using this or is that missing? I tried this on Safari 18.2 but there's still some space at left/right edges: jsbin.com/qivegoziqo/1...

1. they aren't! 2. there isn't… and i've heavily researched this as I also wanted to trim the inline sides. some variable fonts offer a setting that has this information. but it's like 0.07% of the variable fonts we looked at. until then, we'll `margin-inline: -.25ch` or something