sIFR 2.0: Release Candidate 2 is Finally Here

UPDATE: Version 2.0 is now available. See article here.

Alright, sIFR Release Candidate 2 is finally here. It’s been exactly two months since Release Candidate 1 and we’re happy to say that things have held up very well so far. Release Candidate 2 fixes a handful of minor issues, and barring any regression behavior which may turn up in RC2 (but probably won’t), we think we have a solid 2.0 release on our hands. Thankfully, we’ve taken care of this before the end of 2004, because according to the 2005 Web Design Forecast, sIFR will be a huge part of the emerging typographical landscape in the coming year.

We couldn’t agree more.

Before I get into the details of RC2, I just want to thank Mark Wubben for a) all the great javascript work he’s done on sIFR, and b) all the helpful support he’s provided to people asking for assistance in the comments. There have been over 700 comments on all sIFR threads so far, and Mark has managed to successfully attend to almost all of them which pertain to javascript or implementation. So once again, thanks Mark for being so helpful, and also for being a genius.

I also want to thank Danilo Celic and Stephanie Sullivan of Community MX for their help in bringing sIFR to the masses. Check out Danilo’s Breeze Presentation for a great overview of sIFR and also a peek at the power of Macromedia Breeze. I love Breeze more every time I see it.

And finally, two more thank yous. One to Zen Master Dave Shea for his helpful, even-handed, positive review of sIFR, and one to Sean Schroeder for his beautiful sIFR work on Prosper Magazine.

Oh yeah, and I almost forgot, Wes Carr and the folks at 2Entwine have taken sIFR and expanded it into Fotobuzz.org, a photo annotation engine. Instead of replacing text with sIFR, Fotobuzz replaces images for the purpose of annotating them inside Flash. It is really really slick. Make sure and check it out.

Now… on to the details.

First of all, to upgrade to sIFR 2.0 RC2, you need only re-export your .swf files and pop in the new sifr.js file. No implementation details have changed. So in other words, upgrading should only take a minute.

Here’s what we’ve improved/changed/fixed:

  • sIFR now works in all reasonable versions of Opera. This should include all flavors of 7.x on both platforms.
  • URLs of unlimited length are now supported. Flash unfortunately has a 128-character URL limit on textfields, but we’ve gotten around that with some crafty coding.
  • Newline support is now added. If you place <br />'s in your replaced elements, they will now be honored.
  • HTTPS is now supported for domain-protected files.
  • sIFR now uses exact domain matching for domain-protected files. As a result, two-part domains like .co.uk are now eligible for protection.
  • Various speed improvements.
  • Minor selector bugs have been squashed.
  • Browser detection is now exposed in the javascript so you can easily disable sIFR for any browser you’d like.

At this point, we believe all outstanding issues are now resolved. Please feel free to download the new release and let us know what you think! The instructions are now contained in a readme.txt file within the zip archive below.

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

127 Responses:

  1. Looks cool – but what is it?

    I found this page from the WaSP’s recent blog entry but nowhere can I find a description of what sIFR is or does, not even in the readme file. Can you explain?

    Thanks!

  2. Will, sIFR replaces HTML elements with Flash files, so you have much better control of the typography your website uses. Your website will still be accesible as well!

    (As you can see this is RC2, there have been several older versions already, we don’t explain with each new version what it is all about anymore…)

  3. Lou Vanek says:

    Nice work. A couple comments.

    I didn’t like the way sFIR was resizing my headlines so I just commented out the flash width params and I get consistent font output now. Easy fix.

    What I’m not sure about is if it’s possible to add alpha to the text. I’m new to Macromedia MX but I know flash supports alpha because I’ve used it with Ming and PHP/SWF Charts. Anybody know if it’s possible with sFIR? This is already a cool hack, but alpha would be bitchin.

    Once again, kudos!

  4. Penar says:

    Hey guys,
    This stuff is fantastic!
    One small issue though: I sticked closely to your code, and all is running well in Firefox…alas IE doesn’t dig it (it’s all empty). The URL is here http://www.peshkupauje.com/index-new.html

    I know people shouldn’t use IE, but most of my readers are people that use public computers, where they don’t have a say in what browser is used.
    Thanks again!

  5. Adam says:

    I have finally implemented sIFR on my first Website and am very pleased with the results on IE/Win & Firefox but for some reason it crashes on IE/Mac although Netscape and Safari are fine.

    If anyone could perhaps point out where I am going wrong I would be very grateful.

    http://creativefreedom.co.uk

  6. Lou, could you elaborate what exactly you removed? The CSS properties or something in the JavaScript code?

    Penar, I think this is because the path to the Flash files is confusing IE. Try /georgia.swf.

    Adam, I think this is a CSS issue, but, without more information on what you mean by crash, I cannot be sure, of course.

  7. Lou Vanek says:

    I changed this line:
    //sVars = “txt=” + sText + sFlashVars + oContent.sLinkVars + “&w=” + sWidth + “&h=” + sHeight + oContent.sLinkVars;
    to this:
    sVars = “txt=” + sText + sFlashVars + “&h=” + sHeight + oContent.sLinkVars;

    I changed this line:
    //nodeFlash.style.width = sWidth + “px”;
    to this:
    nodeFlash.style.width = “100%”;

    This stops the funny font scaling.

  8. Adam says:

    Mark,

    Thanks for the feedback. I’m a bit new to CSS so it is of little surprise it is an issue with my code rather than sIFR.

    By ‘crash’ I mean that the browser hangs with the coloured wheel spinning ad infinitum. It does manage to load all of the visible page including text, bg colours and borders, but no images and no sIFR (or replacement text) seems to load before it ‘hangs’.

  9. Penar says:

    hey mark,
    thanks for the immediate response. I tried /georgia.swf…no change. I also tried full address, still no headlines in IE (everything is fine in Firefox, Win for both). did anyone else ever encounter a similar issue?

  10. Lou, could you put up two test pages with the hack applied and without? I’m curious as to what actually is the problem and if this is the right solution. I have to say though that I’m not really up to speed with how Flash calculates the font size, so I’ll defer to Mike on that.

    Adam, curious. The tests Mike did with IE/Mac didn’t gave any trouble, but from past experience I know it’s usually CSS which messes things up. Perhaps Mike can have a look.

    Penar, I’m getting a JavaScript error in IE this time (was at a different box earlier today). It could be that other JavaScript code is causing the problem, so if you could try to determine that, that would be great.

    (IE’s JavaScript debugger is really quite bad, and I don’t have any other debuggers installed at the moment, so I can’t verify this for you.)

  11. Lou Vanek says:

    You can see an example of what I mean at,
    http://www.123schedule.com/home.aspx?scalefont=true

    and you can see how my javascript change affects the same page,
    http://www.123schedule.com/home.aspx?scalefont=false

    Especially notice the menu item “Registration,” (half way down the
    page) the way it is being scaled small with the default javascript.

    BTW, I’m not suggesting you incorporate my hack into your work.
    I’ll I’m saying is that this works for my site.

  12. Mike D. says:

    Lou: The fonts on both of those pages look exactly the same to me. Although, the rest of the layout looks severely out of place. I get one column of text down the middle of the screen and then I get three columns, including the navigation, below that column. Safari 1.2.

  13. Lou Vanek says:

    I haven’t tested with Safari, so I couldn’t say. Wished I owned a (recent) mac but I don’t. In Firefox1.0-windowsXPsp2 and IE6 the menu items are being scaled to fit, and the scaling is uneven and noticable on WindowsXP. Maybe I’m too much of a stickler for detail, but it bothers me.

    As to the the one column of text down the middle and everything else
    down below, well, that’s the way it’s supposed to be ;>

  14. Penar says:

    Thanks Mark,
    I figured it out…the problem in IE was that the text that would be replaced was within a table…so I got rid of all the tables on the site (should have done this a long time ago) and it works fine. THX!

  15. Lou, hmm, I figure the dimensions of the elements sIFR should replace are a bit off (perhaps the table has it’s influences?).. or perhaps sIFR renders larger with your hack applied. Try to use the decoy styles to increase the font size.

    Penar, come to think of it, I’ve heard of that problem before. I wonder why the replacement isn’t working though. Do you still have a the table version somewhere so I can test?

  16. For anyone who is reading this far down, I just put up some new stuff about sIFR:

    1. Where to Replace
    2. More Opera Testing
  17. Adam Weston says:

    Does anyone know a way of having supertext or subtext in sIFR? I know it’s not currently supported, just wondering if anyone has any thoughts on a possible way to do it.

  18. Adam, in theory that could be done by using the sub and sup elements and sending them to the Flash, but because of the different size and position of the text in these elements the scaling might become a lot more difficult. Let’s hear what Mike has to say about this.

  19. Hi. I would like to use sIFR with the Romanian-language characters ă, î, â, ş, ţ.

    Of these, just î and ă are supported in the Latin-1 character set. I have gone to Flash Character settings and told it to export the characters ă î ş ţ â, and â and î are working perfectly in sIFR headings.

    However, the ş and ţ characters, which are supported by Unicode, do not show up at all. Does anyone know how to add Unicode support to sIFR.

    Thanks!

  20. Jonas says:

    o.h. m.y. g.o.o.d How much have I been waiting for this?? Thank you a lot! This will change how I can create html based web sites forever!

  21. Mike D. says:

    I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.

  22. sIFR 2.0 is here!

    sIFR = Scalable Inman Flash Replacement

  23. Washout 2.0

    Winter is officially here, It’s been snowing on and off since December 1st this year and around 5 – 10…

  24. sIFR reintroduces typography to sites with dynamic content.

    Mike Davidson: sIFR 2.0: Release Candidate 2 is Finally Here…

  25. FatMixx says:

    this is a good thing?

    Urgh, so now I know where the flash headlines on ESPN.com come from. I know that I’m a measly engineer and programmer and miss the beauty of great typography and fancy fonts. And Mike knows of my undying love for flash. So it won’t shock him that …

  26. SFist says:

    SFist Cheshire Remembers 2004

    Like SFist Emily, I’m bad at lists. So I’m just going to relish the chance to write in the first person singular for a moment and break down the highlights and lowlights of the year for me, in no particular order: Best Moment of the Year My Life: Gett…

  27. waveform says:

    Der Blick in die Glaskugel – Webdesign 2005

    2005 wird viel neues und vor allem viele Veränderungen bringen. Das meint zumindest Forty Media. Nachfolgend die kommentierte Hellseherei……

Shared
The Ocean in 185 Lines of Javascript:

Mesmerizing. Try tweaking some of the variables in the “sea” section of the code.

“"Design had been a vertical stripe in the chain of events in a product’s delivery; at Apple, it became a long horizontal stripe, where design is part of every conversation.””
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.

LiveSurface:

A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.