sIFR 2.0b: Come Kick the Tires
UPDATE: Version 2.0 is now available. See article here.
Without further ado, I present for download sIFR 2.0b (or Scalable Inman Flash Replacement Two Point Oh Beta). Before I get into the details, I just wanted to post the link first, and also, an example of sIFR 2.0b in action. Note that this new example does not have a single image anywhere on the page or even in the CSS. It’s pure XHTML text. That’s it.
How about an update on what’s occurred since 1.0.
Major goings on
Perhaps the most interesting thing that’s happened in the last couple of weeks is that according to Daypop, the original sIFR article was the 13th most popular page in the entire world (well, blogosphere at least) for a short period last week. That’s pretty cool, damnit. As blogging spreads from the techies to the general public over the next several years, reaching the top 20 is going to get harder and harder, so I reckon that’s probably it for me. Might as well retire now.
Besides the nice linkage, I received posts or e-mails from people in over 20 countries. Most posts or e-mails were feature requests, improvements, or written expressions of glee. Besides all the nice e-mails, it’s interesting to note who hasn’t shown up in the comments. The highly esteemed Joe Clark is absent, which means one of three things:
- Joe is vacationing on a beach and away from a computer.
- Joe is sick of responding to my nonsense.
- sIFR is actually accessible!
So now that I’ve shot the big accessibility flaregun into the air, we’ll see what happens. Great accessibility improvements have already been made, but I don’t claim to be a master at testing screenreaders, so if you have insight, please post it.
Instead of manipulating the content between HTML tags using innerHTML, Mark’s replacement function uses XML and the DOM to physically change the nodes of the document on the fly. sIFR now hones in on an element, strips the content, inserts a node with a Flash object in it, feeds the original content into the Flash movie, and then reinjects the original content back in place, wrapped in a span, as accessible, yet hidden, text. It sounds complicated because it is complicated. Thankfully, Mark took care of the hard stuff.
Notable feature additions
Here are the major additions which made it into sIFR 2.0b:
- Faster loading and rendering through Aaron and France’s method of firing the script calls at the bottom of the page instead of onLoad. A fact lost on me about onLoad calls is that they actually don’t get called after the HTML has loaded. They get called after every single element of the page has loaded, including images, Flash, video, etc. By placing our script invoker just before the ending BODY tag, we ensure every node of the document is there for possible replacing, but don’t have to wait for the other media to load.
- Font subsetting. sIFR now uses a dragged-onto-the-stage textbox in Flash in order to better control what characters get exported from the font character set. By default, english language characters are exported, but by selecting the textbox in Flash and clicking the “Character” button in the Properties palette, you can export most other languages as well. A further major benefit besides internationalization is that since we’re exporting a smaller character set now, the resulting .swfs are about half the size. SWF files are often well under 10k now depending on the complexity of the font.
- More efficient scaling. As the text is instantly resizing itself, it now starts out small and gets bigger, whereas before it did the opposite. A user sent me a link to an entire 6 paragraph text passage he was replacing (NOT recommended, but interesting) and pointed out how long it was taking. This was because the whole page was drawing at 96 point type and you can imagine how many lines of scrolling that is. So now, we start out at 6 point and enlarge until the text fits snugly into the movie bounds. To scale from 6 point all the way to 60 point takes less than a tenth of a second now.
- Ability to pass textcolor, linkcolor, and hovercolor attributes to style the text.
- Ability to horizontally center text.
- Ability to replace text which wraps based on where a float might be. If you want to replace text sitting in a variable width column bounded by a float (as seen in the example), you can simply set its CSS display property to “inline” and the script will properly measure and replace it.
- Better selectability of text.
- Ability to use fonts of radically different proportions than the originals. sIFR will always work best, and require the least fine-tuning, when the fonts you use in Flash have roughly similar proportions as your browser text. But, like in the example, you may find yourself wanting to use very narrow fonts, where no browser text equivalent is available. For that, we now have a set of “decoy” styles for each element we are replacing. Sounds complicated but it isn’t. Basically, if we are replacing an H1, we have a style now in our stylesheet called “.sIFR-hasFlash h1″ where we can adjust the letter-spacing of the browser text before it is measured. So, to emulate a very narrow font like in the example, you’d just apply a negative letter-spacing in pixels until the two fonts are similar. You needn’t worry how this browser text looks because it will never be seen… it’s just a decoy. I would suggest trying your font out first before embarking on this step. You may not need it, and it’s really the only potentially tricky part of this whole process.
- Separation of Actionscript into .as files. You can now edit the Actionscript from outside the Flash environment. There are two files: “customize_me.as” and “dont_customize_me.as”. The first file contains the few common things you may need to modify. The second contains functions.
- Domain securing of .swf font files. By customizing “customize_me.as”, you can export your .swfs so that no one else can grab them and use them on their domain. The default is unsecured (to eliminate any problems in testing).
- Almost perfect printability in most browsers.
- Compatibility with IE (Mac and PC), Mozilla and Firefox (Mac and PC), Opera 7 (Mac and PC), Safari, Omniweb, and possibly other browsers and OSes as well.
A quick primer
It’s 1:45 in the morning right now and I spent the last three hours trying to squash a Windows XP SP2 bug which came up at the last second, so unfortunately I can’t write a full instruction set right now, but I’ll give the basics. It’s particularly infuriating when the “solution” to the bug is to add
node.innerHTML +="" which essentially means “take this piece of content and don’t do anything with it”. I’ve heard of adding a space before, but adding nothing? Anyway…
- Download 2.0b. sIFR is licensed free of charge under the standard CC-GNU LGPL.
- Get familiar with index.html. That’s really the only file which contains the things you’ll need. It contains the replace statements at the bottom and the CSS at the top.
- To make your own .swf files, simply open up the .fla file in Flash, doubleclick the textbox which is on stage (it takes up the whole stage), and choose your own font from the Properties palette. Then, choose File > Export and you’re done!
- The parameters to use in your replacement functions are explained in both the .js and .html files. Plug in your parameters and you’re good to go!
Some Final notes
Firstly, it’s late and there is plenty more to say… but it will have to wait. Second, this method is recommended for “light duty” on web pages. Although it may work on huge bodies of text, it is meant merely for display type… headlines and such. The example provided is a fairly complex use of it, mainly because of the tight and sometimes floated bounds of the type, but the simpler the better. And finally, I know it’s not perfect yet. Font sizing is an inexact science when you’re cross-pollinating two totally different display mechanisms, so part of what sIFR is all about is giving up absolute pixel control in exchange for absolute typeface control. I’ve worked extremely hard and learned a ton about font metrics and sizing peculiarities through this project and it is my goal to minimize display inconsistencies. I guess we’ll find out in the comments how well it’s working.