Thursday, September 18th, 2008
Jacob Seidelin has implemented Sandbag text wrapping with Canvas allowing the text to flow nicely around an object:
With CSS you can make text wrap around an image using the float property and for most purposes this is quite adequate. However, it doesn’t take into account the actual image and treats it as one big block, even if you’d prefer the text to wrap around the actual content in the picture, magazine style.
Along came a technique called sandbag DIVs (first published by Rob Swan a few years ago, I believe) that solved the problem for those odd cases where you need something fancier than float:left. The idea is to build a structure of virtual “sandbags” out of DIV elements and then let the text flow around those instead of the image. This can be done either manually for each image or with a serverside script as shown in the ALA article.
Using the small script linked below you simply give your image a CSS class of either “sandbag-left” or “sandbag-right”, depending on how your image should float. If the browser does not support Canvas and image data access, a fallback mechanism simply sets the CSS float property to “left” or “right”, degrading to the old rectangular text wrap.
Posted by Dion Almaer at 7:37 am