sIFR and What it Is

Posted on

Estimated reading time: 3 minutes, 17 seconds

Update: sIFR is a thing of the past, see @sifr for more info.

As broadband continues to improve, the internet is becoming ever more a multimedia platform. However, most commercial sites rely primarily on pure text in order to get the message across to users and search engines alike. Such text-based communication has its limitations, not least of which is the range of available fonts. Although HTML and Cascading Style Sheets (CSS) allow for just about any font to be selected by the site designer, significant problems arise at the other end of the line as HTML text can only be displayed in a font that any given user has installed on their PC. In the absence of the requested font, a default font will be selected which may significantly compromise the intended page design and layout. In some cases, the page may end up so badly rendered as to be unreadable, losing the attention of the visitor before the sale has even begun. Some designers have attempted to use images in lieu of text at certain vital points but this approach has some severe constraints in accessibility and in search engine readability.

Enter sIFR

sIFR or Scalable Inman Flash Replacement is an open source solution available free of charge under the CC-GNU LGPL license. sIFR uses a combination of JavaScript, Flash and CSS to allow any text in the font of your choice to be displayed on the screen of any user around the world with Macromedia’s Flash installed, regardless as to whether they have your desired font installed or not.

How sIFR Works

Although the internal implementation is complex, sIFR is based upon on an essentially simple series of ideas which are almost guaranteed to result in the desired effect because of the omnipresent nature of Flash on the internet. It is also robust and relatively simple to implement. Firstly an entirely standard HTML or XHTML page is loaded into the user’s browser. At this point, a JavaScript function is run to determine whether Flash is installed on the user’s PC. If Flash (or indeed JavaScript) is not present, the page is displayed using standard CSS / HMTL techniques. However, if Flash is detected, the sIFR JavaScript function will then work through the HTML looking for certain classes, tags and ids you have specified. Any element found that you wish to use with sIFR is then sized and a Flash movie is overlaid to your specifications. Within this movie element the text of your choice in the font you have designated is drawn up and then scaled to fill the Flash area. This allows any font to be viewable on any PC with Flash installed and Java enabled. Even without either of these elements, accessibility is preserved and the page and text will still be displayed minus the sIFR enhancements.

Unlike pure image-based text, sIFR will also allow for text copy and will zoom gracefully, further supporting accessibility.

sIFR Constraints

There are a couple of limitations inherent in the sIFR process. Firstly, its main application is for high visibility elements such as page headlines and titles rather than longer sections of text. This is because the Flash-based system requires considerable processor resource and any attempt to render lengthy text using sIFR will result in overly long page load times. Secondly, particularly large headlines created using this technique may appear pixelated, principally due to the fact that sIFR draws the text in 6 point size and then scales it to fit the Flash area. The larger the element, the more obvious the pixelation.

That said, sIFR is still evolving, with the 3rd version currently in testing. If a particular site design mandates an “unsafe” or exotic font, sIFR may well be the most elegant solution at the present time. If your site is hosted on a web server that supports PHP scripting, alternatives include Facelift Image Replacement (FLIR) which replaces the sIFR Flash component with dynamically generated standard images.

Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top