There's actually a CSS property just for this called `shape-outside` [0].

It lets you define a shape of an image (or other element) that makes it so when it is floated, other elements can wrap up against it correctly.

[1] is an example I just quickly made to show how the linked page could have been done in straight CSS. It works a bit nicer too as the text smoothly wraps instead of stepping like the linked article does (although there is no reason why both methods can't be combined to provide a smooth stepping where possible, and fallback to the approximation they used when it's not supported)

It's browser support is pretty awful right now (only chrome, safari with the `-webkit` prefix, and basic support in firefox behind a flag), but if it makes it to standardization, it's a pretty neat tool to be able to reach for in these cases.

If there were an easier way to see if the website itself was open source, I'd try and give it as a quick patch, but it doesn't look like the website itself is open source anywhere that I can find.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...

[1] https://jsfiddle.net/c1ffdpgq/2/

Your example doesn't work in Firefox (text doesn't wrap properly), but it does in Chrome

On desktop firefox you need to enable a flag in the browser for it to start working (at least that's what MDN says, I didn't try it)

It does work on latest Firefox for Android. Text curves well.

That's a clever solution! There's an experimental way to do this in CSS - but it's not well supported yet:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...

And likely this can be done with SVG as well.

That brings me back. I remember Dreamweaver or Frontpage used to do this automatically in the late 90's, I was blown away and used it everywhere.

That, and image maps.