sIFR - Should it stay or should it go?

Typography book
Dec
12

So the question is, what is sIFR? What can it be used for, and what are the advantages or possible disadvantages of using it? Although it's been around for a while now, these are questions which are answered here as well as reasons why it's best to no longer user it.

The name sIFR refers to "Scalable Inman Flash Replacement" and refers to an early implementation of web-fonts using JavaScript and Adobe Flash. The idea behind this was to make the web a more beautiful place - no longer would designers need to be restrained to using particular fonts which are widely available, or having to produce images for titles (which then made it difficult to make dynamic titles with these fonts). At the time of it's conception it was an advancement on previous Flash replacement techniques created by Mike Davidson and was clearly stated to not be a permanent solution.

The way sIFR works is to embed a Flash object on a page through JavaScript and the text element it replaces is instead rendered through the Flash object which has a different font available to it. Due to it being JavaScript replacing existing text this means that if you don't have Flash installed or don't have JavaScript enabled it will still render the original text and falls back to CSS for styling. This is obviously great for accessibility, but unfortunately it does have it's downsides - mostly due to the extended loading times. The process according to the website of Mike Davidson is as follows:

  • A normal (X)HTML page is loaded into the browser.
  • A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
  • If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like "sIFRed".
  • Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
  • Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

Once you have the sIFR files downloaded you will need to open the sifr.fla file in Adobe Flash and replace the font used in the empty text container to utilise the font you want to be able to use. This of course means that if for some reason you want to use more than one font for different titles (which is bad practice anyway) you'd have to export a second SWF file from this Flash file containing a different font. Based on this it is often a good idea to either name the files based on where they'll be used or what font they contain.

There are then two CSS files that contains styles you'll need to add to your screen and print stylesheets to ensure that they can handle sIFR correctly. You should then add the following JavaScript include to your site:

<script src="sifr.js" type="text/javascript"></script>

This is the JavaScript file that will do the majority of the work in replacing your titles with Flash replacements. You can configure the specifics of the image replacement by following some instructions on the sIFR website, but at this point you can now add some JavaScript to specify which element(s) should have text replaced with images.

if (typeof sIFR == 'function') {
   sIFR.replaceElement('h2', named({sFlashSrc: '/flash/gothic.swf', sColor: '#000', sCase: 'upper'}));
};

What this will do is specify that h2 headings will be replaced with an image using the "Gothic" font which is stored in the gothic.swf previously created, and will colour the text black, and change the case to upper-case. You can add as many of these replaceElement statements as you like and then once you're ready (at the end of the file) you can use the following to perform the replacements:

if (typeof sIFR == 'function') {
    sIFR();
};

So now we know what it is, why it was created and both the advantage and disadvantages of using it. The question now however is whether there are better alternatives that you can now use. In their ever expanding number of fields, Google have added their own method of this to their Google Code project to help web designers utilise more fonts. Now I'm not saying sIFR has been rendered useless, because it hasn't - it is good to use with any specific fonts you want to use in titles that are not listed in the Google Font Directory (which at present will be most fonts).

The difference with fonts from the Google Font Directory is the simplicity with which you add them. Once you've selected your font you can just copy and paste a link tag to a stylesheet containing the webfont, and then in your own stylesheet you can specify where it is to be used - so no JavaScript or Flash required. So, for example I'd add the following to the head:

<link href='http://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>

This would load the stylesheet for the "Neuton" font, and then to use it I could do the following:

section h2 {font-family:'Neuton',arial,serif;}

Now that is incredibly quick and simple to use. If we look at the CSS file we included it will provide us with the reason.

@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: normal;
  src: local('Neuton Regular'), local('Neuton'), url('http://themes.googleusercontent.com/font?kit=9R-MGIOQUdjAVeB6nE6PcQ') format('truetype');
}

As it turns out the Google Font Directory uses the Web Font functionality of CSS 3 so it is compatible in a wider range of browsers and remains accessible. The reported list of browsers is:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

On top of these they are also supported by most modern mobile browsers as well - so whereas sIFR isn't supported on Apple iOS based devices, Web Fonts are. This indicates that when used correctly, using CSS 3 for better font choices is the way forward and is likely to see the diminished use of sIFR in the near future.

your comments - Post a comment

blog comments powered by Disqus