How can I wrap text around a non rectangular image?

Question

Is it possible to wrap text around a non rectangular image?

I want text around maps of different countries to wrap around the country's shape in such a way that the text always keeps the same distance from the country's border even though the border itself isn't straight.

Is this possible?

Answer 1

You can use this method, where you float divs to block off the shape's area.

So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.

Answer 2

It looks like that kind of support is on the horizon.

As Dave said, there is CSSTextWrapper, which is probably the best way to do it at the moment, but a relatively recent W3C working draft outlines a method to use more complex shapes using SVGs, and perhaps raster images with outline detection.

How long it will take for it to be implemented in major browsers, let alone finished, is anyone's guess.

At the moment, it can be done, with difficulty. With luck, it will be much easier in the future.