Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!

sIFR takes over the elements and puts small swf files into place. FLIR on the other hand generates images on the server and puts them in place. They both suffer from the progressive switch in place that you often see as you watch the page load.

Also, one downside is that once the text is an image you can’t copy and paste it. Ben can once again drool over the typography.

@JoeMcCann
It shouldn’t have any effect on SEO since all images are put in place via Javascript after the page loads.

@Paullrish
Thanks! The QuickEffects plugin requires ImageMagick to work… i’m not sure the minimum version though. I have plans to incorporate many new effects in the future. I’d really like to make it into a complete substitute for the photoshop effects.

FTA: [q]Also, one downside is that once the text is an image you can’t copy and paste it.[/q]

I see this more as a browser pitfall. Copying and pasting the images works as expected in Firefox because it grabs the text from the alt attribute. If only all browsers were this agreeable.

@JoeMcCann, @psychcf is correct — the Alt tag stays in tact. Also, if javascript is disabled, the replacement does not occur, and the original text is still visible.

Also, regarding this, in the post: “Also, one downside is that once the text is an image you can’t copy and paste it” — in Firefox, when highlighting an image and copying it as you would text, the Alt attribute is copied into the clipboard, thus giving the same effect of copying the original text.

This is pretty cool. I do something similar, but with SVG and not geared towards text. The idea is if the browser supports SVG, let it render it, otherwise send it back to the server to be rendered as PNG. The advantage of using SVG for something like this would be a native-browser implementation, and a fallback to PNG rendered on the server for browsers that don’t do SVG. Also, the fonts would be rendered consistently, for example using the standard web fonts, but applying strokes, filters, transforms, text on a path, etc.
Finally, one could use a similar technique to fill in for other missing browser functionality (e.g. unsupported safari-style css transforms) – javascript detects its not available, degrades / sends requests to the server for rotated / stretched content. You could use, for example, the Flying Saucer XHTML renderer to render to an image and replace whole blocks of XHTML with it. Just food for thought.

@evilsizord
I wouldn’t call them security concerns but you are definitely right about the DOS. The script will only execute for as long as PHP’s built in time limit allows (usually 30 seconds). If you wanted, you could use set_time_limit(5); at the top of your config file. Five seconds is more than enough time to generate the image and this would help to minimize the risk.

Also, it should be noted that the images generated by FLIR only need to be generated once. After that, they are cached and the cache is served to speed up loading. Facelift includes it’s own caching mechanism that is capable of handling a site of any size. Of course, if you were to change the text on the page, a new image would be generated.

Sorry, but this is hardly new. At http://www.alistapart.com/articles/dynatext Stewart Rosenberger wrote and exemplified about this technique back in 2004. Facelift has the merit of, say, branding and packaging it up (the name is then very appropriate), but is not new.

And it can be improved in two ways:
– Preventing the script from being loaded from referrers which are not in the same domain (or not in a list);
– Using the image as the background for the element to be replaced, and setting the text-indent to a very, very low value, such -1000em. It keeps the text in the page (Javascript-enabled screen readers thank that) and allows any browser to copy that text (not only Mozilla, as noted by spoon.

while not new, at least the project has an owner (and now, a community) to develop it farther than a couple php scripts that ALA gave out. also check out the quickeffects plugin above, as that is certainly something that the ALA scripts could not do.

i agree on providing the option to block non-local referrers.

Cory responded to me on the background-image/text-indent technique; “Facelift already includes this functionality. I have it off by default because it isn’t as well tested. It also breaks the copy and paste functionality in Firefox. It’s easy to turn on though — check out http://facelift.mawhorter.net/doc/flir-js-flirstyle-object-usebackgroundmethod ”
Using that would also be a way to support :hover states.

@brunobe
I did briefly think about blocking referrers but considering that the HTTP_REFERRER is not a guarantee I figured, why bother? It can be easily spoofed and a lot of web surfers turn sending the referrer off for whatever reason (Norton firewall blocks sending the referrer by default), and therefore wouldn’t be able to see any replaced images.

I am definitely not saying facelift is revolutionary. The techniques have been around for a long time. It is just another tool in the shed.

I’ve thrown together a Drupal integration module for this project. You need to create a cache folder and give it write permissions but other then that it drops in and just works! It also has a settings page you can customize what to automatically convert to images. Check it out…

@Paulrish
Yes, yes: turning the concept into a concrete project and building a community around it is a very noble achievent. I couldn’t ever condemn tha tin any level.

@cmawhorter
Referrer is surely not a guarantee. There are other ways to prevent DOS attacks or even plain leeching that should be used.

Perhaps I wasn’t effective communicating earlier: putting up the project is a very good thing, and only if I had done the same with my set of scripts I could ever disagree on that point.
Perhaps I should actually contribute to Facelift : )

I remember back in the days browsers with poor I18N rendering support, many Asian sites in China/Korean/Japan would render each header, paragraph, or sometimes entire pages, as images.

I use a related technique (http://timepedia.blogspot.com/2007/06/gwt-canvas-rendering-rotated-text.html) I dubbed “Font Book Rendering” in my Chronoscope charting library. Rather than ask the server to render the entire text, I ask it to render a fontbook (in practice, every printable ascii character) plus font metrics (ascent/descent/baseline/advance/leading/etc), then characters are cut out of the fontbook image, clipped, and positioned within a DIV using the font metrics.

@Flug
ATM IE8 just crashes when you load a page with facelift. I have not investigated the reason at all because I’m hoping IE8 will progress a little further before it becomes yet another headache from MS.

@C4
Color me embarassed… I noticed that the other day when I was working on the newest version. I don’t know how I overlooked that.

This is fixed in v1.2 beta 1 and v1.2 also includes many other fixes, features, and even hover. I will also be adding in the referrer blocking mentioned above in the final version of 1.2.