sIFR 3: A Look into the Future
Some time ago Mike and I asked you what features you wanted to see in sIFR 3. While we haven’t defined the exact list of features for the new version it has become time to look into the future to see where sIFR is heading.
As you probably know Mike is now the CEO of Newsvine, and as such he’s pretty occupied. The result of this is that the actual development of sIFR 3 is resting fully on my shoulders. Since I’m no super hero, I’ve been thinking about how the development process should be approached and how you can help with it.
sIFR Wants You
sIFR is meant to work in as many browsers as possible. Being a fully degradable add-on, it should not break sites when a browser has trouble supporting it. To accomplish this goal a lot of testing is needed. Much more testing than I have machines or time for. To speed up and improve with this testing we’re hoping for the user-base to lend a hand. Yes, sIFR wants you.
A mailing-list has been set up to aid in this process. After every significant iteration of the code you’ll be notified through this list of new tests. The tests will mostly be automated, aside from the occasional human verification. We’re hoping to get confirmations from two or three people for each browser and browser version we are supporting (more about that in a later post).
The list will also be used to discuss the way sIFR works itself. Here you can think of the tuning process or how to provide fallback for Flash transparency. sIFR is not going to be “designed by committee” however. While we greatly value your input, at the end of the day it’s going to be our call.
Time
Just as Mike is busy, so am I. Currently I’m studying Computer Science at the University of Twente and I also have to earn some money. If you have an interest in seeing sIFR developed faster please consider donating (by clicking on the Make a Donation
button on the right) or hiring me to work on sIFR.
The Future
The future of sIFR is bright. With the advent and acceptance of newer browsers it has become possible to ease the use of sIFR. The release of the new Flash 8 gives us more power, and also means we’re letting go of Flash 6. Good stuff is on it’s way, and I hope you’re in for a ride. Again, please sign up for the mailing-list and thanks in advance for your support.
Multi-color sIFR would be great. I know it has been done before by some people, but it requires you to hack the js files.
Btw: what happened to the wiki? I can’t seem to access it anymore.
Rogier | 19 December 2005, 13:34 | link
Yes I know, it keeps crashing. Will have to spend some time on finding a good alternative.
As for multi-color, I looked at Flash CSS yesterday and it seems possible.
Mark Wubben | 19 December 2005, 15:32 | link
(Mark: Pressing Tab when on the website textfield takes me to the top, the first title.)
I’d really like to be able to format text inside the Flash too, is that possible? Bold, italic, underlined… It would be great if it could read [strong] and [em] tags effortlessly…
Branstrom | 20 December 2005, 06:19 | link
What I most worry about is volume of usage. I’ve used sIFR 2x on my personal site with 15-20 iterations (using it as an h3 article title replacement) for some time.
What I worry about is 30-100 iterations. That, and I’d like some way to confirm [or some kind of conformance] to allow my users to setup their own style-sheet usage. That issue is mine alone to figure out; nothing that sIFR would need to support.
What I’m looking for in a solution is a way for each domain to either a) choose form a preset list of faces, or b) upload their own custom face for their individual domain (I’m thinking the customizations would be limited to the domain using them, that way I avoid as much font distribution licensing issues as possible).
Again, all issues to my own usage, nothing sIFR would need to support beyond my worry of volume. I’ll be launching a test soon and then I’ll know how things work with highlighted text + scrolling (FF) etc…
Chad Edge | 20 December 2005, 11:50 | link
I’ve mentioned this previously, but in case someone’s interested in playing with it: hoverable sIFR
It layers a real anchor element on top of the Flash… so you get an honest-to-goodness right-clickable link, and not some creepy Flash control menu.
Mike Purvis | 20 December 2005, 16:05 | link
Mike, that’s interesting. I’m not too sure about doing that in sIFR itself though, as in it’s essence this is a Flash problem. Perhaps it will be doable as an add-on, that’d be grand.
Mark Wubben | 20 December 2005, 16:48 | link
Maybe a bit radical, and probably not even possible but a version without the need for flash player…
Jeroen Gerits | 5 January 2006, 11:13 | link
I’d love to see me some liquid sIFR. Mmm, tasty.
Kevin Barkan | 10 January 2006, 06:06 | link
Would it be possible to use ContextMenus to allow different ways of opening a link? Instead of a right-click showing the regular “Cut Copy…”, have it say “Open Link in Current Window, ” “Open Link in New Window.” That sort of thing.
Daniel Williams | 18 January 2006, 22:59 | link
Hi Daniel, thanks for your comment.
I’m not too sure abou those things. On the one hand, it’s a shortcoming of Flash. Do we need to solve those? On the other hand, there are tricks to overlay a normal HTML link over the movie so it acts normally. Not sure if they’ll work with sIFR 3, but worth looking into.
Mark Wubben | 18 January 2006, 23:25 | link
Wow, I just learned of this “sIFR” technology today, and my reaction is something along the lines of, “HOLY SH!7!!!!!! THIS ROCKS!!!”. I’ve been searching around on teh intarweb for about an hour now, trying to find a tutorial or some general hints on how to prepare the .SWF file with all the font metrics included in it - can any kind soul point me in the direction, or email me with some instructions??? Other than this finally proving to be a good use of Flash technology, I think this really could make typographically-savvy web designers rethink the impossible when designing for the web. Great stuff!!! Need more info!!!
-he who stacks pork
Leopold Porkstacker | 23 January 2006, 23:39 | link
Leopold, you might want to read the docs?
Mark Wubben | 23 January 2006, 23:51 | link
Support for elastic designs.
Johan Sjostrand | 27 January 2006, 00:33 | link
How about supporting HTML entities?
Greg Nicholas | 8 February 2006, 21:05 | link
Greg, already supported, but you need to export the right characters in the Flash movie.
Mark Wubben | 8 February 2006, 22:35 | link
Liquid/elastic designs are already supported, but you need to add some extra javascript to do so. Perhaps the capability could be built in to make it a bit simpler. See my website http://thejaffes.org/ for an example of elastic design and sIFR. You need to include a resize handler with a rollback then duplicate of your replace statements:
function resizehandler(){ if(typeof sIFR == “function”){ sIFR.rollback(); sIFR.replaceElement(….) ; etc. } }
window.onresize = resizehandler ;
Rory Jaffe | 13 February 2006, 03:06 | link
i would like to see a sifr, which scales along with the fontsize. i want to change the fontsize and sifr should scale without a reload.
Torsten Baldes | 16 February 2006, 12:29 | link
Just wondered if anyone had any news on when v3.0 of sIFR would be released, really keen to find out what developments will be incorporated, especially with regards to accessibility
Paul Wood | 21 February 2006, 13:38 | link
Paul, my estimation is before summer. I really don’t want to give an exact estimate, because sIFR cannot be my top priority. I’ll put up a feature list in a few days though.
As for accessibility features, what improvements would you like to see?
Mark Wubben | 21 February 2006, 14:17 | link
Thanks Mark, it was mainly to see what improvements were being made towards the following;
Dynamic (on the fly) font scaling breaks, Visual feedback on text selection, Copying Links, FireFox users can’t middle-click, Status bar link target,
I am also interested in screen reader functionality, and how it translates to other devies, such as PDA’s and mobile devices, how this renders.
Your help is grately appreciated. Thanks
Paul Wood | 21 February 2006, 14:31 | link
Font scaling: I’m working on that right now, and it looks like it might be possible in Flash 8. Copying/selecting is handled by Flash, not much to do about that. Better link support might be added in an add-on, but won’t be in the core.
As far as I know screen readers shouldn’t have problems with sIFR.
Mark Wubben | 22 February 2006, 01:12 | link
Mark,
How about Menu replacement?
Most people who are in the know use unordered lists for creating their menus. As a variation on the sIFR why not build a typographically interesting, potentially dynamic menu.
Locate the appropriate UL, and pass in the whole structure to the movie, where it is parsed. You would then build the menu from this data, say a regular tree view, or maybe an accordion or (if you want to slow everything down) an application type menu that sits above all the content.
Adam van den Hoven | 4 March 2006, 00:36 | link
Adam, I’m afraid that’s beyond the scope of sIFR ;-)
Mark Wubben | 4 March 2006, 01:30 | link
I would just love to see support for the other Flash 8 antialiasing options…. ‘antialiased for readability’ creates text that is far and away better looking than the Flash 6 compatible ‘antialiased for animation’.
I have a project that I was planning on using this technology on, but after seeing what the ‘antialias for animation’ does to MyriadMM variations, I’ll have to wait until the next version (hopefully, anyways).
Thanks!
Jeremy
Jeremy | 30 March 2006, 01:14 | link
Easy Leading and Kerning control would be fantastic.
Tim | 30 March 2006, 16:16 | link
I’m currently involved in a project where I need to run text along a diagonal path - the text changes often so obviously I’d like it to be editable…
I wonder if sIFR 3 might be able to include this functionality?
Adam M | 8 May 2006, 17:22 | link
Hi Adam,
Not sure, but it might be possible through an add-on and some hacking.
Mark Wubben | 8 May 2006, 19:05 | link
Okay, I know I’m late to the party, but there’s one real-useful item that isn’t as much a feature of ‘playback’ as ‘generation’: for sIFR2, some bright folks finally made tools that meant you didn’t need Flash MX/etc. installed to build the font movies. (Or, at the least, I’ve seen multiple articles pointing to such ability!)
It’d be REALLY helpful to have a quick font generating tool for those of us who are big supporters and/or users of sIFR, but don’t have Flash tools.
As for why, I happen to make a blog-helper (WP) plugin for ‘rolling out’ sIFR much simpler, as well as having worked with some of the sIFR font-distribution sites (and personally contacting and working with some font authors) to make more ‘instant use’ files available.
David Chait | 28 May 2006, 06:07 | link
I’ve been playing around with some of these tools. In fact I’m using it to recompile ActionScript without continously exporting the movies. I’ll have a look at building an “official” tool once sIFR 3 is released.
Mark Wubben | 28 May 2006, 09:04 | link
I’d love to see transparency as a background setting. Flash does transparency wonderfully; wmode=transparent.
Advantages of A Transparent Heading: 1. You no longer have to specify a background color. So you’ll save time.
You can put the heading on top of any background image. So you can overlay headings to ontop of gradients, photos (graphical text need no longer be unsemantic), you can even replicate a decent logo by slapping a heading on top of a background image.
There are times when CSS elements (such as a suckerfish dropdown menu) interact poorly with the heading. When the CSS element becomes visible on hover, the Flash heading will appear on a higher z-index than the CSS. Not sure why this is the case, but so be it.
Transparency == Convenience == Peace of Mind
Jon Gelb | 24 July 2006, 23:28 | link
Jon, this is supported in both sIFR 2 and 3.
Mark Wubben | 24 July 2006, 23:38 | link
Is there any news regarding a release-date for sifr3?
kim johannesen | 31 July 2006, 15:37 | link
I’m afraid not. I’m currently doing an internship at JotSpot which keeps me rather busy. There’s still one feature left to implement before there can be a beta, the beta release should be in September or October. After that, well, depends on the results :)
Mark Wubben | 31 July 2006, 16:07 | link
with this new code you can’t just upgrade, you’d have to go back and find all instances of old code and update to new versions. which is just abserd in the environment i’m in.
the code should gracefully upgrade, not comepletely throw-out the old method.
the old code:
sIFR.replaceElement(“h1”, named({sFlashSrc: “/Library/sifr/garamond.swf”, sColor: “#f20000”, sWmode: “transparent”, sFlashVars: “offsetTop=2”}));
the new code:
sIFR.replace({ selector: ‘h5#pullquote’, src: ‘rockwell-7.swf’, highsrc: ‘rockwell-8.swf’ });
amber orenstein | 9 November 2006, 00:57 | link
Hi Amber, sIFR 3 is significantly different from sIFR 2. Primarily because of the new font sizing algorithm, not only need the Flash files be updated, but also the CSS. Backwards compatibility is already broken, and combined with a lot of other significant changes, I believe this means that the JavaScript interface does not have to be backwards compatible either. For the final release extensive documentation will be provided, including a tutorial to quickly convert sIFR 2 implementations to sIFR 3 implementations.
Mark Wubben | 9 November 2006, 11:32 | link
hi there, i’ve heard about sifr v3.0. I’m currently using the v2 and some of my clients find the type blurring… I think its because of the flash 6 antialias algorythm, witch is not very good… That’s why i’m very interested in downloading the brand new v3.0 compatible with flash 8. Is there any place where we can find a preview ? or a beta ? or just a release date ? And will this version be compatible with flash 8 new antialias options ?
thanks a lot for your job !
jerome Poslednik | 15 November 2006, 16:05 | link
Yes, please see the post about sIFR 3 alpha. Also make sure to get a nightly, not the alpha release.
Mark Wubben | 15 November 2006, 19:45 | link
Nice job, guys, this is a fantastic effort. Mac is doing such a good job of anti-aliasing these days, does v. 3.0 include a way to disable sIFR for the mac OS completely? I’d rather penalize just the OS that gets it wrong (i.e., win). In v.2 we were only given “isIEMAC” (although we could also disable for safari).
Troy | 30 November 2006, 18:01 | link
You can detect the Mac with
sIFR.ua.macintosh, and you could of course write your own detection for sIFR 2. Opinions on text anti-aliasing on the different platforms differ greatly, though ;-)Mark Wubben | 30 November 2006, 18:57 | link
I don’t think it works with International (UTF-8) characters. Please correct me if I am wrong.
Debashish | 12 March 2007, 10:44 | link
It works, but Flash doesn’t always work properly with non-Western UTF-8 characters.
Mark Wubben | 12 March 2007, 10:48 | link
I would like to second David Chait’s comment…
I’m actually looking into automating that same process server-side (probably in Rails but scripting language shouldn’t really matter)…so long as the font files are provided somewhere my scripts would be able to provide an interface to hook up sIFR and the required font.
I understand this might not be possible if Flash requires that a swf file be generated for each font, but if there are tools out there already to automate the generation of the fonts, I hope to be able to take it the next step and automate the tools!
This wiki entry caught my eye and I think it might be able to be adapted to suit this purpose. Thoughts anyone?
Anthony Navarre | 19 March 2007, 04:18 | link
Ian Purton made a web-based sIFR font converter, but it’s sIFR 2 only. Not sure if this can be done for sIFR 3.
The article you are referring to discusses how to dynamically load fonts into a movie, which is a bit different from generating movies.
Mark Wubben | 19 March 2007, 09:00 | link
Mark: Thanks for pointing that out! I hadn’t yet taken the time to understand the inner workings of either sIFR or the technique in that article. I realized this after making the post. However, for my own purposes I’m thinking the dynamic loading technique might still be useful:
Many of my clients want a web app that requires little or no technical knowledge to use. Often the end user of my app will be a customer support lackey at a phone or a marketing hotshot. For the 2nd type of end user, dynamic font loading would allow an administrative interface to preview before publishing (not sure if this is relevant to the scope of sIFR — maybe as a plugin?).
My two cents? I think if this kind of feature were bundled into sIFR 3, then sIFR 3 would need to go all the way as a publishing tool requiring little or no configuration. It would be about making a distinction between sIFR as a technique and sIFR as a tool.
Oh, and in my previous post I forgot to thank you guys for such an awesome technique! Kudos!
Anthony Navarre | 20 March 2007, 14:31 | link
You’ll still need to export movies for the fonts you wish to include, which I think would be just as easy as exporting a movie the current way.
Mark Wubben | 20 March 2007, 14:59 | link
i’ve just started working on implementing this and I hope to use it for some of my clients. Any idea when we’ll get Flash 8 support? Is that part of v3 and if it is, is it stable enough to try out?
thanks for the great work!
Karim Awad | 4 April 2007, 19:32 | link
Please ignore my previous post… i’ve found the nightlies!
thanks again!
Karim Awad | 4 April 2007, 19:56 | link
Allowing the import of TTF files on the fly would be a godsent (ie calling the TTF file as one of the parameters passed to the SWF file) as that would prevent the need for Flash Pro to create the SWF Font files.
Then again, I have only been playing with it for a short time, so I may get the knack of it yet.
Luke | 8 April 2007, 14:17 | link
I’m not sure if that’s going to scale in terms of bandwidth consumption, and it’s definitely not going to work for licensed fonts. It would make things a tad easier though :)
It should be possible to make the movies without Flash Pro, but I haven’t yet figured out the exact procedure.
Mark Wubben | 10 April 2007, 18:18 | link
I’ve upgraded from sIFR 2.0 to sIFR 3.0 and noticed that all accented characters are missing. (I’m using UTF-8 on pages and while exporting swf’s.)
Everything is fine with the newly exported flash font files thought, because they can work correctly with the old 2.0 version sIFR script. (But not vice-versa; if I use the old swf’s they don’t work with the new, 3.0 engine.)
I found something that might be the cause for this… if I take a look at the html output I can see that the old, 2.0 script renders the accented character ä (german umlaut a) correctly with:
%C3%A4
…while the new 3.0 script wrongly outputs this value
%E4
…and makes the mentioned character with 2 followed characters to disappear.
Is there any solution for this one?
Mario | 29 May 2007, 22:04 | link
Mario, could you make a post with an example in the forum?
Mark Wubben | 30 May 2007, 08:03 | link
Yes, of course. I’ve prepared a sample at this page
This is an sIFR 3 r.273 demo page.
…and put the flash report below
The Flash Report at the SWF Export.
The original title should read: Gramática.
Below you can check the output on your page, as well
Gramática
Mario | 30 May 2007, 11:04 | link
Mark, is it something that is not so easy to be done, maybe?
Because, I was thinking on how to solve this, but couldn’t get any deeper… all I saw were the differences in the new version of sifr.js, related to “encoding”… do you think that might be cause for this issue?
Mario | 31 May 2007, 15:21 | link
Yea I probably messed it up. Does the problem occur when using r260?
Mark Wubben | 31 May 2007, 16:33 | link
No. Everything is fine with r260.
Mario | 31 May 2007, 19:15 | link
Since I broke the sIFR build process I manually edited the r273 build and put up a fixed version.
Mark Wubben | 1 June 2007, 10:58 | link
Thanks for the fix. It’s working perfect now.
Soon I’ll be able to thank you also with a donation, because I found this script to be very useful.
Keep up the good work.
Mario | 1 June 2007, 15:06 | link
Hi, are you going to implement proper printing - i.e., printing the contents of the Flash files, rather than the substitute fonts?
Dling | 22 July 2007, 11:54 | link
Hi Dling, Flash doesn’t print so well, so no.
Mark Wubben | 22 July 2007, 17:56 | link
Hi, we really need URLs in the hrefs to be preserved with no character replacements. We especially need to preserve the plus (+) signs in the URLs which are being replaced with either spaces or %20’s with sifr 2.0.5.
Also I noticed that when I change the visibility with javascript on a div (layer) containing sifr text, the sifr text does not disappear, so I cannot use sifr on these layers. Would like the visibility work like regular text. (I have visibility working with Flash videos (swf/flv) so hopefully this is not a Flash issue.)
iMarks | 2 May 2008, 17:45 | link