23 Oct 2005 macmarcel   » (Observer)

There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn't present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.

For example, while working on Hollyo, I marked up the site's logo with an <h1> element:

<h1><img src="img/logo.gif" alt="HOLLYO" /></h1>

I don't pledge allegiance to any specific markup convention for site logos, but with images turned off, you can see that Firefox treats the alt text ``HOLLYO'' as a level 1 heading (Figure 1).

Figure 1 This is a nice way of keeping the visual hierarchy of things consistent, even in the absence of images. And yes, this does rely on the browser's own built-in stylesheet, which customarily displays headings large and bold.

If you don't agree with wrapping a site's logo in a heading element (and I often go back and forth), then there's another approach. Just add a few font styles for whatever element your logo happens to be sitting in (provided there is no other text in there as well).

For example, if it's sitting in a

, as it is here on SimpleBits:

<img src="img/logo.gif" alt="SimpleBits" />

Then adding a few CSS rules to that specific element would do the trick (Figure 2):

#logo { font-size: 130%; font-weight: bold; }

Figure 2 When the image is there, no harm done. When the image isn't there, then the alt text will be larger and bold, thus keeping a visual heirarchy consistent. At present, this will work in Firefox and Opera (AFAIK). But it's really just a tiny little enhancement.

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!