Today's Episode:
Highway of Style
When I first brought the family website online, I included an entire section devoted to my roadgeek addiction interest in highways. As part of this section, I included pages on each freeway and expressway in the Greater Miami Valley area, describing in simple tabular format each interchange on each highway with my comments. They were simple, they got the job I wanted done, but there was simply no comparison between my exit lists and others done by more fanatical roadgeeks on the Web.
Being bored one night, I started doing some research on what made other exit list sites flashier than mine. The thing that sprang out at me most often was the degree to which others tried to emulate the actual appearance of freeway exit signs. Most people writing exit list pages would make up a special image of a shield with the highway number already a part of it, like the image to the right. For the expense of about a kilobyte of bandwidth per image, you get a precisely-formatted sign that looks exactly like the ones out on our highway system. There's just one little problem with this technique.
I'm not most people.
Above any other design consideration, I want my road pages to not be bandwidth hogs. My reason is practical rather than hubristic: my area of Southwest Ohio is one of the most bandwidth-challenged areas of the state for residential Internet usage (an oversight bordering on criminal neglect given the number of IT professionals here, but I digress...). For obvious reasons, I'm thus very sensitive to the needs of users stuck at the end of a slow and noisy modem connection. Sure, we're talking a kilobyte an image max, but you're forcing the user to load lots of small images on initial page load. It adds up -- rapidly, if you're on a slow connection. How can we get around this problem?
The First Cut
First, let's analyze what we really need to simulate highway signs. Instead of making a separate shield for each highway, we only need a total of four images for all of our pages:
| A blank interstate highway shield: |  |
|---|---|
| A wider but still blank version of the above: |  |
| A blank US highway shield: |  |
| A blank state highway shield: |  |
My problem now becomes one of overlaying the highway number on the appropriate shield. How best can I do this? There was one exit list site using a technique that appealed to the Strange Coder in me. The author used tables to do his exit list signs, setting the background image of a table cell containing the highway number. With a somewhat more enlightened usage of Cascading Style Sheets than the original, this technique would look something like the following example cribbed from my I-675 page:
<style>
.sign { margin: 1em 30%;
padding: 1em 1em 0;
font-family: Arial,Helvetica;
background: #006600;
border: solid 3px white; }
th { color: white;
width: 50;
height: 50; }
</style>
<div class="sign">
<table align='center'>
<tr>
<th background="../roads/images/2di.gif">70</th>
<th background="../roads/images/Ohio.gif" style="color: #000000">4</th>
<th>WEST</th>
</tr>
<tr>
<th colspan=3>Indianapolis</th>
</tr>
</table>
</div>
I first tried imitating a highway sign by directly setting the table styles and fiddling with both cell spacing and padding, but the result didn't look good or realistic. I thus had to wrap the table within a <DIV> block and set its styles with the .sign style rule to get the desired effect. Let's spend some time walking through this style rule, because I do a lot of things in it.
First, I set the sign's margins and padding in an attempt to center the resulting sign in your browser window. I then set the font family to fonts which should be available on most every browser. True road geeks will want to reset this value to the Larabie Blue Condensed font, used by state highway departments nationwide. Finally, I give the sign a green background and white border, just like on the interstates.
The next style we set is for the <TH> tag. I use <TH> because I need my sign text both centered on the sign and in bold. By startling coincidence, these are the exact two things performed by this tag. We set the default font color to white, and the cell width and height big enough to display the entire shield image without cropping. The only drawback to this style rule is that we'll need to override the font color for the US highway and state highway shields -- white text doesn't show up too well on a white background
The end result ends up looking like this on your browser:
| 70 | 4 | WEST |
|---|---|---|
| Indianapolis | ||
But Wait, There's More...
Now is where my pride starts kicking in. The <TABLE>-based method achieves what I want with the formatting precision I need. What I failed to mention is that each <TABLE>-based sign will be displayed within a larger <TABLE> that also lists a description of the interchange, a link to a Microsoft TerraServer image of the interchange (where available), and my comments on the interchange. I now have to maintain a page with nested <TABLE>s. There's nothing wrong with this from a standards standpoint, but as I once told a co-worker, "Nested tables are usually a sign from God that you need to re-think your HTML."
A day or so of fiddling with the styles and tags of the above example finally produced the following source:
<style>
.sign { margin: 1em 30%;
padding: 1em 1em 0;
font-family: Arial,Helvetica;
background: #006600;
border: solid white 2px;
font-weight: bold;
text-align: center;
color: white; }
.int2 { padding: 15 18 15;
background: url(../roads/images/2di.gif) no-repeat; }
.sr { padding: 12 20;
color: black;
background: url(../roads/images/Ohio.gif) no-repeat; }
</style>
<div class="sign">
<p>
<span class="int2">70</span>
<span class="sr">4</span> WEST
</p>
<p>Indianapolis</p>
</div>
For purposes of this example, the .sign style rule now has to perform the duties that the <TH> tag and its style rule was performing in the previous example -- hence, the extra rules on boldface, color, and text alignment. Our new additions are in the .int2 and .sr style rules. Each class sets the background property of the <SPAN> blocks around each highway number to the appropriate highway shield image, then pads them so the shield is fully displayed and the number enclosed is centered against the background. For Ohio state highways, we have to again override the default font color to provide something with higher contrast than white on white.
Now let's look at how the HTML source renders:
70 4 WEST
Indianapolis
And there you have it. The result is subtly different from the <TABLE>-based method, but as far as I'm concerned it's Close Enough For Government Work™. The big win here comes when you compare the amount of markup required for each method. The <DIV>-based sign requires much less HTML than the <TABLE>-based sign, which makes it smaller and faster-loading. It also makes the resulting source easier to maintain since your tags aren't nested as deep -- something only a person who directly edits HTML source without fancy editors would really appreciate.
This has only been a crude and simplistic example of how to simulate a highway sign. For the actual product, go to my Exit Lists section and View Source. The styles that I actually use are stored in this style sheet.
BUGS FEATURES
On IE5 for the Macintosh, the absence of content above a sign clips off the first several pixel rows. There are two ways around this for right now:
- Put a
<DIV>tag above the sign that imitates the exit number tab of a real highway sign - Put a
<br>above the sign.
I have no adequately explainable reason for this problem or either of its solutions. The sign renders correctly in Mozilla with or without content preceding it, so go figure.