[sings]

I’ve been using a similar technique to display our poll data[1] for several years, although without using grid. If you can measure the text because you know which font will be used, and store the widths of various characters, you can take a little more control over layout too, even while rendering server-side.

I also started writing a simple responsive SVG charting library[2], but the author is right in that there are some fluid layouts that are just impossible to realise with SVG at the moment.

[1]: https://poll.lowyinstitute.org/report/2024/global-powers-and...

[2]: https://stephenhutchings.github.io/shown/

[chrismorgan]

> If you can measure the text because you know which font will be used

If you are using text, you can’t know which font will be used. There are no universally-available fonts, so web fonts are the closest you get, but they could fail to load for various reasons, and it’s honestly more common than people allow for. You can also block web fonts (e.g. uBlock Origin has an entire button for it), or just turn off font selection altogether, in Firefox via Settings → Fonts → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. I did this four years ago as an experiment and have never gone back because it made the web so much better (I did switch back for one week a couple of years ago to convince myself the web really was that awful without it). Not many people will do this deliberately, but it is a thing.

[inbx0]

You could embed your web font inline to the stylesheet, as base64 encoded data url.

    <style>
      @font-face {
        src: url(data:application/font-woff2;charset=utf-8;base64,...) format('woff2');
      }

Your page loading times will obviously take a hit, but that'll give you pretty close to 100% certainty that the font will be used, should you want that.

[chrismorgan]

That resolves one of the main causes of failure, and I generally speak very highly of inlining everything—it has very noticeable performance benefits up to surprisingly large sizes (generally well over 100KB).

Aside, pairing application/font-woff2 with charset=utf-8 makes no sense. It’s a binary encoding.

But I think you’d still be surprised how many browser configurations don’t load web fonts, though I’m sure it’s becoming less common.

[sings]

Knowing which font is used with a hundred percent certainty, maybe not. This probably is something more people should be aware of. But the failure mode might be some slightly awkward line breaks, assuming you allow for the edge case of alternative fonts. And even when the calculation isn’t a perfect representation of the rendered reality, the approximate width is still more useful for layout purposes than going in blind.

Combined with em-based sizing I’ve found this to be pretty robust. Just because you can’t make it perfect for all users doesn't mean you can’t do the work to improve it for many.