Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Implementing sIFR 3

When teddy-risation Theta was released a few days ago, I packed a feature that was previously not present in my older themes – text replacement for headers, namely the post and page titles. Eli expressed the difficulty in implementing sIFR3 on a webpage on Twitter, so I thought that it’ll be great if I can share how I did that for my blog in the recent makeover.

Embedding a font

There are other ways to embed a font in a webpage – you can use @font-face in your CSS (it’s part of the CSS3 module) or the Web Embedding Fonts Tool (WEFT) by Microsoft. In my first few years of blogging when I was blatantly unaware of proper typography and appropriate choice of fonts, I used WEFT to embed the font Kristen ITC in many of my blog pages.

However, both methods have their own shortcomings – cross-browser support for @font-face is patchy at best, while WEFT is only recognised by Internet Explorer and not in other major browsers people are currently using to prowl the interwebs.

Dynamic text replacement

Then we have brilliant people developing different methods of text replacement – the idea behind these methods is the same: to replace a block of text of a common font to a block of text with a desired font, either by means of rendering an image or placing a flash movie in the original position of the text block.

Facelift Image Replacement (FLIR), by Cory Mawhorter, is a great way to replace text with images – the javascript scans the page for text blocks to be replace. FLIR finds the ones that you’ve specified. It screams of joy, grabs the text and sends it to a PHP script where it parses whatever text that is in the block. Transparent PNG images are rendered as a result, and they are sent back to the browser for display.

Scalable Inman Flash Replacement (sIFR, version 2 and see the latest version 3), by Mike Davidson and Mark Wubben, and initially conveived by Shaun Inman, uses flash videos to replace selected blocks of text. Javascript checks for Flash installation and then places a flash video file in place. The flash video file loads the font, and starting from 6 point font size, upsizes the font until it fits snugly.

What happens when Javascript is not available? For both FLIR and sIFR, they degrade gracefully and nothing happens – the text still displays, but in the original font-family that you’ve specified in your stylesheet, and nothing is royally screwed up :)

For this tutorial, I will be demonstrating how to get sIFR 3 installed, up and running on your webpage or blog. This tutorial is also helpful for those who’re intending to upgrade from sIFR 2 to sIFR 3 – the Javascript implementation is a little different between the two versions, so upgrading is not as simple as I initially imagined (that’s why I had to pull the Maintenance Mode page up for 2 hours).

sIFR 3: Getting started

*Note: There is a great guide for those who intend to install sIFR 3, but here’s my version of it:

First of all, head over to the sIFR 3 page and grab a nightly build of it – of course, you should get the most recent one. I have r436 installed and everything is running good so far – do note that there will most probably be newer nightlies released after this tutorial is posted, so do keep yourself updated about it. If you’re lazy to update, just stick to the current nightly you’ve donwloaded and it should work just fine.

When you extract the .zip file, you will find four folders. You can either upload them under the folder name /sifr/ to your webpage, o you can reorganize the files in anyway you want, as long as you keep track of the changes in the paths to the javascript files. Do note that the demo pages do not work on your computer (i.e. when loaded locally) due to security restrictions – instead, you will have to upload them to a web directory to view the demo. Thankfully, in order to understand how sIFR 3 is implemented on the page, you can always open the index.html or index.xhtml files with notepad or any other text editor your wish for referrence.

Embedding your own fonts, and additional glyphs if needed

One of the folders will be named /flash/. Open the folder, and you will find a file, sifr.fla. Open it up with Adobe Flash and you’ll see something like this. You don’t see a single thing, but don’t panic – at least you’ll see a box with blue borders. Double click on it, and check the ‘Properties’ tab. If it is not open, you can access it via Windows > Properties > Properties, or with the [Ctrl] + F3 keyboard shortcut.

By this time, some words would have magically appeared within the blue borders. If the border appears to be dotted, click once inside the boundary and the words should appear. Head over to the ‘Properties’ tab, and under the choice of fonts (it’s Verdana by default), select the font you want. To cut down on the size of the flash movie file, you can remove all the text and only add those that you need – for example, if you only need a bold typeface, toggle the sIFR 3 - Bold button button and type one character. The same applies for italic sIFR 3 - Italic button, bold and italic sIFR 3 - Bold and Italic buttons and normal. Depending on the need, you may embed additional glyphs (e.g. accents, common on many other languages) by clicking on the Embed button button.

When you’re done, go to File > Export > Export Movie, or press [Ctrl] + [Alt] + [Shift] + [S]. It is recommended that you name the movie with the name of the typeface, to make things easier (very good for people like me with goldfish memory). You arrive at the export options. Here’s a checklist to make sure that it’s correctly exported:

  • Version, set it to Flash Player 8
  • Load order, set it to Bottom up
  • ActionScript version, set it to ActionScript 2.0
  • Options:
    • Protect from import, check
    • Omit trace actions, check
    • Permit debugging, uncheck
    • Compress movie, check

Other options that are not mentioned in the checklist is unne

Loading the right stuff

Between the <head> ... </head> tags, you will have to load the correct javascript files:

  1. <script src="/path/to/sifr.js" type="text/javascript"></script>
  2. <script src="/path/to/sifr-config.js" type="text/javascript"></script>

For me, since I have placed the files under my WP theme directory, under the /sifr/ folder and I preserved the original folder organisation (so the .js files will all be under the /js/ folder), my path will be /path/to/theme/sifr/js/. For WordPress users, you can use:

  1. <script src="<?php bloginfo('stylesheet_directory'); ?>/sifr/js/sifr.js" type="text/javascript"></script>
  2. <script src="<?php bloginfo('stylesheet_directory'); ?>/sifr/js/sifr-config.js" type="text/javascript"></script>

Here are the purpose of loading the two files:

  1. sifr.js is the core javascript file of sIFR – it does all the hard work in replacing the text based on selectors that you’ve specified (don’t panic, we’ll get to that later) and unless you understand what the codes inside mean, don’t touch them.
  2. sifr-config.js is the file where requires your attention – it is the configuration file that is the center of the implementation of sIFR.

The reason why two files are separated is for the ease of upgrade – sifr.js will be upgraded as of when needed, while sifr-config.js need not be modified and should be left untouched during an upgrade, unless you have the intention to modify what sIFR replaces on your webpage or there’s a change of typeface.

Dissecting and configuring sifr-config.js

The authors are terribly nice to provide us with a sifr-config.js file that is heavily annotated. Don’t get busy removing those lines because they only weigh a few kb at most – more importantly, they contain vital information in how you should modify the file. For reasons of spacial efficiency, I removed the comments and kept only the crucial lines intact.

1. Defining the font

var futura = { src: '/path/to/futura.swf' };

It is recommended that you use the variable that share the same name as your font. It makes things a little easier. This tells the script where to load the font movie file. I am using a font called Alte Haas Grotesk, so I will modify this line accordingly:

var altehaasgrotesk = { src: '/path/to/altehaasgrotesk.swf' };

To those who are unaware of it, /path/to/ is a dummy path – it doesn’t exist. I used an absolute path because I’m too lazy to figure out the relative path of the font movie file, but you can always use relative paths if you wish to.

2. Activate sIFR

sIFR.activate(altehaasgrotesk);

This line calls for the activation of sIFR. There can only be one sIFR.activate() function – so, if you have multiple movies to load, simply separate the names of their respective variables with a comma. For example, if I chose to load both Futura and Alte Haas Grotesk, I will write:

sIFR.activate(altehaasgrotesk, futura);

Of course, that means that you will have to specify the variable ‘future’, as mentioned in the previous section. There’s no limit on the number of variables you can declare.

3. Font replacement

Now the fun begins – you call for the replacement of certain chunks of text, using CSS selectors (if you’re familiar with CSS, awesome!). If you are clueless of what CSS selectors are, here’s a good article to get you started.

  1. sIFR.replace(altehaasgrotesk, {
  2. selector: '.entry-title, .category-title, .date-title, .search-title, .tag-title',
  3. wmode: 'transparent',
  4. css: [
  5. '.sIFR-root { background-color: #e5e5e5; color: #1a4051; }',
  6. 'a { color: #1a4051; text-decoration: none; }',
  7. 'a:hover { color: #2d657e; text-decoration: none; }'
  8. ]
  9. });

The first line calls for the variable altehaasgrotesk, which represents the source file of the font movie file. Then, you specify what chunks of text should sIFR replace – in this example, I instruct it to replace all the text contained within elements with the class of entry-title, category-title and etc. Yes, it does support single and multiple selectors, and even IDs (e.g. div#post-234 .entry-title). If you’re familiar with CSS, this part shouldn’t be a problem for you.

The third line is necessary if you’re using a model window plugin, e.g. Lightbox, Facebox, or anything that requires overlaying something over the flash movie. Without setting the wmode to transparent, the flash movie will show through regardless of how high you set the overlaying element’s z-index. It may cause some minor display bugs on Mozilla browsers upon scrolling, but so far I’ve encountered none – the ones I encountered were when sIFR 2.0.7 was installed. sIFR 3 seems to fix a lot of it!

The fourth line, we move on to the styling of the replaced text – everything works as per normal like in CSS. The sIFR-root class is the class assigned to the element that wraps around the replaced text. I specified the background colour and text colour here. Now you ask, what if I have a link? Can I modify the colour and the appearance as well? The answer is yes – on a new line, simply add the appropriate styling necessary. If you do not specify anything for the link, the color reverts to blue, and the link is underlined (both are browser defaults).

Do take note of the commas present after each link except for the last, as well as the brackets and the type of it used. A single error can result the texts not being replaced.

4. More CSS styling

In the /css/ folder, there is a lone file sift.css in there. Usually you don’t need any modifcation to the file and I did most of the styling of the replaced text in the sifr-config.js file. Do note that styling of the replaced text, e.g. font size, will have an effect on the appearance of the final sIFR text as well – varying the font size modifies the font size in the sIFR replaced text. Most of the time, the dimensions occupied by the original text and the replaced text are almost the same due to the brilliant calculation algorithm, so when deciding on what font style you’re using, try without sIFR activated first. After you’ve get the desirable font size, activate sIFR and see magic happens :) usually there isn’t much discrepancy, no worries.

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors: