The Shape of Days

Remember this? I was playing with ways to apply shadows to images using CSS the other night, and I wrote a little description of a technique I’d worked out. It was fairly well received by people who care about such things. One of those people sent me an e-mail in which he suggested that I might be able to use JavaScript to streamline the technique. I allowed that it sounded plausible, but that I didn’t have the expertise to know for sure and that I lacked the time at the moment to dig into it.

Well, this morning I had the time. With some help from my de facto collaborator, I was able to come up with what seems to be — seems to be, I said — a very robust and easy-to-use technique for applying snazzy looking shadows using only Web technology and a few little image elements prepared beforehand.

The biggest single complaint I got from people who read my article involved the complexity of the markup required to make the technique work. In HTML, an image looks like this:

<img src="http://example.com/prettygirl.jpg">

My technique required the designer to change that to this:

<div class="shadow">
  <img src="http://example.com/prettygirl.jpg">
  <div class="topleft"></div>
  <div class="topright"></div>
  <div class="bottomleft"></div>
  <div class="bottomright"></div>
</div>

Definitely not an improvement. As I observed in my article, this is still light years ahead of the nightmare that was table-based page layout, but that’s just damning with faint praise. All that extra markup sucks out loud.

The new-and-improved technique will apply a snazzy white matte and drop shadow to any image without all the ugly extra markup. Instead of that seven-line beast, you can just write this:

<img class="shadow" src="http://example.com/prettygirl.jpg">

And if you’re clever with your JavaScript, you can even omit the class declaration for images you want shadowed, and use something like class="noshadow" only on the images you don’t want shadowed. That leaves the markup for your shadowed images looking like this:

<img src="http://example.com/prettygirl.jpg">

Look familiar? Either way you go, the principle’s the same; either have your JavaScript look for a special class of images to apply shadows to, or have your JavaScript apply shadows to all images except those in a special class. Tomayto, tomahto.

Here’s how it looks:

Better, yes?

Now, despite how it looks, we are not applying the shadow with CSS. We’re using using the class attribute as a marker that our script can use to find the images we want shadowed. The shadow class on img elements isn’t even included in our style sheet. It does nothing at all by itself.

The script works like this: It starts by getting a list of all the img elements included in the document. Then it looks at each of them in turn to see if there are any that need shadows. If an img does not belong to the shadow class, the script ignores it and moves on. But if it does belong to the shadow class, the script does some things. Clever things.

Let’s talk about the Document Object Model for a second. Web pages — any XML-like content, actually — are structured like an outline. There are top-level things and then second-level things and so on. A very simple Web page, structurally, looks like this:

1. An improved CSS shadow technique
   1. Introduction
      1. Open with a joke
      2. Mention viewer mail
   2. Description of the old technique
      1. Big ugly markup
      2. The markup is big
      3. The markup is also ugly
   3. Improvements made
      1. Now uses JavaScript
      2. Markup no longer big, ugly
      3. Also solved floating box problem
      4. Picture of pretty girl
   4. Conclusion
      1. I am so totally cool
      2. Send me all your money

The Document Object Model considers Web pages in terms of nodes and children. For example, in the little notional outline above, number 2 under Roman numeral I, “Description of the old technique,” is a node and points 2a, 2b and 2c are its children. But apart from just giving us an annoying new vocabulary to learn, the DOM provides a programming interface by which we can examine the structure of a Web page through JavaScript, and — and this is the key — change it.

Using the first iteration of my technique, the person creating the Web page — you know, me — would have to look through his page and find any instances of img elements that need shadows behind them, write some new HTML code to describe the divs the shadow technique requires, and then cut-and-paste the existing img tag into the new div container. It would have been a tedious and repetitive operation even under the best of circumstances.

But every public-school-educated child knows that in 1689 New England religious scholar Cotton Mather, with the help of his best friends Einstein and Hammurabi, invented the digital computer specifically to relieve man of the burden of performing tedious and repetitive operations. Perhaps we can make use of that invention somehow …

In point of fact, it’s fairly easy to write a JavaScript that does exactly what I described in exactly the way I described it. I’m using one on this site right now — it’s how the shadowed picture of the pretty girl a few paragraphs up came to be — and I’ve prepared a detailed, documented example for anybody who’s interested. But in principle, it works exactly the way I described. The script goes though the page’s DOM tree from top to bottom looking for img elements. When it finds one, it examines it to see if it belongs to the shadow class. If it does, the script creates a new DOM node of type div and assigns it to class shadow. Then it makes a copy of the img element and attaches it to the div node as a child. It then populates the div node with the rest of the elements required to make the shadow look right. Finally, the script replaces the img node with the new div node. Piece of cake.

An incidental benefit to this new approach is that I was able to solve the floating box issue. People who live deep inside their Web browsers will know what I’m talking about when I refer to the collapsing-box problem; it’s a classic one for Web designers. It really annoyed me when I was working on this technique, and my solution to it last time around was not at all to my satisfaction. But the JavaScript approach lets me solve the problem much more elegantly.

In a nutshell, the collapsing-box problem goes like this: Everything on a Web page is enclosed in a box. Under normal circumstances, the height of a box is defined by its contents, but the width is defined by the box that encloses it. For example, here’s a sort paragraph of text inside a colored box:

As you can see, the height of the box is sufficient to enclose the text that it contains. If I add more text, the box grows taller:

But the width of the box is different. The width of the box is defined not by what it contains but by what contains it. The box will stretch out horizontally to be as wide as the enclosing box allows. If there is no enclosing box, the box will be as wide as the browser window with which you view it.

This is just fine for text. Heck, this is perfect for text. But it’s not so great when we start talking about things other than text. For example, what if instead of some text, we put a picture in that box:

That’s not what we had in mind at all. The box shouldn’t stretch all the way across the page like that. It should enclose just the picture. Well, tough, because HTML just doesn’t work like that. Which totally sucks ass if what you’re trying to do is use an enclosing box to simulate a shadow.

So that’s the collapsing-box problem in a nutshell: How do you get a box to collapse to the size of its contents? There are a few different ways to do it. You can set an explicit width for the box, of course. For instance, this box is programmed to be exactly 150 pixels wide:

But that’s no good in our case because hand-assigning widths to boxes is a giant pain in the neck. Another option involves absolute positioning, but it’s so fraught with perils that I won’t even bother describing it here. No, when I last visited this place, I used the float solution. HTML provides a property called float that causes a box to collapse to fit its contents.

Unfortunately, as you can see, the float property also causes the box to slide all the way to the left of the enclosing box. Or to the right, if you specify float: right instead.

Either way, it’s a total show-stopper if what you actually wanted was a centered, collapsed box. And then there’s the need for a clearing element immediately after the collapsing box, and the tendency for boxes that enclose floating elements to disappear entirely when you least expect it … no, if a collapsing box is what you want, you’re pretty much stuck hand-assigning box widths in your HTML, a tedious, repetitive operation. Wait a minute! Tedious, repetitive … I’ve got an idea!

So yeah, a nice little side-effect of my shadow-creating script is that in addition to creating all of the necessary nodes for you so you don’t have to key them into your page by hand, it also assigns the width of the enclosing node for you, effecting a sort of cheat solution to the collapsing-box problem by embracing the tedium and foisting it off on the browser.

Of course, anybody who looks at your page with a browser that lacks support for the Document Model, or one that lacks JavaScript entirely for that matter, won’t see nice mattes and shadows around your pictures. But, as my collaborator put it, “the people with Javascript disabled simply because ‘its bad,’ in todays world of AJAX and web applications, don’t deserve to have computers, yet alone pretty image shadows.” But aside from the quiet glee that comes from knowing people stuck in the 20th century don’t get all the bess and whistles, another significant advantage of this technique is that it can degrade gracefully. That is to say, when the browser in which your page is being viewed is insufficiently equipped to do the job the script calls for, the script can just abort, leaving the page full of otherwise perfectly placed images that just happen to lack shadows around them.

Speaking of browser support, I can absolutely guarantee that this technique works in Safari, Firefox and Internet Explorer. As long as they’re the same as the versions I’m running. And as long as they’re running on my computer. Right now.

Look, I’m just this guy, you know? Exhaustively testing every style sheet and script in every browser that’s ever been made is just not my thing. I use Safari, so I make sure my Web sites and tricks work in Safari. I know lots of people who are stuck on Windows, so I try my best to make sure they work in Firefox as well. And because of those three or four Laplanders who still use Internet Explorer, I at least make an effort to ensure that looking at my site with that browser won’t cause the sun to explode or blood to rain from the sky.

I’m fairly sure that this technique works in the latest Safari and the latest Firefox, and in this old copy of Internet Explorer 6 I’ve got on my Virtual PC disk. If it doesn’t work for you, e-mail me and I’ll make a note of it. Even better, figure out how to fix it and then e-mail me with the answer. Even better still, take my demonstration code, create a new version that works on Edgar’s Web Browser 1.0 for the Commodore 64 © 1987, and then post it to your own Web site. E-mail me the link or something. That’d be pretty cool.

• How to tell the browser to try again
• My contribution to the CSS shadow kerfuffle
• Seen: Tidal basin, April 1, 2006