ALA Sandbags: Revisited

The picture used in this example is A List Apart’s own picture and is used on this blog to show how to create the effect originally posted on ALA.

I recently bought Designing with Web Standards by Jeffrey Zeldman, which I mentioned in an earlier post, and do not stop learning. It is one of the best purchases I have made in a long time. Whenever I take the time to sit down and read a chapter (or two for that matter), I just can’t stop. So, I recently decided to subscribe to the RSS feed of A List Apart to get my fix of web standard compliant advices and tricks to add to my webpage. Last week, I was delighted to find a post on how to create a wrap around text effect, like the one in this post, which I had previously observed in action on Mike Davidson’s site.

I presume that Mike [Davidson] had computed the “sandbags” by hand, which would be fine, I guess, if you only have to do it once or twice a month, but could end up being a very long process. However, the article in question: “Sliced and Diced Sandbags”, promised to automate the process using a little php script, written by the author himself, Rob Swan. Automate the process it did. And very well I might add. It is based on the transparency values stored in png files, but let’s not get into the details. Explaining the nuts and bolts of his script is not the point to my story today.

Installing the Script

So I sat down and read the whole tutorial, in the hope of being able to use the newly acquired knowledge on my webpage. The first step was to copy and paste the script “as is” and to try it on my machine first. Perfect! It worked perfectly. I have to admit that the whole background-image idea in each ‘div’ made it look a little too ugly for me, and reminded me of how Mike [Davidson] did it in his original post.

The New Script

So I decided to update the script to fit this “new” idea from Mike. It turns out it produces much simpler division blocks (divs) and is quite a bit smaller in size. Here is a snippet of the things I have changed from the original script (I obviously had to make it fit the box here and so it looks funny):

echo '<div style="position: absolute;
  background-image: url(' . $imageName . ');
  background-position: -30px -60px;top: 10px;
  right: -60px; no-repeat; width:' . $width .'px;
  height:' . $height . 'px;"><span>

echo '<div style="z-index: 10; padding-top: 0px;">';

foreach ($sandbag as $position => $blankPixels) {

  $sandbagWidth = $width-$blankPixels;
  $yPos = $position*$sandbagHeight;

  echo '<div style="relative; padding: 0px;
    margin: 0px; width: ' . $sandbagWidth . 'px;
    height:' . $sandbagHeight . 'px; float:' . $align
    . '; clear:' . $align . ';"><span></span></div>';


echo '</div>';

My two main problems with the script at the moment is that I can not find a way to include both inline css style and external css style, and the choice of putting the background image at -30px and -60px is completely ad hoc (and style dependent!). For the first problem, it seems like the browser totally disregards what is in the external css file when there is an inline style specified. I know that the inline style should have precedence on the external style, but does it take over completely ? Isn’t there a way around this ? As for the second problem, I do not expect a way around this, and plus, what’s a little ad hoc work when you have the sandbags automatically created for you ?


Get the complete script here. And please, make sure you also give credit to Rob Swan hard work for creating the original version of the script.

I have to give props to Heather for noticing the error on the non-transparent image for Internet Explorer and the non-wrapping wrapping text for IE. It is now fixed and should not be a problem anymore. Please, let me know if you see anything else.


2 thoughts on “ALA Sandbags: Revisited

  1. Hi Miguel, I appreciate the interest in the technique, thanks for the credit. I’ll have a proper play with the new technique later, it looks interesting.

    … not entirely sure ALA would be happy with the image theft though!

  2. Hey Rob,

    So I added a little note to make sure people at A List Apart don’t think I am stealing their image. The method, as I pointed out, is borrowed from I am sure that it is a valid method, when done correctly (which I probably did not do here). Anyways, thanks for the reply. Looking forward to know what you thought about it.

Comments are closed.