Scalable Inline Image Replacement

UPDATE [17 March 2006] Adjustments have been made to generate.php to fix the issue of certain fonts being rendered in the image with the top chopped off. If you have been through this test suite before and want to go straight to the fix, click here.

The Scalable Inline Image Replacement (SIIR) technique works pretty much like Stewart Rosenberger’s Dynamic Text Replacement (fixed for xhtml+xml), replacing text inside elements specified in the script with a server-generated image-equivalent (see the heading above rendered as an image).

The technique was developed by Ryan Petrello and you can see it put to good use on his site. The documentation/download page has since been taken down, but I took the liberty of mirroring Google's cached page here.

As with DTR, the problem lies in getting SIIR to work when a page is served as application/xhtml+xml — that is to say, when the browser is really treating XHTML as XML (more info). Presently, this means that IE will execute the script without a hitch, while browsers that handle the application/xhtml+xml MIME type correctly (and strictly, like Mozilla and its derivatives) will not.

More than that, the script needs to be fixed for other issues, which affect all browsers (don’t be such a snob), to wit:

The script treats everything within a targeted element — even text-level elements like <strong> and <em> — as text, so that the rendered image includes the embedded tag(s). You will fully appreciate the fix when you view Google’s cached copy of your page(s) and the searched-for keyword(s) are in your header(s).

Some people have also pointed out that when using certain fonts, the topmost parts of the characters in the generated image get slightly lopped off.

Finally, the script outputs foreign characters in unicode. My reconstructed version of the script (obtained somewhere else, since the original download link was broken) did not provide support for this, so I cribbed from Rosenberger’s DTR script.

Before we go about trying to fix the script, let’s get this out of the way: It is assumed that you already have it running on a page served as text/html. If you came here looking for tips on how to make it run at all, please see the documentation page.

If you don’t have the original files, download them here.

Comments/questions? Get in touch!

Shall we begin?