I'm not sure who came up with image replacement (probably Todd Fahrner), but I first read about it on Doug Bowman's site, and then saw a post by Dave Shea with a collection of image replacement variations.
In a nutshell, with image replacement you can add more appeal to a heading by replacing its text with an image. Normally, the image shows the same text, but since you create it yourself you may use any font you like.
When using fonts on the web, you're confined to a handful of fonts. Outside of the "standard" set of Verdana, Arial and Courier you can hardly expect others to have the certain exotic fonts installed on their computers. One font might be available by default in Windows, but not in Linux, and vice versa.
Creating images by hand has several drawbacks. If you change the heading text you have to redraw your image. If headings are database-bound you have no way of keeping up drawing images by hand. The whole process has to be automated.
Shaun Inman came up with a technique now known as Scalable Inman Flash Replacement (sIFR). sIFR allows you to place a bit of Flash that draws text with your choice of fonts. You can see it in action on his site and that of Mike Davidson. Mike and a couple of other creative individuals have been working on open source (so to say) code that makes sIFR a reality. You can download the latest and greatest of this development from Mike's site. If y'all want to see some hardcode, "object oriented" JavaScript coding, take a look at the source code. Them folks did a fine job!
Ever since this initiative set sail, I've been wondering if there was a way to do the same by using .NET libraries and do it without reliance on Flash. GDI+ seemed to be the right alternative. What's GDI+?
GDI+ is the portion of the Microsoft® Windows® XP operating system that provides two-dimensional vector graphics, imaging, and typography. GDI+ improves on GDI (the graphics device interface included with earlier versions of Windows) by adding new features and by optimizing existing features.
The GDI+ managed class interface (a set of wrappers) is part of the Microsoft .NET Framework, an environment for building, deploying, and running XML Web services and other applications.
I thought I could get GDI+ to create image files on the fly and embed them in headings much like sIFR does.
I attempted to extend the JavaScript code Mike made available, but I realized a few bits and pieces would've been redundant, such as Flash detection, creation of object and embed elements, etc. Therefore I changed it to create images with the help of a light-weight HttpHandler.
Roll Your Own Headings
I don't want to go into the nitty-gritty implementation details, so I encourage you to check out source code on your own. Let me briefly discuss how you can use image replacement on your site.
First and foremost, you need a link to the external JavaScript file:
<script src="dotIR.js" type="text/javascript"></script>
This file is where all of the client-side processing happens. Next, you need to indicate which headings to replace. The original JavaScript code parses selectors (all h1s in the code below) and passes some additional parameters to the server-side code:
<script type="text/javascript">
if (dotIR != null)
{
dotIR.replaceElement ("h1", "#990000", "#ccc", 490,
"center", 42, "Book Antiqua");
}
</script>
A little bit of CSS helps hide the original content:
span.dotIR-alternate {
position: absolute;
left: -100em;
width: 100em;
}
.dotIR-replaced {
visibility: visible !important;
}
The parameters are:
- Elements to locate on the page. You may use classes (e.g.
h3.sidebox) and IDs (e.g. h5#pullquote).
- Font color.
- Background color.
- Maximum width of the heading in pixels.
- Alignment. Allowed values are: "left" (default), "center", "right".
- Font size in pixels.
- Font name. This font has to be installed on the server.
The lightweight HttpHandler uses GDI+ to measure the height of the image box given the maximum width (parameter #4) and font size (parameter #6). This guarantees your text won't be clipped.
What About Quality?
I've tried tweaking anti-aliasing and contrast properties to get the best quality possible. The image handler streams a JPEG which offers better quality than GIF (at least, in this case). The quality of text is far from being perfect. On a white background it looks pretty darn good. On colored backgrounds you will see some noise, especially with small fonts.
I'm sure some of you are much better versed in GDI+ than me. Please, look through the code and let me know how to improve image quality. So far I've used only native GDI+ algos.
There's an online demo for you to see what it all looks like.
What About Accessibility?
If someone disables images you will still see the header text in the image placeholder. The image's alt attribute is what reveals it. With JavaScript disabled no substitution takes place, so the user will see the original heading text. I'm not sure how screen readers will take this. Let me know if you have one.
I've run the demo page in Lynx, and it displayed the heading itself without an image.
Improvements
This is fresh beta code, so there's a lot of room for improvement. I'll look into text size units other than pixels. I'm also thinking about caching images for 6 hours at a time, for example. Please, pitch ideas and suggestions. Feel free to download source code.
Upadate: to read about further improvements and download beta 2 code see .IR: Image Replacement With ASP.NET (Beta 2).
