sIFR Lite!

O

"It auto-detects the text color of elements!"

nce upon a time some really good web developers created sIFR. Their goal was to seamlessly convert HTML headlines into nice fonts. Well, these developers did a great job getting it to work nicely. Looking at their code, I decided I would create a "lite" version of sIFR using a more object-oriented approach. sIFR Lite is a bit easier to read, and more intuitive to use. The only drawbacks are that it is currently unproven on a large scale in the real world. This library is of course open-source, so I welcome you to submit any improvements, suggestions, or bug reports using my contact form.

Tested in current versions of Safari, FireFox, FireFox Mac, Camino, IE, and Opera

How is this different than the 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.

Just Give Me The Code!

If you want to dive right in and figure it out for yourself, you can download sIFR Lite right now!

Basic Usage

Creating a new font
var gothic = new Font('tradegothic.swf', {tags:'h1,h2,h3'});

This will create a new font object that will target all h3 tags by default. Notice the second argument is always a JSON-Style object. Creating a new font will not change anything on your page. You will apply the font later usingone of the methods described below.

Applying a font to its default target elements
gothic.replace()

Calling this method without any arguments simply targets all the elements that you passed in the "tags" variable above. Where you call the replace command matters. If you call it half way down the page, Only the tags in the top half of the page will be replaced. If you want to replace all tags, either add it in a script tag at the end of the page body, or add it to your window.onload as follows: window.onload = gothic.replace;

Applying a font to alternative target elements
gothic.replace('h4,h5,h6')

This does the same thing as the mthod above, but instead of targeting the default h1,h2,h3 elements, it targets h4,h5 and h6 elements.

Advanced Element Targeting

Let's say I don't want to replace all h3 tags on a page, just one or two specific ones... If this is the case, there are a few different ways to target the elements.

Creating a class-targeted font
var targetedGothic = new Font('tradegothic.swf', {
	tags:'h1,h2,h3',
	classFilter:'mySpecialClass'
});

Notice I have passed in a parameter called "classFilter". This does two things. First, it tells this font to only target h1,h2, or h3 elements with the classname "mySpecialClass". Secondly, it tells any other fonts to skip elements with the classname "mySpecialClass".

Apply a font to a specific element
gothic.replaceElement(document.getElementById('myElement'));

This method allows you to target a specific element.

Apply a font to a list of elements (a node list)
gothic.replaceElements(document.body.childNodes);

This method allows you to replace a list of elements, given in a node list or array. You would probably never want to execute the example as shown below since it would attempt to replace every childNode of the document body with the gothic font.

Show me All The Options

Here is a list of all the options parameters. Options are always passed in the second parameter as a literal JavaScript object. i.e. {sizeAdjust:-5, color:'#f00', tags:'h1,h2'}

Option NameDescription
sizeAdjustcalibrate the rendered text to be more consistent with the original font size. Some fonts render smaller or bigger than others, so this is needed to make them the correct size.
colorforce the color of the flash text instead of reading from the current style. Must be in 3-hex, 6-hex, or RGB format. i.e. (#fff, #ffffff, rgb(255,255,255) all work)
bgcolorforce the background color (usually no reason to use this)
widthforce the width (only needed if the width auto-detect is failing)
heightforce the height (only needed if the height auto-detect is failing)
sWmoderender mode (default to transparent, not usually needed)
tagsauto-replace tags (comma-separated list) i.e. 'h1,h2,h3'
classFiltertarget only elements with this class name

Setting the font path

sIFR Lite allows you to set a default font path so that you can put all of your fonts in a single directory and then just reference them by name instead of having to type the full path every time.

Setting the default font path in sifr.lite.js
Font.prototype = {
	fontPath: '/path/to/your/fonts/',
	...