More Halloween: Scary font replacement with sIFR

Every once and a while in the life of a web developer, a customer asks the question "Can we use our corporate font on our web pages?" And we have to say: "No, unfortunately, you can't." My customer then asked if I was really, really absolutely 100% sure? In fact, there is a solution. A guy named Mark Davidson developed sIFR. It's pure genius: it uses JavaScript to replace every text block you want with a Flash file of exactly the same size. The Flash file renders the text in whatever font you like. Since all this is done after page load, search engines see the text as normal.

Resources

• sIFR homepage
• sIFR documentation wiki
• sIFR fonts at FontSmack

Let's go scary

You can make your own sIFR fonts using Macromedia Flash. There is also a standalone program for MACs which allow you to do this. There is a PC version, but it's broken: it crashes on the space character. Lucky for me, Frederik Claerhout (marlon.be), a web developer I work with when there's Flash to be done, was willing to make my scary font into a sIFR font: poultrygeist. Since fantasy fonts are less readable, I had to make all the headlines bigger before I let sIFR do its job.

The minimum JavaScript

Since we also introduced sIFR at my customer, I made a tiny JavaScript to make the font replacement with only the basic functionality. Beware: there is no Flash detection. It will only work if you got minimum Flash 6 installed. Here's the JavaScript:

G.sifr={font:/domino/poultrygeist.swf',
init:function(){
    var m=this,o,i,p
    m.replace($('home'))
    m.replace($$('h1')[0])
    o=$('viewbody')
    if(o){o=$$('strong',o);for(i=0;i<o.length;i++)m.replace($$('a',o[i])[0])}
    o=$$('h2')
    for(i=0;i<o.length;i++)m.replace(o[i])
},
click:function(){alert(this.outerHTML)},
replace:function(a){
    var m=this,v=[],q={wmode:'transparent',quality:'high',movie:m.font},x,p,h,w
    p=a.innerHTML
    w=q.width=a.offsetWidth
    h=q.height=a.offsetHeight
    q.flashvars='txt='+p+'&amp;offsetTop=0&amp;w='+w+'&amp;h='+h +'&amp;textcolor=#dd0000'
    v.push('<object type="application/x-shockwave-flash" width="'+q.width+'" height="'+q.height+'" data="'+q.movie+'">')
    for(x in q){switch(x){case'height':case'width':break;default:v.push('<param name="'+x+'" value="'+q[x]+'" />')}}
    v.push('</object>')
    a.innerHTML=v.join('\n')
}
}

Some quirks

My reduced JavaScript has some quirks: in IE, eventual hyperlinks on the replaced elements stop working. So to open a post from an overview, you have to click on 'Permalink'. Don't worry: it is just for the Halloween period. If you want to implement sIFR yourself, better use the original JavaScript with lots of features and not mine. More scary tricks next post.