Search code examples
jquerycssimagetransparency

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

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:

before

I would like it to look like this:

after

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!

Solution

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