notecss
My text-box article is live!
https://developer.chrome.com/blog/css-text-box-trim
Did you miss my text-box prediction?
Don't miss this interactive notebook, helpful for feeling out the effects and edge cases.
112 likes
34 reposts
#CSS text-box a very exciting feature! available in: Chrome 133 & Safari 18.2 My post on Chrome Developers: developer.chrome.com/blog/css-tex... ↪ nerdy.dev/text-box-trimAdam Argyle
5 minutes with this text-box syntax and feature explorer is all you need to ramp up! nerdy.dev/notebook/tex...Adam Argyle
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. ????Rasmus Schultz
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...Sangeeth Sudheer
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
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.Donnie D'Amato
Literally this. It's literally HyperText Markup Language. Designed to basically be an early way to create scientific documents in a readily sharable format.sɴᴅƨ
About damned time. I can just about justify forcing this on all my design tokens. Just need FF and Edge.
Very cool! Any developer who works off Adobe XD reference files should be shouting at Firefox all day long about getting this adopted. The text boxes in XD made pixel-pretty-close a mathematical puzzle involving font-height (half, if memory serves?) and neighboring columns paddings/margins. No more!John Williams
In Chrome (v131 with text-box-trim flag), `border` seems to disable `text-box`. Is that expected behavior? codepen.io/samlittlefai...Sam Littlefair
It's most likely a matter of priority. We didn't need hacks to put readable text on a page, we did need them for layout up until flexbox in 2010. All the things we're getting now in 2025 are honestly nice to haves.
