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.
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!
5 Responses to "Image wrapping script"
Hey Will,
I can't download the code :(
Here is the message by the server : error 403 Forbidden (Directory index forbidden by rule: wrapimg/)
Sorry about that, give it a try now...
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! :)
This is great. I can't wait to find an excuse to use it.
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.