- create content
- events
- links
- spanner blog
- recent posts
- view my page
- news aggregator
- categories
- sources
- AlwaysOn
- Due Dilgence - Tim Oren
- Engadget
- Linsec.ca Tech Blog
- LinuxDevices
- Open Source Initiative
- Origami Partners News
- Pierce Law IP News Blog
- Reuters - Politics
- Reuters - Technology
- Reuters - Top News
- Sarah Pullman
- Slashdot
- SourceForge New Releases
- The Mitchell Report
- Ubergizmo, The Gadgets Radar
- Wired News
- freshmeat.net
- i-Policy
sIFR Tips, Tricks 'n' Traps
Submitted by danyell on Sun, 02/10/2008 - 2:58pm.
Code | Experiment | Learning | Open Source | Reportage
I've been working on converting an all-Flash Web site to HTML, so its content could be properly spidered by Google, Overture etc.
My mandate was to preserve the design of the original Flash site in every possible respect, short of getting ridiculous with JavaScript- and DOM-based animation. The original site creators are big-time Flash addicts, and primarily visual. So the issue of typeface embedding came up rather quickly.
I decided to try sIFR (link), a rather clever technique for using Flash + JavaScript as vehicles for embedding fonts (via SWF files) in a way that leaves spider-able HTML intact. There's a proprietary Microsoft technique that supports embedding TrueType fonts, but it's only supported in Internet Explorer. That leaves popular browsers like Firefox, Safari and Opera out in the cold -- not to mention popular typeface formats like OpenType and Adobe Type 1. And you have to prep your fonts with Microsoft's WEFT (Web Embedding Fonts Tool), a utility that's such a top priority for Microsoft, it hasn't been updated since 2003.
sIFR is not perfect, but it's nearly three years old, it's stable and it works. The basic steps go like this:
- Open the sifr.fla Flash movie in the Flash authoring environment.
- Select the text box in the stage.
- Use Flash font-embedding to include the typeface of your choice, optionally including / excluding any glyphs you know you will / won't need.
- Save the resulting SWF file, typically naming it after the embedded typeface. You will need to repeat Steps 1-4 for each distinct font you want to use on your page.
- In your HTML document, add some references to the sIFR JavaScript libraries.
- Just before closing the <BODY> tag, add some calls to run sIFR's replace function on specific HTML elements (such as <p> or <h2>) and/or specific CSS styles.
sIFR will replace the HTML text with an identically-sized instance of your typeface SWF, set to display the text that used to be HTML. The type will have all the Flash bonuses such as anti-aliasing. But if you "view source" you'll see your original HTML. And that's what search-engine spiders will see.
Any browser without Flash installed will see your original HTML document -- a nice fallback, especially considering the limitations of Web browsers on some mobile devices.
There are some gotcha's, of course. Once rendered as SWF, text is no longer liquid. Resizing the browser window will cause once-liquid block elements to clip or require scrolling. And the CSS tricks required to position text properly across different browsers (I'm working primarily in IE 7 and Firefox 2.0.12) suggest to me that the technique is best limited to headlines, pullquotes and other large text blocks. sIFR-ing entire pages of body text will probably create more problems than it solves.
Remember to quality-assure your work in a browser from which you've deliberately uninstalled Flash! This will be the best way to verify the non-sIFR;d appearance of your site. If you're willing to dive a little deeper into sIFR's innards, there are some JavaScript functions you can use to debug the replacement function, including a toggle function to disable sIFR replacement. It may be silly, but I prefer to be 100% certain, so I set up a machine without Flash for my testing.
All in all, this is a very serviceable toolkit. It's quite speedy, and works as advertised across browsers. I've been able to use some OpenType fonts with it by converting them to TrueType (OTF to TTF) using a FontForge script on a Linux machine.
