sIFR Lite: Faster & Smaller sIFR

Dec 17th, 2008 | By sguler | Category: Design, Javascript

Typography Solution

“95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”

A good web designer knows the importance of typography in creating web sites. As this post mentions, typography is in fact the most important part of designing stylish web pages. However, it is in fact a little problematic to get all the fonts work in internet browser, the sIFR is the solution.

What is sIFR ?
sIFR, Scalable Inman Flash Replacement, simply detects texts and replaces them with a flash movie, which can illustrate the any font you embed in. Speaking of how it works, it is a simple javascript file doing the replacement, it has also the flash movie, which you can edit in Adobe Flash so that you can add the font you want to use in your web page.

sIFR is slow
Every good thing at internet, has disadvantages. Despite the fact sIFR produces beautiful typography, size of the required file is not that small. The required javascript file is about 22kB (uncompressed), required css file is about 3kB and the flash movie is usually between 10kB and 20kB, depending on the font used and embedded characters.

Faster & Smaller Version: sIFR Lite
In order to reduce the size, someone rewrote the sifr’s javascript file, to form a lite version and to provide a faster way of replacing texts. He named it sIFR Lite. The sIFR Lite’s javascript is just 3.7K (uncompressed), reduced from 22kB, so it actually saves bandwidth for you and time for your visitors. From developer’s site:

sIFR Lite comparing to original sIFR
1. It is smaller. This library is 3.7k uncompressed. The original sIFR is 22k, no joke!
2. It auto-detects the text color of the elements. (The original sIFR makes you enter it manually!)
3. It is completely object-oriented. (No more static methods floating all over the place.)
4. It no longer uses CSS selectors. Elements are targeted by tag name and class. (A slight loss in ease of use, but faster, lighter, and more maintainable.)
5. It isn’t named after myself, or anyone else. haha.

I highly recommend you to use the sIFR Lite instead of the original sIFR. Despite the fact sIFR lite has no support for CSS selectors (resulting some bugs for heading tags in internet explorer; but there is a workaround), it is way small and fast comparing to the original sIFR. Meaning, you can enjoy the typography beauty on your site faster because of the reduced size of the sIFR javascript.

sIFR Lite Usage
I will explain it step by step.

First download all the zip file from the original sIFR creator’s website .
Contents of zip file:

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

Now, open sifr.fla and edit the font of the text (choose a font to use) and publish the flash movie.

Download the sIFR lite here ( the problem mentioned in the comments below, is fixed, thanks to Patrick ) and replace it with js/sifr.js. Also remove the js/sifr-config.js. Don’t forget to edit the font path in sifr.lite.js.

Defining the text replacements are so simple, following javascript replaces h1.mySpecialClass, h2.mySpecialClass and h3.mySpecialClass texts with the flash movie, tradegothic.swf.

?View Code JAVASCRIPT
var gothic = new Font('tradegothic.swf', {
 
tags:'h1,h2,h3',
 
classFilter:'mySpecialClass'
 
});
 
gothic.replace()

Put the above code inside your body tags. Also reference the js/sifr.js and all css files inside your head tags. That’s it. You should now have had the sifr working correctly in your web page.

You can also use it without targeting any class. If you’d like to target all heading tags and want all of them replaced, you can use the following javascript.

?View Code JAVASCRIPT
var gothic = new Font('tradegothic.swf', {
 
tags:'h1,h2,h3'
 
});
 
gothic.replace()


sIFR Lite Demo

  • Share/Save/Bookmark
Tags: ,

21 comments
Leave a comment »

  1. Is it just me or does the example not work?? Tried in firefox and safari.

  2. I haven\’t tried the safari, but it is definetly working in IE6, IE7 and Firefox 3.

  3. I get mixed results depending on the machine I’m using sIFR lite on. I think there is something wrong with the hasFlash class. If I remove the !this.hasFlash condition in the replaceElement function, it works everywhere, but then -of course – it won’t degrade on non-flash enabled browsers. “install plugin” boxes appear.

  4. No, same thing here. Demo not working in Firefox 3.05. or Safari 3.2.1

  5. I’m also curious why this is not working. It does seem a bit bugged. Really hard to find proper documentation on sIFR lite it seems.

  6. it doesn’t work in Firefox 3.0.5, Safari and Chrome but it works in IE6, IE7. We have to wait to fix it.

  7. I\’m using Firefox 3.0.5 and the demo works without any problem, I\’m not able to understand the problem.

  8. I found and fixed a problem with sIFR Lite. The version checking is limited to single-digit versions, so it breaks after Flash Player 10. (Flash 10)

    This is the culprit.
    return parseInt(flashDescription.charAt(flashDescription.indexOf(”.”) – 1)) >= nRequiredVersion;

    Replace with the following to fix.
    var version = parseInt(flashDescription.match(/\d+(?=.)/));
    return version >= nRequiredVersion;

  9. Nice fix Patrick! confirmed working in Firefox 3.0.5 now

  10. Thank you Patrick for your help. I changed the sifr-lite.js including your fix.

    It works now.

    WoWebmaster Administration.

  11. Great fix thanks. Is it just me or does it not pick-up on link colors and hovers and stuff? Does anyone know the best way around this?

  12. It would be nice to retain the CSS selectors – for performance/weight, you could use John Resig’s Sizzle (http://sizzlejs.com/). Otherwise, great work-

  13. Hello, you’re using sIFR 2 or sIFR 3? im using version 3 and its not working here.

  14. It only works with Sifr 2 font files.

  15. I downloaded the latest sifr lite js, installed Flash player 10 on IE6 & 7, but it just shows a serif font (like Times or so) instead of the Helvetica I picked in sifr.fla.

    Any ideas?

  16. Hello Timmy,

    Can you please provide your Url ? So I can analyze the problem.

    WoWebmaster Administration.

  17. Hello,

    I was wondering if anyone has the same problem as I.

    Here’s the thing, everything is embedded, the sIFR lite DOES replace my headings, and most of the times gets the style settings from my css file.

    So here’s the problem… MOST of the times. Sometimes it does not replace the color nor the size. To make everything clear I made a small screencast of me refreshing the page several times.
    http://screencast.com/t/FjcDdY2Q

    Everytime the screen flashes it’s refreshed. As you can see, 1 of about to times the font doesn’t get its right settings. Thing is, I just can’t figure it out because at the same time it IS working. Pfff :s

    Who to the rescue :)

    Greetings,

    Jaap

  18. ok, very sorry guys, just tried one last thing and found out it’s my local server messing stuff up.
    It seems MAMP stops delivering the .swf after a few requests… Strange but solved…

    Sorry for the disturbance!

    Greets,

    Jaap

  19. It doesn\’t support turkish characters :(
    First, i tried with SIFR 2.0.7 it worked, then i tried this but it has not show turkish characters.

  20. I found and fixed a problem with sIFR Lite. The version checking is limited to single-digit versions, so it breaks after Flash Player 10. (Flash 10)

  21. [...] sIFR Lite – compressed down, more object oriented Javascript rewrite of sIFR [...]

Leave Comment