VoxVlog

July 6, 2023

Fit-to-Width Text (from Roman Komarov) is a full-blown 5-star bonafide CSS trick if there ever was one. The idea is “size text to the container” in CSS alone (at least scale it down if it’s too big/long. The trick is a “scroll-driven animation” and text that overflows a container. As it overflows, it scrolls, thus triggering the animation, which scales the text down. Simpler than you’d think!

In a bout of coincidence, Dave was just talking about “text sqwunching” in a recent show. Blog post titles are the use case. Some are very short, and those should be sized larger. Some are very long, and those should be sized smaller.

I remember doing that in PHP (and/or jQuery) back in the day. It would split the headline by characters, count them, then apply a class used to size the text. Just a little “hack” to pull something off that CSS can’t do alone. Always cool to see stuff like that come back home. CSS is for design, after all.

It turns out that scroll-driven animation fanciness Roman is doing has more tricks up it’s sleeve. Position-Driven Styles, as it were. Great name! Staggering and distributing things turn out to be interesting things you can do. The trickery keeps rolling here with Bramus getting involved with Faking a :snapped selector with Scroll-Driven Animations. I would not have guessed this API would unlock such clever ideas.

If the sqwunching caught your eye, here’s Dave’s take (using JavaScript to inject spans and then using essentially quantity queries to size things). The ShopTalk Show Discord got involved and it was Web Componentized by ginger. I also like this really compressed version from Douglas Johnson using the character count set in JavaScript and used in a container units calculation.

Related

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgbHxxgo6smqunnKF6pb7Ir5ynZZGjtq6t06Kmp2Wkp7akt4yfpqtllp7BbsDOZq6inKSderWx161m