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 technological dependencies
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
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.
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=http://www.sitename.com/ class="anchor">sitename.com</a></h1>
In the above example when the sIFR technique is used to replace the string of text “sitename.com" 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=http://www.sitename.com/ class="anchor">sitename.com</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.