Borloz.com

Today, I watched a screencast on an awesome replacement for sIFR called FLIR. It addresses the one thing that was holding me back from trying sIFR – I don’t have Flash.

FLIR works much like sIFR in that it takes text inside an element and replaces it with pretty much any font you’d like. But, instead of using a Flash movie of your font, it uses PHP and the GD library (or optionally ImageMagick) to replace your text with an image. So, I tried it out on a project that I’ve been working on lately.

The entire implementation went very smoothly, and I was thrilled with how little effort it took to get it up and running – that is, until I checked things out in IE. For some reason, FLIR’d fonts in IE don’t take on the proper font size according to the cSize parameter that FLIR allows you to pass to the FLIRStyle object. In fact, passing the cSize parameter seems to make IE ignore the font-size property in your CSS entirely.

Someone posted in the FLIR forums that you could just give IE larger font sizes in order to offset the fact that it doesn’t honor cSize, but that means that everyone who has IE and doesn’t have Javascript, or has images turned off, will get huge fonts. Even though this would be a pretty small number of people, my OCD got the best of me, and I decided I needed to come up with a way that even those using IE without Javascript would get normal sized fonts. So, I put on my thinking cap and used a combination of rudimentary user-agent detection in PHP and IE’s conditional comments to make it work for both scenarios.

Note: I’m using jQuery in the example below, but you could just as easily use another Javascript library or pure Javascript.

    <!--[if IE]>

        <script type="text/javascript">
			// You may have to play with the font size to get it just right
            $("#header h1 a").css('font-size','45px');
        </script>

    <![endif]-->

    <script type="text/javascript">

        FLIR.init({path:'/flir/'});

        $("#header h1 a").each( function() {

            FLIR.replace( this, new FLIRStyle({ mode:'fancyfonts', cFont:'gabrielle'

			// If the browser is not IE, then pass the cSize param to the FLIRStyle object
            <? if(!stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE')) : ?>
                , cSize:'*1.3'
            <? endif; ?>
             }));

        } );

    </script>

So, as you can see above, I’m changing the “font-size” CSS property (for IE only) right before doing the FLIR replacement. Since this is done in Javascript, I can leave my default font sizes alone, giving IE users without Javascript normal sized fonts, but also adjusting the font size appropriately so the FLIR’d fonts will turn out correctly.

Other than this minor hiccup, I couldn’t be happier with FLIR. It’s easy to implement, allows for graceful degradation for those without Javascript enabled, and lets you use pretty much any True Type font available.

Note: If you find FLIR useful, please consider donating to the author. He makes FLIR available free of charge and it’s very obvious that he’s spent a significant amount of time in the development and support of a truly wonderful technique. Cory is way too modest and hides the link in the footer of his page, so here’s it is: http://facelift.mawhorter.net/donate/.