sIFR Web Typography

Tagged:
I know I am behind the curve on this stuff these days, but this is pretty cool: One of the problems with Mozilla spawing out of Netscape was the loss of licensed code. Things like RSA's SSL API were, of course, quickly replaced. One that wasn't, however, was Bitstream's TrueDoc font embedding. You can still get WEFT from Microsoft to embed TTFs for WinMSIE, but everyone else is cold. Enter the sIFR flash hack:
With today's release of sIFR, or Scalable Inman Flash Replacement, we finally have a standards-compliant way to deliver rich typographical text in a flexible manner to over 90% of web users. ... sIFR approaches text replacement in a totally different way than previous methods: * Traditional IFR says �Here�s the exact vertical and horizontal space we�re going to provide for this Flash headline. Make sure you don�t use too many words or they won�t show up.� * WAC-FR says �Here�s the text we need to display in Flash, here�s the type size to display it at. We�ll keep stacking Flash movies on top of each other until all the text is displayed.� * sIFR turns the model on its face and says �Here�s the exact space the headline fills up if rendered as browser text. Let�s draw a Flash movie that exact size and lay the type out as snugly as possible within it.� The following explains the sIFR process: 1. A page is requested and loaded. 2. Javascript detects if Flash 6 or greater is installed. 3. If no Flash is detected, the page is drawn as normal. 4. If Flash is detected, the HTML element of the page is immediately given the class �hasFlash�. This effectively hides all text areas to be replaced but keeps their bounds intact. The text is hidden because of a style in the stylesheet which only applies to elements that are children of the html.hasFlash element. 5. The javascript traverses through the DOM and finds all elements to be replaced. Once found, the script measures the offsetWidth and offsetHeight of the element and replaces it with a Flash movie of the same dimensions. 6. The Flash movie, knowing its textual content, creates a dynamic text field and renders the text at a very large size (96pt). 7. The Flash movie reduces the point size of the text until it all fits within the overall size of the movie. This, of course, all happens too quickly for the user to even notice what�s going on, but below is a super slow motion example of the process (Flash required to see demo):
Perhaps at long last, there is a real end in sight for graphic headlines.