This is How You Get sIFR to Work

The goal of this tutorial is to distill the information at the official site for sIFR into a simple step-by-step process of how to implement sIFR on your site.

After following this tutorial you will have a basic understanding of how sIFR works and will be able to expand into more advanced areas.

It is divided into six sections:

Before we begin, keep these things in mind.

• No files will be modified except for those downloaded from the sIFR site. So you don’t have to worry about editing your existing style sheets, etc.
• sIFR degrades very well, so you don’t have to worry about users without Flash and/or JavaScript enabled.
• It’s not too bandwidth heavy (compared to typical Flash files).
• sIFR only works on a web server, as opposed to your local testing environment (i.e. your computer).
• You can use the file sifr-debug.js in this tutorial in place of sifr.js for easier debugging if you wish (it outputs specific error messages instead of just not displaying).

Let’s get started!

1. Downloading sIFR

The first step is to download the sIFR zip file. The list of nightly builds is the only place (as far as I can tell) to get the latest version of sIFR. Go ahead and download the latest version. [UPDATE: It seems that the latest version of the nightlies is showing a green background when you use the “background-color:transparent” property. For now I would use sifr3-r397.zip until the problem is fixed again.] [UPDATE 2: I was wrong, sorry about that!]

When you open the zip file you’ll see four folders and a text file. You can ignore the demo folder for now; the three other folders—css, flash and js—contain the files we need.

2. Creating YourTypeface.swf

Before we upload the sIFR files, we need to create the typeface SWF file from the FLA file. In the flash folder there’s a file named sifr.fla, open this file.

When you open the sifr.fla file you should see a white box (see Figure 2a).

Figure 2a: Screen shot of initial Flash screen.

Double-click on this frame to make it active. You should now see gray text that reads “Bold Italic Normal” (see Figure 2b).

Figure 2b: Screen shot of Flash screen after double-clicking on it.

To “activate” your typeface, select the text, change it to your desired typeface and then type one character. One character as in a or n, whichever you choose. If you want to have the option to italicize or bold your text then you need to have one character for each.

For example, if I want to have normal text, as well as the option to italicize and/or bold my text, I would type ‘n n n‘ (see Figure 2c). The changes in file size for my particular font were about a 30 KB difference between just normal (70 KB) and all three (100 KB). You can experiment to see how different they are depending on the typeface you choose.

Figure 2c: Screen shot of Flash screen after typing your characters.

Finally, choose your specific typeface; for this example I chose Arno Pro (see Figure 2d).

Figure 2d: Screen shot of the dialog used to control typography for Flash.

Once this is completed and you’ve selected the appropriate typeface, go to File > Publish Settings. In this dialog box make sure the following options are set as they are shown in Figure 2e.

Figure 2e: The Flash Publish Settings for exporting a SWF file.

The default setting for JPEG quality is 80. For my typeface there was no difference between 80 JPEG quality and 100 JPEG quality so I set it to 100. After these are set click the Publish button to create your file. (Your new SWF file should appear in the same folder as the sifr.fla file.)

The file you just created will have a file name of sifr.swf; rename the file to your typeface, so in my case it would be arnopro.swf. Now you are ready to upload the files to your server.

3. Uploading the Files

The following files need to be uploaded for sIFR functionality:

• css/sIFR-print.css
• css/sIFR-screen.css
• js/sifr-config.js
• js/sifr.js
• flash/yourtypeface.swf

Now link to the CSS and JavaScript files appropriately (Figure 3a). (We’ll reference the flash file in the next step.)

4. Initializing sIFR

In this step we will call the SWF file and tell it which text to replace. The file that controls the text replacement is sifr-config.js, you may have noticed that it currently has a file size of zero.

For this tutorial we’ll use an example of two blog posts with the markup shown in Figure 4a and the CSS shown in Figure 4b which produces the output shown in Figure 4c

First, open the sifr-config.js file and add the code shown in Figure 4d, where yourtypeface is the name of the typeface you chose when you were editing the Flash file. So my var name would be arnopro. (Note: Make sure your var name is all one word with no spaces, and I would use underscores instead of hyphens.)

This references and activates the SWF file we created in Step 2 and then replaces our titles with the sIFR text. Pay close attention to the intricacies of the formatting because it’s quite intense (and quite unforgiving if you miss something). Also, the wmode: 'transparent' command prevents the default background color being white.[UPDATE: Just use the CSS property, background-color, and set it to transparent, see comment #1 at the end.] [UPDATE 2: Doing this results in a green background it seems, so I would recommend using wmode: 'transparent' for now. Just be aware that it results in a white background in Opera instead of a transparent background.]

5. Styling

Now that we are replacing the regular text with sIFR text we need to style the new text. What’s potentially confusing about sIFR is that the CSS styles for the sIFR text are edited in the sIFR-config.js file. The formatting (for the most part) is implemented with regular CSS syntax, except it’s in a JavaScript file.

The CSS styles are inserted in .sIFR-root as shown in Figure 5a. Basically this is saying, “associate every style in here with the new sIFR text.”

To style the text you enter CSS properties just as you would in a typical style sheet. So for our example we will enter the CSS as shown in Figure 5b.

Now compare the normal text (left column) with the sIFR text (right column) in Figure 5c.

Clearly there are some spacing issues that develop when the text is replaced. Thankfully, these issues can be addressed by fine-tuning sIFR’s advanced JavaScript options. But we’ll leave that for another time.

Adding Alternate Styles

You also have the ability to add alternate styles for additional markup between the main text being replaced. For example, if you wanted to style the em and strong tags for use in the h2 titles you could add the code shown in Figure 5d.

So now, in our markup example, if we added the word Very Long with a strong tag it would be output as bold and dark gray (see Figures 5e and 5f, respectively)

6. Final Touches

Lastly we are going to set a rule in the sIFR-screen.css file that hides the default text while the sIFR text is being loaded. This prevents the regular text from appearing and then disappearing when the sIFR text loads. To do this open sIFR-screen.css (it’s in the sIFR css directory) and scroll down to the bottom and add the code shown in Figure 6a

Now the regular text is not shown when sIFR is active, and if it’s deactivated the text will show the normal styling because of the .sIFR-active class before the h2.cpost-title.

7. End Notes and More Resources

Important notes on the current state of sIFR and about this tutorial.

1. Not every CSS rule is valid for sIFR, consult the sIFR 3 documentation for compatibility (specifically the styling section).
2. I can’t claim that I’m a sIFR expert so if you discover any errors in the above tutorial please let me know. My main goal was to show others how to get the basics up and running.

Need more reading? Or some help?

1. Now that you can choose from a wider variety of typefaces you may find that your job just got a little harder. Read up on choosing type at I Love Typography.
2. Also, if you get stuck, Joyent has a forum dedicated to sIFR.