As years end nears, neighbourhood kids are playing with fireworks around the house. A nice homage to the second beta of sIFR 3 I’d like to imagine. Feature wise sIFR 3 is now complete, and I think it’s gotten pretty awesome. If you’re trying to decide between sIFR 2 and sIFR 3, sIFR 3 is definitely the better choice.
What is sIFR?
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, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.
What’s new?
Here are the major changes since the last beta:
- The Flash movie and the JavaScript must be of the same version.
- Added ratios, which make the loading of the Flash movies less jumpy.
- sIFR does not work when opened straight from the local filesystem. You must load sIFR from a web server.
- sIFR movies no longer steal user input focus.
- When the Flash movie is opened directly, it shows its revision in a bold, italic and normal font.
The Flash movie insertion code is equivalent to SWFObject 2.
sIFR now supports window resizing.
- Page zoom in Firefox 3 and IE7 is supported!
- A workaround has been added for transparent or opaque Flash movies in Firefox/Windows, whose ancestor is floated.
- A workaround has been added for the loss of Flash variables in Internet Explorer if the
innerHTMLof an ancestor of a Flash movie is changed. - Hover effects tend to get stuck in Flash, added a workaround.
- Added a custom context menu for links when the hover effect is used.
In Internet Explorer, the sIFR Flash movies are hidden when the page unloads. This works around rendering glitches where the old and new movies are briefly shown at the same time.
You can specify the font size in pixels, directly from
sIFR.replace().- You can specify different font sizes within the Flash movie, and they will be relative to the main font size if you specify them with a percentage unit.
- Added support for bitmap fonts, by rounding the font size to the nearest power-of-eight value.
- You can now force the text to be displayed on one line.
- You can disable the pointer cursor (the ‘hand’) inside sIFR.
Multiple fonts are supported.
You can replace the text inside the sIFR Flash movie.
- You can change some of the CSS that was applied to the Flash movie.
- You can get mouse events from the Flash movie.
You can tell sIFR to check if the CSS has been applied to the document. This will speed up initialization in Safari and Opera.
Opera and Konqueror support has been disabled, because these browsers do not support communication between JavaScript and Flash code.
And there have been many, many more minor improvements. Really, this version rocks!
How Do I Get It?
You can check out a demo of sIFR 3, or simply the most recent version of sIFR 3 from the nightlies. (Note: there are newer versions available than beta 2.) If you want, you can subscribe to a feed for the nigthly releases. Major releases are also announced through the sIFR 3 Announce mailing list.
How Can I Help Out?
First of all, it’s very important to test sIFR in as many scenarios as possible. The easiest way to help out is just to install sIFR on your web site and report any bugs you may find. You can also join the forum or the sIFR 3 Development mailing list. These are also the places to report bugs. Documentation on the wiki could use a lot of improvement. And, of course, a donation is much appreciated.
Support?
Documentation (although, to be honest, it’s not fantastic) can be found on the wiki. The best place to go for support is the forum or the sIFR 3 Development. Please do not post support questions in response to this blog post.
Concluding
I’d like to extend many, many thanks to everybody who filed bug reports, helped testing, responded on the mailing list, improved documentation, spread the word and made a donation. With the year 2008 on the horizon, let’s make it the year of sIFR 3!
- Check out the sIFR 3 demo.
- Download the latest sIFR version.
- Subscribe to a feed for the nigthlies.
- Join the sIFR 3 Announce mailing list.
- Join the sIFR 3 Development mailing list.
- Join the forum.
- Edit the wiki.
(P.S. If you’re curious about sIFR, I’d be more than happy to come give a presentation at your organization!)
Any plans for support of inline (character-level) styles, rather than just whole paragraphs? I can’t figure out a way to apply italics to one word in a headline, or to make one word small caps, for example.
Not really, the CSS support in Flash does not allow for it. You can wrap those words/characters in other elements and style those though.
Mark, thanks for all your work on sIFR, I love it and use it pretty much on every project I have ever done. I recently built my first site with sIFR 3 and realized at a later time that Opera support had been dropped, but you also mention in the next to last bullet that “…This will speed up initialization in Safari and Opera.” and following it up with Opera support has been dropped.
Is this a permanent thing or are you planning on working out something for that browser?
Again, thanks so much for all your hard work, sIFR is an invaluable tool in my box.
Hi Andrew, thanks for your comments. Placing those two Opera changes right after each other was a bit of a joke, it really is faster in Opera, but without communication between JavaScript and Flash, sIFR simply doesn’t work properly. The communication problem is on Opera’s end, since it was working before 9.21. Konqueror hasn’t implemented it at all. When they do, they’ll be re-enabled straight away!
sIFR Beta 2 is wonderful! Thank you for your assistance with the IE unload issue we had been discussing, the new solution definitely does the trick!
On a side note, I noticed a few times that some of my sIFR objects were “disappearing” in IE7, or at least the text inside was no longer visible. It appeared to be related to the resize handling of sIFR, which I was able to disable to stop the problem.
As always, thanks again Mark!
@Michael Snow,
Mark said: “[…] You can wrap those words/characters in other elements and style those though.”, so I sought to seek out an example utilizing this technique.
I was reviewing the Example page for Beta 2: http://dev.novemberborn.net/sifr3/beta2/demo/
The sIFR’d text: “The quest to abolish the serif shall continue” on the Beta 2 example page, you’ll see that the text is colored black, but the words “shall continue” are a deep red color.
It appears this was achieved by wrapping the words with the HTML “em” tag, then defining the alternate styling in this manner:
css: ‘em { font-style: normal; color: #660000; }’
…just as Mark said! Very cool.
Mike, regarding the no text visible issue, I’d love to see a test case for that. It happens on this site when you use page zoom in Firefox 3, but I think it’s actually an issue with Firefox, not with sIFR, as it happens even with resize handling disabled.
Hi Mark, great job on the latest release! Why does one have to use Flash 8 just out of interest instead of Flash 9 when preparing/creating the Flash file? I found out the hard way myself that Flash 9 will not produce a .swf that works with sIFR 3 — I wondered if you could shed some light on why this does not work and maybe make it explicitly clear in the wiki that the Flash file/font can only be created in Flash 8 and not the latest CS version of Flash. Thanks again!
Yes, wrapping text with an “em” tag works on the demo page, yet when I try it in my page the text wrapped by “em” just goes blank. I’m using the beta 2 scripts. Here’s the page:
http://penandpress.com/site2/about.gale.php
There should be the word “PRINCIPAL” at the end of the head, in a smaller size.
One other thing: I’m getting a report than in Firefox on Windows (also Vista) the dropdown menus don’t appear on top of the sIFR-ed headline. The headline stays topmost, obscuring part of the menus. Here’s a screenshot:
http://penandpress.com/site2/screenshot.jpg
The dropdown menus are the last things to load, and they all sit in DIVs with a z-index of 10. Windows IE seems to display the menus on top, and all my Mac browsers (including Firefox) are fine as well.
Nice work! And great job on the fixes and features.
However, I am wondering if its possible to use this script with the swfobject 2 script in a manner that is optimized. Such that if I am including the swfobject in the page, the sifr script could be drastically reduced in size because a bulk of the lifting is now done with swfobject 2.
Did that makes sense?
cody
sw, that’s odd. As long as you export for Flash 8 with ActionScript 2.0 it should be fine. Did you perhaps export with AS 3.0?
Michael,
emtext is italic by default, and it won’t show up unless you embed the italic glyphs. In your case you’ll want to set thefont-styletonormal. With regards to the drop-down issue, you could try addingopaque:trueto the keyword arguments. In any case, could you post further questions in the forum? Otherwise different questions will start running through each other here.Cody, yea. I’m definitely going to look at how sIFR can be constructed such that it doesn’t have to copy functionality from other libraries used on the same page.
Hi Mark, congratulations for this great thing and for beta 2 being available. i’m using sIFR3 (r323) in my last project and it is great!
looking foreward to the final version!
Hi Mark,
We just upgraded to beta2 and can’t seem to get rid of the “click here to activate” issue on IE. You can see it on our site http://www.weddingmapper.com
Any suggestions would be a huge help. I’m sure it is something simple but I am pulling my hair out.
Editor’s note: Jared has also asked about this in the forum, where the discussion continues.
Hey Mark, sIFR is great. My company was working on building something similar and asked me to look into it. We ditched the efforts to build our own when we saw how easy yours was. We are just starting to implement it (no live sites yet).
There are a couple things I wanted to ask though. You said multiple fonts are now supported but I haven’t figured out how to implement that. Another thing that I am really interested is using the same text to create multiple sIFR replacements. This may sound weird, but some of our designs have H1’s that have a prominent type face up front, and behind it has the same text but in a very stylistic and low opacity font. Is there a way to duplicate the font with javascript and use a new font on each? Thanks a lot!
Hey Kevin, thank you for your comment. You can do multiple fonts by embedding them in the Flash movie, just like you’d do normally. Then you can use the CSS for the Flash movie to define a different font family. I’m still not sure what you mean by multiple replacements, though.
Amazing updates and works like a dream, except all versions since revision 327 don’t seem to work in Opera, including the demo.
any fix available soon?
Natalia, I’m afraid not:
Congratulations for beta 2 and thanks for all your work on sIFR, great job on the fixes and features.
Hey Mark, the newest version works very well and cleared up some issues I’d been having with previous releases. However…
In Firefox (Mac and Windows), when you click on the back button (in the browser or on the mouse), the sIFR font-size increases with unpredictable results. I’m not having the same issue in IE7 or Safari (haven’t tested Opera or IE6 since I don’t have Flash installed on those browsers).
Is there a setting I am forgetting or is this a bug?
For an example, check http://tusenfryd.no/billetter/priser.aspx and try browsing to another page in the menu, and then click Back in Firefox.
Hi George, did you try r370? It should fix those issues.
Hi Mark
I just wanted to let you know, I downloaded r370. However, it looks like you included the old rev flash movie, because i get the message “please update the flash movie to version 370”
Great job Alex
my mistake…it looks like i had to restart the mashine to clear the cache – the usual way didn’t work..:( sorry
Hi Mark,
I notice the file sizes generated from sIFR 3 Beta 2 are huge.
The SWF font files seem to have grown about 200 – 300% of previous releases. Even Arial has ballooned to a 45Kb SWF file! This is using the default settings in sifr.fla when exporting the movie from Flash.
Is this what others are getting? It seems excessively large.
Otherwise, great work. It’s looking very sweet.
Hi Andy, most of that increase comes from Flash itself I think. Also, you can try and minimize the glyphs that are embedded – for example you don’t have to embed bold and italic glyphs if you don’t need them.
My Opera 9.5 beta (build 9815) does show sIFR with your last build (r382)! I just had to set Browser Identification (in Site Preferences) as “Mask as Firefox”. sIFR is working, a bit slower than in Firefox, but not much slower than sIFR2 was… You said: “these browsers do not support communication between JavaScript and Flash code” — have you found any global problem with it? Thank you for this incredible thing.
Yes, communication started working again in the latest Opera 9.50 builds. Haven’t been able to release a new sIFR version reflecting this though.
Hi. I’m trying to get this to work but having some trouble. I’m not a Flash expert by a long short but when I open the enclosed .fla file in Flash, and follow the instructions to change the font then export the file as an .swf, the file doesn’t reflect the font. Is there any noobs guide for troubleshooting? So many thanks for this update. I am trying it under Firefox in Ubuntu and it works!
Does it support the Swedish headline characters ÅÄÖ in this version?
Nathelie, yep. You’ll have to use the latest nightly though.
Hey Mark, awesome job on this!
I’m having trouble with the font embedding. I’ve created a new .swf file with the font I want to use and the site works fine on my computer. However, when I go to someone else’s computer that doesn’t have the particular font installed, it goes to a default font.
Any suggestions?
Do you see Flash on the other computer? If not, it’s likely an issue wit the Flash player (wrong version, or corrupted). If you do, are you sure the font was actually embedded?
Yeah, Flash is installed and current on the other computers. The sIFR is working, it’s just not displaying the correct font.
As far as embedding it, I changed the font to what I wanted to and even put a character per the install instructions. Is there something else special I need to do to make sure it’s fully embedded?
Thanks for the help!
Hard to tell what went wrong, but it sure sounds like the font glyphs themselves didn’t end up in the Flash file. Perhaps there’s a setting for that somewhere?
I’m using the latest nightly for a project for work (it’ll be up at http://www.gibaran.edu.au/ in a week or so).
I’ve had struggles with IE (6 and 7, others not tested) not replacing the headings, but displaying both the sIFR movie AND the non-flash, normal text.
The problem, it turned out, was that I was bringing in the sIFR stylesheets using an @import statement in a < link >ed stylesheet. FF handled this trickiness fine, but IE choked (surprise, surprise).
Not @importing the sIFR stylesheets but < link > ing them individually, as normal, made IE happy. I couldn’t find any reports of this via Google so hopefully this will help someone.
Mark, as a someone who has attained a higher level of web wizardry, do you know why this happens?
Thank you for the excellent piece of software. Donation coming your way
Hej Ben, I do know that
@importchanges the way the CSS, and also the document, is loaded, but I’m not exactly sure in what manner and how this would affect sIFR. I’ll look into it, that’s for sure!Hi
Im using sifr in this way and it works great. But Im asaking myself, is it possible to do all this stuff in less code lines? And would this help to improve performance, becaue the JS engine is able to replace all needed tags in one run?
Thanks for help Marco
sIFR.activate(Deftone); sIFR.replace(Deftone , {selector: ‘h1’});
sIFR.activate(Swiss );
sIFR.replace(Swiss , {selector: ‘#sifrT h3, #sifrleft h5’,css: { ‘.sIFR-root’: ‘color’: ‘#b6b914’, ‘background-color’:’#ffffff’, ‘font-weight’:’normal’ }}});
sIFR.replace(Swiss , {selector: ‘#sifrright h5’,css: { ‘.sIFR-root’: { ‘color’: ‘#b6b914’, ‘text-align’: ‘right’, ‘background-color’:’#ffffff’, ‘font-weight’:’normal’ }}});
sIFR.activate(Scriptina ); sIFR.replace(Scriptina , {selector: ‘#sifrTfull h3’,css: { ‘.sIFR-root’: { ‘color’: ‘#b6b914’, ‘text-align’: ‘center’, ‘background-color’:’#FFFFFF’, ‘font-weight’:’bold’ } }});
When i look up and down on my screen in OSx i see pink and green colors on the sides of my pixelfont, its like a strange glow. It’s not a problem in Windows.
I used the pixelFont argument, i thought: maybe i have to turn anti-aliasing off.
But it doesnt work.. do you have a solution? Or do you know what it is?
Thanks!
btw: i get 22 errors in Firefox Firebug saying:
“c[b].apply is not a function”
Could be the anti-aliasing, how did you switch it off? Could you make a post about this in the forum with some more detail?
Same thing with those errors, could you make a different post in the forum with more details?
Hi, i have a Problem mit sIFR3.
My font-size changes with the text-length.
Small Texts get larger font-sizes. Long Texts get smaller font-sizes.
please help
if i compile with: Flash6, AS1 the font size is correct.
Next Question: Howto use a RollOver Background Color?
Mukraker, those sound like questions for the forum. Especially if you could accompany the question with some details about the sIFR version used, and a demo website.
ok the background-stuff is now working. it just need some improvents to the .as.
But: How to i get the flash-width fits to the text-length. At the moment its always 100%
Mukraker, let me rephrase. This blog post is not the place for your questions. Try the forum instead.
I see object tabs all over the place with AdblockPlus 0.7.5.4. Apparently they added a “visible” class and CSS rule to override your “hide objtabs” hack. Maybe instead of continuing the arms race, you can reach an agreement with Adblockplus?
Nah, didn’t continue the arms race. And yes, I’ve been in touch, but it all sort of fizzled out on their end.
Like mentioned on comment #22, I receive the “please update the flash movie to version …” message. I tried the latest version, the beta version, emtied cache, restarted server, client….. It is driving me nuts. Finally I removed line 173 in sIFR.as. Allthough I know this is not the way to do it, there was no option left. BTW, without this check everything works just fine.
See, why didn’t you update the Flash movie to the same version as the JavaScript file? You went as far as re-exporting it, but without the version check. Which is there for a reason, of course.
Is there a way to style links? My css rules are being “overruled”, and I get some nasty blue underlined links!
Ref: http://jahallo.dk/kunder/lab/sifr/
Sure, check the demo for an example.
Same as #47 ! New SIFR3 install, Flash CS3 SWF, cache cleared… don’t know what happens
Hi,
Re: post #48, Mark how do you update the Flash movie to the same version as the JavaScript file?
cheers
Re: post above I realised I was creating the swf with version 414 and trying to view it in an older version of sifr.js, 406; hence the problem. Creating and viewing with the same version sorted it.
I don’t think this was obvious from the ‘Please update…’ error message, so posting it in case it helps others with this problem.
Cheers
Hey Mark!
Glad to see the awesome news with rev419! I didn’t even realize Flash 10 beta was out, so double-thanks! I’ve been upgrading with each new revision, jumped from r395, to r413->415. I’m happy to hear of the advancements with cross-browser and improved (ugh) IE6 support…
Keep up the great work!
In your opinion, what steps remain till you decide and drop the “beta” status
—Mike
Hmm, I smell a conspiracy with Mike Davidson here
I’m planning of listing and prioritizing the remaining issues this week.
A little solution to fix sIFR widows for now : http://darkmotion.com/blog/2008/07/21/reuniting-lonesome-sifr-widows/
hi i’m swedish webmaster, i tried your sIFR 3 beta 2 in swedish language and it seems that carachter ÅÄÖ åäö isnt supported. Can u please tell me if the that is wrong?
Pasquale, you need to embed special characters into flash movie. Click emebed button in flash and write them.
Am having a massive problems with the sIFR resizing after the back button is pressed in Firefox (3.0.1) When you visit the site (www.iwantthatwebsite.co.uk) and go to News, away from the page and back using the back button the text goes enormous. This is only happening in certain places and seems random. I have used the latest sIFR version but am still having problems.
Any help would be much appreciated. I can’t paste code but you can see it all in the source.
Thanks in advance!
Harriet
Hi Harriet, try again with the latest nightly release. The beta is somewhat outdated by now
Thanks Mark. Where do I download this – the latest I have is sifr3-r419 from here http://dev.novemberborn.net/sifr3/nightlies/ Am I doing something wrong? Harriet
Hi Mark, awesome job with the latest sIFR––thanks! I’m running into a problem with r419 where none of the fonts I export from Flash CS3 work at all. No error, just empty space. The included rockwell.swf works fine. I’m following the instructions in the documentation and using the .fla file included with r419. Any ideas? Thanks again!
No ActionScript errors either? Are you sure the
.flayou used is in the same directory as the.asfiles?a question about text resizing – is it possible to shift the sifr 3 text resizing functionality into sifr 2?
Hi Dawn, I’m afraid that won’t be possible.
Hi Mark. I did double check that the .fla and .as files are in the same directory and are all from r419. How do I check for ActionScript errors? The fonts I create still won’t work. Here’s an example page, showing Rockwell working but Trajan broken (blank) beneath it. Any thoughts? Thanks again, Mark!
Hi Ian, I think it’s time to take this to the forum.
Will do––thanks, Mark!
Hi, Im having a few problems with adding a link on to an sIFR h2. I have included a background image in the css and it could be interfering with the link style.
If the ‘a’ tag is within the ‘h’ tag, the style works but the link doesn’t. If I have the ‘a’ outside the ‘h’ the links works but no style.
The site is http://www.buddhame.com.au/blog/
Its probably something simple i’m missing, but I though i’d ask here anyway.
Thanks is advance!
Hi Justin, sorry for the late response. This is usually best handled through the forum, but it sounds like you’re getting confused regarding how to replace links. You should replace the parent element of a link, such that the link is inside the Flash movie, it’ll work.
Thanks for the reply Mark. Ill ask any future questions like this in the forum. Keep up the good work!
Am getting 404 for the download (demo) link above at this URL:
http://dev.novemberborn.net/sifr3/svn/distribution/demo
Could you please post a working link?
Editor’s note: Thanks, fixed now!
um.. in the sifr-config.js file, on line 31, there is a missing colon after the src attribute. If you uncomment those lines and modify them to use them, you get a syntax error because of it.
Hi Mark
I have a font which only has a regular weight… I’d like to use another font as the bold weight and another as the italic weight… and have sifr use the extra fonts as a replacement based on and or
I’ve tried embedding the multiple fonts in the .swf but only the regular weight get’s applied when sifr is activated.
Is their a smarter way to do this?
Hi Robsta, if you could post this to Stack Overflow that’d be great.