Quantcast
Channel: Wowebmaster.com » Javascript
Viewing all articles
Browse latest Browse all 5

sIFR Lite: Faster & Smaller sIFR

0
0

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

Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images