sIFR 2.0 Released
It’s released! A long effort of several months is finally complete. sIFR 2.0 is here.
I’m all worn out from writing the official sIFR landing page so I’m going to keep this entry short, but I’ll just say that this release is the realization of everything we’ve always strived for in sIFR: rich, accessible typography for the masses with no pitfalls under any reasonable browsing conditions.
Release Candidate 4 was pretty solid, but this final release adds two improvements to the already rich feature set: the ability to show browser text while Flash text is loading (if desired) and graceful degradation to HTML text if users have FlashBlock installed. We’re particularly jazzed about working through the FlashBlock issue because it was the only circumstance where we felt sIFR wasn’t degrading perfectly, but thanks to the FlashBlock folks’ willingness to work with us and upgrade the FlashBlock extension, all is good in Flash-blocking land now. :)
I’d like to give a final thank you to the following people for the following reasons:
- Mark Wubben — Mark’s world-class javascript skills are the reason that sIFR is as robust and well-formed as it is. He and I have been working together long-distance from Seattle to The Netherlands for several months now, and I can say he’s the easily the best javascripter I’ve ever collaborated with. His only shortcoming is that he doesn’t have a Mac yet, but that will change before the summer I’m told. If you’re ever in need of a great javascripter or just an object-oriented developer genius, Mark is your guy.
- Shaun Inman — I can’t really say anything about The Wolf that hasn’t already been said. He is the man. His original IFR DOM-based Flash replacement routine was the catalyst for the creation of sIFR, and to this day, he’s still the first person I bug on Instant Messenger when I have a problem. In fact, I find him so useful that I embedded him in a Dashboard widget earlier this week… details possibly forthcoming (seriously). Shaun has some interesting things he’s getting ready to release as well, so keep an eye on him.
- Stephanie Sullivan — Hot beach volleyball mom by day, rabid sIFR advocate by night, Stephanie has helped write a lot of the sIFR documentation on the official sIFR Wiki as well as evangelize the technology at conferences and classes around the country. Tonight, Stephanie’s introducing sIFR 2.0 at TODCON in Las Vegas… we wish her luck.
- Danilo Celic — Along with Stephanie, Danilo is a key contributor over at Community MX. Danilo took the time to create a Dreamweaver extension to export sIFR swf files and even made sIFR tutorial in the form of a slick Breeze presentation… go check it out.
- Matt May — As an accessibility expert, member of the W3C, and just all around great guy, Matt’s opinion means a lot to us, and when he gave a clean bill of accessibility health to sIFR, we really started to feel great about what we’d done.
- Joe Clark — Much like Matt, Joe’s opinions on accessibility mean a lot to us. And much like Matt, Joe sees nothing inaccessible about sIFR. We like Joe.
- Dave Shea — Dave provided a very even-handed review of sIFR back in the beta days which helped us focus on making the good better and making the not-so-good, not-so-bad anymore. Thanks for a good post and the healthy discussion which followed.
- Andrew Hume — Andrew wrote a great article on his site, Usabletype.com, about how and when to use sIFR. He’s also been helpful in explaining proper usage to people when the opportunity arises.
- Jeff Croft — Croftie’s a big sIFR guy and much like Andrew, he’s been helpful in mitigating some of the discussion around the internet about proper use of this method. Jeff’s site is also a great example of beautiful sIFR use.
- Everyone who has used sIFR — Without the pool of hundreds of developers putting sIFR through its paces, we wouldn’t have made it as good as it is. There are simply too many combinations of browsers, OSes, plug-ins, and extensions out there to properly test something like this by yourself. To all who have helped us over the last several months, a big thank you.
Alright, now go check it out already!
Wonderful!
The best things is probably that not only is sIFR easy to integrate by coders, with the dreamweaver integration it’s in the hands of everybody. Also, the Flashblock breakthrough is great news! I am concerned however that ads may try to immitate sIFR to not get blocked.
So what’s up for version 3.0 ?
Wow. Looks solid. AkaXakA commented on ads imitating it. Blahh! It’s something to worry about for sure.
Congratulations on a fine release!
AkaXakA: It falls back to HTML only when FlashBlock is present – so the only way it can be “abused” is to replace Flash with HTML in the presence of FlashBlock.
At least that is how I read it.
Mike, thanks again for the great tool! It’s the people like who make the web improve and evaluate. Good luck with your future projects!
Awesome work!
Quick question, what happenes in the case of AdBlock? I’ve never heard of FlashBlock but I know many people who use AdBlock.
Thus far, the reason I haven’t commited to sIFR is simply due to that damn plugin that so many use.
Nevermind! You answered my question on the landing page.
Sweet!
ROCK RIGHT ON! That’s ace :)
Brilliant!
This technique is fantastic. Now the world can have custom font headings with dynamically driven sites!
I’ll second and third that!
Great work, guys. Congrats on the release. Looking forward to getting my sites updated.
And Mike — thanks for the thanks. I sure haven’t done much, but I do really believe in this technology, and you can bet I’ll keep pimping it. :)
This rocks. I introduced sIFR on a project I’m working on now and it’s great. Eveyone assumes they’re looking at images. Change all the H1 headings to blue? No problem – give me 30 seconds! Try doing that with 70 pages of image based headings. Thanks for all the hard work!
Absolutely fantastic!
Thanks to the entire team of amazing developers that working on making this happen the web can start to become a better looking place for typography. You guys are my hero’s.
I’m sure it’s been a long journey but it was definitely worth it.
I use the Flashblock extension to dispose myself of annoying adverts. I’ve added Mikeindustries.com to the allow list – I trust you – and I see your Flash header, but no sIFR. Maybe you guys and Flashblock could work closer together so that Flashblock will allow sIFR if it is on the allow list…
Just tried to show your site to a coworker, because they have FlashBlock installed, and it crashed. This was in Firefox 1.0. After the crash, tried to bring your site up and Firefox crashed again. This was after clicking through your splash page to the “Blog” section.
I am using Firefox 1.0.3 and I have no problems. I also installed FlashBlock to see if there was an issue with that and your site still loaded fine. I could even see the plain headings when FlashBlock was enabled.
Mr. Inman’s site wasn’t so lucky, however.
It seems you use JavaScript to hide invalid code from the validator. While this is a known technique and is the sort of thing Mike would be OK with, I am not. For the record.
Hey thanks for the kind remarks :) I’ve also written a 2.0 celebration article, feel free to read it.
Hi Joe: Yeah, for the record the only thing that’s invalid is the embed tags we have to use in order to get Flash to render properly in all browsers. Methods such as the object-only Flash Satay work fine for basic animations that require no FlashVars or other advanced methods, but we have to use embed for compatibility. Heck, even Firefox doesn’t properly support object-based implementation. Opera, ironically enough, is the only browser we’re serving the object tag to, so at least with those people, there is no invalid code. Surely a minor beef though, I hope you’ll agree.
Sweet! I love this. Props all around.
Actually we are using an illegal sifr attribute as a hook to detect IE, Safari wouldn’t let you access the classes on the embed elements…
Anyway, I’m only writing this because I forgot to sign up for notification :)
(detect IE should be detect sIFR)
Works great! On the Test Page though, I cannot highlight any of the text in the header, because it is a link. Is there a way round that? (I use Opera 8 on Windows XP.)
How popular is sIFR? I was looking at the University of Sheffield site recently when I noticed the sub pages used a nice font for the headers. I found I could select the text, so I looked in the Source and saw sIFR! So even university sites are using it.
Thanks! It’s great! I’m thinking to incorporate it with my Drupal site. Will see how it goes…
Did you work on supporting accentuated letters (or unicode in general) and bidirectional writing? I’ve tried to modify a header in the example page and the accentuated chars just disappeared — maybe I juste did it the wrong way. I didn’t see this question mentioned on the wiki.
Anyone have problems publishing the FLA using OS X with Suitcase?
Whenever i export a SWF its totaly transparent. I use the default export options and when using dynamic text the font is automaticle exported right?
Fil, you have to add those characters to the Flash movie.
I didn’t check it with great thoroughness. I tend to agree that if your only validation error is using embed, it’s not much of a big deal. However, anyone who’s using SIFR is sophisticated enough to use a custom DTD that makes it legal.
Cf. Standards-compliant Web pages with captioning.
BTW, if all you’re doing is using embed, why not just use real HTML instead of document.written HTML or whatever?
(Editor’s Note: One of the pillars of sIFR is the complete abstraction of the method from your (X)HTML code, and thus we keep it separate. Also, since the embeds are generated dynamically, there’s no telling how many of them may need to appear on the page until the script runs.)
Congrats again guys… I really appreciate how hard you all worked to have this released so I could give it to the people attending my sIFR session at TODCon… You rock! :)
BIG UP sIFR ;-)
One thing kinda stumps me about this sIFR thing:
All the colour and background elements are within a js file at the bottom of your testpage, this is no big issue but what if I wanted to put some text in a list with the sIFR active and I wanted the background colour and text colour to change on hover?
For example if I want to use something like:
99 special things
I would like the 99 in a red colour and the rest of the text in black… On mouseover I would like the 99 to change to black and the rest to change to red…. How would this be achieved without too much bother?
Hope this can be resolved, I’d be very interested :)
Congrats on making this the best thing to happen to typography on the web in a long while.
A quick question:
I stumbled upon a neat system that allows DOM JavaScript to run before “onload”, and immediately thought of sIFR. Could this technique be implemented?
Hey Joen, yeah, it could be. Actually, you can implement this on top of sIFR by putting the replacement statements in the head and fire sIFR() on “domready”.
On the other hand, we already have a system which will kick in without waiting for images, so I’m not sure if it’ll add that much.
Hey Mark,
Very very cool! When was this system added? In RC3 or something?
Joen, in beta one, if I’m not mistaken. ;-)
I’ve one issue that’s puzzling me with Safari 2.0. and sIFR 2.0.1
If you have a float:left div then follow it with an h1 which sIFR is replacing the h1 doesn’t float alongside the DIV unless you add display:inline to the H1 in the css.
I think it’s just Safari though I’ve not done extensive testing.
This is awesome!!!
Is there any performance issue with this?
-SN
Srini, of course there is, unfortunately. The JavaScript needs to execute, the Flash needs to render, files need to be downloaded… give it a shot and decide for yourself if it’s worth it :)
Am I missing something, but I can’t get sIFR work with “ö ä õ ü” :S
Is there some basic font(s) with these letters as I can’t make my own font (no MX) ?
has anyone got an idea of how to resolve this bug?
http://forum.textdrive.com/viewtopic.php?pid=96100#p96100
im using sifr 2.0.2 and the bug apears on:
win > firefox 1.5.0.4
win > opera 8.52
win > opera 9.0
mac os x > safari 2.0.3
mac os x > firefox 1.5.0.4
mac os x > opera 8.5
mac os x > opera 9.0
Thanks for this Mike. Its excellent.
I have been looking for ways to insert fonts ( into the web pages I am designing ) not readily available on users PCs while maintaining accessibility. So it was great to come across sIFR.
Jenious…
On IE6 sifr v2.0.2 dosn’t work, the same and your website page too, strange, I cleaned cache, but not helped.
I seem to have encountered a bug. It appears that apostrophes (‘ and ‘) don’t render. I’ve added both apostrophes above to the flash file under the character options, as well as selecting to embed all outlines. In both cases the apostrophe never appears.
You can see an example (or lack thereof) at http://www.darlinghomeforkids.ca/for-families/testimonials.html
Does anyone have any ideas?
Are you looking for the quotes in, say, Joshua’s Mother? Cause I see those here.
What’s your setup?
sIFR 2.0
PING:
sIFR 2.0: Mike Davidson does another significant thing here… he figures out a way that his headline-creation technique can cooperate with the Firefox FlashBlock extension. (See context on sIFR.) He has also incorporated the recent surge of real-world…
SIFR
La versión 2.0 de SIFR (Scalable Inman Flash Replacement) ha sido lanzada. Esta versión del script para reemplazo de textos tiene varias nuevas mejoras, entre ellas la capacidad de detectar si un usuario tiene la extensión Flashblock….
sIFR 2.0 has been released
Well, Mike Davidson (from Mike Industries) and his crew have done it again. They have released sIFR 2.0 which has built some stable walls up on some flaws and/or bugs that earlier versions had. Apparently, the big thing in this…
sIFR 2.0 Released
Mike Davidson has just announced the release of sIFR 2.0. This popular combination of slick javascript and smart use of Flash lets you choose custom fonts to display headlines on a website, for situations where the presentation of your page…
sIFR 2.0 Released
Mike Davidson has released sIFR 2.0. This is the release that I’ve been waiting for–I didn’t want to impement sIFR before this, but I think it’s time to start playing with this. After all, [Joe Clark](http://www.joeclark.org) says it’s ok, so it must …
sIFR 2.0 Released
sIFR 2.0 Released : “It’s released! A long effort of several months is finally complete.
sIFR deine Webseite
“Mike Davidson”:https://mikeindustries.com/ stellt ein interessantes Flash-tool vor, das er mitentwickelt hat: “sIFR”:https://mikeindustries.com/sifr/ Damit ist es möglich, normale Ãœberschriften auf Webseiten in saubere und schön anzuschauende…
dev: customized typography with sIFR
during the last few days I’ve been diligently working on a web-application in the area of print/typography, featuring a browser-based text-editor with support for various fontfaces. the main problem in realizing such an editor is the impossibilit…
I have discovered a strange edge-case bug in .sifr 2.0 while using Firefox on the Mac OSX.
Upon initial page rendering the Flash titles show up just fine. I then have a pop up above the main page content (it is a printer-friendly format). As intended, The Flash element are covered by this DIV.
If you then choose File > Print > Preview from the browser’s menu, the Flash elements reappear and “shine through” the popped up DIV (in the browser window, not the browser’s print preview window). I have not been able to fix this with CSS background or z-index values.
If I close and reopen the DIV, the Flash element do not shine through. Also, if I click and draw over the popped up DIV (selecting its content), the Flash elements disappear.
Any ideas?
Thanks
I’m having a similar problem as Dug’s for FF Mac (FF PC, safari, ie6, ie7 are ok)
I have a drop down menu that covers two sifrs, an h1 and h2. The h1 sifr stays on top of the dropdown instead of being covered. The h2 gets covered just fine. No z-index edits have solved this problem.
Any suggestions?
Nice piece of work, guys. Great job.
Brilliant: a holy grail for HTML
had a little trouble installing it for a CMS: as I had to put the swfs at the level of the index.php (and had to add the php path variables to find the various .js, and .css files)
But thats probably because I’m not using php everyday
Thanks a lot for all the work
so i have a question in regards to using sifr on a corporate website. if i would use this technique to display a purchased font (with 5 user licenses) would i be doing something illegal. since it is not a graphic and a font would this be a form of distribution of the font i purchased. this may more of a legal question than anything, but i would like to know if anyone else has run into this problem.
Aaron: Shouldn’t be a problem.
[…] Berea Sreet, till synes en dag efter Mike Davidsson lanserade sIFR 1.0. Mindre än ett Ã¥r senare lanseras sIFR 2.0 och sÃ¥vitt jag förstÃ¥r har version 3.0 inte kommit längre än till beta – men det är version […]
How and When Link in this paragraph is broken.
“Andrew Hume — Andrew wrote a great article on his site, Usabletype.com, about how and when to use sIFR. He’s also been helpful in explaining proper usage to people when the opportunity arises.”