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?

I highly doubt it. Bitmap images (which is the vast majority of images) are rectangular (whether they have transparent parts or not). And CSS and HTML are pretty heavily "box" oriented. — cHao, Feb 03 '12 at 14:10
It might become a real possibility in the future. http://coding.smashingmagazine.com/2011/12/15/six-css-layout-features-to-look-forward-to/#exclusions (scroll down a bit) — Per Salbark, Feb 03 '12 at 14:19

Dave · Accepted Answer · 2018-10-19T17:18:14.040

12

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.

edited Oct 19 '18 at 17:18

answered Feb 03 '12 at 14:13

Dave

28,833
23
113
183

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Donald Duck Apr 25 '19 at 09:15
@DonaldDuck I agree, but in this case, it's not really a "how can I make this specific thing" happen. It needs more of a full tutorial answer. If/when the link becomes broken, I (or anyone) can update it with a new one. Not ideal, but I think it's okay in this case. – Dave Apr 26 '19 at 13:30
1

@Dave You could write a long answer explaining in detail what to do. Or you could quote that entire page in a blockquote like they did [here](https://stackoverflow.com/a/58967/4284627). – Donald Duck Apr 26 '19 at 14:56
1

I don't disagree.If someone wants to write a more detailed description for this one, I think that's fine, and would even up-vote them. Just doesn't seem worth the effort for this particular question. – Dave Apr 26 '19 at 15:38

score 3 · Answer 2 · edited Sep 27 '12 at 10:33

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.

edited Sep 27 '12 at 10:33

Stephan

41,764
65
238
329

answered Aug 21 '12 at 16:13

cpmsmith

59
1
6

As of March 2016 CSS3 exclusion is still not usable: http://caniuse.com/#search=css%20shapes%7Cexclusion – Pit Mar 04 '16 at 10:27

score 1 · Answer 3 · answered Mar 24 '14 at 18:15

1

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

answered Mar 24 '14 at 18:15

Sean

369
1
4
15

score 0 · Answer 4 · answered May 28 '14 at 12:31

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.

score 0 · Answer 5 · answered Oct 20 '22 at 21:30

0

There's the well-supported shape-outside CSS property. You can even just give it the PNG and it'll figure out the shape from the alpha channel.

answered Oct 20 '22 at 21:30

Lawrence Kesteloot

4,149
2
31
28

How can I wrap text around a non rectangular image?

5 Answers5

Linked

Related