All Annotations of Mike Davidson -- sIFR 2.0: Rich Accessible Typography for the Masses[Preview]

saved by90 people, first byAlexander Dodonov on 2006-04-24, last byMatthew Heinrich on 2008-08-12

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

• sIFR 2.0: Rich Accessible Typography for the Masses

  
  

  April 27, 2005

  
  

  
  

  Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method, dubbed sIFR (or Scalable Inman Flash Replacement), is the result of many hundreds of hours of designing, scripting, testing, and debugging by Mike Davidson (umm, that’s me) and Mark Wubben. Through this extensive work, we, along with a invaluable stable of beta testers, supporters, and educators like Stephanie Sullivan and Danilo Celic of Community MX, have completely rebuilt a DOM replacement method originally conceived by Shaun Inman into a typography solution for the masses. It is this technology which provides the nice looking custom type headlines you see on sites like this one, Nike, ABCNews, Aston Martin, and others. We’ve released sIFR to the world as open source, under the CC-GNU LGPL license, so anyone can use it free of charge.

  
  

  Anyone who has been following the developments with sIFR over the last several months is already aware of most of the information on this page, but this being the newly official sIFR 2.0 landing page, an overview of the technology is below. Also, feel free to read the complete historical perspective in my original post Introducing sIFR: The Healthy Alternative to Browser Text.

• 

• Proper use and best practices

  
  

  sIFR is a powerful tool. So powerful, in fact, that you can completely ruin a web page with it if you get overzealous and don’t exercise restraint.

• sIFR is for headlines, pull quotes, and other small swaths of text
• type which accents the rest of the page. Body copy should remain browser text.

• on 2006-04-26 Adodonov
  Технология sIFR
• on 2006-08-10 Forgetcolor
  flash-based accessible font swaps for the web
• on 2006-08-22 Lanemik
  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,
• on 2006-10-24 Abradburne
  description of sIFR
• on 2007-02-27 Mitten
  Image replacement for text, degrades to XHTML for browsers without Flash
  
• on 2007-02-27 Mitten
  Image replacement for text, degrades to XHTML for browsers without Flash
  
• on 2008-02-11 Pabranch
  Optimized dynamic generation of Flash movies bound using javascript to provide rich Font experience regardless of the client. Degrades gracefully. Looks interesting when you just HAVE to have that PERFECT font.
  
  
• on 2008-02-11 Pabranch
  Optimized dynamic generation of Flash movies bound using javascript to provide rich Font experience regardless of the client. Degrades gracefully. Looks interesting when you just HAVE to have that PERFECT font.
  
  Note that it is NOT intended for full paragraphs or any type of extended passages. Serves a similar function as Text Images.