Wiki.Novemberborn, sIFR Documentation & FAQ

How to use

Here you'll find how to use sIFR on your website. If you are wondering about interacting with the JavaScript, please see Javascript Implementation. NOTE: Are you using sIFR 3? If so, you want this page instead.

To export your new typeface, open the sifr.fla file (which is included with the download) in Flash Professional, and double-click the invisible textbox in the middle of the stage. If the "Properties" palette is not already visible, open it by selecting "Window > Properties", and select which font you'd like to use from the drop down menu. If you select a TrueType font, you can also create bold and italic styles for your font by clicking on the "I" or "B" buttons.

To export the new file, choose "File > Export > Export Movie", and save as fontname.swf. Make sure to export as Flash 6!

The standard sifr.fla file contains most of the English characters you will generally need. If you need to embed additional characters or languages, click the "Character" button, or the "Embed" button (for Flash 8) and select more characters from there and re-export.

You can also try the sIFR Font Embedder for Windows or OpensIFR for Mac OS X (also works in Windows), which are applications to create the font files without requiring Flash.

Applying CSS print styles

Copy and paste (or even better: learn and apply) the CSS rules found in the sIFR-print.css file to your own print style sheet. These ensure that your original headline styling will be printed, rather than the Flash replacements.

Applying CSS screen styles

Apply the styles in the sIFR-screen.css file into your own screen style sheet. These are the styles which will be applied by the Javascript if Flash is found to be present on the user's browser.

Including the magic Javascript

You must call the sifr.js script on any page that will be replacing headlines. The following line in the <head> should do the trick:

<script src="sifr.js" type="text/javascript"></script>

Configuring sIFR

There are some settings you can change which alter the behaviour of sIFR. These settings are all booleans, which means they can be true or false. Here they are:

An example of how you configure these settings:

if(typeof sIFR == "function"){
    sIFR.bHideBrowserText = false;
    sIFR.bFixFragIdBug = false; // not recommended!
    sIFR.setup();
};

If you want to enable/disable sIFR for a specific browser, you can use the UA object as described below and you'll have to edit the following code in sifr.js:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
    sIFR.setup();
};

In this example sIFR is disabled for IE/Mac. Remove the && !sIFR.UA.bIsIEMac part to enable it again. You can also add other browsers here.

Adding replace statements

This step involves adding the (JavaScript) replace statements into the mix. These are the heart and soul of the script and are used to ensure the correct 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 replace statements in the JavaScript file, they'll be executed on onload or when you call sIFR(). If you put the replace statements in the body, they'll be executed immediately.

Effectively, this means that you could put the replacement code in the JavaScript and call sIFR() in the body. It won't make any difference.

The reason there are two methods to replace elements in sIFR is that the onload event is only fired 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 replacement begin earlier, and thus sIFR looks to render faster.

To save bandwidth you can put the replace statements in the JavaScript file, and then call sIFR() in the body. The exact code you have to use in the body in this case is:

<script type="text/javascript">
if(typeof sIFR == "function"){
    sIFR();
};
</script>

You can find more info in Where to Replace.

Replacement Syntax

To replace the fonts you call sIFR.replaceElement. This method takes the following arguments, in this specific order:

You are advised to use named arguments instead of placing the arguments in the correct order. Here's an example:

if(typeof sIFR == "function"){
    sIFR.replaceElement("h1", named({sFlashSrc: "./vandenkeere.swf", sColor: "#000", sCase: "upper"}));
};

Read the named arguments article for more information.

Tuning your fonts

The final step in implementing sIFR is to "tune" your fonts. As explained in "What is sIFR" sIFR works by measuring the size of the element you are replacing, and then generating the Flash text at a size that matches it. This is a fairly straightforward process. However, when, for example, your sIFR font has a different character width or letter spacing than the font used on the website, the scaling can cause the sIFR text to look really awkward. This can be solved by changing the size of the elements just before they are replaced.

You might also want to read an article written on sIFR's font sizing, written by Mark Wubben. This article explains how the font sizing is handled in sIFR 2 and highlights some reasons why it doesn't work as well as it should. As a bonus the handling in sIFR 3 is described, but up to this point sIFR 3 is still in development.

When sIFR detects the right Flash version it sets a CSS class on the html element. Now, let's say you are only replacing h1's. If you want to create a specific style for those elements to change their sizes, you have use the following CSS rule:

.sIFR-hasFlash h1 {
    visibility: hidden;
    /* other CSS properties go here */
}

This is what we will call your decoy style. It will never be seen by users (because of visibility: hidden) but it will fine-tune the text a split-second before it is replaced.

In order to fine-tune the text you need to play around with the font-size, letter-spacing, line-height and height CSS properties.

You can use the debug method to prepare your page for fine-tuning. In the sifr.js file comment out the sIFR.setup() line and add sIFR.debug():

if(typeof sIFR == "function"){
    sIFR.setup();
};

Becomes:

if(typeof sIFR == "function"){
    // sIFR.setup();
    sIFR.debug();
};

With sIFR in debugging mode and the decoy styles working you can start tweaking the sizes. If you can't match it exactly, make the browser text a bit narrower than the sIFR text. You will want to also comment out the visibility: hidden; property.

If you want to test your changes you can run the following code in the address bar:

javascript:sIFR.debug.replaceNow();

Here's a handy bookmarklet you can use: sIFR: Replace now. Add it to your favorites and run it to see the elements being replaced.

When you're done restore the sifr.js file so sIFR.setup() is called again and enable visibility: hidden; again.

Helpful tips to keep in mind while tuning your fonts:

Dealing with FlashBlock

The FlashBlock extension for Mozilla browsers will show the alternate text instead of the Flash headlines. This means you'll have to style span.sIFR-alternate to override the decoy styles. You can test this by installing FlashBlock, or by installing Greasemonkey and the sIFR Tools script. Now, if you go to Tools > User Script Commands > sIFR - Act like FlashBlock you'll see the alternate text as FlashBlock users see it.

Special characters

If you want to use special characters in your text; characters like ยป or special language characters that are not in font by default you must add it in Flash before publishing it to SWF. Open the hidden text box. Select it and click the Character button in the Properties pallette. Add the special characters in the textbox at the bottom of the dialog box.

Marvelling at your beautiful headlines

This is absolutely the easiest and most enjoyable step involved with sIFR. Have fun! Hurray!


Updated on January 27, 2009 00:15 by Ben Petering (121.45.80.169)

| See revision | Back in time (59 older revisions)


Navigation

sIFR Documentation & FAQ

sIFR lets you use your favorite font on your websites by cleverly working with Flash, JavaScript and CSS. Here you'll find it's documentation and the FAQ. Leave a link to your implementation in the Examples!

Please donate

If you like sIFR, please consider making a donation so Mark can spend more time on it. Thank you.

Inside this wiki

Other destinations

Licensing

This wiki is licensed under the GNU Free Documentation License.

Miscellaneous

TextDrive

RubyOnRails