the empty <span>

empty <span>

As I mentioned in the Fonts on the Web, it's nice to have a preferred font as part of the graphic scheme of your website; your logotype, for instance, represents your brand, so there's no typeface subsitution that will fly there. Often headings or navigation buttons benefit from the graphic typeface treatment, but one must remember some key points:

1. The file size for a chunk of text rendered as an image is much larger, and increases page-load time. Frustrated users, waiting for your handsome page to load, might leave.
2. If a user has images turned off or otherwise disabled, your pretty buttons and headings and logotype will disappear. In the html overview, I mention the need for "alternate" text with images, to appear should the page not load -- part of the principles of accessibility, in which all users are enabled to access your site, whatever sort of device they're using to browse, or their bandwidth of graphics capabilities... clearly, a need for another manifesto (about accessibility). If your images aren't there, something should be.I had a client who sent me links to websites of others in her field; I put them through my usual bench-test paces:
   • take a squint at the code (to see if it was hand-coded, and to see the layout structure).
   • Look at the site with the stylesheet disabled, to see the raw, rendered html. Often interesting.
   • Try the site with images turned off (a surprising number of users browse this way); often, those pretty headings and buttons disappear, and are not replaced by anything. Pretty bad deal when your site navigation just goes away.
   In the case of each of these three, ad hoc, case studies, every one was written by software (too bad), and all of them were pretty, but ceased to function when the images were disabled.

Clearly, if one is going to use images in place of text, one must have something there should the images fail to load, or otherwise be obstructed. However, for a section heading, or a navigation button, "alt" text won't do -- it doesn't render that large, and it's not possible to style it with colors or font-weights or anything.
Ideally, we'd be able to have a heading there if the image doesn't load...

As it happens, we css specialists have a number of techniques available to replace text with images, all with little bits of code. Some of the techniques have run afoul of the web-standards zealots, but the one I use is perfectly accessible and standards-compliant. Oh, to be the one credited with the clever skills that came up with this approach:

The Image Replacement Technique:

a tip of the hat to Ben Franklin

That's nice, and all, but I'd prefer something a little more along the lines of a typeface that looked rather like Mr. Franklin, a printer, had set the type himself.

As it happens, I have just such a font, good old Caslon Antique, with its distressed and pocked mien; it's ideal for the purpose.
Now, that was an image of text; it's a little file (a .gif, only 2.13 KB), so it loads pretty fast. But if I used that as the header, the title, and someone was viewing the site without images? (it doesn't look that bad) What would they see for a title?
Here's the easy workaround; hopefully, not too technical.
First, I code the title, which I would style as an <h1> heading, with a special "identity" or "class" attribute (as of this writing, 24 Feb 2010, I haven't yet written the manifesto about ids and classes and divs and spans, but all this will make much more sense once I have done so... so do your best).
If I code it in the html as <h1 class="ben-franklin">, then I can find it with other code and do things with it, and to it.

Perhaps you've read up a bit on the css overview; if so, you'll know that I can write a special rule for any element (wrapped in an opening and closing tag) in the stylesheet. In this case, by including a little stowaway in the code, we can cleverly get our needs met:

Drop in an empty <span>:

Let me add this to the html:
01. <h1 class="ben-franklin"><span> </span>A tip of the hat to Ben Franklin</h1>

There's the old empty <span> for which I was expressing my enthusiasm; see how the opening and closing <span> tags are "nested" inside the opening and closing <h1> tags? And that <span> has no content at all, merely a space (that's why it's called an empty <span>). But I can address it, as well as the <h1> element in which the <span> has found itself, and do so without affecting any other <h1> element, since this one has a special class, making it unique.

In my stylesheet, let me write a couple of rules about the <h1> heading, and the <span>:
01. h1.ben-franklin {
02. position:relative;
03. height:38px;
04. width:350px;
05. padding:0;
06. overflow:hidden;
07. }
08. h1.ben-franklin span {
09. position:absolute;
10. height:38px;
11. width:350px;
12. left:0;
13. top:0;
14. margin:0;
15. background:url("images/bF-Title-350x38-CasAnt.jpg") no-repeat;
16. }

Let's take that css code apart:

01. h1.ben-franklin {
This line identifies the element to which the styles will be applied; in this case, to all h1 headings which have been assigned the class,"ben-franklin." 02. position:relative;
Position is everything; this is among the most powerful and inevitable of css's qualities: to be able to designate positions for any element on the page.
In this case, we're telling the <h1> element, with the class of ben-franklin, that it shall be an element to which subordinate elements will be positioned relatively.
Then, when I position a nice image with a block of text over that heading element, it will be positioned relative to the heading, rather than some higher-level element (such as the wrapper <div>, or the body). 03. height:38px;
04. width:350px;
Now, I'm telling that <h1> element precisely how big to be; since I'm going to superimpose an image over it, the image, its containing element, and the element being affected by the image replacement, all have to have the same dimensions.
Obviously, in this case, I measured the area of the heading on-screen, then created an image file conforming to those dimensions. Finally, I take the dimensions from the image and apply them to the element (as yet unsized), bringing it full circle. 05. padding:0;
This is key: as yet, I haven't written and posted a manifesto about The Box Model and the DOM, but for now, imagine, since I have given this element dimensions, a rectangle with those dimensions.
The "padding" is the amount of empty space between the top and sides of the element, and the content (be it text, an image...). If I had specified padding:10px;, then the content could only occupy a space that's 380 pixels wide by 23 pixels tall, as we've added ten pixels of padding all the way around (one can specify padding for each side, if one chooses).
As we'll be laying an image over this element, though, we want no padding. Line them up edge-to-edge. 06. overflow:hidden;
07. }
As I've specified a size in the css, and I want the heading to be completely obscured, I have to make sure that any content that would spill outside the confines of this sized box do not appear on the screen. The overflow property enables me to specify that any extra content is hidden.
And finally, the closing bracket, indicating that I am done declaring rules about the h1 heading which has been assigned the class,"ben-franklin" 08. h1.ben-franklin span {
Now, follow the rules for the empty <span>, contained within the <h1> element.
In the vernacular, we refer to it being a "descendant" of the <h1> element, as it's nested within the opening and closing tags. The <h1> element is referred to as the "parent." 09. position:absolute;
Since we declared position:relative; in the styles for the parent <h1> element, any of its descendants styled with absolute position will be positioned relative to the parent element, rather than any other element or the body of the page, making it easy to superimpose the contents of the empty <span> directly over it.

But wait a minute -- how can it have content if it's empty?
We're applying a background image to it in the stylesheet; technically, it still has no content, as presentational information is confined to the stylesheet, and indexable content is confined to the html (principles which I will outline when I get to writing the manifesto about "Standards Compliance").

Here it is, in action -- but as a demonstration, with a text-replacement image that's got a transparent background, just to show you how it's superimposed:

a tip of the hat to Ben Franklin

And here it is, with the actual replacement image:

A tip of the hat to Ben Franklin

check it out; disable images in your browser, if you know how, and see...

Now, the real beauty of this is that since the replacement text is an image, I can put anything in there I want; the sky's the limit. If I decide I want to replace the text with a futuristic, beveled font with a drop-shadow, I can go ahead and do that: just specify a different background image in the css. Here you go:

A tip of the hat to Ben Franklin