Tuesday, August 5th, 2008

Facelift Image Replacement; Another look at sIFR type work

Category: UI

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.

Posted by Dion Almaer at 8:42 am
18 Comments

++++-
4 rating from 32 votes

18 Comments »

Comments feed TrackBack URI

Awesome, but what is the effect on SEO? I’m guessing a dramatic decrease???

Comment by JoeMcCann — August 5, 2008

@JoeMcCann: the text is in the ‘alt’ attribute, so you shouldn’t have problems with SEO.

Comment by psychcf — August 5, 2008

Check out the quick-effects plugin to see even more of what this impressive plugin can do. Serious work! http://facelift.mawhorter.net/doc/plugins-quickeffects

This is going into a major client project this week.

Comment by PaulIrish — August 5, 2008

@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.

Comment by cmawhorter — August 5, 2008

@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.

Comment by spoon — August 5, 2008

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.

Comment by JonathanLeech — August 5, 2008

nice. i wrote a small jquery plugin which does the same sort of thing. but less polished. i use it on my blog. i should probably tidy it up and release it properly.

Comment by Jamie — August 5, 2008

text2PNG made a text to png script replacement for a while now and they provide downloadable and hosted versions. Also, the images are loaded using CSS sprites for faster load time.

Comment by nogray — August 5, 2008

are there any security concerns for this? I notice that I can easily use someone else’s generator.php to generate my images (try http://facelift.mawhorter.net/js/facelift/generate.php?text=hello%20world). I wonder if someone were to make a large amount of demanding (large-font, multiple-effects) requests, would it be a significant server load? -> DOS attacks?

also, I was trying the text2PNG and it seems like FLIR loads a lot faster than text2PNG.

Comment by evilsizord — August 5, 2008

@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.

Comment by cmawhorter — August 5, 2008

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.

Comment by brunobe — August 5, 2008

@brunobe

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.

Comment by PaulIrish — August 5, 2008

@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.

Comment by cmawhorter — August 5, 2008

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…

http://drupal.org/project/flir

Comment by btopro — August 6, 2008

@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 : )

Comment by brunobe — August 6, 2008

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.

Comment by cromwellian — August 7, 2008

Seems to be an awesome tool, but I wonder whether and if how it works with IE8. Does anyone made some expierences?

Comment by Flug — August 7, 2008

@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.

Comment by cmawhorter — August 9, 2008

Leave a comment

You must be logged in to post a comment.