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 "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.