In Flash Replacement - Controlling fonts and text-smoothing (anti-aliasing)

Published | 16.23, 15th of January 2009, by Jay Vincent | Technical

I'm coming across more and more websites using this technique, buzzwordly-named IFR (Inman Flash Replacement)

IFR is displaying text through flash - dynamically feeding a text string into a SWF file, which in turn displays the string in a font style specified by the SWF. Doing this ensures text is always displayed in a smooth anti-aliased fashion, and allows for non-web fonts to be used on web pages.

The most desirable application of the IFR technique is for text in header tags (h1, h2, h3, etc), but these tags are very important to search engine spiders and contribute quite heavily to how the page is read, so replacing them with flash files is a big no-no. Search engine's don't read text within flash (or images for that matter).

The solution is a clever mix of javascript and css:

h1, h2, h3, etc. tags are set to display: none by default.
Once the DOM (document object model) has loaded, a javascript function is triggered which reads the text in these tags, and inserts the SWF file into the tag with the text as a parameter.
The original text is then wrapped in a span tag.
The h1, h2, h3, etc tags are set to display: block, and span tags within these tags are set to display: none;

Thats how I think I'd do it anyway... although setting h1 tags to display: none by default scares me a little, perhaps visibility: hidden would be better. There would also need to be flash detection at stage 2...

Example - http://www.yourstreet.com/ - Uses IFR quite extensively on the homepage, but select 'no styles' and you'll see the text as normal web text - readable to us and search engines.

Personally, I'm not too keen on this technique although I can see its purpose. I'd prefer to use PHP's GD library and the freetype library because I feel dynamic content should be handled and processed at the server, not the client. Doing this eliminates the need to test the client machine environment for flash, activeX, browser, etc...

No comments | Make a comment (Average rating | 5.00 / 5)