Monday, September 26th, 2005

sIFR 2.0: Rich Accessible Typography for the Masses

Category: Accessibility

>Mike Davidson got together with a group of developers to work on a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics.

The method turned into sIFR (or Scalable Inman Flash Replacement):

How it works

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

  1. A normal (X)HTML page is loaded into the browser.
  2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
  3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
  4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
  5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon
to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

Resources

Related Content:

  • Rich Mogull
    Rich Mogull has 20 years of experience in information security, physical security, and risk...
  • Outsourcing for the masses
    Traditional outsourcing solutions are geared towards large corporations, but managed service provision uses the Internet to...
  • Rich Mogull
    Securosis Founder & Analyst Rich Mogull is a contributor to...
  • Rich Castagna
    As editorial director of TechTarget's Storage media group, Rich oversees content for Storage magazine, SearchStorage.com, SearchDataBackup.com,...
  • Cloud computing advantages bring disaster recovery to the masses
    Cloud computing capacity and scalability mean that disaster recovery, once reserved for the rich and famous, is now accessible to...

Posted by Dion Almaer at 12:57 pm
2 Comments

+++--
3.7 rating from 11 votes

2 Comments »

Comments feed

I ported this code to run over prototype and behaviours. It also uses css for color information. http://miedlar.com/dev/ifr

Comment by bmiedlar — April 27, 2007

I would like to get scriptaculus to work with sIFR but the effects stop the flash from rendering due to the display:none can anyone help?

Comment by Search Engine Optimisation — August 16, 2007

Leave a comment

You must be logged in to post a comment.