FLIR – Font Replacement Technology Explained Pt 3
Posted by Mark Elphinstone-HoadleyFeb 24
FLIR…
…stands for Facelift Image Replacement. It is also known as Facelift. The methodology of this is very similar to sIFR in that it uses JavaScript to replace text elements, but this uses 32 bit PNG images to replace text.
Dependencies
- JavaScript
- Browsers supporting alpha composite
- PHP server
Features
FLIR works very well with most browsers, as it gathers CSS information from the element it is replacing and styles itself appropriately – most typography related CSS2 rules are applicable. It uses the same method as sIFR for object sizing where it sets the object size to fill the original area allocated.
As you hover over each link you will notice hover styling rules are also included and are a strong feature with FLIR. All images are generated via PHP with anti aliasing (which tends to appear slightly crisper than sIFR) and then cached on the server to reduce browser load time and CPU load on the server.
Example

Catches
Despite its flexibility FLIR sometimes does not render properly when using a wider font than the original – in this case words have a habit of falling off the line they’re meant to be on. This seems to be a feature of text-to-image generation that can be fixed with a little CSS tweaking and font alteration. Similarly if you decide to use a more flamboyant font such as handwritten or abstract and you aren't using the more feature rich ImageMagick PHP module to generate your images then you will also notice that letters are cut off when they should overlap. A good example of this is on the FLIR home page ("It's easy! Get started now.").
Letter spacing is also currently rather crudely incorporated by using character spaces rather than spacing between letters to make up for the lack of alternative in PHP and extra character spaces are rendered in sentences which may be an annoyance to a developer or a constant nagging pain to someone who's just plugged it in with WordPress or similar. With credit PHP's capabilities are no real fault of their own and there are plenty of features in FLIR to make up for it.
FLIR also uses more resources than perhaps are necessary (front and back end) so you might find your online storage depleting rapidly. You also need to empty the server cache every time you change a font via the configuration. New images are used when you hover over a link which need to be generated and then cached by the browser and the server. These 'hover' images are downloaded only once activated (although they can be preloaded). To rectify storage issues however FLIR does have an accessible configuration system to alter cache settings.
One comment
Comment by initiative_uk on February 24, 2010 at 5:21 pm
[Blog] FLIR – Font Replacement Technology Explained Pt 3 http://www.global-initiative.com/blog/in...