The beta is out! Read more.
It’s high time for a release of the new sIFR version, 3.0. With Inman’s Flash Replacement as the original, sIFR 1.0 making it scalabale and sIFR 2.0 bringing it to the masses, this version will really make things rock. Flash 8 has brought a lot of new, cool stuff. Now you can use these features, starting with way better font anti-aliasing and auto-kerning. You’ll also be able to use filters to do shadow effects (in the nightlies).
For those unfamiliar with sIFR, here’s a short description:
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.
Furthermore, it degrades gracefully when Flash is not present or the browser not supported.
For sIFR 3, the code has underwent a complete rewrite, making it easier to use and making it work even better. There also is a new way to render the Flash font. No longer are guesses being made as to how big the font should be, the cues are taken from the font size used in the HTML page and the number of lines the text spans. In order to provide better styling you can now use FlashCSS. No matter how many colors or font styles you want to use, now you can.
Additionally, leading is now supported by sIFR. A number of small issues has been fixed, and you can now pre-fetch the movies for Internet Explorer and Safari. This solves a problem where these browsers would request the same sIFR movie again and again until it was cached – instead of waiting for the first request. Huge bandwidth saver here! And for the AdBlock users, using a little bit of CSS the object tab has been hidden. sIFR is not an ad, and you should see the text itself, without obstruction.
Here’s the full feature list:
A new font sizing algorithm, although it needs some attention with regards to padding and wrapping in the Flash element.
FlashCSS, both configurable in ActionScript and in JavaScript.
Support for Flash 8 movies, for real good looking text.
Font resizing in Opera 7+.
Support for leading
Flash movie pre-fetching for Internet Explorer and Safari.
Easier configuration.
No more object tab obscuring the text when AdBlock is being used.
By the grand tradition of alpha (and open source) releases, this version lacks serious testing, actual documentation and a number of features. None the less, it is functional, as you can see by the demo.
As you are probably anxious to get started, here’s a run-down of deploying sIFR 3. Please note though that this is an Alpha release: if you run a high profile website and you really don’t need the new features, sIFR 2 is best for you. If you like playing around with new tech, please give this version a try. The more real life use, the more improvements can be made.
That’s it for this release. I’ll write more about the beta release in another post. Please give the new Alpha a try and let me know what works and what doesn’t. You can also subscribe to the mailing list. Now, without further ado, to the download!
Doesn’t seem to work in Firefox 1.5.0.3 on Windows.
I can attest to Branstrom’s comment as well. It seems to work on Opera 9 and IE6 on windows though.
I’m on FF1.5.0.3/Windows and it’s working just fine for me.
Well. That’s weird. Still not working here. Tell me more about your browser configuration. Something must be making it work. I have Flash 8, JS on, CSS on, everything on basically. :p
Mark, Congrats with this alpha release! Keep up the good work, and let’s all share the knowledge
Very neat Mark,
testing it on browsershots, all seems fine. Keep it coming. Cheers
well see for urself: http://browsershots.org/website/1081446/
MSIE 6.0 with Windows XP SP2 flash 7 seems weird but not unfunctional.
Marcos, it would seem that the screenshot is eiter taken too early, or sIFR is not enabled for that specific install. I’m guessing it’s the former, since I’m testing in IE6/Flash7 as well.
Congrats Mark! Wish I’d have known this on Friday when I taught my session at TODCon. I told them it was “coming soon” though.
I’ll try to do some Mac testing for you shortly.
Any preliminary benchmarks on speed? I have 4 sIFR 2.0 calls on my blog page, and sometimes the speed is very, very slow… on the order of a 15 second page load.
If speed is increased, I’ll be super excited to try 3.0 alpha.
Blank in Safari. any ideas?
The font sizes in the demo are significantly different in IE6 and Firefox 1.5 (WinXP).
But, yay sIFR.
Yeah, I think I saw that, too. I’ll be looking in to it, there must be a simple explanation for this.
Tested with OmniWeb 5.5 sneaky peek 11, Mac OS X 10.4.6. Demo looks fine.
I still can’t get it to work. I’m using Firefox 1.5.0.3 on Windows XP, with Flash 8, JS on, CSS on… It’s not replacing any elements.
Branstrom, could you send a mail to the list about this?
Slight delay in safari (1-2sec), but everything is visible and definitely has potential. cool!
I enjoy this alpha of sifr3, but i have a little question: It is possible to have the background of the sifr replace transparent? thanks
Hi Colir, you can use
wmode: 'transparent'for transparency. I’ll see what I can do about documentation when I get back from Copenhagen.I’ll mail the list to check for more people with the same problem, I know there are at least a few… It should be something simple, sIFR in Firefox has worked flawlessly before.
Might be better to rename the sifr css from just “screen.css” to sifr-screen.css . I already name my regular css screen. So I dont know if there will be any cofusion with the javascript or something if i change the name of the sifr css. Bout to find out though.
Done (in the nightlies).
Hey nice update on the script, I’m just wondering one thing. Is there a way to make layers go over the flash text? evertime i have an overlay like lightbox or maybe a dropdown menu it goes behind the flash text, just wondering if theres a way to fix that like background transparency. Thanks!
Anthony, I’ll be looking into why that doesn’t always work.
Very nice. Works great in IE 7, but still non-functional in Firefox 1.5.0.4 (no replacement). Windows XP, Flash 9 Beta
Hey Mark, actually its fixed in this version. I didnt test it yet before posting and it seems like its working great! Your the man, but im still having this odd problem. This is only coming up in IE and its not even in the source check it out on a wordpress blog i administer. http://covrune.com/propaganda/
its showing 8:Rendered 4:with 4:sIFR 1:3 on top of the content page.
Steve, this might be because Quicktime is registered for handling Flash on your system. It sounds like the test for that situation could use some improvement.
Anthony, oddly enough it doesn’t even show any text for me on IE. Could you try the latest nigthly and let me know if that helps? It might be an encoding issue.
Hi Mark, I’ve downloaded and tested this on a range of browsers and found the following bugs/unexpected behaviour:
it doesn’t work for any of my Mozilla based browsers (Mozilla, Netscape and Firefox) on Win XP and Mac
the text is rendered smaller in Opera browsers
takes longer for the flash to load in Opera
text after an ampersand (escaped or unescaped) does not get rendered
the ‘Open in new window’ option for links loads into the same window
Great work so far, and I look forward to using the finished release.
Thanks for taking a look, Mark. There have been a few other reports about it not working in Firefox on Windows XP, I’ll need to look into this as it’s working perfectly on my machines.
In the alpha, the text rendering should be larger in Internet Explorer and the same in other browsers. As the IE difference is relatively constant it is possible to calculate the correct value with about 5% precision for big font sizes (a few pixels).
Not sure about the loading times, I’ll be looking at optimization for the release candidate. The ampersand problem has been fixed in the nightlies. I’ll look into the link problem, there are problems being reported with
a:hoverstyles not resetting as well.Aside from the fixes mentioned above the nightlies contain a number of other fixes as well. However, being nightlies they are more prone to bugs. Could you have a look, especially regarding the font size issue? Thanks!
Hi Mark, a complete uninstall of QuickTime and a re-installation of Flash Player seems to have solved the Firefox issue. I reinstalled QuickTime to double check and it still works! And you were right, IE renders the text slightly larger than Firefox or Opera.
I’ll have a look at the nightlies when I get some spare time and see if that makes a difference.
Great stuff! looking forward to the final version..
Mark, it would seem the QuickTime detection I’m using isn’t distinguishing between an active install which handles Flash, and an inactive install where the Flash is handled by the Flash player. I’ll have a look at that
In Opera 9 Build 8460 the text does not enlarge when you zoom until you go over a certain size. For the newspaper header (in the demo) it stays the same size until I reach 160% zoom, when it suddenly jumps to a larger size. Whereas the quote gets larger when you reach 150% zoom I think. So it’s different depending on the original font size. I wonder why it doesn’t enlarge by steps to match the zoom though?
Chris, Opera resizes the Flash movie, which is then detected inside the Flash upon which the text is scaled with the zoom level. Any difference is due to the interval with which Opera resizes the movie (which might have deteriorated in this build).
I tested it again, and also in Opera 8. Both showed the same behaviour. Nothing is enlarged in the Flash text until 150% zoom. The heading does not enlarge until 160%. So the fault lies in the Flash plug-in?
Also, the rollover does not work until I click on the header.
BTW, you spelled “Frutiger” wrong.
To be honest I only tested by zooming with 100% increments, I’ll have a closer look. I’m aware of the rollover problem, and I’ll leave the Frutiger in for historic reasons (Mike spelled it wrong).
Mark, great work! I got it working without much hassle at all – just a few quirks that were solved by messing around with the styles.
One thing I am seeing is that the text is displayed slightly bigger in WinFirefox (1.5.0.4) than in MacFirefox (1.5.0.4) and a lot bigger in IE 6.0.2. Safari 1.3.2 and Opera 8.54 (on the mac) display it about the same size as Firefox on the mac does.
Let me know if you need anymore info.
Seems to not fall back to text with Flashblock 1.5.1, Firefox 1.5.0.4, Flash 7, on Fedora Core 5. I see the plugin placeholder boxes appear and then disappear completely from the page; however, if I whitelist the page then things are okay.
Peter, how does FlashBlock handle this page? I believe I changed some things after the alpha to make it work.
Jeph, yeah. My tests showed that all sizes were equal on both Mac and Windows, except for IE in which the font is about 1.25 times as large as in other browsers. The nightlies take this into account so IE now approximates the size in the other browsers.
I’d like to use this LCD font: http://fonts.goldenweb.it/panfile/l/en/font2/LiquidCrystal.ttf/d2/TrueType_Fonts/c/l/default.html but when I export it from Flash and use it on my website nothing appears!? Is the font not useable?
Mark: perfect, I see the text content in the sIFR-alternate class, as expected.
Now the trick is to figure out how to build the sIFR chunks on my Linux box… seems I can do everything but the .fla chunk, which you’ll agree is kinda important.
I’ll take a look at the nightlies then. Also, one thing I forgot to mention yesterday is that when the title has an ampersand, the text will display up until where the & is and then stop. I checked in flash and the ampersand, along with a lot of others, is in the box to be included in the character range.
Am I missing something else?
Peter (#40), there are some reports about the movies not working when exported, I’l have a look at that.
Peter J, you can hunt through the forums for mentions about SWFMill, I’ll be looking at a better solution for sIFR once this version is done.
Jeph, it’s fixed in the nightlies.
Peter (#40), I’ve just published revision 100 (nice round number) which you should be able to export with Flash Professional again. There now is a line in
Options.aswhich needs to be commented out before exporting to Flash 7, and then things should be fine.Awesome, thanks Mark. I’ll check out 100 this evening.
And thanks for putting up with all of us!
Is there any support for German characters like ä ü etc.?
Sure, but as with sIFR 2, you’ll need to embed them in the Flash movie.
Maybe I’m an idiot, but why is my text all different sizes? Shouldn’t it all be the same size, and just wrap as needed?
What am I doing wrong?
Hi Michael, could you try with the latest nightly, and if that doesn’t work leave a comment on the forum for easier discussion?
Hey Mark, I’ve been playing around with sIFR 3 alpha on the new design of my blog, unfortuantely it’s all local at the moment as I’m pretty new to Wordpess so I don’t have an example I can show you online, but there is a strange little bug I think I’ve found.
If you click and select text in the replaced Flash movie or rather click and drag in a vertical direction rather than a horizontal direction, the text in the replaced Flash movie disappears and you can only summon it back again by refreshing the page.
Hey Rob, yeah I’m aware of that. Not sure what’s causing it, though. And I need to put up a list of know bugs somewhere
hmm, clever but too bad its not more crosplatform independant? like svg and javascript maybe? or webfonts ( joking
adobe wont do flash player 8 for any of the free unix (linux *bsd..) systems, the last version is 7 and all above will not work there.. some ppl from gnu trying their luck with opensource flash player, but they have lot to do (like something newer than again flash 7)
i cant say it bothers me since i hate flash for its very often informative degradation.. and yes, flash 8 is even slower!
Looking good to me….
I’ve been thinking about the fact that you can’t open sIFR links in a new window.
Would there be a way around this – let’s say if you hovered over an sIFR link, an icon appeared in the top right that you could click to open in a new window/tab?
Keep up the good work
Nescius, Flash is pretty much the only way to embed fonts. And at least sIFR is degradable, so Linux users will either see the Flash 7 movie or normal text.
3stripe, there are workarounds where a (transparent) HTML link is positioned on top of the Flash movie, but that won’t work well with the way links can be used now. Flash itself really needs to implement this, and until it has been implemented using sIFR for links is discouraged.
It’s such a shame that Flash isn’t up to scratch in this respect.
I only ponder the issue because I currently use sIFR on a blog, where the post titles are also unfortunately links (www.tonguengroove.co.uk)
Hmmm…
When trying to export the latest nightly as a Flash 7 swf, I get the following errors in the output panel:
Error Scene=Scene 1, layer=code, frame=1:Line 18: Syntax error. import sIFR
Error Scene=Scene 1, layer=code, frame=1:Line 19: Syntax error. import Options
Total ActionScript Errors: 2 Reported Errors: 2
That’s odd.. what can be wrong with importing those classes? Did you try this directly from the extracted zip file?
I mailed you about a font that I couldn’t make work. I got errors when exporting first, but then started to omit those reports (or whatever it’s called) and then it worked.
I think it was similar errors. I’ll investigate it further and put something more detailed up on the mailing list.
Hey Fredrik, sorry I haven’t gotten back to you yet. I’m caught up revising for my last exam of the year and packing for my two month stay in Palo Alto. Let me know what you find out, much appreciated.
Thanks so much for this! The Flash 8 type is so much crisper! On a site in development this was pretty simple to set up. One issue though (which you allude to above). The Flash type seems to be wrapping weirdly (almost as if it is tying to “balance ragged lines” as in InDesign). Short bits of type get bumped onto two lines when there is plenty of room, where as much longer text wraps as normal. I am guessing this has something to do with the wrap options in Flash? I can send you URLS if needed.
Jeff, did you try this with the latest nightlies (including re-exporting the Flash)?
Hmmm. Can’t seem to get the flash transparent. Is there a guide somewhere? I understand that you have to add wmode : ‘transparent’, but where?
Any one suss what it causing problems of non display in firefox
Now the text is only enlarged in Opera 9 when the zoom reaches 270%! Keep pressing + on the Num Pad to see this is a problem.
Also, can the text be made to wrap? Otherwise it just gets cut off.
Hi Chris. The Opera zoom issue is weird, basically sIFR depends on Opera resizing the Flash movie, which it doesn’t seem to do reliably. I’ve already ask a fried of mine who works for Opera about this.
The wrapping issue should be solved in the very latest nightly (r119 I believe). Basically the custom wrapping algorithm, which was used to make the Flash text resemble the browser text better, didn’t quite scale up. That’s gone now, and it’s just the Flash wrapping being used.
I’ve tried every single nightly and none of them work in IE.
Here’s the site I’m working on:
http://www.contempographicdesign.com/v3/
Has anybody come up with a solution?
I can confirm that the very latest revision doesn’t work, but I am sure there are working nigthlies on the server. Is the alpha page working for you? If not, it’s definitely something on your end.
Let’s take this back to the forum.
The nightlies don’t work in ie for me either. The alpha demo works in firefox and opera but not in explorer. I have ie 6+
Hi,
Trying out the .119 sIFR3. I replaced the rockwell-8 with a bradley-8.swf and strange things happens. The spaces are shown as ‘,’ when the text is replaced! It is with more fonttypes, so am I forgetting something???
Are you sure you updated both the JavaScript and the Flash on the page?
Hi there,
Have been using the latest nightly (7 Aug) and I can confirm it’s not working in IE. Can someone let me know which nightly it does work in so I can back track?
Nightly r121 works again in IE.
To use wmode: ‘transparent’ you’ll place it something like this:
sIFR.replace({
});
I’m using php includes to insert content, and it seems that sIFR 3 won’t activate on the included content… is there a way to fix that?
sIFR works on an HTML page, so unless the content is loaded in with JavaScript it should be fine.
I should’ve been more specific actually… this is a Safari only issue… so where as in a regular document if I apply the sIFR code to say it works perfectly… however if I use a php include eg which contains the sIFR doesn’t apply itself
sorry for the double post but what the previous one should’ve said was
I should’ve been more specific actually… this is a Safari only issue… so where as in a regular document if I apply the sIFR code to say ‘h1’ in inline code it works perfectly… however if I use a php include eg ’ include “something.php”; ’ which contains the ‘h1’ sIFR doesn’t apply itself
The PHP outputs HTML, which is nothing special. There’s something else going on. Could you post a link at the forum?
Actually I figured it out… there was a header above all all the other headers that had a class applied to it that made it’s display: none… and for some reason it ended up carrying over to all other headers below it. I was able to change the h1 to a h4 which doesn’t have any sIFR applied to it at all and it worked out fine…. really strange. But it’s working like a champ again. Sorry for any confusion or worries, some quirky bug
Here you go Mark I posted it in the forum anyway: http://forum.textdrive.com/viewtopic.php?pid=100160#p100160
Thanx to all the people who are hard at work making sIFR 3 come together nicely. Installed the lastest nightly and its working great on, FF 1.5.0.6 and IE 6.0.2900. I adapted the code from the demo to fit my needs. I just have a few questions concerning the application of the flash filters on the text. I got the the dropshadow filter to work as per the demo page, but when i try to apply another filter such as graident bevel, it fails to work. sIFR will not replace anything, which is good instead of being broken. So my questions are:
First is this the right syntax:
,filters: { DropShadow: { knockout: false , distance: 1 , color: 0xffffff ,strength: 2 }
} });
If i remove the GradientBevel line it works just fine.
If the syntax is not correct, then could you be as kind as to point me in the right direction? If the syntax is correct, then that leads me to my second question. Can you combine two or more filters on a single element? This may be why this is not working.
Any insight would be much appreciated, thanx in advance
I think
, colors: {0xFFFFFF, 0xCCCCCC, 0x000000}should be, colors: [0xFFFFFF, 0xCCCCCC, 0x000000]. (Note the square brackets in place of the curly braces.)Hi everyone!
I’m using nightly r147 (the current one) and experiencing strange problem, I didn’t have with v2.0.2.
The problem is whenever I choose “Custom anti-aliasing…” or “Anti-aliasing for readability” it shows fine in the Flash application. But when exporting movie – the Flash 8 exports the file with default settings: “Anti-alias for animation”, which makes some fonts more heavy as they should be. (flash v8 as 2.0)
Does anyone know are there any settings which can be set to control this in the .as files or is this a bug? When using version 2 .fla file, the exported .swf has anti-aliasing correctly applied.
Best regards, Mario
Thank you for quick reply – I’ve just made the post with files as well, so you can compare them. (http://forum.textdrive.com/viewtopic.php?pid=102568#p102568)
I would really appreciate some workaround to preserve my settings while exporting, so if there is anything I could do/change within the .as files, please let me know.
Getting errors when exporting swf AND flash replacement text is not showing up at all. Works if I use the swfs provided in the demo though.
errors are like this: ..\sIFR.as: Line 20: The name of this class, ‘sIFR’, conflicts with the name of another class that was loaded, ‘sIFR’.
The text doesn’t show up because the movie didn’t get exported correctly. I’ve heard of this error once before, which was solved by trying again later with a fresh download (most likely after a reboot). I hope that helps.
John from the forum just posted a link which describes the problem in more detail. Try opening the
.asfiles in Flash, save them, and then export.I’m going to need more information than that…
I’ll investigate this on my joomla site. Thanks!
My ideal tool for this would allow subpixel fonts anti-aliasing (which Flash does not support yet).
For me it also works with FF 1.5.0.7, so don`t worry.
I cant get sIFR to work in IE7 at all. am i missing something, or is IE7 not supported?
Should be fine. Please post more details at the forum so I can look into it further.
The font sizes in the demo are also significantly different in IE7 and Firefox 2.0…
Yes, this was addressed in an earlier comment.
I’ve been thinking about the fact that you can’t open sIFR links in a new window.
Would there be a way around this – let’s say if you hovered over an sIFR link?
You mean using a keyboard shortcut? That’s true, and primarily a Flash – browser issue. As a workaround you could display a HTML-based link on top of the Flash movie, but that would only work reliably if the link is the only text in the movie.
i cannot open the sifr.fla i have flash MX 2004 installed and am on a mac.
anyone else having this problem?
oh i see… must use flash 8. nevermind.
Oops, thought is would create the breaks.
The rag is very odd, it’s breaking lines even though there’s space to allow the text:
Like this:
New agreement
creates Myriad opportunities
or Fruitiger,
sans-serifs
Vanden Keere,
Mrs. Eaves
wed
in Baskerville
FireFox 1.5.07 (Mac) Does the same thing in Safari 2.03 Does the same thing in Camino
Also does it on the PC in IE 6.0 .
Thanks for this awesome software!!!
Hi Christina, did you try the nightlies? More info here.
I’m really liking 3.0!!
My only problem that I’m having is it’s leaving space under the flash text. I have zeroed the margin and padding and set display to block, which apparently fixed the space in 2.0…. is there anything that i can do to get rid of it?
Thanks!
Hi Billy, over at the forum there’s some talk about this.
Thanks Mark! I’ll mess around with the tuneWidth and tuneHight….. for now I just made the background transparent and gave the margin a negative value on the bottom.
Hi Mark, I admire your work. All improvements are working fine in both Internet Explorer 6.0.29 and Firefox 1.5.0.7. All the best to you.
Does this work in firefox 2.0? I just downloaded it and my pages sifr now only show normal text
Should work, yes. If not the alpha then the nightlies.
Keep up the Fantastic work! I absolutely love the Flash 8-friendly implementation and pre-fetching. Anti-aliased text and DropShadow filter can create some great, yet simplistic combos…and all on-the-fly, too! Consider this my new SEO-magnet
I’ve added a link in the sifr3 examples section, too.
Do you have any idea if the font and structure differences that come up with early releases of IE 7, would remain the same on the final IE 7? There are a lot of bug fixes to be made in IE7 are being discussed and applied currently –as I heard, I hope it would have some impact on the small issues affecting sIFR 3 Alpha appearance.
Andy, IE 7 has been out for almost a month now, and the alpha release is pretty outdated compared to the nightlies.
Nice one thanks!