Why I hate sIFR

Posted on

(And why I think it should lay down and die, just as much as I think IE6 should).

Scalable Inman Flash Replacement (or sIFR), for those wondering, is a popular method for replacing plain text in a website, with custom fonts that a user may not have installed. It is typically employed in headings, or on buttons, where a custom font can add interest or “pizazz” to an otherwise mundane page.

It works by employing some complicated JavaScript (roughly 10kB of it, when compressed) to dynamically replace text at load time, with a custom Flash movie that contains the desired text, rendered in the custom font. This is ideal for pages where heading text might be regularly changing (such as on a blog), as it does not require the blogger to generate a new heading image for every new post. Indeed, the general concept behind sIFR is a good and useful one.

The problem I have with it lies in its execution. Here’s why I think it is a scourge on the earth, and should be cleansed at first opportunity:

  • It uses Flash. This is a bad idea for so many reasons.
    • First (and most obvious), it requires the user to actually have Flash installed to see the better fonts. If they don’t have Flash installed, they don’t see the page to its full potential.
    • Some power users will choose to selectively enable Flash in websites, to avoid advertisements and the like, and these users will not see your headings. Ad blockers may block your headings by default.
    • Flash does not play well in the typical browser environment. It often appears on top of all other page elements, potentially concealing (for example), flyout menus, in-page JavaScript overlays, etc.
  • Being an embedded Flash movie, it’s a completely different entity to the rest of your page. While the creators of sIFR have cleverly included the ability to select text within the Flash movie, as soon as you try to continue your selection further down the page, you find your selection frustratingly stuck inside the heading. If you begin your selection outside the heading and select over the heading, then you can copy and paste with some success, but it feels clunky and unusable.
  • Did I mention it was Flash?
  • There is often a noticeable “flash”, or flicker on page load, or reload, or moving to a new page. This is directly a result of using JavaScript replacement, and loading in the Flash player.
  • If you’re placing a link against the text, you lose browser features such as being able to right-click the link (instead you get the Flash right-click menu), or middle-click to open in a new tab.

There are two good alternatives I’ve found, which both have their merits, and which both don’t go near Flash with a ten-foot pole! Yay! Note that both of these use the same concept of JavaScript replacement at load time, so that the page is still accessible to screen readers, and people that don’t use a graphical browser.

  • Facelift (FLIR) is essentially the same as sIFR, but instead of replacing text with a Flash movie, it is replaced with a dynamically-generated image. Genius! (Not really, it just looks like it alongside the retardation that is sIFR). The only caveat is that you need to have the ability to run PHP scripts on your webserver, and have GD2 installed. It will even cache the images for you, so you’re not generating a new image on every page view. The only drawback I’ve seen, is that there can be a visible delay in image replacement, while the browser grabs the image files from the servers. However, after first load, these images will be cached, both on the server, and in the user’s browser.
  • Cufón requires neither Flash nor a PHP backend. All that’s required of the developer is to prerender an SVG font file from the font of their choosing. Headings are then rendered on the fly in-browser by JavaScript (usually to a <canvas> tag) — no backend required. This is both extremely fast, and equally as effective as the other two options.

If you have the ability to run a PHP backend, I’d suggest using Facelift (I’m a fan of the elegance of using images, which is essentially what would be used if you were to manually craft the headings yourself), otherwise Cufón is pretty great too. Whatever you do, don’t touch sIFR or Flash with a ten-foot pole!