The Intersection of
Life, Faith, Technology, & Science
The Personal Blog of Jack L. Wolfgang II
Note: Comments are currently disabled for this blog as it is in the process of being moved. Please bear with me as the moving process progresses. The new link for the blog will be posted when it is ready. However, guessing the new link shouldn't be too hard (neither is cheating with Google).
Tuesday, August 28, 2007
Wordmarks in Web Design
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: Accessibility, Web Development
These comments may be deleted by Jack or the comment author at their discretion.
Post a Comment