notecss
This line of code is about to be in every single stylesheet.
h1, p, button {
text-box: trim-both cap alphabetic;
}
Centering in CSS is about to get even finer grained.
65 likes
17 reposts
I'm in love, and pretty sure you will be too: #CSS `text-box` more demo's and a one-liner you're going to include in your CSS fo sho, on my site ⤷ nerdy.dev/text-box-ftwAdam Argyle
currently behind a flag in Canary and Safari!
here's boxes with equal sides of padding. the ones actually in the center are trimmed to the cap size of letters
Adam Argyle
another example. without trim, there's dead space above and below the lines of text ✂️
now half leading will be optional instead of the only option
Interesting. I like the border effect. And the rotated text - kewl!Bob Dinitto
I always second guess my CSS when I see this. Love this fix!Zach Neibaur
@argyleink it is time that all browser see the importance of this. it is such a pain to align several fonts with each other or icons
bmsuseluda
@argyleink It sounds exciting but tbh, without context, or a browser that supports it, I don't get it.
Mikael Gramont
Yes! Been waiting for this for so long. The Seek folks did an amazing job with the Capsize lib, but it’ll be great to have this finally available natively.Jeff Stranding
Always designing in browser first! Wow this is nifty!!Tim Holman