This is really neat from Terence Eden: you can use...

This is really neat from Terence Eden: you can use text-wrap: balance for icons as well as text https://shkspr.mobi/blog/2024/10/you-can-use-text-wrap-balance-on-icons/

Inspired by this I put together an interactive prototype using it for text-based navigation items, seems to work well for that too!

Try the prototype here: https://tools.simonwillison.net/text-wrap-balance-nav

More notes: https://simonwillison.net/2024/Oct/20/you-can-use-text-wrap-balance-on-icons/

https://mastodon.social/@Edent/113339538024245344

Like 20 October at 14:01 | Open on fedi.simonwillison.net

5 comments

George Lund

@simon the result on Firefox mobile is a slightly distressing amount of horizontal scroll for some reason, which rather spoils the effect!

20 October at 20:40 | Open on urbanists.social

Simon Willison

@georgelund oh interesting, could you send a screenshot?

20 October at 21:14 | Open on fedi.simonwillison.net

George Lund

@simon don't know if that's useful

20 October at 22:39 | Open on urbanists.social

Simon Willison

@georgelund aha, looks to me like that phone has a default screen width that's less than 400px wide. I've just pushed an update that includes a max-width: 100% that should fix that

20 October at 23:21 | Open on fedi.simonwillison.net

George Lund

@simon well that worked. But CSS pixels are a mysterious beast, this is a Pixel 8a which definitely has a higher actual resolution than that!

21 October at 5:02 | Open on urbanists.social