sIFR 2.0 is Fantastic!
Posted on Jul 28, 2005
Working at Hasbro presents some unique challenges, particularly due to the fact that our sites are graphic (and Flash) instensive to say the least. It seems that each new design we receive from our design team contains countless fonts (don't even get me started on the drop shadow and glow overkill). This can make creating dynamic pages difficult, but fortunately sIFR 2.0 is finally offering a solution (or an improvement at least).sIFR stands for "Scalable Inman Flash Replacement," and while I am not quite sure what that means, what it allows you to do is dynamically replace txt on your page with practically any font of your choosing utlizing Flash. Plus, it is "fully accessible to screenreaders and other assistive technology."
First, you need to download sIFR. You edit the fla that is included by selecting the text area and changing the font to whatever font you wish to support. Next, export the movie with the name of the font (it doesn't have to be, but this makes it easy to recognize). I place the SWF and the sifr.js in a folder I called sifr for organizational purposes. Any other fonts I want to support, I move the swfs there too.
Next, you need to either modify your CSS with the sIFR styles, or include the provided sifr-screen.css. In addition, you need to include the sifr.js. Lastly, at the bottom of the page, place javascript like the following (from my CCBD.net example page):
//<![CDATA[ /* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){
// This is the preferred "named argument" syntax sIFR.replaceElement(named({nWidth:200,nHeight:70,sSelector:"div#header", sFlashSrc:"sifr/Swis721_LtCn_BT.swf", sColor:"#003366", sFlashVars:"textalign=left&offsetTop=6", sWmode:"transparent"}));
sIFR.replaceElement(named({nWidth:400,nHeight:60,sSelector:"h1", sFlashSrc:"sifr/Palatino_Linotype.swf", sColor:"#003366", sFlashVars:"textalign=left&offsetTop=0"}));
};
//]]> </script>
In this example I am replacing div's with an ID of header with the Swiss font and h1 tags with the Palatino Linotype font. I also set some paremeters for the color and text alignment and also set my top SWF to be transparent (the top script does the text in the page banner and the bottom does the content header).
Currently, I am also using this to dynamically generate the Heroscape character pages (not live yet - the existing pages are just huge images - see my problem!) to dynamically generate the character set and character name (it is recommended that you do not overload your pages with fonts, by the way). One interesting thing I ran into while setting up that page, as the placement is very specific; I noticed that when replacing h1, h2, etc. tags, the placement was not identical in IE and Firefox. In IE, the text would be about 10 pixles higher than in Firefox. After alot of attempts to tweak the text, I was able to resolve this by replacing a div with an id rather than the h tags.
As you can see, I found sIFR to offer a fantastic solution to limited font usage on a page. Given my success so far in implementing it on the Heroscape project, I hope to attempt to leverage the tool to help us balance design considerations (i.e. fonts in this case) and data-driven (and more accessible) pages.
Comments
http://www.hasbro.com/heroscape/default.cfm?page=forgottenForest
Posted By Brian Rinaldi / Posted on 08/04/2005 at 8:12 AM
Posted By Rob Gonda / Posted on 04/15/2006 at 6:13 PM