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

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

There's a jQuery plugin called Bagon designed to do exactly this.

Answer 3

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.

Answer 4

As others have already said: yes, it's possible... but it's not so difficult.

Customers tend to like this kind or wrapping, at the end I made a script for it: http://www.miguel-svq.com/textwrap.html

This can use floating divs or slice the image, as you prefer.