flow text around a transparent png with css/jquery/anything

Question

For now, i have:

<img style="float:right;" src="/path/to/image.png">
<p>lorem ipsum dolor</p>

Which nicely sets the image right and the text around it. Is it, however, possible to 'flow' text around the actual contents of an png image, ignoring the transparancy?

It now looks like this:

I would like it to look like this:

Possibilities i see:

1) Manually add breaks

Almost impossible for dynamic content;

2) Have php add breaks after a set number of characters

Very complex, and it would need to be determined for every image;

3) Another way someone here knows about

Does anyone have any experience with situations like this?

Thanks in advance!

Answer 1

The only conceivable way I could think of for wrapping text around images without hardcoding anything is to enlist the help of jQuery. There is a plugin called jQSlickWrap - it might be the solution that you're looking for. However, it does require HTML5 support on the browser's behalf, so it will not work for IE users as of yet.

Answer 2

The "right" way to do this is CSS3 Shapes / Exclusions (shape-outside/inside, etc.).

Unfortunately as of April 2013 these have not yet been widely implemented. Chrome/Webkit has a test in its canary builds. Perhaps Mozilla will follow on.

Answer 3

Any automatic breaking point detection would involve very complex edge detection, text-metrics and flow computation which are TOO complicated for little gain.

The only feasible way that comes to my mind is to manually approximate the image with a few floating boxes (DIVs) that overlay the image (using HTML+CSS).

Answer 4

This is definitely possible. You just need to create blank elements with a height equal to the line-height of text and the width of where you want the text to break. Then float these elements in your text, with a clear: both CSS style and have your image be absolutely positioned with a z-index under the text.