Dynamic Text Replacement

Before sIFR (Flash title replacement), there was good old JavaScript and PHP, to generate images from text using any font you like. All without changing the structure of your HTML or CSS.

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 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 or 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.