sIFR 3: Revision 209

From time to time I’ll be posting about what’s going on in the sIFR nightlies. Today is such a time, with a lot of interesting changes! I won’t go into too much detail as it’s all documented on the wiki, so here’s the list:

Support for pixel fonts through the pixelFont argument. See JavaScript Methods: replace.
A way to stop the page jumps by specifying the ratios argument. (More about ratios). See JavaScript Methods: replace.
Support for fixed font sizes and sizes relative to the main size, see font-size in Styling.
Simplification in the API, you can now pre-fetch by passing the movies to activate() instead of prefetch(). See the How to use.
Improved pre-fetch code for Internet Explorer.
Laid groundwork to communicate with the Flash movies. Test it!.

Ain’t that cool? You can find r209 under the nightlies.

A Word About That Pre-Fetching Improvement

There were a few reports about sIFR overwriting the class name on the body element in Internet Explorer, but only on the first load. This has been fixed in this revision, and here’s the background for the bug:

It only happened on initial load because the issue was caused by the pre-fetch code, which only runs once per browser session. Pre-fetching was done by document.write()ing an embed element to the document. As it turns out this forced Internet Explorer to create a body element. (It behaves the same for any other element which should be in the body).

Results of this are breaking the *:first-child+html IE 7 CSS hack and overwriting class names on the body. After sIFR sets the class name IE won’t use the class names from the real body element anymore.

The solution is to write a script tag, which does not have the effect of IE creating the body element. Other software, such as Mint suffers from the same problem. I’ve already reported this to Shaun Inman, but in case you keep seeing the problem even with this revision make sure the Mint JavaScript is loaded after sIFR has been activated.

link | sifr3 javascript | 19 January 2007, 22:09

Comments

Hey, cool stuff. I’ll try the ratio stuff out later.

Branstrom | 19 January 2007, 22:53 | link
It looks great, however, I can’t make it work on my own page.

The replacement works, it seems - because I can change the background color in the sifr-config.js : .sIFR-root{color:#2066b1;background-color:#f3f3f3;}

and indeed, the background color for the tag changes on the page.

But no matter what I do, I can’t get the actual text to become visible, and I believe that I’ve followed the “how-to” to the letter. Is there a forum anywhere where troubleshooting issues can be discussed?

Firefox 2 (win). sIFR 3: Revision 209 Also running on the same page: Mootools ( http://www.mootools.net ) -Hesido’s FleXcroll. ( http://www.hesido.com )

Tom Stone | 20 January 2007, 16:21 | link
Hi Tom, yep, there is a sIFR forum.

Mark Wubben | 20 January 2007, 16:42 | link
Hey Mark,

I haven’t seen anything on this, so I’m quite curious. Is it better to use true-type (TT) or postscript (PS) fonts? And does it matter for what OS? Usually the options are Mac PS, Win PS and Win TT. But servers are typically Linux. I find that quite oxymorinic in a way.

Thanks!

Scott | 21 January 2007, 22:58 | link
Regarding fonts, I actually have no idea. I’d assume Flash encodes them in the same way, so it shouldn’t matter. What do you mean with the operating system?

Mark Wubben | 22 January 2007, 00:24 | link
Hi,

I just installed Firefox 2.0.0.1 with default settings to see if my sIFR 3 page works. It did not unfortunately. So I opened your own demo page but that one also does not work. It shows the normal CSS fonts, not replacing it with the Flash fonts. Why is this?

Sincerely, Sander

Sander | 24 January 2007, 11:10 | link
Are you sure Flash has been installed?

Mark Wubben | 24 January 2007, 11:26 | link
Yes, it works in IE but not Firefox 2.0.0.1. I am using the 3 beta 1 version though.

Sander | 24 January 2007, 11:54 | link
Flash needs to be installed for IE and other browsers separately. Typically after a fresh install of a browser you’ll have to reinstall Flash for that browser.

Mark Wubben | 24 January 2007, 12:01 | link
I could not find this anywhere, so hope you dont mind it asking here: is it possible to have negative leading with sifr 3beta1 so that the text is closer together? Lineheight seems to just make the font larger or smaller.

Sincerely, Sander

Sander | 24 January 2007, 17:46 | link
Yes, see leading under Styling in the wiki.

Mark Wubben | 24 January 2007, 19:13 | link
Hi ! On IE 6, sIFR doesn’t load the movie file when I refresh the page the second time. I used the 209 revision but it didn’t work. Does anyone can help me ? This is on this page : http://www.sabalan.fr

Caro | 28 January 2007, 23:45 | link
Caro, as of right now that page is not using sIFR? Please use the forum for further questions.

Mark Wubben | 31 January 2007, 18:09 | link
There is nothing more frustrating than hitting this webpage with such a fantastic piece of software and then spending minutes to look for a download button. Please put a big huge button in the header saying download it now!

:-)

tak!

Libo Cannici | 16 February 2007, 11:04 | link
Mark

I’ve been an early adopter of sIFR since 1.0a days. Thus far I’ve managed to get 3B1 working fine on my site with Google Translation handling my font perfectly in other languages.

Unfortunately, from 209 onwards, I can no longer get it to play well with other things. Did the Flash file change or something ?

Lawrence Meckan / Absalom Media | 18 February 2007, 05:56 | link
Yes there’ve been changes in the Flash file. In general it’s a good idea to re-export your Flash movies when you update to a new revision. I’d like to be able to automatically generate a file which tells you when you need to re-export, but that’s not trivial.

Mark Wubben | 18 February 2007, 10:39 | link
I’m getting some weird stuff going on in IE 7 and IE 6 with the latest update on this page: http://www.omnistudiodev.com/IAAPA

The page will display and then when it goes to add the flash headlines, the entire page disappears.

Have you seen this?

Jeph | 20 February 2007, 20:08 | link
Hey Jeph, thanks for finding this. You specified the defer attribute for the sifr-replace.js file (if you’re following from the introduction article, that’s sifr-config.js). This together with the default (and proper) behaviour of sIFR causes IE to display only a blank page. Removing defer fixes the issue, and is the right way of loading sIFR code anyway.

Again, thanks. I can always appreciate IE oddities such as these :)

Mark Wubben | 20 February 2007, 20:57 | link
Thanks for the info Mark. I don’t know how I missed that in the introduction tutorial (probably because I didn’t actually know there was a defer attribute in js - so I didn’t think twice when I copied it from the demo to my working copy.

Thanks again!

Jeph | 20 February 2007, 21:32 | link
Not sure if you are referring to the warning which is now in the tutorial, but if you are: don’t worry. I added it after you reported the issue, I didn’t know about it either.

Mark Wubben | 20 February 2007, 22:37 | link
Where on earth is the download button?

Luke Hardiman | 20 April 2007, 10:41 | link
Luke, there is no download button per se, but it’s mentioned:

You can find r209 under the nightlies.

Mark Wubben | 20 April 2007, 14:43 | link
I have a little problem with refreshing here. On a page which uses sifr, I have to reload the page with F5 to see differences made to text on that page.

Or, for example, when i add some reactions to my page, I have to hit F5 to see changes the next time I enter the page. Did I implent it wrong? ( using sIFR 2.0.2)

Berrie | 24 May 2007, 11:31 | link
I fail to see how that would be related to sIFR, does the problem go away when you disable sIFR? Are you adding the reactions using “AJAX”? Anyhow, let’s route this through the forum.

Mark Wubben | 24 May 2007, 14:50 | link