Have you ever played the Alphabet Game? Now in it's 4th edition, the game even has a Wikipedia entry: Logo extraction puzzles.

Wordmarks provide a special challenge to the web designer. The organization has quite a bit tied up in the graphic identity that is presented by the way the words look (which is why the Alphabet Game is so fascinating and frustrating...where have I seen that "D" and that "A" in the fourth edition???). The problem is that there are only a few fonts available to web designers that work on Windows, Mac, and other systems. Thankfully, the web allows us images which allow us to freeze the wordmark. But, images present problems in that people with visual impairments cannot see them. The fix is alt text, which isn't completely search engine and screen reader friendly.

As a result, methods like Fahrner Image Replacement and Phark Image Replacement were developed. However, Fahrner is not accessible, and Phark leaves you out in the cold when surfing with CSS on and images off. There is one other area where both of these techniques fail: print. Background images do not print by default in Internet Explorer (Advanced Tab of Internet Options) or Firefox (Page Setup dialog). While Dave Shea has come up with a method that resolves the CSS on/images off problem; it does not resolve the printing problem.

I have come up with a method to resolve the problem while working on First Christian Church's web site, and here it is:

<h1 id="Title">
<a href="/">
First Christian Church of Tallahassee, Florida
<img src="/images/white11.gif" alt="" class="FakeBG" /><img src="/images/logos/TextLogoGarnet.png" alt=" (logo)" class="logo" /></a></h1>

The HTML was styled as follows:

h1#Title { border-style: none;
display: block;
position: relative;
text-align: left;
vertical-align: middle }

h1#Title a, h1#Title a:LINK, h1#Title a:HOVER, h1#Title a:ACTIVE, h1#Title a:VISITED
{ color: #990000;
text-decoration: none }

h1#Title { font-size: medium;
height: 65px;
overflow: hidden;
margin-bottom: 0;
padding: 0;
vertical-align: bottom;
z-index: 0 }

h1#Title img.FakeBG
{ bottom: 0;
border: none;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 97%;
z-index: 1 }

/* Finally, overlay the logo on the white background */
h1#Title img.logo
{ bottom: 0;
color: #ffffff;
font-size: xx-small;
left: 0;
position: absolute;
z-index: 2 }

Basically, this places the text at the bottom of the stack, overlays it with a white image to hide it, and then overlays the logo on top of the image.

This is more complex than Shea's method since it makes use of two images instead of one, but it could be re-worked using a single image with an opaque background. Further more, this allows the page to print with the logo intact.

Labels: ,