August 3, 2008 will

Image wrapping script

After posting my latest pie chart image, it occurred to me that it would be pretty cool if the text flowed around the edge of the pie chart image rather than around a rectangle. This is not something that can be done simply with HTML / CSS, but it can be done by breaking the images up in to horizontal slices so that they extend only to the edge of the image, rather than to the absolute border.

Screenshot

If I googled for it, I suspect I could find tools to do this for me -- but where is the fun in that? Instead, I wrote a Python script that uses the Python Image Library to scan an image and output HTML that will allow text to wrap smoothing around the image. No additional images are produced, because the 'slicing' is done with CSS to select the part of the original image that is seen.

Here is the script: wrapimg.zip, and some examples of how to use it:

python wrapimg.py -o left.html sliceofpie.png python wrapimg.py -o right.html -d right sliceofpie.png

These two lines produced left.html and right.html.

The code is completely free, do what you will with it!

Update: I wanted to display an example in this blog-post, but Wordpress insists on re-writing my code and ruining the effect! :-( I should find a blogging system that is more techy-friendly!

Use Markdown for formatting
*Italic* **Bold** `inline code` Links to [Google](http://www.google.com) > This is a quote > ```python import this ```
your comment will be previewed here
gravatar
zentux

Hey Will,
I can't download the code :(
Here is the message by the server : error 403 Forbidden (Directory index forbidden by rule: wrapimg/)

gravatar
Will

Sorry about that, give it a try now...

gravatar
Krys Wilken

Hi Will,

You blog entry reminded me of something I saw a while ago and I was able to dig up the URL: http://www.ideashower.com/ideas/active/css-text-wrapper/. I think it does something similar.

Anyway, I though you might find it interesting.

Enjoy! :)

gravatar
Calvin Spealman

This is great. I can't wait to find an excuse to use it.

gravatar
Greg

Pretty neat. Perhaps you'd consider making it into a web utility on Utility Mill. It should mostly be a cut and paste job to get it running there.