sIFR: When and when not to use it

Nov 09, 2011
Diego Vergara

sIFR is a great contribution to the UI development community. It is a very simple tool based on Javascript, CSS and Flash that basically replaces any element that contains text with a Flash object representation of it. Why is it so useful? Because in the UI world, many demanding clients need very special font types for their page titles, headlines and others.

The rendered Flash text is fully customizable via CSS and you can choose which elements will use it activating the script sIFR’s  Javascript configuration file using CSS selectors. The Flash object itself is also customizable by passing attributes to the SWF object via Javascript flahsvars. This is done if you need special text manipulation like anti-aliasing, force single line texts or control word wrapping.

It works really well, but there are many aspects to take into consideration. These are the main purpose of this post.

After battling on my current project doing UI work, I was presented with the challenge of satisfying a very special taste for typography. After doing some research I found the sIFR tool and began playing around with it before actually implementing it and concluded the following:

  • sIFR was conceived to replace small text such as titles or headlines. I do not recommend its use in elements that contain very long texts because, as it is a Flash object, you don’t have the same control as if it was raw text.  Also, these texts produce relative large SWF objects that increase page load times.
  • NEVER use it to replace anchor element texts (links), menus, tabs, etc. I faced a real challenge when I tried to implement the tool in navigation menus and links. It has unpredictable behavior when used to replace text that serves that functionality. My attempt to tackle the problem: hack into sIFR’s core and enhance it to achieve that functionality, the result: no success. Actually I succeeded in enabling the functionality for Mozilla Firefox and all other major browsers except Internet Explorer. Apparently, IE manages “object” elements in their very unique way and there was no workaround for that one, and believe me, I tried!

Although sIFR tool is great and serves its purpose, these considerations MUST be taken when planning its implementation to make sure you are making the correct choice.

Visit sIFR homepage at http://wiki.novemberborn.net/sifr/

Note: Diego Vergara contributed to this post and sIFR implementation-research.