WEB STANDARDS CREATIVITY

42
sIFR me timbers
When you’re dealing with content generated by a CMS, it’s a given that a large portion of the content on every page is constantly
changing. In this particular instance, it’s not fair to assume the band members would be willing or able to create a
custom, graphical text heading for every news item they post to the site via the CMS. And yet as a designer, I would much rather
have the main article heading on the homepage rendered in the same typeface as the band’s logo (Franklin Gothic Condensed).
Fortunately, due in no small part to the extraordinary efforts of a few talented programmers, sIFR came to my rescue.
sIFR stands for Scalable Inman Flash Replacement (Inman, as in Shaun Inman, who conceived the original DOM replacement
method that inspired sIFR). In the words of Mike Davidson, one of sIFR’s creators and all-around web-typography-quality
evangelist, sIFR is “a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness,
or markup semantics.” Phew. More simply put, sIFR is a way to use specific typefaces to replace HTML text when
viewed in a modern, visual browser, using a combination of Flash and JavaScript. It doesn’t hinder accessibility, and visitors
without Flash (or with JavaScript turned off) will see normal HTML text, with CSS applied. Oh, and did I mention it’s free?
To take advantage of sIFR developers’ selfless generosity, you must first have the following at your disposal:
Macromedia (now Adobe) Flash version 6 or newer (the full version, not the plug-in)
A font you would like to render using sIFR
Some free time
Once you’ve fulfilled those requirements, the process of incorporating sIFR into any project is fairly simple:
1. Download the latest release (2.0.2 as of this writing) from www.mikeindustries.com/sifr/.
2. Read the documentation, at http://wiki.novemberborn.net/sifr/.
OK, so it isn’t that simple, but all the steps are outlined in the documentation. If you follow the instructions, it will work
smoothly. Nonetheless, I will give you a brief overview, along with an example.
The first step, after selecting your typeface, is to export the Flash (.swf) file. The creators of sIFR have kindly included a Flash
document (.fla) with the rest of the files, so you simply open that file in Flash, double-click the text box in the center of
that file, and specify the typeface. Export the file (in this example, the file is named franklingothiccondensed.swf). This
concludes the Flash portion of our exercise.
The sIFR download also includes two CSS style sheets—one for screen and one for print—and a JavaScript file (this is where
the magic happens). You can copy and paste the styles into your own screen and print style sheets, as suggested in the sIFR
documentation, or just link to them, along with the JavaScript file, in the of your document:
Now you have to call sIFR from within your HTML file, and tell the script what to replace. You can also place these “replacement
statements” within the JavaScript file itself; see the sIFR documentation for details.
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"#teaser h3",➥
sFlashSrc:"/sIFR/franklingothiccondensed.swf",sColor:"#EFB32F",➥
sLinkColor:"#EFB32F", sFlashVars:"offsetLeft=0&offsetTop=0",➥
sWmode:"transparent"}));
};