Leo

I’m real excited about <code>text-box</code>, a new CSS property that helps with text alignment and layout. You might remember whispers about <a href="https://css-tricks.com/leading-trim-the-future-of-digital-typesetting/"><code>leading-trim</code></a> from a few years back and this new syntax has replaced all that. I first spotted this bad boy on <a href="https://webkit.org/blog/16301/webkit-features-in-safari-18-2/">the Webkit blog</a> the other day: <pre class="language-css"><code class="language-css">h2 { text-box: trim-start cap; }</code></pre> This will trim the space above headings so that we no longer have to do any weird <code>margin-top: -3px</code> shenanigans to align some text with an image. Over on Piccalilli, Jason Bradberry has an in-depth walkthrough of <a href="https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/">text boxes on the web</a> where he shows how handy this property might be in the case of buttons, too. Like this: <pre class="language-css"><code class="language-css">button { text-box: cap alphabetic; }</code></pre> I’m always fighting the text-box when it comes to buttons in an interface and so hopefully this property fixes all that. Also, this is so handy as a default for some elements that I can see this fitting into CSS resets in the future. <code>text-box</code> is shorthand for two other properties though: <code>text-box-trim</code> and <code>text-box-edge</code> and although I’ve spent twenty minutes now trying to understand their relationship with one another...I’m coming up short. It all feels super confusing to me! So for now I’m gonna stick with the simple <code>text-box</code> shorthand and ignore the complexities of how those other properties overlap. Oh and Jan Nicklas has collected <a href="https://github.com/jantimon/text-box-trim-examples?tab=readme-ov-file">more examples</a> that are worth taking a look at, too.