Dynamic Text Replacement: A List Apart

It has been a while since I have seen a good article come out of A List Apart and this one is a doozy Dynamic Text Replacement in which the author Stewart Rosenberger describes how to create static heading images from text on the fly using any font of your choosing. What you say? Read on.

Text styling is the dull headache of web design. There are only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML. Sticking with the traditional typefaces is smart for body text, but when it comes to our headings - short, attention-grabbing blocks of text - it would be nice to have some choice in the matter. We've become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images.



Most sites that replace text with images do so using hand-made images, which isn't so terrible when there are a set number of headings, but it quickly becomes unmanageable on a site that is updated several times per day. However the replacement is performed, each image needs to be bound to the text it is replacing. That binding usually manifests itself as an <img> tag, an embedded style sheet, or a custom id attribute. And over time, through layout changes and redesigns, that binding needs to be managed by someone.



We can forget all that nonsense. No more <img> or <span> tags, no more id attributes or wasted time in Photoshop, and no more messy CSS hacks. Using JavaScript and PHP, we can generate accessible image-headings using any font we like. And we don�t have to change the structure of our HTML or CSS at all.



View the demo to see Dynamic Text Replacement in action. Then read on to find out how you can add the same functionality to your site.

The process does require a javascript enabled browser and PHP enabled server, although the server side scripting can be accomplished in Perl, Coldfusion, ASP or any other flavor of scripting. The scripts are designed to be "flicker free" which is a nice touch.