Sliced and Diced Sandbags

by Rob Swan

44 Reader Comments

Back to the Article
  1. On an accessiblity point, you used display:none for you fake alt text, which will be ignored by most screen readers. In terms of unnecessary markup, I agree with Niek Emmen about taking as much of the inline styling out as possible.

    But it is possible to position your image absolutely underneath the sandbags. I did this by putting the text inside the .sandbag-image div, an image tag inside the #example div but outside .sandbag-image, and making the following changes to the CSS:

    #example { width: 530px; position:relative }
    .sandbag-image { position:absolute; z-index:2 }
    #example img { position:absolute; top:20px; right:0; z-index:1 }

    I had to fiddle about with the vertical position of the image.

    This works in Firefox, Opera and IE6. Can’t test on Safari. This makes the alt text fully accessible. (There’s nothing to be done about those non-semantic divs).

    Copy & paste the code below to embed this comment.
  2. Kudos for working out a great and innovative new trick, Rob! I always enjoy it when ALA publishes a fun little “cool hack” article, as they fortunately seem to still be doing, from time to time.

    My main concern with your solution is that neither the image nor its ALT text is visible when CSS is disabled. If I were to use your script, I would update it to also output the image in a regular IMG tag, which would be set to display: none. This should allow for much better accessibility, without upsetting the sandbags at all.

    Copy & paste the code below to embed this comment.
  3. Looks like a very useful technique if one is prepared to accept the non-semantic divs.

    An optimisation could be introduced so that adjacent sandbags of the same size are replaced with a single sandbag with the height set appropriately, thus reducing the number of extra divs and therefore the time required for the page to load.

    Tolerances could be used so that adjacent, pre-optimisation, sandbags that are almost the same width are replaced also with a single sandbag that has its width set to the widest of the two.

    Of course deciding on which sandbags to combine could require a fair bit of computation, but if applied along with the earlier suggestion of caching of the results it would be a one-time hit and therefore acceptable.

    As regards setting the sandbag height according to the line-height, surely that would only be possible if font sizes are specified in pixels (generally to be avoided)?

    Copy & paste the code below to embed this comment.
  4. A while ago I used the shim technique on an experimental page (by hand).  But instead of using a background image in each sandbag, I used a negative margin on a DIV following them (you could use an image; in my case the image was purely presentational, so there was no need).  The page is “here”: .

    Henrik/The UnBlobifier: You probably shouldn’t include the alt text on each slice—someone using a screen-reader will hear it again and again!  Just putting it on the first one should be good enough.

    Copy & paste the code below to embed this comment.
  5. Always happy to read ALA’s articles, I’ve found a bad link on step four, it redirects me to a 404 page:



    Copy & paste the code below to embed this comment.
  6. Wouldn’t using JavaScript instead favor a more semantic mark-up?

    Copy & paste the code below to embed this comment.
  7. Hey,
    I don’t have much more to say about the article, the result and wether or not this is a good ‘method’ for making image-aligned texts.
    But I don’t like the idea in general. I don’t see the benefits of text following the outline of an image. It just makes it harder to focus on the content and it doesn’t contribute to it. Sure it’s nice eye-candy and I can think of some very visual websites (think of an artists portfolio etc.) that would love this kind of thing. But then, very visual websites, usually don’t contain that many lines of text.

    kind regards,

    Copy & paste the code below to embed this comment.
  8. Giuseppe:

    There is no link on example four.

    The text explains why:

    You don’t need to see the code for this, as it’s a minor tweak.

    Copy & paste the code below to embed this comment.
  9. how about we just nag browser developers to finally give us a standard method to achieve this easily.

    maybe using some css and an svg path and a few new css attributes

    div#puzzle {
    clipping-source: url(masks/puzzlepiece.gif) alpha;
    /* will use black/white values of the gif/jpg to define rough outline*/
    clipping-source: url(masks/puzzlepiece.png);
    /* if transparent png is supported will use transparency value */
    clipping-source: url(masks/puzzlepiece.svg);
    /* if svg is supported will use vector path like DTP programs do */
    text-flow: left-clip;
    /* text will flow along shapes left side. If text were to the right it would be flat, if text-flow were ‘surround’ text would flow along all sides like in DTP programs*/

    absurd wishful thinking, I know.

    Copy & paste the code below to embed this comment.
  10. Since absolute positioning takes the block out of the stack, couldn’t the image be positioned absolutely over the sandbags?

    Copy & paste the code below to embed this comment.
  11. Never mind, missed the post about this. My bad.

    Copy & paste the code below to embed this comment.
  12. You were all so happy to abandon the table layout “trick”. It validated nicely, but still: Not a correct use of the table-tag. And now you’re all at it again. Articles like this makes A List Apart a bit hypocritical, posing to be pro-standard good-gal/guy.

    Copy & paste the code below to embed this comment.
  13. Espen,

    Whilst I concur that this article isn’t coming from a 100% standards compliant stance, I still think that there’s room for ideas like this to be discussed on ALA without it becoming hypocritical.  I’d like to think of it as an ‘interesting’ approach to a problem.  I think we can be pro-standard and still have a little ‘fun’ every now and again ;)

    Copy & paste the code below to embed this comment.
  14. Hello Rob.

    First off, thank you for the well-written script. It is an effect I have been wanting to create on my site for a while, and just never got the guts to start writing a script. I had seen this effect done before on Mike Davidson’s website, and so I was aware of a “better” way to create this exact effect.

    So I wrote a new version of your script (a little more sloppy, so you can change it if you want). It seems to work in most browsers, but I couldn’t test in IE (windows) unfortunatly, but I doubt Mike would let anything go wrong in IE.

    You can

    Copy & paste the code below to embed this comment.