Dynamic Text Replacement with PHP and Javascript

Holy . Cow.

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.

And again: Holy. Cow.

Watch as the download size for all your favourite design blogs increases by approximately 15% over the next couple of weeks as they all start using custom fonts for their entry titles.

For that matter, I’ve been dying to use Papyrus here on Sunpig for some time now…