7 ms·
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
by Klathmon 9y ago
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-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...
[1] https://jsfiddle.net/c1ffdpgq/2/ https://jsfiddle.net/c1ffdpgq/2/
- TremendousJudge 9y agoYour example doesn't work in Firefox (text doesn't wrap properly), but it does in Chrome