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.
Now then.
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.
The other major development since 1.0 is that Mark Wubben volunteered his masterful javascript skills to rewrite Shaun Inman and Tomas Jogin’s replacement script as an object-oriented anonymous function, fully compatible with XML Strict documents, even when served as application/xml. That’s right. Even if you’re one of those XML-as-pagan-worship zealots, you, too, can use sIFR! Mark’s script — described by Tomas as “supermodel beautiful” — is guaranteed not to interfere with any other variables or functions on your pages (hence the anonymity) and won’t break your XML.
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.
This is really cool. Maybe I wanted to implement it in the website of a new (BIG :) corporate website i’m working on. I’ll tell you maybe later wich company…. ;)
Maybe it’s my enthusiasm speaking, but I think it’s one of the most important additions to the Web medium since browser support for images (How ironic since we precisely eliminate the need for images here…)
It’s 10:20 pm In New Zealand, and just when I am about to get off the computer for the night.. along comes V2.0
Still, it will be like opening up a christmas present on christmas morning tomorrow. Let the good times roll…
Well not to be a wet blanket – but when I try to open the file I get an unexpected file format…
(Win xp, flash mx)
I have the same problem as Marc: Trying to open the provided .fla-file I get an “unexpectet file format” error usind Win XP SP2 and Flash MX.
(Editor’s Note: Oops, try it now. I forgot to save the .fla back to MX format. It was MX 2004 format before.)
IE 6 SP2 shows everything without any problems, but a little slower than with older versions (1.1.4), I think.
Opera (7.54 win xp) still shows transparent background as green :(
Cursors:
When the replaced text is a link: IE uses default windows white hand cursor (interesting – my custom is black), Opera takes small Flash-native hand, Firefox 0.8 shows only an arrow pointer.
I’ve not fully integrated this into my blog’s new (yet to be released) design yet, but I can say this much already:
With this release, I think I’ve hit web typographical Nirvana.
Thanks. :)
shouts to the developers! this release is really solid and extremely smooth.. the speed increase was amazing! thanks for putting your spare time into this :)
Wow – Thanks a lot of this. I’ll make great use of it in the website I’m just about to make.
Thanks a lot mate!
update: still get a “no-show” in ie/firefox when i feed this as application/xml.
example here (source ) .. this is the zipped example + xhtml strict + header() trough php.. am i doing something wrong?
Whoa, ground breaking stuff, this. Hats off to you guys.
With every release of (s)IFR i keep saying that it’s the biggest thing happened to web design since CSS invention. But you guys keep me in a permanent state of awe.
BTW where’s Inman?
Awesome work Mike. Can’t wait to start implementing this.
You mentioned almost perfect printability in most browsers. I’ve printed your test page in Netscape 7.1, Firefox 0.9.3, Opera 7.5, and IE6 (all on Win XP), and they all printed as the print stylesheet said. What problems did you experience printing, and on what browsers/platforms? Is there a way to print the flash rendering instead of the browser headline?
Also, with the styles disabled, there are now 2 versions of the headline, the regular headline in browser text rendered next to the flash rendering. Is there a way to hide one of the renderings when styles are off?
Mike, you’re being too nice to me ;-) Anyway, a quick list of bugs posted here this far:
Krzysztof wrote that it’s a bit slower in IE6 SP2. I think this is due to the extra security in IE6, we actually had a very odd bug which appeared in SP2 but not in older IE versions (more on this later).
Johan Bergström wrote about problems when sent as XML. I’ll look into this a bit later, already have an idea on what might be causing the problem (however no errors are thrown in Firefox, odd).
Mike, I’ll also look into your innerHTML workaround, perhaps it can be integrated with the Safari workaround.
Dan, the original content *and* the Flash content exist in the same page, at the same time. There is no way to work around this, unfortunately. What we could do, however, is check for CSS when the elements are replaced. However I’m not sure if this is detectable.
First let me say what a great job you have done… We can’t thank you enought.
I get a no-show for some reason… I am using MT/PHP… I’ve followed all the necessary steps and nothing still… tested on ie6 and ff9.
Thanks again. :)
The no-show in XML mode is due to wrong JavaScript code inside the example. Actually I should say wrong HTML code:
<script type=”text/javascript”>
<!–
// script here
–>
</script>
The correct code should be:
<script type=”text/javascript”>
//<![CDATA[
// script here
//]]>
</script>
Even though the script is now executed, the Flash doesn’t show up in XML mode. I’m looking into this right now.
Alex: are you talking about HTML or XML pages?
Bravo! We’re getting ready to deploy our take on IFR but, with sIFR 2.0, you’ve upped the ante considerably. It’s a beautiful thing.
It is an xhtml page with a php extension. you can see the sample here http://www.bluecapsule.com/
I was busy last week, and besides, you said it was a beta.
Anyway, I’m all in favour of anything that improves æsthetics and accessibility without harming either. I mean, come on, I wrote a whole article about FIR!
A script in this movie is causing Macromedia Flash Player 7 to run slowly. If it continues to run, your computer may bec ome unresponsive.
Do you want to abort the script?
safari/os x 10.3
I have been reading this blog for the past week and have been inspired.
Thank you for making the Internet a better more well designed and beautiful place.
Thank you for your hard work and letting the web design hobbyists share in these new technologies.
flashape:
I believe you have a circular loop in your files. If you reference the same file twice with different display stats it will throw this error.
—
Todd
Just a quick note: you posted it in a Mac OS X zip file which means there’s extra files/folders in the zip archive. You may wanna just gzip it.
Off to play with it!
Could someone please enlighten me on something?
Does sIFR allow text to be placed over a colored or patterned background? The reason I ask is that currently (with images) this ability not only exists, but is heavily used, and so far I don’t see this possibility with sIFR.
This is a great tool that I’m sure will be widely used, but unless it can do what can be done with text or images, I don’t see it as the ‘nirvana’ that people are so excited about.
The next improvement would be to make the Flash movies scale as text size is increased in the browser ;-p No way to do that I suppose? Other than that this is looking good. Now we just have to brace ourselves for a huge wave of ugly typography to hit the web as everybody will start using their own favourite typefaces for headings. ;-)
The XML problems have now been solved (I hope, Mike is testing it). In short the problem was that offsets are not calculated in Mozilla in XML mode before the onload event is fired, so if elemets are replaced before this happens the Flash won’t be visible. The solution was to look for the contentType of the document. It seems Mozilla builds from at least 2002 support this, older builds still have the bug. The only true solution would be to prevent replacement in all Mozilla versions before onload, so I think this is a good balance.
(Not so short after all, eh?)
Regarding the green background color in Opera when the background color should be transparent: this really is an Opera bug. I noticed it in an old Moz 0.9.4 too.
Jay, you could set a background image in the element which gets replaced and set the Flash background to transparent. As you could read in this comment though that won’t work very well in Opera and old Mozilla builds.
Roger, unfortunately we can’t detect text-resize, unless we recalculate the body height every x ms. This isn’t an ideal solution. I don’t think it’s a big problem, though.
This is so rad. Thank you, Mike! (Also thanks to everyone else who helped; I know this project has a long history.)
This is such a huge move forward for the web. Seriously. I’m ecstatic.
By the way, for those of you who are interested, I tested this with JAWS screenreader, and I can tetatively say that it works. JAWS is a little strange about the order in which it reads the elements of the page, but if you tell it to read everything from the top of the page on down, it works beautifully.
Oh, before you all go redownloading the beta, the changes aren’t published yet! Stand by for sIFR 2.0 beta 2 :)
Mark-
I know that there are issues with calculating size and offset before the page finishes loading regardless of the mode. You may want to do some more testing, particularly on heavy pages.
Also, you should remove the commented out test cases from the code.
Ever thought about converting html tables to flash graphs using a similar technique? Nice work by the way, might be an addition to php gd techniques or javascript image replacements
Readers might be interested in http://www.alistapart.com/articles/dynatext/ and http://www.quirksmode.org/dom/fir.html as well
Mike-
It’s great…so much better than the previous version (which was already the best thing since sliced bread). Very flexible! I’m impressed.
Is there a variable I can send through the flashVars attribute to make the text all uppercase or all lowercase?
Thanks for all you’ve done on this,
Jeff
Another question — how’d you get the small caps in the example file? I see that #pullquote has font-variant: small-caps, but that doesn’t seem to work for me when i’m working in my own files.
Thanks again!
Jeff,
1. I’ll add the ability to transform the text to uppercase in the Flash. That’s easy. It’ll be in the next update tonight. You’ll pass in “uppercase=true” in the flashVars parameter.
2. The small caps on my font is achieved by simply using a small caps font. VandenKeere comes in a small caps variant so that’s what I’m using.
The ability to specify underlining could be nice as well. For example, if you wanted underlined text on hover and no underline otherwise (or visa versa). The param list may start to get cluttered though if all this jazz gets added.
Mike-
1. Thanks.
2. Duh. I’m working with MrsEaves for this clients site, so I guess I have that option, too. :)
Jeff
Mike-
Here’s another little suggestion, just for ease-of-install sake: when new versions come out, let us know if we need to re-make our SWFs, or if this update only contains changes to Javascript…
I’m running into an issue with font styles. Before, sIFR used a Library instance to hold the font, and once there you could choose your font and specify style, bold in my case. This worked beautifully. In the new version we’re using the dynamic text box and its properties to set the font. However, when I try to set the bold property I get the dreaded “A script in this movie is causing Macromedia Flash Player 7 to run slowly” error. Take away the bold styling and everything is fine. Note: I am using a TTF so there is not a separate variant for bold.
Any ideas on this?
Once again guys, great work!
Jeff:
Will do.
Brad:
Does clicking the “B” button on the Properties palette not bold the text for you? It should. Or is that what’s causing the problem? Let me know and I’ll look into it.
I just wish there were some way I could tell the AdBlock extension for Firefox to ignore Flash if it is used in this context. Sites utilizing this method look very sad since every heading has a little “Adblock” tab attached to it.
Should probably look for a better extension… or learn to write my own, I guess!
Great work Mike & Mark! This really marks the beginning of a new era in web design.
Seth – You can turn off the Obj-Tags in AdBlock (it is really tacky!). Just hit Ctrl+Shift+P and uncheck Obj-Tags in the options.
Enjoy!
P.S. – To be able to AdBlock Flash from there on out, just hit Ctrl+Shift+F and it’ll allow you to block Flash elements.
Mike – That’s what is causing the problem (italics button creates the same behavior). Im using MX Pro 2004 (7.2). Can anyone else re-create this?
Alright! Thanks to Justin Cone, we have our first confirmed report that sIFR is JAWS-friendly.
By the way Justin, I think the issue you mentioned about order of screenreading is more related to the source-ordering of my floats, rather than the use of this method. I believe JAWS goes by source-order. Feel free to correct me if I’m wrong.
I’ve seen the new demo and I must say it’s great. In fact, I’d say it’s near perfect.
I’ve yet to play around with it (if I like it I’ll probably use it in an upcoming major site) but it seems this is the way forward until CSS3 web-fonts are supported by the majority of browsers.
For now, Flash penetration is undoubtably higher.
On a side not: I’d actually not have the headlines enlarge on the fly when I’m increasing browser text-size. Is it me or do people increase the text-size to read the copy better, not the headlines? The headlines are usually big enough anyway.
Dan:
1. Printing. I said “almost perfect” because Safari apparently has a print stylesheet bug which slightly alters the output. It still looks fine… just not perfect like every other browser I’ve tested.
2. Also, regarding appearance when CSS is disabled… ummm… I feel like JS on and CSS off is probably a pretty rare circumstance, no? If not, we could always render an element on the page, style it with css, and check its offsetHeight to see if the CSS affected it. That would do the trick but not sure if it’s necessary.
I have fonts that , apparently, are missing outlines, at least according to flash. They’re PostScript files, and they work fine everywhere else, so I wonder if this isn’t a flash probem. I know this isn’t really a question about sIFR, but I though might have some ideas. Sorry for any hijacking.
Must say I love this candy..
sFIR 1.1.4 almost broke my live system tests when running under a CMS. With the speed increase of 2.0b, I should be able to provide more than enough candy for my clients.
Absolutely fantastic! I mentioned this in the previous post, but never heard anything. Is there a way (or could there be a way) for sIFR to be able to support text shadows? Either through parameters through javascript, or being able to read from CSS 2/3’s text-shadow property?
*applause*
My thanks to Mike and compatriots. You made my lifetime.
Now, if only you guys could give us more typographical control such as kerning, lineheight, alignment (right, justify, center justify, hyphenated control), acces to Opentype properties like smallcaps and variant faces, width/height adjustments of individual characters, and the ability to change fonts on a single line, and perhaps an ability to throw in a kitchen sink in the background (10% grey–off to the top left, of course).
I realize some of my feature requests can be done with CSS, but is this possible with sFIR 2.0 beta 2 ?
A couple of questions:
1. Is the flash movie cached locally by the browser and then inserted into the document ‘x’ times ? (Or is it downloaded ‘x’ times). And then presumably cached for other pages?
2. Would it be possible to have some other sort of things in the flash file, for example some kind of animation based in the text, or some animated object that interact with that text? Or some static background?
thanks.
David, sIFR has been tested in virtually all browsers out there (except in XML mode, it seems). I therefore assume the offset problem does not exist in other browsers.
The current JS file is still a bit cluttered, Mike didn’t clean it up properly ;-) (Kidding, Mike). We’ll clean it up in the next beta release.
Just got partial integration into Mambo with this new version. I’ve hacked to bits the basic demo page supplied and tried integrating it directly into Mambo. It’s available for preview here under the “News” template.
The good news: It works. Minimal server hit with most of the headings being rendered under sFIR 2.0b.
The bad news: I still have this annoying bug in Firefox that scales the header text down too low.
Due to my hacking, the layout is also somewhart broken. I’m working on rectifying all outstanding bugs, though. Still, not bad for less than an hour’s play on it..
As Richard Hulse (comment #51) a possible work-around for the green background bug in Opera would be to integrate the background into the Flash movie (optionally, instead of using transparent mode). You could specify the basic CSS properties in the FlashVars: background-color, background-image, background-repeat, background-position. This is obviously something either for a later release or an add-on (since it doesn’t interfere with the font-rendering… a simple include in the ActionScript could bring this functionality in from elsewhere).
Anyway, I’m just about ready to bring this in on a site I’m currently producing. Thanks a lot guys.
Hey-
So, I love the script, it’s been wonderful for the most part. The only area I seem to run into problems is with Safari on Panther; Occasionally (yes only sometimes) the browser renders the font too large, and extends the box to the very end of the page, resulting in no line breaks. Like I said, this only happens about half the time. It’s probably just me doing something wrong, because it never happens on your demo- Here’s the page I’m working on–
Just keep hitting refresh- sometimes it will work, sometimes not-
Thanks to anyone who can help in advance.
Dave
It could just be me, since I not expert on CSS, but something is different. I had implemented the previous version without any hitches, but now when I replace the js scripts and update the screen and print css it just will not work. I’m pouring over the CSS to try to determine what could be causing this but I can’t find a cause or solution. ???
Also, I just wanted to add that it seems to ‘cancel’ opening the page when I get the error-
Thanks,
Dave
Lordy…about an hour and it was this – };
Operator error (poor cut and paste skills). I think your offering is pretty rock solid stuff – only a stooge like me could mess it up.
;)
Sorry, I’ll ban myself from commenting after this. Now that I have it working, I’m having the same problem that David Kaneda points out. It renders correct sizes about a third of the time – otherwise it’s all over the place and sometimes completely off the side of the page.
Ok, really, after this one.
I was able to correct the problem. I had simply take the script you provided as is. In the script that is placed at the bottom of the page there was an attribute that had the margins set (20, 0, 20, 0). I zeroed everything out and all works perfectly again.
I really like being able to use the hovers on the titles now.
Thanks.
Vaska and Dave – I had a similiar problem and found the solution (I think). The problem was that the element I was replacing did not have a width set in the CSS. It’s width was inherited from a parent element. Once I gave the child element a width as well, things worked great. Just remember the Box Model!
For some reason I’m not able to get quotes to render in the font swfs I’ve created. Changed nothing, just the font. Is it a PC to Mac porting problem or is anyone else having this bug?
Updates-
I’m giving the element a fixed width, at 400px, so I don’t think that’s the problem. Also, the replace line uses zero’s for padding. I’m also getting the flash memory warning from one headline, it’s shorter than the rest, so that might be it. I’m not trying to be difficult, I promise, but if anyone has any more ideas, please share-
I don’t understand how it can only work sometimes; again a test page is here. Panther Safari users can just click reload until it happens, sometimes takes a couple tries.
Thanks Brad and Vaska for quick responses-
I have checked my javascript console on FF, and I keep getting this error:
error: “node has no properties” line 65 on sifr.js
any idea what this means?
David, I’m using Safari too and the text on your site stays the same everytime. It looks good to me.
I *might” have solved the problem (at least for me). I was testing locally and when I uploaded to my site the problem ceased to exist – I’ve reloaded the page probably 50 times now checking and not a single time did the text wonk out.
Is it possible it’s an OSX issue?
However, and maybe this browser is officially dead now(?), it won’t load in IE/5.2 on the mac. If I take out the js it loads, otherwise, I get a blank screen (but the source code is all there). Loads in Firefox, of course
I think Macromedia should pay these developers for such an innovative use of Flash. This could be the reason for buying Flash authoring tools – at least it might be for me. Thanks.
First, I just want to say thanks for the hard work put into this and for sharing it with everyone.
I sort of found a bug. If there are unclosed html tags within an element being replaced IE6 throws an error. It just stops loading content below the replaced element. Yeah, I know… the tag should be closed, but when a client is entering in the data I can’t control it all the time. Just an FYI.
With the original IFR, i was able to have 2 text boxes on the stage, with the same variable, and this way I could create effects like drop shadows (see the main headlines at diseñorama).
Not knowing much of actionscript, I’m at a loss on how to do it with sIFR. Is this possible at all? Is there some kind soul that can show me the way?
Thanks!
So hot…want to touch the heinie.
David Kaneda, I think this is because in Safari the elements aren’t correctly painted when the script is intitiated, thus the wrong properties are retrieved. This has – supposedly – been fixed in beta 2.
Alex Giron, this problem has also been solved in beta 2.
Brian, do you have a testcase for us?
BUG!!
try this h1:
El Niño
it doesnt support iso-8859-1 characters!!!
Thanks for the printing info, Mike.
— comment 46 —
True about CSS:off/Javascript:on, but I just wanted to mention it to make sIFR 2.0 idiot proof in all situations.
Again, great work!
Has anybody had any problems with the sIFR flash movie showing up on sub pages using .htaccess and rewrite rules? Example:
Front Page: http://www.prospectusy.com/
Sub Page: http://www.prospectusy.com/archives/2004/08/18/y-weekend-acceptance/
None of the styling changes, the script is all there in the source and everything. I tried defining a hard link to the .swf in the replacement arguements at the end, but no luck. Ideas?
Josh, I had this problem on my WordPress-powered blog. I had to add the absolute path to the .swf (including http:// in my case) to the javascript file. That’s how I solved it with the version I’m using now (1.1.4). I may try to add 2.0b to my site soon.
I can’t figure this out ,
How do I pass the path of my .swf file in the
sIFR.replaceElement(“h1”, “heading.swf”, “#000000”, “#000000”, “#999999”, null, 20, 0, 20, 0, “textalign=center&offsetTop=6”); agrument , if its in a off directory.
Maurice, add the extra dir info where “heading.swf” is. For example, if it is in a subdirectory called media, use “media/heading.swf”. Use “./” at the beginning to specify your root directory.
However, this is probably part of my problem, so maybe I shouldn’t be adding my advice ;-) Cameron, I’m using WordPress as well, but as far as I understand it, you only need to specify the location at the script at the end of your index file. Still looking…
Great job. Splendid.
But a question: apparently it does not work with, say, Japanese fonts..or am I doing something wrong??
Is it possible to pull this trick on other encodings? I’ve tried with utf-8 as encoding, made a .swf with japanese fonts but to no avail…
any ideas?
Alright, on the subject of international characters…
Yes, this absolutely should work just fine on international character sets… it’s most likely a question of how we are passing in our test. I really don’t know a whole lot about Unicode or character encodings so I definitely need some external testing/advice on this, but it should be easy. Try this Macromedia tech page for some starting points maybe. I’m thinking one of two things might do the trick:
1. Set “system.useCodepage=true” in the Flash file. This displays the text using the native encoding of the client viewing the page.
2. Pass Unicode characters into Flash like so: “\u304B\uD55C\u6C49”.
Any international Flash experts out there able to comment on this?
Josh,
I believe you aren’t reference the js file in the correct location. Both your main page and your inner page reference “sifr.js” but sifr.js only exists at your server root. Should be “/sifr.js”, no?
Richard:
1. Yes, the .swf is cached in the browser and only downloaded once no matter how many times it is used.
2. Yes, you can do whatever crazy things you want in the Flash file, but please spare us if it involves dancing hamsters.
Should “uppercase=true” work to create capitals? Earlier in the thread it was mentioned but I’m not sure if it was implemented yet. It doesn’t seem to work for me.
Mark, here is an example. I put an opening bold tag between Geneva and Plan. It won’t render any text below it. Again, I don’t think this is a huge issue for developers, but when clients have the ability to enter text it could potentially cause problems. As in my case.
see it here
oops, the previous bug is seen in IE. IE 6 and 5 just stop rendering text below the element being replaced. IE 5.5 shows a page cannot be displayed after clicking the alert message.
Brian, sIFR looks at the DOM tree to get the text it has to send to the Flash. Therefore, it doesn’t matter if a tag is closed or not: the browser takes care of this.
I’m not having trouble in FireFox 0.10 PR, but, indeed something goes wrong in IE! I’ll have a look.
Someone *cough* Mike *cough* should go through this thread for info, filter the questions into a FAQ and put it all, with download links, on a seperate site…
Or were you already planning to do that?
HELP PLEASE!!
using System.useCodePage for international text doesnt work!
I need to be able to include text such as “El niño” o “Tomás” i mean, normal chars in spanish and french…
The Panther Safari bug disappears when the styles are included inline, as in the example. For large sites however, this is fairly unreasonable- Does anyone have any idea why this happens or how to link css? Again, this bug only occurs part of the time with Safari in Panther. Example Here. Safari users with 10.3 can keep hitting refresh to see the bug.
Also, the script runs an infinite loop if it’s passed an empty string. I realize that doing so is completely unnecessary, but it might accidentally happen if integrated into a content management system.
Brian, I’ve had a look and unfortunately for you this isn’t our problem. IE doesn’t handle the unclosed tag very well, resulting in the entire document which follows after it being inside it. It doesn’t surprise me that this crashes IE.
AkaXakA, it would indeed be an idea of somebody *cough* Mike *cough* does that. I’ve been going through the thread looking for JavaScript bugs already, though.
Tomás, relax, it’s a beta, for Christ’s sake.
Tomas,
Let’s lower the volume a little please… no one is dying here. I already posted a message about testing international characters late last night so hopefully someone will post a quick solution. If not, I’ll look into it when I get a chance.
David, the loop would be in the Flash. Again, regarding the Safari issue, this is most likely solved in the coming beta.
Sorry! What happens is that i built a site with the sIFR 1.x thinking it was ok… but suddenly i noted the problem… And my client was amazed by the beautiful titles..haha
ok, sorry again
Akaxaka,
Yes, of course I’m keeping track of any and all issues here (and solving most of them). If you read the actual post you’ll see a line about “setting up a page dedicated to sIFR” when it’s out of beta. Good enough? This is a developer release still and the point of this thread is to uncover things like international character set weirdness, etc. It does no good to set up a dedicated page until the information stops changing.
Mark, I’m using the latest Safari beta and I have the same problems.
Greg, I meant the next sIFR beta ;-) Thanks for letting me know though :)
It is so very awesome of you to share this with the world. Thank you.
FYI regarding Safari:
Those of you who use Safari are aware of the browser-wide issue whereby Safari often renders pages on screen a split-second before the stylesheet kicks in. This is what’s causing the issue here. Beta 2 addresses this by giving the browser enough time to kick the CSS in. I’ll release Beta 2 this week… I just want to address as many as these little things as possible, especially international characters.
Thanks for the update- it’s much appreciated. Eagerly awating the next release-
Until then, I was also curious as to how to change the text to caps.
I got a strange problem, I got an error that the sFlashVars.normalize was not a function. I ended up fixing it by commenting out the:
and replaceing it with
Did I screw something up in my implementation or is there something wrong? I thought I caught everything to copy over…
Uh, sorry, nevermind.
I’m stupid.
Is there any formal documentation? How would you target a css element in sIFR.replaceElement() that looked like this in the style declaration???
.sidebar h2 {)
This is awesome, guys! I posted this for the old version, then saw this beta and figured I’d post again after trying it. Works great for me except on ASP.NET pages (aspx). The H1 is replaced with Flash, but nothing is written, it’s just whitespace. Any ideas? Thanks again for this.
Tomás, to add the special characters, edit the Character settings in the Flash file. Add the Latin 1 set and the accented characters should show up.
Mike: Ah, ok. It’s been a while since I had read the post (as I read it right when it was published).
And indeed, I was refering to setting up a page after the beta period, I however also noted that it might be handy to include certain issues in a FAQ when they don’t fit into the regular install instructions. (Such as looping)
Brian, as has been mentioned in the post and several times in the commetns, the documentation is not yet available as this is a beta release.
Cliff (and others), please post a link to the page in which sIFR isn’t working when informing us about it. We aren’t telepatic, so we won’t be able to find solve any bugs which might be causing the problem.
I thought telepathy was common upon you guys. :)
Sorry about that, Mark. I’m working local, but I’ll try to get something online that you can look at and re-post.
Thanks!
OK…Mac IE 5 has me stumped. I’ve been developing a site, testing in Safari and IE 6 Win…I decided to check out IE5 Mac (for good measure), and I’ve been frustrated by a broken layout ever since.
The page in question.. Grrrrr
A screenshot of what it looks like in Safari (and IE6 Win)
The IE5 Mac Screenshot
And here’s a link to my stylesheet.
Any advice would be greatly appreciated.
Wow thats quite incredible, I’d have to say. Seems really useful, and i hope that ill be able to use it at some point in my development of some site or another.
WOW!…thank you!..
i Still can´t believe this thing. Really amazing stuff!!…
When I come out of the shock and I´ll update with some examples.
I’m having a strange issue and it has me absolutely baffled.
This test page does not show the Flash replacements for h1. However, if you turn off styles, they look fine.
The problem shows up in every browser, so it must be something I’m doing wrong. Any ideas?
Brian, please have a good look at the CSS provided in the example…
I’m not sure how I missed those two new rules in the new version. Just glad my headache is over. :)
Thanks, Mark.
“OK…Mac IE 5 has me stuped”
Who in God’s name cares about Mac IE 5 anymore? Ignore it. It has what? 0.5% market share?
“Any advice would be greatly appreciated.”
Move on! Tell those stragglers of Mac IE 5 to use Apple’s Safari and be done with it. Seriously… Ignore Mac IE 5. No one cares about it anymore.
I am working on a large site project where I want to use custom typography in addition to client-side style switching. The site will provide a variety of styles (or “skins” if you like) and therefore support different color schemes, to include varying background and font colors.
In my quest to use both of these technologies, I have extended sIFR a little bit. Nothing that alters the mechanics of sIFR; my code only sits on top of it. It is born from a simple need to have sIFR detect the colors of the background and foreground based on styles dictated by stylesheet to generate the Flash content accordingly. The transparent option unfortunately impairs Flash’s text rendering engine, and does not address the actual font color. So my aim was to be able to call an external function to pass in the appropriate colors to sIFR, like so:
getColor(tagid, background) would in turn get passed the id of an element (first parameter) and figure out its foreground or background color (second parameter), and return a color.
The implementation is as follows:
which requires this function:
The limitations are glaring, which is why I do not recommend this unless it is needed–such as if the designer is going to allow the user to change stylesheets via javascript–and require close knowledge of how the stylesheets are constructed.
The primary limitation is the use of getElementById, which requires a specific ID of an object. When creating this I knew that the presentational and behavioral layers would both see me in charge, so extensibility was not a concern. In short, I will know what element IDs have the appropriate colors I need at all times, and am able to create new ones as I see fit. To fix this, one could implement a DOM-walker, such as in sIFR itself, or perhaps generalize sIFR’s DOM-walker to take arguments and pass back objects so that getColor() could use it as well. Again, such busywork was not needed in my case.
Another limitation is the inherent problem with “getting the color” of an element. Elements that inherit their colors will not necessarily report the inherit colors, when queried using the methods above. Therefore, an intimate knowledge of the stylesheets used are again required, because only a correct ID with colors applied at the appropriate level will lead to a useful getColor().
That being said, this pair of functions solves my color woes. I can flash-replace for different backgrounds and font colors after javascript style switching.
The implementation was not terribly difficult, but needed to cater to many browsers. First, some browsers support window.getComputedStyle() whereas others support the objectid.currentStyle attribute. Second, consider that a “color:white” declaration in CSS leads to IE saying the color is “#000000”, Netscape “rgb(255,255,255)”, and Opera “white”. Hence the convertToHexColor function.
Anyway, I hope this helps at least one other person. I realize it isn’t an extensible solution for many scenarios, but for the limited job it performs it should perform it well.
Holy crap Eric! Nice work on that.
However, one of the reasons we had to stay away from getComputedStyle and currentStyle is that at the present time, Safari supports neither of them, to my knowledge. Safari 2.0 is supposed to, but that doesn’t come out until 2005.
Granted, Safari has a limited browser share, but it’s my browser of choice so I had to stay away from anything which wasn’t compatible with it.
Anyway, regardless of that limitation, excellent work on this, and thanks for your continued work in extending sIFR.
Ok, got a link for you, Mark.
http://69.84.131.70/Store/category.aspx?categoryID=1
I’ve got it showing up now, but it’s not hiding the original H1. Looked in the page source and I’m not seeing any classes added which I’m assuming is the issue. I’ve left my replace statement in the js file instead of adding it to the page, didn’t think that would be an issue.
Thanks for any help in advance.
Cliff,
You’re missing a style:
The Safari incompatibility is disappointing, though still significant. For browsers that do not have a JavaScript way of getting at styles, I am most likely going to default to not using sIFR at all: the style switching is absolutely essential for this project but custom typography is not. Maximal browser support is a critical factor for me presently since the site will serve a vast number of customers in all demographics.
In the event others wish to use getColor() with the same workaround–that is, using sIFR only when its colors via getColor() will be set correctly–adding
before executing any sIFR code would allow one to ensure getColor is supported, or not (if it returns true, we’re safe).
Thank you for bringing this up, Mike; I should have discussed it in my post!
And thanks to Mike, Shaun, Tomas, and Mark for all the great work. I forget to give kudos to people when I’m ranting (like during my post to sIFR 1.x), or when I’m engrossed in something :oP.
Thanks, Mike! This works incredibly, thanks so much for this!
Eric (and Mike), perhaps it would be to add a user-configurable browser check to sIFR. That way you could keep Safari from replacing the elements, but, more importantly: we can prevent Opera from replacing the elements (as it it’s pretty slow with Flash).
Please have a thought about this and perhaps I’ll hack it in tomorrow.
Good stuff, I would like to implement a dynamic swf so that I could pass in whatever text I want and it would display it on the fly. Know if that is possible? I’m not a Flash expert. Great job!
I am having some mega problems with this.
If you go to http://dev2.bitwisesolutions.com/bryan/sIFR20/index.html you will see Mikes original example with avenir-heavy as the font choice on the page.
However, when I try to recreate it on a new page and associate the approrpiate files, the swf files don’t want to show up
http://dev2.bitwisesolutions.com/bryan/sIFR20/flashreplacement.asp
Any help is appreciated.
Thanks
Bryan
Bryan,
You have your print stylesheet embedded in your screen stylesheet. That’s the problem.
Great work, Mike! It’s a hell of an improvement to the web design.
Tomás, I’m using the latin characters set and what worked for me is the folowing: I’ve selected the basic latin and the Latin1 character set in the flash movie, the result was what you expect.
But I’m having some trouble with the ‘+’ character, wich is not rendered either using the “Include these characters” box in Flash. Is there something missing here?
waiting for some help too.
Thanks,
Ok, I have officially become a dumbass on a national level since hundreds among hundreds of people will see my dumbass mistake.
Thanks Mike :)
btw – anyone that wants to see a breakdown of 6 different fonts can view that link I listed up above, or just click this one again :)
http://dev2.bitwisesolutions.com/bryan/sIFR20/flashreplacement.asp
I think it looks pretty cool.
Thanks for this Mike. Awesome!
Luciano,
I’ve selected the basic latin and the Latin1 character set in the flash movie, the result was what you expect.
How do i do that??
Thanks…
Arg!! The i tag here doesnt work…
again:
Luciano,
you said:
“I’ve selected the basic latin and the Latin1 character set in the flash movie, the result was what you expect.”
how do i do that?
thank you again
seriously guys this is not a chatroom. give them some room and wait for the next beta?
Has anyone tried using this technique on Image tabs? or a navigation using unordered lists?
I am thinking of testing it out since the company I work for will often use fonts like Avenir for making image tabs or image links and then they have to actually create images as you can imagine each time a new link wants to be added. I wonder how successful this can be?
Ok, here is the test I have come up with.
In example 1, I use
and in example 2 I use
The first example allows for the borders to work, the 2nd example doesn’t.
For some reason, the borders don’t work in IE 6.0. I tested this mostly in Firefox.
Also, If you apply in your regular css a a:hover background color change, the flash swf file will not change with it. Upon using Transparent in the javascript part of the page, it did work, but I know this is considered dangerous.
Internet explorer seems to have trouble locating the “hand” cursor for Example 1 with the borders. Not sure why.
If anyone has tweaks for this method, please mention it. This is just a rough copy
Thanks
Bryan, please do some more research into how sIFR works before asking questions here. You would have noticed that the anchor is no longer visible on the page. thus there are no changes in sIFR.
As to replacing image tabs and whatever more, sIFR replaces text, so if you hack the Flash file enough that should work just fine.
Mark Wubben,
It would be nice to offer a reliable browser filter atop sIFR, but browser detection is a difficult gray zone to traverse.
For my specific project, I want to disallow sIFR + getColor in browsers that do not support either getComputedStyle or currentStyle, which does include Safari but also a slew of very rare browsers. Therefore, to reliably check for sIFR + getColor capability I have to actually check the dynamic style accessing capabilities of the browser.
In the Opera case, we could check for something like (document.styleSheets), which is not supported by Opera (as of 7.54) but all of the other major browsers. Although if Opera decides to implement document.styleSheets, sIFR may or may not be just as slow, since they are unrelated issues. I have yet to discover what exactly is the source of the slowness and if it is possible to isolate it to a specific aspect of Opera’s DOM-support, so that its behavior can be foreseen. Browser string detection is of course out of the question, since not only does it share the same problem of unrelatedness of information (sIFR slowness != “opera” in browser string), but Opera routinely spoofs its browser string anyway.
So unless we want to add a filter as specific as for getColor() support, or a generic system for designers to enter in the DOM features they need supported (which is hairy in the getColor scenario; see note below), we run the risk of misdetection. This in itself might not be so bad–if the only browsers we cast to the wayside are, say, future versions of Opera–but upon considering why we’re doing all this I am reluctant to offer a fix that is not exactly bulletproof.
Currently there is little need for browser detection; the only issues that have come up are two: Opera’s speed and Safari’s style-reading. It is highly likely that there will be others, but we know not of what browsers harbor incompatibilities nor of how to go about detecting them. (We don’t even have a way of detecting the Opera speed issue.)
Hence, a filter wrapper around sIFR would have to be either 1) customizable to the point where it might likely be almost as much trouble to use as it would be for the individual developer to implement, or 2) of subpar effectiveness.
Sidenote: it is difficult even in the case of getColor, to check for currentStyle compatibility, which leads me to doubt the robustness of any potential “generic browser detect”, where the designer can specify what DOM features are needed. currentStyle works on an object, so we need a test object to check the existence of the function. Perhaps one could create an element in the object tree and check its currentStyle, but I have not tested this. One could, knowing currentStyle is an MS/IE creation, check for IE (e.g. document.all && document.getElementById), but at this point the designer probably knows enough about cross-browser DOM-support to create a custom filter for his own needs more efficiently.
The lack of a standard DOM is frustrating, to say the least.
Mark, you stated
Can you elaborate on that as I don’t quite know what you mean.
Also, I don’t actually mean using images as the tabs.
When one designs a project in photoshop, they may have a navigation bar that unless used with pure css and text, may be a diced up set of images. Alot of the times, people use that because they have specified a certain font that won’t be processed by many peoples browsers if they were to use it text wise on an html page, so they slap it on a navigation bar and dice it up into images.
This sIFR technique, at first glance, appeared to give hope into using TEXT for the navigation bar while giving that appearance that it is an image.
From my example, I am attepting to at least get a rough example going where I could replace the borders on the tabs with a background image and have the Flash replaced text on top of it giving the impersonation that its from a diced up image but instead is pure text.
Make sense? I may have used some poor terminology up above.
Since sIFR replaces text, its perfect in this context “supposidly” For example, if you go to http://www.magichour.biz/event, you will notice those tabs are background images with text on top of them. Well, it would be nice to use something other then Verdana or Ariel for the text. I could imagine using some weird font for those tabs versus the “standard” text options us web designers are limited to. That is the idea I am getting at here.
This doesn’t seem to work in Opera 7.02. Headings are cleared but not replaced.
—
Ian
As for the diacritics and other caracthers non appearing (see, e.g., this comment), i’ll add the percentage sign (%) and the ¸l; (cédille) to those that do not work even after adding vasic latin and Latin1 to the flash file.
Perhaps this will help a little more towards undertanding how to circumvent this?
Having same problems as Brad Daily in formating the font in the Flash file in either Bold or Italics. Anyone figure this out? Looks to be just on the Flash side, as trying to “test movie” in Flash gives the same ” Macromedia Flash Player 7 to run slowly” error.
Keep rawkn!
(When I said “Currently there is little need for browser detection…”, I meant “Currently there is little need for extensible browser detection” instead. Apologies for the longwindedness.)
Bryan, after the replacement the only thing you see is the Flash. Not the HTML elements (anchor). Therefore it seems logic that a:hover won’t work, no? (Or perhaps I misunderstood.)
Eric, I’ve thought about a more configurable browser detection, but there is no nice way to do that. You’ll have to hack the JavaScript I’m afraid. What I did do, though, was expose the UA object which exists inside sIFR. Now you can use sIFR’s browser detection to do some things.
All others, considering bugs, please get beta 2. I will no longer reply to bug reports in this thread.
Eric, perhaps we need to proceed our discussion by e-mail? My name is mark and my new domain is at novemberborn.net, if you get what I mean ;-)
Mark,
I guess your right. Its weird to think of it that the text is flash, but the text is also part of the xhtml document, so I kinda have to separate my thinking that any special effects have to be done via the flash and not the html/css.
Thanks, sorry for the confusion.
Crystal clear now
Do you mind sharing what this bug was? Am curious what issue was introduced into the browser when there were supposed to not be any non-security related changes.
Aaron,
The bug was basically that in SP2 the browser would just hang for about 2 minutes before it kicked back in and rendered the page. Apparently it had something to do with the quickness with which we are replacing elements here via the DOM. So simply inserting “node.innerHTML +=”” seemed to give the browser a split second pause to gather itself.
I really have no idea exactly what the bug was, but this is just my best guess as to the cause-and-effect solution. Either way, it’s fixed. :)
Mike,
Thanks for the info. When you explained it I realized I’d heard that before and saw your explanation in the article… so I apologize for my rehashing it. But nice to hear the little extra about the hanging and such.
Just as a tangent foul, this was in relation to a discussion at work on what changes there were in the SP2 version of IE 6, and if it should have had a version number increase or not. I remembered this issue as a proof that /something/ must have changed other then security since there were now SP2 specific bugs.
Anyway, thanks again.
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.
Scalable Inman Flash Replacement 2.0 Beta
Mike Davidson invites you to come and kick the tires for the new version of sIFR 2.0b (download here)….
Branding the Weblog
As promised, here’s my personal, hobbyist, TODO list for branding my weblog, a process already “in the works”. This entry will be updated to include the latest progress, but hopefully if I do a good job you’ll notice the changes…
What’s New?
Well, for those who seem to be intrigued by what goes on in my life, here’s a little update on what’s been going on. Dead Hard Drive: My 160 GB drive bit the dust last weekend. I’m still at a loss for why. The upshot is that it only took about 15 minut…
Why sIFR Matters
sIFR, Mike Davidson’s take on Shaun Inman’s original Flash replacement technique, could have saved me many hours. Check it out.
In the Light of Day
Well after a rant against the internet followed by a brief absence of writing here, some of you may be wondering if the internet struck back with a vengeance against this little one who dared shake his fist at the…
sIFR Implementation
I implemented sIFR on the site and decided to share my very minimal thoughts on the technology.
sIFR 2.0b
Das scheint ja mal eine sehr nette Sache zu sein. Die Puristen werden natürlich aufschreien … egal :) Schlag auf Schlag, gerade erst die erste Version vom sIFR veröffentlicht gibts jetzt schon die 2er Beta. Wenns schön aussehen so…
sIFR 2.0b
Mike Davidson: sIFR 2.0b: Come Kick the Tires…
[…] o sonho de qualquer webdesigner (e já agora de qualquer webprogrammer) usar a fonte que se quer sem ter que se preocupar com o facto de o utilizador a ter instalada no sistema. ainda não testei mas está na minha lista de prioridades Introducing sIFR: The Healthy Alternative to Browser Text sIFR 2.0b: Come Kick the Tires […]
[…] those of you that aren’t familiar with sIFR2, you can go read up on it here. Basically it allows web designers to display header text on a website in any font we’d like, […]
[…] those of you that aren’t familiar with sIFR2, you can go read up on it here. Basically it allows web designers to display header text on a website in any font we’d like, […]
[…] što sam najavio u prethodnom postu, Mike Davidson je upravo obelodanio sIFR 2.0b, beta verziju skalabilnog Inmanovog Flash konvertora. Lista unapreÄ‘enja i novih mogućnosti je […]