Flowing text around an image in HTML

Flowing text around an imageYesterday I wrote a little script (that uses the excellent jQuery library) to flow text around an image in HTML in an unobtrusive way. 

The script dynamically inserts outline DIV elements across an image in the page and then pushes the image into the background. The text then flows around the (invisible) outline DIV elements. The dimensions of the outlines are stored in an XML file in the same directory as its corresponding image to keep things simple. 

I started a Google Code project called flowtext-lib. You can download the archive there. It contains a README file that explains the workings in a more detailed way and also an example HTML file with an image that has text flowing around it.

It was a technique I thought of a couple of years ago but never needed it… well, until yesterday, that is.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: