From Wikicliki
Jump to: navigation, search

sIFR (Scalable Inman Flash Replacement)

sIFR (Scalable Inman Flash Replacement) is a technique used to replace elements such as headings, pull-quotes, and other textual elements onscreen with Flash based equivalents that make use of a custom typeface without the need for users to have the font installed on their local system.

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash as detailed below.

sIFR technological dependencies


JavaScript is used at two separate levels within the sIFR technique. Firstly to check that the user has the Flash Player Plug-in installed and enabled and then secondly to perform the actual Flash replacement of predefined text elements.

Cascading Style Sheets (CSS)

Cascading Style Sheets are used by default for the presentation of the site, however when the sIFR technique is in use additional style rules can also be applied to further style the custom typeface in use, for example to provide letter spacing or line height adjustments.

Flash Player Plug-in

The sIFR text replacement technique uses the Flash file format to present a small movie containing the embedded typeface onscreen in place of displaying CSS styled text

Overview of entire process

1. A normal (X)HTML page is loaded into the browser. 2. A JavaScript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate. 3. If Flash isn't installed (or 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 replaced with a Flash equivalent. 4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, passing the original browser text in as a Flash variable. 5. 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 neatly inside the Flash movie. Using the above set of standards, the sIFR technique is applied as an abstract layer against existing (X)HTML and CSS marked-up documents.

One of the great strengths of this technique is that the underlying text, whether hard coded or CMS driven can be easily updated using existing practises without the need to launch a Flash authoring tool to provide text updates.Because the technique is applied as a layer, underlying text remains fully accessible to screen readers and other assistive technology. This is an important feature especially for search engine indexing since sIFR is typically used to replace headline elements which contain prominent keywords relevant to the visited page.


Once the sIFR script determines it will run, your (X)HTML and body tags are classed with ".sIFR-hasFlash". This is done in order to accomplish two things:

1. To hide your browser text as the method is running 2. To create "decoy" styles for the text you are replacing.

Decoy styles are never seen by the user. They are meant to adjust the space the browser text takes up before the measurement and replacement occurs. This is necessary because your browser text might be a narrow font and your Flash text might be a wide font. So in other words, something that takes up one line in browser text might take up three lines in Flash text. In the above case, you'd set your decoy style on the browser text to something like "letter-spacing: 10px;" to widen it to match the Flash text. This process is called "font tuning".

Because you can't explicitly set the size of your fonts in sIFR, your sIFR fonts will take their cues from your browser fonts. Match them up by adjusting your decoy styles and sizing will take care of itself.

Adding sIFR replacement statements

These special script statements specify which text elements will be replaced with Flash based equivalents and contain various attributes such as the URL path to the Flash movie containing the embedded typeface, foreground and background colours for static and hyperlinked text, and text-alignment properties.

The custom typeface used for replaced headlines is contained within an exported dynamic Flas movie and is typically named according to the typeface name.

This step involves adding the (JavaScript) replacement statements into the page. These are used to ensure only targeted headlines are replaced, and in the way you want. They can be added in the sifr.js file, or at the end of your (X)HTML file. If you put the replacement statements in the JavaScript file, they'll be executed upon initial page load or when you call the sIFR function explicitly. If you put the replacement statements in the body, they'll be executed immediately. The reason there are two methods to replace elements in sIFR is that the onload event is only triggered when the page has fully loaded, including all images and other external files. This can take much longer than the actual rendering of the page, so replacing inside the body will make the process begin earlier, and thus sIFR appears to render faster for users.

Although the sIFR technique is recommended to replace only “static text" contained within primary and secondary headings with a Flash based equivalent, it can also be used to replace anchored headings (hyperlinked text). One caveat to this method however, is the need to have (X)HTML parent elements properly classed with CSS names. This means that when a user moves their pointing device (a mouse, or pen) across the page, hyperlinked headings won’t appear as being navigable, even though they are.

For example you might encounter a heading element which contains an anchored string of text where the class name is located on the actual anchor element:

<h1><a href= class="anchor"></a></h1>

In the above example when the sIFR technique is used to replace the string of text “" it will be traversable as a link however it will not show the characteristics of a normal hyperlink.

The solution to this is to place an arbitrary class name on the heading element in order to allow sIFR to replace not only the string of text but also the anchor.

The above example can be simply modified by making one simple addition as shown below.

<h1 class="sIFR"><a href= class="anchor"></a></h1>

What now occurs is that the sIFR script leverages itself against the newly added “sIFR" class name and performs replacement from that point onwards until the close of the element.