sIFR 2.0 RC 3 is Here… Come Get Some
UPDATE: Version 2.0 is now available. See article here.
Alright, I know I said Release Candidate 2 might be the final release of sIFR 2.0, but hey, Mark and I found some more things to improve on… so we did. Today’s release of sIFR 2.0 RC3 introduces the following new features/fixes/improvements:
- The javascript file has been reduced down to 8.8k.
- Replacement calls now use named arguments so you don’t need to specify parameters in any particular order. The function is backwards-compatible, however, so existing installs will remain functional.
- Newline support (
<br>and<br />) now works perfectly. - Now compatible with Opera 7 and above.
- New support for a “fallback” transparency color for browsers which don’t support transparency. This eliminates the green background displayed in some older browsers when specifying transparency.
- A shiny new sIFR logo!
Since all changes from RC2 to RC3 are contained within the “sifr.js” file, you need only replace your existing “sifr.js” file to complete the upgrade. No .html or .swf work is necessary. You may, however, decide to change your replacement calls to the new named argument syntax if you wish. This is not necessary, but you may find it preferable.
Note: if you are using a version earlier than RC2, please re-export your swfs as well.
Here are links to the new files and updated example page:
Incidentally, it looks like Metafilter has picked up on sIFR today and is sending over a ton of traffic to the original sIFR article. Thanks guys!
Reading the Metafilter comment thread is a bit humorous, however. It never ceases to amaze me how some people will see the word “Flash” and cry about imaginary accessibility issues, imaginary proprietary file format issues, and other imaginary “sky is falling” issues. Look at the code people. Study it. Analyze it. Understand it before you jump to conclusions. And above all else, understand that the entire web as we know it is a hack. I’d respond on the Metafilter thread myself but I don’t feel like paying $5 to join.
I meant to ask Mark this, but how did you manage to cut down on the file size so drastically?
Looking forward to trying it out…
Right… just downloaded it and worked it out.
And there I was thinking you’d pulled off a masterstroke! :)
D’OH! I only just got around to updating to RC2 this very afternoon :)
Hot Damn. It just keeps getting better.
I’ll wait for the final before it creeps to my website. I love keepin’ up with the updates.
I’m getting the dreaded green background on any replacement with “transparent” specified for the bgcolor… worked fine with RC1 (haven’t tried RC2, sorry). Firefox 1.0 and IE6 on Windows XP…
I had to revert back to RC1 for the time being…
(Editor’s Note: Transparency has changed slightly from RC1 to RC3… read the readme.txt file for details… it’s basically another parameter to the function now)
Ah… transparency is done thru the swmode variable… that’s what i get for posting before reading the readme.txt… my bad!
sIFR is the most incredible stuff i’ve seen on the web this whole year. It’s a revolutionary step in the way to the future.
Thank you guys for the beautiful work!!
Greetings from Brazil.
Because I like to have my site designs very flexible and with the ability to change everything by loading a new stylesheet, is there an easy way to define the textcolor, backgroundcolor of sifr, normally defined in the replacement calls in a css file, or to define them differently each time a different stylesheet is loaded? (other than writing some bloated php or js workaround. Keeo up the good work!
Florian – we’ve had to do that on the server side, using some .net code to write the javascript replacement calls at the end of the page (though much the same thing could be sone with PHP, or no doubt ECMAScript).
Perhaps version 2.1 will add the ability to alter the colours in the CSS? Pretty please? :-)
Reading the Metafilter comment thread is a bit humorous, however.
Y’know, I haven’t logged in to MeFi in nearly two years, but the idea sprung up in my head the other night to do it, though I haven’t commented or posted or anything. I’m once again reminded why I dropped out.
But as to the announcement: Yay!
Lovely, if only for the filesize improvement!
I have one beef with it, but I’m not sure whether it’s doable.
I remember that from RC1 to RC2, you magically managed to fix a problem with sIFR links, and scrolling in Firefox — links would require a “double” click to work.
However, it seems that with RC2, and now also this RC3 the same bug appears when the window mode parameter is sat to opaque (wmode=”opaque”). Remove the parameter and everything works again.
It’s a small thing, and I’m not sure if it’s fixable. But in the case that it’s just a few lines of code, here’s my vote.
The (strangely) intermittent problem of sIFR Flash-content not being displayed in IE seems to have been resolved with RC3. I simply dropped in the new .js file and voila! It appeared on refresh. Great filesize reduction too!
Andrew, basically I replaced all internal variable names with one or two letters, and I removed all extra whitespace and comments. Of course this means reading the JavaScript has become virtually impossible to do, but the original source should be included.
Florian, unfortunately this isn’t possible. Browsers such as Safari and also somewhat older Opera browsers have no way of reading the color form a stylesheet. Perhaps we can add that in a few years time ;-)
Olly and Florian, the new named arguments syntax makes it somewhat easier to do this on the client side. I wrote an article about this, but unfortunately Mike forgot to link to it. So… here’s the link to Named Arguments.
Joen, the problem in Firefox is caused by setting a window mode, be it opaque or transparent. Therefore we removed it by default, but sometimes it’s necessary.
Ben, good… though it doesn’t make much sense ;-)
Btw, I also wrote an article about where to put your replacement code.
This is really great. One thing that bothers me, however, is that I have a <h1> tag that holds my header image. The h1 has ID ‘header’ which has a width of 850, height of 116, the background-image is the header, and font-size is to 0. This was all working properly but when I implemented sIFR into the website, that part just disappears and you can see right through it. I did delete all the stuff that referenced to h1 in the sIFR stylesheet but that didn’t help. Not sure why it would touch ALL heading tags. Anyone know?
Other than that, great stuff Mike. =)
Rick, I assume you are replacing the h1 element using JavaScript…?
Well, not on purpose. I deleted all the default .replaceElements except for the h2 one but it still does something with the rest of the heading tags and makes them not visible. I guess I’ll keep looking to see if I can figure it out.
cheekygeek, I hope they will contact me or Mike about that… in any case MetaFilter is not the offical bugreporting place ;-)
It looks like it works pretty well so far, except there is an ugly teal/blue background color (readme.txt says white is default for sBgColor). When I do something like sBgColor = ‘#ffffff’ the background doesn’t change. Does anyone else have this problem? This is only my first time attempting to use sIFR and I haven’t tried messing with the other vaules yet.
The readme is missing a lot of content (i.e. syntax examples that someone forgot to put in later), but other than this sIFR seems neat.
Zach, got a link for us so we can have a look?
That logo is heinous, but it’s nice to see this project continuing to mature.
(Editor’s Note: Hey, cmon! I had five minutes to kill!)
I have found that if you try and use wmode opaque withought setting a bgcolor than it will show that teal color.
You may even try compressing it further with Dean Edward’s Packer:
Packer
I put the code in there and got it down another 2 kb…
Sorry, I don’t have a link available since my firewall is all locked up at this time, but I think I discovered something.
The readme.txt says that as of RC3, you can use “named arguements” in the sIFR.replaceElement() function. While this does in fact work, I found that I had to include all the arguements before sBgColor in order for my sBgColor value to work properly. If I try to put it first, I get the nasty teal/blue background.
What I am using now:
sIFR.replaceElement( sSelector = ‘#content h2’ , sFlashSrc = ‘assets/swf/monotypeCorsiva.swf’ , sColor = ‘#735524’, sLinkColor = ‘#000000’ , sHoverColor = ‘#00CC00’ , sBgColor = ‘#F2E8D8’ );
If I move around the name-value pairs, it doesn’t work. This leads me to believe that the order still does matter in RC3.
Anyway, I am still playing with it and its interesting.
Jeez I just downloaded RC2 and hadn’t had much time to play with it yet and here comes RC3!
The one problem I had intially with RC2 is that it messed up my floated image. I had an to replace with an image floating to the right of the and
text floating around the image. When I applied sIFR everything dropped below the floated image. What am I doing wrong?
To be honest, I really haven’t had the time to do the tuning yet, so is that a problem or is this a bug of some sort? I’d really like to use this concept, but the site will use a lot of images as described above. Any help is greatly appreciated.
Arrg! My words dropped out! What i said was I had an h2 to replace with an image that floated right along with text and sIFR made everything drop below the image. I sthis my problem (haven’t tuned the font yet) or something else?
The only thing I’d like to see is a way to copy and paste the text. That’s the only part about sIFR that really bugs me. I’m not sure how that could possibly be accomplished, but it’s still annoying nonetheless.
(Editor’s Note: Umm, you can.)
Great work guys. I love this stuff!
But…
I’m using a lot of transparency and RC3 has created a problem with Safari 1.0(v85). The new sWmode method has broken transparency in this version of Safari (I don’t have any others to hand to test it on) so I am getting all of my text on a solid white background.
I haven’t used named arguments, so what I currently have is:
sIFR.replaceElement(“h1”, “font.swf”, “#4BC0E3”, null, null, null, 0, 0, 0, 0, null, null, “transparent”);
Any ideas? Is it just due to the earlier version of Safari, or have I missed something obvious? Every other browser seems to be fine with it.
Keep up the sterling work, and thank you.
Zach: The correct syntax for the named argument method is contained in the readme.txt file. That should solve the “order of parameters” problem.
Wayne: Try setting the element you’re replacing to “display: inline”. When you’re replacing a floated element, you should always use inline.
Graeme: Transparency support in Safari 1.0 is unreliable at best. I think it works better under Panther but not at all under Jaguar… so we disabled it. More recent versions of Safari should display transparency just fine though.
Mike, I’m really sorry, but I am going to have disagree with you. I have been using transparency with Jaguar and Safari in both sIFR and standalone .swf with no problems.
Just to be sure, I have done some more testing this morning of wMode=”transparent” with flash movies on background images and overlayed several transparent sIFR headings on top of each other in RC2 – again on background images, all completely successfully.
Can transparency please be re-enabled for Safari in Jaguar. I have been using it quite intensively recently and can without doubt put a big cross in the ‘It works in Jaguar/Safari 1.0’ column.
I feel awful for asking after all the work you have put in. But, please. Pretty please… It’s going to make the difference between using sIFR or not.
Either way, have a good New Year all.
I’ve only discovered sIFR today, and am very impressed. I am experiencing difficulties with Cyrillic text, though. I’ve included the Cyrillic range when embedding the font, so Cyrillic characters do display, but the kering is entirely messed up, characters overlap etc. The same thing does not happen with the Latin range — using the same Adobe OpenType fonts such as MyriadPro or MinionPro.
Does anybody have any experience with sIFR and Cyrillic? Changing the letter-spacing in the CSS does not seem to do the trick with Cyrillic characters. Weird.
Alexis, very interesting. I’ll try that and see what I can do.
Nathan, I’m not really in favor of such packers, especially because the use eval, a JavaScript method which I consider to be evil. (But of course that’s my opinion.)
Wayne, as Mike said, play a bit with the CSS settings for the .sIFR-Flash elements.
graeme, could you send me the version of WebKit your Safari is using? We could enable transparency for that version then. We are currently supporting transparency for WebKit 124 (1.24?).
Is anybody else here having trouble getting links to work with this version of sifr? When I hover over a replaced header that is supposed to be a link, the text changes color, and the cursor turns into the hand/finger pointer as it normally does when hovering over a link… but clicking on the link does nothing. Single click, double click, triple click… nothing.
Reverting to RC2, i can see that it wasn’t working there either… backing up to RC1, and the sifr links work fine. Am I doing something wrong here? I’ve tried removing the wmode variable completely and still no cigar…
Again, this is on both Firefox 1.0 and IE6 on WinXP (SP1, if it makes a difference, which i doubt).
Also, i’m with graeme on the Safari v85 transparency issue… transparency was certainly working for me on v85 (albeit, clicking around the screen introduced some weird font-smoothing effects, but it worked). I’m a little surprised to see it removed, to say the least. I’m for putting it back in, but hey, ultimately its your guys’ call…
The biggest problem with transparencies and Safari is that rather odd pixelation of the flash font when using layer rollovers. I can only assume that this is related to the same documented problem of layers dissapearing when rolled over flash with wmode=transparent. I think Todd Dominey ran into this when designing the PGA championship site. http://www.pga.com/pgachampionship/2005/
Brian I am not having any trouble with links inside header tags in RC3. In fact they seem to be working much more reliably now for me when dealing with longer urls and urls with variables and &s (or & to be correct) in them. Without a link I can only assume that you may be doing an a href=link.html instead of href=”link.html”
Mark, according to Apple System Profiler I’m just using WebKit 1.0 on OS 10.2.6. Safari is 1.0 (v85) – I think that was the very first release. Transparency is fine.
I’ve done some more investigation and I don’t think it is Safari that is the culprit. It’s the version of the Flash plugin installed.
I visited a friend and tried my tests out on her machine with WebKit 1.0.3 on OS 10.2.8, Safari 1.0.3 (v85.8.1). Transparency did not work. When I checked I spotted that she had the Flash 6 player installed and I had Flash 7. Just upgrading the player to 7 rectified the problem.
Apologies for not having all of the facts when I first wrote, but I do now believe that it is a plugin version issue rather than a browser one.
Hope this helps.
Great work as usual!
This comment from Metafilter is hi-larious:
“I don’t think web designers should get to use any font they damn well please.I surf the net for content, i.e., words and pictures. The fonts they come in shouldn’t affect the content – in fact, they should pretty much be dictated on the client-side. But I’m not an artist.”
Brian, due to the necessary Flash implementation for hover colors this works somewhat different from links without hover colors… this is a Flash problem, however. Also be aware that setting a window mode results in problems in Firefox (this is a Gecko bug).
graeme, thanks for the information. I’ll discuss it with Mike.
geoff, thanks :)
And now I have a new year to celebrate, please excuse me :) And all the best for 2005!
An issue that has been on the table since RC1: detailed instructions for the generation of .swf files from sifr.fla – directed at novice users.
Just wondering if we can expect more detailed instructions with the just released RC3. Tutorial with screenshots would be ideal. Any takers? How long could it take?
Thanks in advance. Keep up the good work.
Uli
is it just my download, or is the .js file missing all the line breaks making it insanely impossible to read?
Philip: sifr.js has been compressed and that’s why it’s impossible to read. There is another folder in the .zip file that contains the uncompressed source. Try that one.
Uli: Here’s how to export your .swf:
I’m noticing something weird in opera when I’m using an overflow div and replaceing the text. IE/Firefox correctly handle the overflow fine once the text is replaced.. but Opera decides to ignore the overflow rule and blasts all the text on the page. If I take off the replacement, the flow follows the correct rules.
http://www.xigaware.com/ – with replacement
http://www.xigaware.com/noflow.html – without it..
I don’t care much about opera, but I thought i’d post incase this is a bug.
One other thing .. is it possible to have 2 replacements side by side?
example Here is what we are talking about A & B would be replaced with different font .swf’s but remain along the same vertical path. This may be a limitaion of flash itself, but I thought I’d ask anyway.
Alexis,
Oh how i wish the problem were that simple :) I assure you I know how to write proper html… here’s a test page:
http://www.actsaustin.org/sifr_testcase.shtml
The link header in the content (“This is a test link…”) should anchor to the homepage. Clicking on it doesn’t seem to be working tho… I’ll plug away some more…
I second what Brian says, lol I just tried my contact us link in Firefox and it didn’t do anything either.. IE/Opera works fine.
Ok. Think maybe I’ve figured it out (at least somewhat). Re-exporting the swf file seemed to do the trick. I was previously using the old swf I exported for the rc1 version.
Anyway, it’s time to call it a day (and a year) – Happy New Years to all! To Mike, Mark, Shaun, Tomas, and co… kudos for the great work as always!
Brian, I downloaded your page and tested it with my own sifr.swf and the link seemed to work with no problem.
Glad you were able to fix that with a re-export (I wish I could type faster). I can only assume the same thing happened to Shaun as everything seems to be working fine on my versions of IE PC 5, 5.5, 6.0, IE Mac, Firefox PC/Mac, and Safari.
This version is better than ever, so thanks for that! Just one problem though, again – I can’t get sIFR to display Romanian characters!
Toma Tasovac mentioned that the Cyrillic character set was embedded along with the font. How do you do this? In the actual ‘Character…’ dialog box or in ActionScript.
I tried putting this code in ActionScript to no avail:
txtF = “\u0102\u0103\u015F\u015E\u0162\u0163”;
I also embedded the characters “ăĂţŢŞş” as part of the Font Outlines.
What am I doing wrong here? I’d higly appreciate any help because this is my only issue with sIFR – other than that it’s really great!
Bogdan,
you can chose the range of characters which you want to be embedded by clicking on the Character button in the Properties palette when customizing your sifr.fla file. For Romanian, you would then choose the appropriate Latin Extended range… Then you File>Export the movie and make sure that you’re using the name of your swf file in the replacement calls at the end of your html file. That’s all.
Shaun, I would call this an Opera bug. As for placing the Flash movies next to each other… try CSS.
Regarding the link problems, we changed the way links are passed to the Flash in RC2. This change also happened in the Flash files. Therefore, if you update from RC1 to RC3 without updating the Flash files it won’t work. Appologies for the confusion.
nice update once again, all we´re missing now is a built in tooltip function for links :)
wow… that’s the best resource that I’ve discover since I’m developing for internet… thanks a lot!!
So I know that it is not possible to adjust the leading of dynamic text in Flash, but does anyone know if this is something that will be added in Flash 8?
Also, has anyone found a workaround for increasing the leading with sIFR?
Toma, thanks a lot for your answer. I will try out what you said now and hope it will work. Again, thanks! Spasibo!
ok, I got the position working a little bit with css.. so that’s a good suggestion :)
Since there is no real further documentation I apologize if this is a basic question. But are there rules for control the size of the displayed text? If you click on my name you’ll see a different site.
The Harry potter text remains the same size whether I have the css as: font-size: 16px; or as font-size: 66px; Is this being adjusted in your sIfr files for the – attributes? or am I missing something to scale my font.
As no one else with true knowledge seems to have addressed Shaun G’s question yet:
I would suggest checking your CSS thoroughly to ensure you are not overiding your font sizes anywhere else in the cascade. Or in a user style sheet in the browser?
Checking everything again is nearly always the best solution when it comes to fixing sIFR problems!
Shaun, you could also play a bit with the line-height and height settings.
yeah I edited the font-size’s in the sIFR-screen.css for the h* styles and things changed correctly :) .. thanks for the help guys. Great Job on the sIFR!
Hey Mike et al.
I just upgraded from rc1 to rc3 and things work great on Mac Camino and Safari, as well as PC FireFox.
However, it does not seem to work great on IE 5.2 on Mac and IE 5.5 on PC.
on PC:
it shrinks the spot for flash down to about half the height as the text was and does not display the actual the Flash file.
on MAC:
it displays the flash text at the correct size, HOWEVER it also adds a variety of padding sizes to the bottom of the flash file.
Any ideas anyone?
Thanks
Update with a testing URL for you guys to look at to see the problem I am having.
http://www.mackie.com/products/tt24_newest/
Thanks for any help. I actually upgraded from sIFR 1 not sIFR2 rc1 >
—
Todd
Todd: Ah, that makes me feel a lot better. There have been a ton of changes between 1b and 2rc3, but not between 2rc1 and 2rc3. I suggest just re-exporting everything and re-implementing. While 2.0rc3 has undergone months of refinements and improvements, 1.0b was just a proof-of-concept.
Todd: I’m getting the same in IE5/Mac.
Lots of extra bottom padding on some replaced elements, but not all.
For me, specifying a larger font size fixes the problem, but I have no idea why this is. Probably a question for Mark.
Will continue experimenting and keep you posted.
I re-exported and cleaned up my code…and it appears as though it is all good on IE/PC but NOT IE/MAC.
Still looking into it.
mark/mike, any thoughts?
Thanks Andrew for making me feel like I am not insane >
(Editor’s Note: Yes. My thoughts are that IE/Mac sucks. :) Besides that, the best way to go about debugging size issues is to turn background colors on, just as you would in CSS/HTML. That way, you can see exactly what’s being replaced and what size it is.)
Great product, Mike and crew. Thx for your hard work.
I’m experiencing some discrepancies between IE6 SP2 and Firefox/NN7.2 in the way it’s displaying the generated flash headers. I’m only replacing one class — h3.storytitle — and it’s at a 24px font size. It’ll display fine in IE6, but in FF/NN it shows all of the titles in a range of fonts from what looks like 14px all the way up to 24px. I have the latest versions of all browsers and the Flash plugin. My padding in the style matches the padding set in the javascript call. Any idea why? Check the site at
http://www.paulmoment.com
Gracias.
Paul: Nice looking site you got there. Ok, here’s the problem. Look at this page as an example. In your sIFR headline, “Facelift for the site, Botox for the titles”, take note where the final “s” is compared to the word “drones” in the grey box below.
Now, disable javascript and take note of where the final “s” is. It’s way further to the right. This is where font tuning comes in. You need to get these locations as close to each other as possible using a decoy style. On your site, the decoy style is:
.sIFR-hasFlash h3.storytitle {
visibility:hidden;
}
So all you need to do is apply some negative letter-spacing in there and you’re golden. Something like “letter-spacing: -.7px” or whatever. When you’re trying to match it up, you might want to make your initial reads on the actual “h3.storytitle” class instead since that’s the class you see when you turn js off. Once you have that all tuned, just move the negative letter-spacing over to your decoy style (above).
Also, if you can’t match things perfectly, err on the side of your decoy text being a little narrower than your Flash text.
Thanks, Mike. I took your advice and Mark Wubben’s advice to play with the line-height settings as well, and I came up with the perfect combo. Took me a bit to wrap my head around the concept of why the Flash was sized so strangely, but I’m all pulled together now that I figured out it’s about sizing the h3 “container” to have the Flash scale well.
Great tool and gentlemanly assistance — you really are from Seattle… :)
Todd, Andrew, I agree with Mike here that IE/Mac is one hell of a buggy browser. Play a bit with the CSS… that’s all the advice I can give you.
P.S. Mike, the notification is working now! Reading the discussion here is much easier though ;-)
hi guys, thanks for the advice.
Agreed Mark/Mike IE5/Mac sucks. The weird part is that it works with the old version of sifr… version 1.
http://www.mackie.com/products/tt24/index.html
Where the new version works great on everything except IE5/Mac.
At this point it looks like it may be a CSS issue, but the extra space ONLY shows up after the replacement.
link to the new sifr2 RC3 version.
http://www.mackie.com/products/tt24_newest/
Thanks
Is this legal? I’m just wondering about the font copyrights. Since you’re not legally allowed to redistribute ttf’s are you allowed to distribute equivalents? Even if you purchased the fonts from Adobe (or whomever) wouldn’t you still be violating the font license?
(Editor’s Note: When you deploy sIFR, you should use the domain-locking feature so that the .swf file only works on your site. By doing this, you are not distributing a file that anyone can use for anything. In this scenario, it isn’t much different than saving a headline out as a .gif and displaying it, in my opinion. That said, there hasn’t been any sort of response, positive or negative, from type foundries about sIFR. This is good. One other great thing about sIFR is that it lifts out so easily that were there to be a problem, you could eliminate sIFR on your site in about 10 seconds.)
Hi Mike.
Thanks for the advances with this technology. It is really cool!
I have a couple of questions/comments.
1. Other languages, Unicode (UTF-8) Support. It appears that flash movies produced do not allow other languages (even if the Unicode font is selected and Unicode encoding is used).
2. floats are not very well behaved. Example: “main” content div is not float and is flexi and the side bar is floating to the right/left and with fixed width. Then replaceable text (flash object)’s width is set to the width of the whole div, ignoring float. I know there is little to do as I believe that’s what JavaScript gives you. Just noting it here. It is normally possible to fix it by changing CSS layout.
I am not sure I have read all previous comments and similar comments may have already been published.
Anton, if I recall correctly Flash MX doesn’t export the Flash file with UTF-8 very well. Not sure anymore, though, I’ll let Mike confirm that one :)
About your float problems, without being able to look at the page which is causing these problems I can only say that you should play around with the decoy styles so you can fix the width.
Hi
Thanks for the reply.
I have found the following. May be of interest to you guys:
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/unicode_in_flmx03.html
Regards
Anton Koukine
Hi
Thanks for the reply re Unicode. I have found the following links which may be of interest to you guys:
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/unicode_in_flmx03.html
Regards
Anton Koukine
I’m running Windows XP and having trouble getting transparency to work in Opera 7.54. Is this a known issue?
Adam, Opera 7.54 does not support transparency, therefore sIFR falls back to the background color you specify (which obviously shouldn’t be transparent).
Thanks Mark.
The js can be cut down with another 1 or 2K, improving the performance as well (although that will only be milliseconds); I’ll give it a run-down when you’re interested :)
Does it make any sense that execution would seem a bit slower if named arguments are used? It’s most noticeable on Opera, which has the slowest JavaScript interpreter I’ve ever seen.
Adam, the effect of named arguments is neglectable. However, Opera is very slow rendering the Flash, it already was so in the earlier betas.
Thanks again, Mark. :-)
One of the coolest things I have seen except for one small problem.
The background is green when sWmode is set to transparent in MacIE 5 in classic with the latest Flash plugin installed. I used sIFR RC3 which is the latest version. All other browsers work great though. Unfortunately IE 5.1.7 is the last decent browser for Mac OS 9 and many people still uses it. :-(
//Rob
Rob, thanks. I’ll fix it.
Rob: I may get flamed for saying this, but I’ve chosen to regard people using IE on Mac OS (even on OS 9) the same way I regard people using Navigator 4.x or IE $800 eMac is an inexpensive option for this), I’d suggest Yellow Dog Linux and the Gnome environment. Gnome has become increasingly Mac-like, and Yellow Dog can run Classic Mac OS in a compatibility environment. Yellow Dog is compatible with PowerPC G3 or better systems, and comes with a recent version of Mozilla.
Hope this helps.
Thank you for this wonderful product!
I think I’ve discovered a strange but very annoying bug however.
Take a look at the example page with “/index.html#” added.
Notice the browser window title: “sIFR######”, seems to be 1x# per font instance.
I’ve just tried to upgrade to RC3 but still the same – I am using IE6.0, have not had time to test on Opera or FireFox.
Anyone seen this before?
Has someone successfully exported from Flash MX Pro? If you have, what EXACTLY are the export settings? I cannot get transparency or a correct font size to work in either IE 6 or FF 1.0
Update on #85: FireFox does not seem to have this problem.
FYI,
When I used @import instead of link rel to call my css, sIFR would not work in IE5/WIN.
When I put the replacement calls at the bottom of the sifr.js file instead of in the html, sIFR would not work in Netscape 7/WIN.
In both cases the headings I was replacing became hidden, but the flash file was not inserted.
Has anybody else seen this behavior? Is there a way to put the replacement calls in the .js file and still coax NS into executing them? I prefer that so I don’t have to have the code in every html on my site. I’m really squeezing for bytes.
Muleskinner, believe it or not but this is a bug in IE! I once reported it to the IEBlog team, but I think I’d better resubmit the bug again.
Kris, this is a bug in IE5 I think. As found on Bug Report IE5.x treats imported print stylesheets as screen stylesheets, thus hiding sIFR. As for the other problem, I have no idea. Perhaps you could show us a testcase?
Hey there guys, great work. Again!
One thing; uppercase doesn’t work on accented characters…
Don’t know if it’s a problem with Flash itself…
It’s not a problem with Flash, I’m partially answering my question while posting it! ;-)
The upper or lower function is in the js. The upper works on a windows pc but not on my Mac (Safari).
Wait a minute, it works in FireFox on Mac…
Ok, here’s a partial answer to the problem:
-Safari has a problem with toUpperCase in JavaScript when it has to deal with accented characters (eg: éà î)
-FireFox does it fine on any platform
-IE is ok on Windows and Mac
Can anybody test Opera?
Here’s the URL : http://dap.egzakt.com/fr/marches/. If you see MARCHÉS in the orange header, everything’s fine. If not, you will see MARCHS.
Thanks!
Anybody have suggestions for another way that would work with Safari to uppercase characters?
ElRocco, it’s a problem with the browser… as you’ve seen some browsers don’t uppercase reliably. Nothing we can do about it.
ElRocco: The accented character appears in opera, but you have a bright green background behind your text.
I suggest using the background color capabilities of sIFR and setting a color as close as possible to your background image. I did this by taking the color of a 10×10 sample of by background image. Fortunately my background was subtle enough that you can hardly tell the difference. You may have to change the pattern in your background image to make this work for you.
ElRocco, you’re still using RC2 on that page… please update to RC3 and enjoy the benefits of better transparency support through or fallback mechanism!
This is great work!
One small observation though; if you disable style sheets (I did so using the developers toolbar in Firefox) the flash replacement text is displayed as well as the original html text.
Is there anyway this can be prevented?
Jay, no. And aside from us webdevelopers, who will ever disable CSS?
Well, I think Opera has a disable style sheet option amongst it’s various style sheet preferences. It’s fair to assume that users with a lower level of colour perception may turn off style sheets given the chance; and who’s to say that other browsers won’t follow suit by offering this option in the future?
A very small minority, but surly the essense of web accesibility is providing the same content to those specific minorities.
That said, we’re only talking about a repeated headline here, this is by no means a show stopper nor a crime against accessibility… but a small trade off for a great development in web typography. Commendable work! I’m sure continued discussion and testing will improve it even further in future versions.
Jay, well, even if we wanted to, we can’t detect wether CSS is enabled or not. And in your specific case, detection wouldn’t have helped at all as you (probably) disabled CSS ater loading the page.
Does anyone know if it is possible to set the sIFR text field to align = justify?
About the netscape thing,
Copy the replace calls from the end of index.html, and paste them into the end of sifr.js (sans the containing script element).
It will work in IE5/WIN, IE6/WIN, Firefox WIN, Safari, and even IE5.2 MAC, but not in Netscape 7.1 WIN. I didn’t test opera.
I went ahead and uploaded a test case at http://www.kr15.com/sifr/
Kris, thanks, I’ll have a look.
Jay, I believe the only way to do this is to hack the Flash file to control kerning. Mike told me it was impossible to control this via the JavaScript calls.
I am pulling my hair out trying to get sIFR to work at all. I believe I have followed the instructions to the letter but to no avail.
Quite simply the dynamic text in my SWF file is not changing, I get the “Do not remove this text.” line, in both Firefox and IE under Windows.
I don’t believe it is an error in the HTML, as if I use the tradegothic.swf that comes in the bundle, it works fine. I haven’t change anything in the .as and .fla files, etc. I am testing in a folder with all the supplied files so nothing should be missing.
Basically, this works:
sIFR.replaceElement(“h1”, “tradegothic.swf”, “#000000”, null, null, null, 0, 0, 0, 0);
This doesn’t:
sIFR.replaceElement(“h1”, “test.swf”, “#000000”, null, null, null, 0, 0, 0, 0);
Where test.swf is generated by strictly following the readme.txt file.
Any pointers how to even begin to debug this problem?
Kim: Hmm, sounds like it’s definitely a problem with the exporting of the .swfs. If you double-click a .swf after you’ve exported it, you shouldn’t see the “Do not remove this text” line. You should see “Please pass in your text” in the correct font you have chosen.
Are you using Flash MX or Flash MX 2004 to export? I’ve heard of some problems with Flash MX mangling some of the .as files… particularly, it can mangle the opening commented out text in the .as files. Try this: when you export, do “Test Movie” (from Flash) instead of “Export” and see if an error window pops up.
I am trying to use sIFR on my site for titling as well as the navigation. The titling worked great, but I’m having trouble with the unordered list I’m using for the navigation. It appears when sIFR is applied to an <a> element it becomes unclickable. I tried applying it to the <li> element but my nav has two levels thereby (nested lists). I’ve tried adding .navitem and .subnavitem classes to the <a> tags, but that just caused the text to not show up at all.
Has anyone else tried using sIFR in this way?
Brian, sIFR replaces the text inside the elements you apply it to, therefore it only replaces the link text, not the link itself. Wrap the link in a span and replace that instead.
I’m having an issue where the “lazy scaling” is detecting the height of my h* elements and setting the font size accordingly. The only problem is that my h* elements have a background image that is 32 pixels high whereas the font is supposed to appear as 15px.
Am I missing something here? Is there a way to specify the font size without it reverting to the height of the element?
David, if you wrap the text in a span you can replace that one. Then, if you use sWmode:”transparent” you’ll still see the background through the text. Note, however, that this isn’t supported in Safari with Flash 6, old Mozilla/Netscape browsers and Opera 7.5 and below, nor on Linux.
Mark:
I attempted to do what you suggested, but perhaps I am doing it wrong. Please take a look at the following test page to note my results.
Please note in the source code that the text to be replaced is enclosed in span tags. I then added the following line to the sifr.js file:
sIFR.replaceElement(“h2 span”, “swiss721cnbt.swf”, named({sColor : “#000”, sCase : “upper”, sWmode : “transparent”}));
As you can see, the text isn’t showing up. Perhaps you can spot my error?
Thanks.
David, at first sight there are some CSS rules which affect each other, namely the rules for styling the span and the rules for the span created by sIFR.
First of all – many thanks for this really smart replacement technology and for sharing your knowledge with the rest of the world.. :)
I also have a little question concerning the usage of sIFR:
Is it possible to ‘undo’ and/or ‘redo’ the replacement without a reload of the page itself? For example when using a style-switcher (clientside only with JavaScript), there could be the case that you want to offer a simple style with high contrast for low-vision people and without sfir – or with another replacement definition.
As another possible usage, i could think of a clientside JavaScript fontsizer..
What do you think about?
Mark, my thoughts have already been going in that direction. Don’t worry :)
I see that others have gotten the “unexpected file format”. I’m new to flash and I have Flash MX 2004. I’m using sIFR RC3. What is the solution to this?
Thanks,
RDM
But don’t let that stop you using the transparency feature. You can use mod_rewrite to deliver alternative content to platforms that don’t support transparency.
I did this when I recently deployed sIFR on my weblog. I’ve explained the procedure for anyone who’s interested.
Is there a way to give the first-letter in sIFR another color, which stay this color in the hover state, too?
I tested in flash. but I dont found a way which works.
Can anyone help me?
Jonathan, nice. In your case the fallback mechanism won’t help, so this is a somewhat better solution. You might want to tweak the rewrite rule a bit more, though. Also it might be an idea to use an image for the logo. You could have used it on more platforms then…
Daniel, perhaps it’s possible by hacking the Flash file. That’s the best I can give you.
I’m trying this out, and everything works except if I have a short headline, the font appears smaller than the same h1 with longer text – what am I doing wrong?
To clarify – I mean the replacement text (from flash) varies in font size depending on the number of characters in the heading.
Mat, play a bit with the line-height and height properties.
Mike, there is an issue with input and/or label tags on Firefox.
It’s very strange. I have uploaded 2 pages to better explain. It’s from a site I’m creating for my university:
‘Fixed’ page
The bug
Look at the code. The only difference between them is the order of appearance of the fieldset id#webmail.
I’ve only tested on Firefox 1.0 – Windows, IE 6.0 and Opera 7.51, but this last two are okay.
Has anyone came across with this? I don’t know how to solve it yet. :(
Sérgio, I’m not really sure what the problem is here? Really sweet design, by the way.
i’ve found bug with TABLEs
when I lick BACK and NEXT in IE, some tables change their width.
If I’ll add or remove a column to TABLE all is OK.
Or of I’ll disable the included Javascript, all also will be OK…
Anyone want examples?
ST, obviously an example would be helpful.
Mark, first of all, thanks. :)
It seems the problem only occur on Firefox. In the “bug page”, the content (“Através do formulário de contato … “) that come right after the h2 (“Fale com a UEMG”) wicth has sIFR is overlapped by the flash area. And also the backgroud (dotted points) of the h2 (which is aligned at BOTTOM) appears before the flash. This is veeery strange.
I’ll trying right now to solve it but if you get any clue please say it. :D
Sérgio, I played a bit with the DOM Inspector and here’s the solution I found:
Let me know if it worked.
Actually, perhaps only clearing the embed will work. Removing the float forced the h2 in the right position.
Yeah, dude!! Thanks a lot!
Just added the clear:both and now it’s perfect!
Setting float: none on the filedset#webmaill also work. The problem was really the float:left inherited from the fieldset.
I’ll try to improve my code. It isn’t well written as it could be yet.
Cheers.
Mark, here is the link with example, describing the bug: http://www.studio.ee/sifr/
ST, very strange. Not sure what is causing it, though, especially since sIFR is placed in another table.
Yep. very strange. And I cannot solve it by myself..
Hi, I very much want to use sifr, but I’m having some problems. I was hoping one of you guys could help me out!
I have uploaded my files to this adress: http://77milt.dk/test/
The thing is, that I cant get sifr to work! I have followed the instructions to perfection. But somehow nothing displays. ( and no, it should’nt be because I’m using a black background! )
Hope someone can help me out!
Thomas, there’s a JavaScript error on that page from another script. That probably causes your problems.
Hey Mark,,, thanks for your help, but that wasn’t it!
I have removed the link to the other js, but it didn’t help!
Still hoping to get this to work: http://77milt.dk/test/
Thomas:
You are pointing to a swf file here:
/haet.swf
… that doesn’t exist. You probably meant to put this in your path instead:
/test/haet.swf
(P.S. I see what appears to be a blank .swf file at that location. Keep in mind that the font files distributed with sIFR are domain-locked. Not sure if that’s what’s causing the blankness, but I thought I’d bring it up.)
Right. The path to the Flash files is wrong.. it should be /test/haet.swf.
Still up, Mike? ;-)
thanks for all your replies, but we’re still not there!
I have tried that as well as just refering to haet.swf.
Still no sight of the text. I have tried with other fonts as well, but with the same result. But it flash loads, or else the black background wouldnøt be there!
So, still: http://77milt.dk/test/
Thomas, as Mike said, I think the Flash file is corrupted. It should show “Please pass in your text” (or something like that) when loaded directly, but it doesn’t.
Hi,
I read a lot about this technique and we are planning to use it on some websites but what I haven’t found is about licensing. Because once you have the *.swf file that contains the font, it is possible that it can be used by somebody else who doesn’t have a license for that font.
We have a font where we have a license for that it can be used by 5 people or so. The license says that it may not be distributed in a way that other people can make use of it. Does this mean the font can’t be used for this technique?
Love to know!
Jamy
Jamy, the sIFR code itself is open source, CC-GNU LGPL to be exact. As for font licenses, you can lock the domain from which the Flash can be loaded, so no problems for you I think!
P.S. Seeing you are from the Netherlands, there’s a meeting coming Saturday in Leiden. More here.
I’m having the same problems as Thomas, but only with one of my .swf’s, and only in FF.. the text is showing up just nicely in IE6 (for one of the .swf’s, not the other), but in FF I get nothing…
strange?
test: http://www.revolver.nu/dev/
Hey Mike and Mark, I think you’re right, the file is corrupt in some strange way. Can’t see how it happened though. It’s whenever I work with it in flash. Is there any of you who could be persuated to make the file for me?
I could mail you the font, I just need to be able to show the danish æ ø å characters.
I would owe you for it!
Thanks
It is described how to do it in the Read Me file. Check paragraph 3. Basically you have to open the flash file. Double click on the text in the middle of the stage. Click on the text box and change to the wanted font in the properties window. In the same window to the bottom right there is a button called Character… . Click on it and add the characters you need. For instance all the danish characters like æ ø Ã¥. Exit the editing box and go back to the stage and export the movie. It should then include all the characters even the danish characters.
//Rob
OK… I have a couple questions I’m unsure about. I’ve recently used sIFR on a couple sites (and have to do a class on it at TODCON in April)… I understand that I have to use the .sIFR-hasFlash selectors to tweak my sizing to match the CSS styled text. I haven’t run into strangeness like this till now… I’m getting different results in different browsers. Ugh.
I had it all lovely in Firefox Mac, then I went to the PC and of course, I have different sizing. BUT, I also have a difference between Firefox Mac and Safari. So it’s not just a platform thang. I am beginning to wonder if it’s because I have set my fonts in relative sizes in my CSS… and in the -hasFlash replacements, I’m using pixels. Nope. Left for a few, tested and came back. :) That makes no difference. I simply have smaller fonts in Safari (and PC browsers) than I do in my other Mac browsers.
The other oddity I have is in IE Mac — just with one of my styles. I have an H4 set to be a call out of sorts (border on top and bottom)… it looks like this:
#content h4 {
font-size: 0.9em;
line-height: 140%;
color: #861B21;
margin: 20px 30px 20px 30px;
padding: 10px;
border-top: 2px solid #861B21;
border-bottom: 2px solid #861B21;
}
The sIFR replacement looks like this:
sIFR.replaceElement(“#content h4”, “dolphin_lead.swf”, “#861B21”, null, null, null, 10, 10, 10, 10, “offsetTop=5”);
In IE Mac, it’s as if it doesn’t realize the sIFR is there. It’s placing the bottom border right under the top border. Then the heading below, an h3, as well as the first paragraph of text below that, are shifted over (approximately the same amount of the margin in the h4 that’s rendering strangely — 30px)… it’s as if it’s taking the normal 12px left margin it should be using, and rendering it as if the left margin of the H4 above is the left side of the whole div … but it’s actually 30px offset. Hmmmm… Don’t know if this is making sense. It’s strange.
The page is here if anyone has any ideas:
http://www.habitdoc.com/control_new.cfm
I’m still doing tons of work on it, but trying to figure this part out before I move on. :)
OK… it’s obviously the -hasFlash replacements. I have the H1 and H2 right now. But can’t for the life of me get the H3 to match from browser to browser. Is there a formula? I’m good with math, but I’m having a really hard time with this concept. ;)
I know that the -hasFlash selector should force the CSS text that’s being hidden to take up the right amount of space so that they sIFR replacement (swf) is the size I want. Or is that where I’m confused? What exactly is giving the sIFR it’s size? My text with CSS takes two lines, But in Safari, the sIFR is only taking up one line — unless I make the text REALLY large, or add extra positive letter-spacing. But when I do that, it gets HUGE in FFox. It’s very confusing… and frustrating. What am I not understanding?
Hans, Internet Explorer and Firefox treat file paths somewhat different. Try using an absolute URI for the Flash files, such as /dev/includes/scala-sans.swf.
Stephanie, it’s awesome that you’re going to give a class on sIFR! So, let me clarify how sIFR determines the sizes. Basically it takes the size of the box the text is in – the width and height. This means that you have to style the box so that it uses the right width and height for your text. It also means that sIFR relies on the browser to render the box with the desired dimensions.
What you could do is add a height property to your CSS, or, if that doesn’t work, tweak the CSS for specific browsers. That’s all I can give you.
As for IE/Mac, that browser has some major quirks… perhaps you should disable sIFR for it (add a browser check before the script calls sIFR.setup()).
I have the oddest bug (and for once it’s fine on IE).
On Firefox/Mozilla I am replacing three h3s on one page and 2 are being rendered fine but the middle one isn’t appearing!
See for yourself at http://staging.empowercomms.co.uk/temp/tim.asp
When you examine the DOM all 3 headers have been replaced correctly with the flash objects for some reason height and width have been passed as 0, same on the style.
Here is a screengrab
PLEASE can you point me in the right direction it’s driving me nuts.
Thanks.
Tim, really, really weird indeed. It appears that when html.sIFR-hasFlash is “set”, the second h3 collapses to zero height. Setting the height property in CSS to, for example, the line-height solves the problem. Really, really strange.
Thanks alot Mark, that did the trick! Now also both .swf’s work!
Great!!!!!!
So, I’m back with a new problem…
I have three different sIFR a want to apply to different h2’s, and I am successfull in two of them. The regular h2 is replaced as it should, allthough I think I can see some differents in sizes? I also have one with class=”red”, which renders nicely. The problems occur when I want one h2 to render both with and without the class=”red”, i.e Test heading. A test page is available here:
Test page
it’s the Billy Joe heading that’s troublesome. Bily Joe Shaver should be in red, but it’s not. But watch the top left corner in FF (WinXP), what do have there?
Screen Grab
Any thoughts?
Hans, h2 span means any span inside h2. Unfortunately for you this includes the span which takes the alternative content. You’ll have to give the span you want to replace a class and use that instead.
Mark – IE/Mac definitely has some really bizzare issues at times on anything but the most simplest sites. For instance a site I just coded uses suckerfish style drop downs on some of the pages and the dropdowns in IEMac are just not right when sIFR is being used.
I have found that I had to comment out all of my .pagetile or .date type classes in my css using /* \*/
If I leave them in Mac IE makes the drop downs go nuts. For now I am pretty happy with the css and xhtml on the site as it works on IE 5-6 Win, Firefox WIN Mac, Safari, Opera 7 and for the most part IE MAC. .
http://gts.edu/seminarylife.asp
– oh and before anyone asks, some of the pages do not validate right now becasue ouir cms is not converting things like & into & amp; and it is not closing img tags with a />
anyone have any problems with their type getting cut off, as if the box was too small for the type? I tried playing with padding in my sIFR-screen.css + my replacements statements, as well as revising size and line-height, but I continue to get the same result….
Do you have a link?
Yes, I had my tops being cut off. I used an offset on the top and it fixed it right up. Padding did not. :)
stephanie-
sorry, forgive my ignorance… when you say an ‘offset’, what precisely do you mean?
Alexis: an example here… in general, I’m having anti-aliasing issues like mad, but the first thing I’m noting is the yellow headlines for each “product”- the top 2-3px are just gone! (I actually have now switched to the medium face of that font which looks and fits much better, but still exhibits the same cutoff problem, just not as “brilliantly”.
Hmm, this may not help but is there some resaon as to why your flash http://sterlingsleep.com/_fonts/weidemannBook.swf
Looks cut off when you link to it directly in the browser? Even the default Please passin your text is getting cut off.
I outputted my own version of wedemann using Flash MX and this does not happen to me using the book or medium style of this font.
AHHH… offsetTop. Just tried that, and now my descenders get cut… what can I use to counteract that?
Also the offset Stephanie was referring to is one of the flash variables you can pass using the sifr.js
sIFR.replaceElement(“.replace”, “sifr.swf”, named({sColor : “#ffffff”, sBgColor: “#000066”, sFlashVars: “offsetTop=5”}));
Excellent tool, you’re my heroes for having developed it.
Having said that, is there a workaround to get Netscape 7.1 to recognize the sIFR javascript function calls in a linked .js file, instead of having to include them at the bottom of every html page?
paul, that bug is solved in the next release. Thanks.
excellent! Great work and thanks.
Ok, here’s some odd behaviour for you, I think..
I’ve “found” that when I have two replacement calls, one for li span and one for li span.current, I get different behaviours depending on where in the “list” in the .js I put the replacement line.
i.e:
sIFR.replaceElement(“li span.current”, “includes/rockwell.swf”, “#ffffff”, null, null, “#cc0000”, 0, 0, 0, 4, “offsetTop=3”, “transparent”);
sIFR.replaceElement(“li span”, “includes/rockwell.swf”, “#cc0000”, null, null, “#ffffff”, 0, 0, 0, 4, “offsetTop=3”, “transparent”);
works great in FF, but only the li span.current shows up in IE6, and nothings shows for li span.
But if I move the li span call up over the li span.current it “overrides” the span.current, alas the background in current also gets white.
Some quirks I’ve missed?
Test page, works in FF, not in IE
Hans, the order in which you’ve placed the replace statements is fine… don’t know why IE doesn’t like it. If you replace li span first, li span.current is already replaced when you try to replace it, that’s why that one doesn’t work.
I’ll have a look tomorrow.
I’m trying to implement SIFR but am having some problems with cross-browser display discrepancies. Hopefully some of you can help.
IE6 seems to be rendering the replaced tags fine but FF, NN7 and Opera 7 aren’t. In the latter browsers the replaced text displays but it does not size properly (as declared in the stylesheet). The text will not change unless I specify a font-size greater than 50px. IE, on the other hand, is happy to display the replaced tags at the (correct) size that I specificy.
Please take a look at this test page in both FF and IE to see what I mean. The text “This is a Redundant Headline” displays correctly in Explorer but not in FF. Any ideas?
If you’d like to look at the CSS it can be found here, with the applicable SIFR-related tags at the bottom of the document. I appreciate any help you may have. Oh, has anyone else encountered this when opening the sifr.js file?
Thanks again …. Greg
Greg, you’ll have to play a bit with the line-height and properties. As for the obfuscated JavaScript file, that’s on purpose to save bandwidth. You can find the original source in the download.
Thanks Mark. I didn’t realize that the line-height had to be tweaked. It looks like everything is working correctly now. Appreciate your and Mike’s hard work … thanks again!
I’m working on a site for a friend’s zine and using sIFR for the <h1>s on everything but the home page.
My lone Mac tester has reported that he sees plain browser text in both Safari and Firefox, but iCapture (on the one occasion when I could get it to work) showed sIFR on the search page and blank space where the headings should be everywhere else.
The closest I can get to testing for Safari is Konqueror on Linux, which throws a JavaScript error and renders browser text. I changed the pages to use the un-compacted sIFR script for debugging and got the message
At this point I have three questions:
Thanks in advance for the help.
If I understand what you’re asking, each page of your site (at the top of the page) is showing me sIFR in Safari (I have the latest upgrade though)… I see it in FireFox (v 1.0) as well. I do not see it on your front page (which appears to be as expected?)… HTH
Adam, there’s a problem with old Safari (and Konqueror) browsers which has been fixed for the next release. It could also be that Flash isn’t installed, which would explain why your tester sees plain text in both Safari and Firefox.
Safari is indeed based on Konqueror, though I believe the latest Safari versions use newer HTML and JavaScript engines than Konqueror does.
As for the JavaScript error you reported, could you provide some more information about it, such as Konqueror version? It looks like a real bug to me…
And finally, it could be that iCapture takes the screenshot before the Flash files have loaded, thus showing empty space.
Stephanie: Yes, you understood my questions correctly. Thanks for your helpful input!
Mark: Thanks for the additional info, clarifications, and particularly the explanation of why I’m seeing empty space with iCapture. I can live with some people getting browser text, but not with a big hole at the top of the page! From the sound of things, there’s probably no need to worry. As for the JS error in Konqueror, I’ll be back this evening with more details.
Hi,
I have a frustrating problem that I’ve probably stared at too long: the middle column in a 3 column layout is pushed “below” the other in IE6. I’ve tried fiddling with line-height etc.
My page is here
I have found that making that block element 99% width will fix that problem in IE. This may have to do with IE’s flawed box model or 3pixel jog bug. But either way it makes the box element you are replacing to large and causes the float to die.
Ouch, it also looks like you are using transparent backgrounds for all of those replacement calls which can seriously cripple a slower machine with that many flash elements. Either use the sIFR much more sparingly or take out the transparent attribute.
More specifics on the Konqueror JS error I mentioned earlier.
I’m using Ubuntu Linux with the 2.6.8.1-4 kernel, compiled for AMD Athlon. The error is produced by Konqueror 3.2.2 under both KDE 3.2.3 and GNOME 2.8.
The code that seems to be causing the problem, with line 459 in emphasized:
function setup(){
bIsSetUp = true;
/* Providing a hook for you to hide certain elements if Flash has been detected. */
if(document.documentElement){
document.documentElement.className = document.documentElement.className.normalize() + (document.documentElement.className == “” ? “” : ” “) + “sIFR-hasFlash”;
};
There’s more to the setup() function than that, but the portion above is what’s making Konqueror complain. Any ideas where to go from here?
Adam, could you please contact me? I think I know what the problem is, and I’d like to ask you to test a fix.
Hans, I had a chance to look at your problem today… and a part of it indeed was strange! I found two bugs in the parseSelector, a typo in the new replaceElement and I’ve also had to tweak some other code to get it working in IE (this was the strange part).
That was the good news, the bad news is that this release will have to wait till Mike returns from holiday. We also have some other things planned which need to be set in motion… stay tuned.
Hey Mark, any chance that you will build in a switch to keep IE Mac from using sIFR? It seems to work pretty well on most sites, but as I noted on my post above (and I think you said as well) IE Mac can really cause some trouble at times. It would be nice if there was a variable at the top of the js something like IEMAC=0 or IEMAC=1. I realize we can all simply make our own scripts to do this, but if you think IE mac may be problematic in the future, it may be something you may want to integrate into sIFR by default.
Alexis, you can already block browsers from using sIFR, it’s just not a preference you can set. If we start doing one browser via a variable, there’s no end to it! Anyway, read this (last paragraph).
Hi,
a few weeks ago i mentioned a problem with RC2. The same problem still exists in RC3.
When using the sIFR.js from RC3, some background tiles do not show up exactly in Win IE 5 and IE 5.5.
I could fix some problems by resizing the tiles up to a minimum width or respectively height of 25px. But this only works with some tiles.
I made a small example page to show the problem, using the sIFR.js from RC1: Example with sIFR RC1
The same page with a link to the RC3 sIFR.js – Here, the tile does not appear: Example with sIFR RC3
Could someone please check this with an IE 5.0/5.5 browser and give me a feedback?
Thanks
The titles show up on IE 5 5.5 and 6 Win for me. The sizes of the titles vary wildly, but this seems to be becasue you are setting the base font with font-size:small in the body and then using 1.5em for the H1. Each browser has a different interpretation of font-size:small.
Alexis, thank you for checking, but the problem is with the tile, the repeating image in the background – not the titles.
Alexis: You may want to try some kind of server-side client detection. I posted on the topic in June, with links to a couple of ready-made PHP scripts.
Citizen.K, I’m not seeing any differences at all… what should I be seeing exactly?
By the way, Danilo Celic, of Breeze-presentation-on-sIFR fame has just published a script to easily create sIFR .swf files. Check out Automating sIFR Font SWF Creation With Flash MX 2004 and JSFL !
Mark, in the background of example 1 is a darker green gradient to see, in example 2 (with RC3) not… You have to check with Win IE5.0 or 5.5. to see the difference.
Citizen.K, that’s what I’m doing, and I’mnot seeing any difference at all. I’m also having some trouble believing this has anything to do with sIFR. Does anybody else see it?
Yeah I see the problem but have not been able to see as to why its happening. The css is pointing to “../img/bg.jpg” . Although I suppose it should be img/bg.jpg.
Either way in IE 5 that background image does not show up. This is odd since I use repeat-x background image here with no problem using sIFR3.
Okay, here is an actual example for my IE 5.0 / 5.5 problem:
“RP Tuning Systems” with sIFR-Script from RC1 Works fine.
“RP Tuning Systems” with sIFR-Script from RC3 It is the exactly the same site, the only change is that i use the new script. Here, parts of the background gradients does not show up and the blue background of the sidebar is missing.
The strange thing here is, that the backgrounds show up sometimes after reloading and then disapear.
Also strange: Sometimes they show up right and disapear when hovering over a link (e.g. a text link in a different part of a page).
One final note: My IE 5.0 / 5.5 run run on the same system like IE 6 as described here: Multiple IEs in Windows. And has nothing to do with SP2, i checked this.
And again… no problem here (also running multiple IE’s on Win XP SP1). Does it work without sIFR? Could you post some screenshots?
Alexis and Mark,
i checked Alexis’ site and examined his sIFR-script. I used the same replacement statements and now it works fine! I wonder why my “wrong” parameters only affected IE 5x and not the modern browsers, but that is not a problem anymore.
Thanks for your support, folks!
Danilo Celic’s automation script is cool, but why on earth would anyone want to export 30 or more sIFR font files in a row? Including more than two sIFRed fonts in a page (at about 15 KB each) creates an unacceptable bandwidth burden for the nearly 50% of the US that doesn’t yet have broadband.
Since one font file can be used for every occurrence of that font on a site, I just don’t see the utility here. I’m not trying to diminish what Celic has done, I’m just confused as to why. Am I missing something?
I’ll tell you how I used it. :) I create web sites for a living. I do not have a desire to put the same sIFRed font on every one of my client’s pages. Thus, I exported about 20 that I wanted to play with. You may find, as you work with various siFRed fonts, that some lend themselves to sIFRing better than others.
For one client, I took Mike’s example page, duplicated it a couple times, and used a variety of fonts to demo them. He chose what he wanted from that. I could have exported them as images, sure. But the fact that I need to know if the font will work properly for me makes it better to actually put it in a document.
I exported about 20 that I thought I might like to use on various projects and I have them in my own sIFR directory. I don’t have them all on a client’s page. ;) It was fast and efficient. If you’re only dealing with one, it might not be worthwhile.
Thanks for this great code !
I want to use sifr on a site where there is various sizes of text on one <h2> for example.
I know that if I put
<h2>My title with <span class=”little”>little text</span> on it</h2>
it won’t work.
What could I do ?
Thanks for your help.
Porcelain, you could wrap the other text in a span as well, and replace each individually. Then you might need to play with the CSS to get the Flash aligned.
Stephanie: I knew I was missing something. Thanks for the pointers. :-)
Adam,
As Stephanie has already stated, the purpose for this is not so that you can place 30 fonts onto a single page, it’s to allow you to export a number of fonts that you might use on a variety of sites.
In addition, as part of some of the upgrades added for the various release candidates, the sifr.fla file has changed making previously exoported font SWFs unusable. If you keep a copy of that JSFL file then when a new release comes out you can easily update your font SWF with a couple of mouse clicks.
Mark, I think that your idea would work only if i put :
<h2>My title with </h2><span class=”little”>little text</span> <h2>on it</h2>
But i don’t want to do that :)
I wanted to know if it’s possible to allow flash to render html text inside sifr…
If it’s not possible with sifr i’ll do it by myself…
thanks
i am desperatly trying to get this to work. i can get it to swap out H1, H3, etc out no problem. but i would like to create a second set for say H3 but blue, instead of having a whole H just for it.
i added this to my sifr.js
sIFR.replaceElement(“h3”, “/_assets/sifr/HelveticaNeueLightExt.swf”, “#666666”, null, null, null, 0, 0, 0, 0);
sIFR.replaceElement(“h3.blue”, “/_assets/sifr/HelveticaNeueLightExt.swf”, “#1839B4”, null, null, null, 0, 0, 0, 0);
and then in html This should be blue
and finally in my normal css:
h3.blue { color: #1839B4;
padding: 0;
margin: 0;
font-size: 25px;}
but its coming out as plain H3. i have no idea what is the problem. could anyone shed some light on this for me? there should be a support forum for sifr. THANKS!
louis,
did you add all styles from “sIFR-screen.css” to your style sheet?
Did you add a .sIFR-hasFlash h3 and .sIFR-hasFlash h3.blue to your CSS, then?
I agree, a support forum would be a great thing!
whoops, it did not show my html tag right, i changed the brackets this is in html:
[H3 class=”blue”]This should be blue[/h3]
and i did not have a .sIFR-hasFlash h3.blue, but i added one and it still did not work.
i linked the sIFR-screen.css and sIFR-print.css
louis,
can you post a link to your site?
http://www.louiswalch.com/beta/sifr.php
Porcelain, no, I mean this:
Then you replace all h2>span’s.
louis, the order of the replacements is wrong. First you replace all h3’s, then there are no h3.blue’s left to replace.
We are currently working on setting up a wiki for documentation. Creating a support forum is a whole different ballgame though, I have some ideas for that but nothing definite.
I know the javascript command window.onresize doesn’t work with IE but couldn’t it still be added? I noticed this when looking at your example page https://mikeindustries.com/blog/files/sifr/sifr.html that doesn’t have a fixed width container. You have to refresh the browser manually to see sIFR resize after you resize the window.
Urban Faubion, unfortunately it’s too much of a hassle to do that. And by the way, the onresize event works fine in IE.
Well, kudos to you for this free software. I love the way it looks, but just can’t get it to work.
I’ve tried inserting the replace tags into both the js and the html, neither works. I can’t even see the new text in IE5.5, and Firefox embeds the swfs but they’re empty. I tried using on of the sample swfs instead of my own, and that doesn’t appear to be the problem either.
What am I doing wrong?
http://www.2015riverside.com/weblog/
OK, I lied. I was really previewing in IE6, not 5.5, sorry!
The real issue is the empty swfs in Firefox 1.0. It would be nice to see things in IE, but if I can’t get it to work, I’m over it.
Thanks in advance.
It doesn’t appear to me that your swf is empty…. I just viewed it. I think it might be your replacement call in your CSS… Try changing this:
.sIFR-hasFlash h2
To this:
.sIFR-hasFlash #contentcenter h2
The only other thing I see is that in mine that works, I have this:
//
Bradley, well, I’m stumped. For some very odd reason the elements you want to replace lose their dimensions once html.sIFR-hasFlash is set. I suppose there is a problem with your CSS, but unfortunately I wasn’t able to find it.
What you could try is to set a media=”screen” attribute on the default CSS link tag. Hopefully that’ll help matters.
Stephanie, the CDATA section is only needed in XML documents, so it’s not the problem here.
Thanks for that Mark! I haven’t had time to get into writing XML and wondered why the heck that was there… I’ll remove it from my HTML then. ;)
I set the media type on the main css, to no avail. I also tried changing the selector to just h2, instead of #contentcenter h2, and that didn’t help either. Totally stumped. I read over my CSS to make sure everything is in order, and I can’t find a thing out of place. Except, of course, a little lack of organization.
Thanks for the help Mark & Stephanie–hope there are some more suggestions out there from you and others. I’d really like to be using sIFR.
I really need to learn to consolidate my thoughts into a single comment block.
OK, I fired up my DOM inspector and found that Mark, you are absolutely right. My SWFs have height and width set to zero. Amazing.
In the sIFR CSS, I see this:
span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }I realize this is getting the “pre-modification” h2 that I’m styling out of the way, by giving it zero dimensions and moving it around. Is there any chance at all that this is also affecting my SWFs?
Thanks for scrubbing my code, I really appreciate it.
Works. No idea. I think it was a letter spacing thing, actually.
Thanks for helping me out! sIFR is wonderful, and I will spread the word.
Hi there,
just checking in after 4 weeks of travelling. Before I left, siFR2.0 RC3 was just getting released, and I was hoping to see expanded README instructions on how to include custom fonts in the sifr.fla file and turning it into .swf files for the site. (“3. Open up sifr.fla in Flash MX or Flash MX 2004 (preferred) and double-click the invisible textbox in the middle of the stage. Pull up the “Window > Properties” palette in Flash if it’s not already up on your screen. Select which font you’d like….)
Like Kim in post 101, I have followed the instructions to the letter, but still… getting the same error (“Do not remove this text.”). I tried both Flash MX/Flash MX2004 on Mac OS X and Flash MX2004/WinXP SP2 with the same negative result.
Isn’t it time that somebody posts a primer with screenshots? If anyone has already put together one, could you please post the URL? Thanks.
I would strongly suggest that you look up a few posts and use the JSFL file hat Danilo put together. It’s free and though it’s handy for people making several swf files at once, it’s also great when you’re having trouble. Though I had figure it out, I had trouble the first time myself, but I was able to do things without a problem with Danilo’s extension.
Check it out… :)
Uli, speaking for myself: sIFR is a hobby. I’m still at high school, which takes a lot of my time as well. I’m sorry, but that’s life.
Danilo Celic’s article on using Flash MX 2004 to automagically generate font SWFs for sIFR is very interesting. Any word on if any other brilliant developers in the community are working on potential extensions for Macromedia Dreamweaver to more easily faciliate the implementation of sIFR? By the same token, it would be wonderful if sIFR helper plugins existed for popular CMSs, such as WordPress and Drupal.
I have a demo version of an extension that can facilitate the creation of the sIFR font swfs, it’s based upon the JSFL that was released earlier, the DW extension would just give it a pretty face as well as allow the user to select the fonts of their choice and get a preview fo the font face to be sure of what they are getting.
Unfrotunately, Flash doesn’t expose the list of available fonts to scripting, at least according to the documentaiton.
As for adding the proper code to the page via an extension, I think it could be done.
Would using about five instances of replacement on a page (RC3) render background-color hover changes very slow?
I am having an issue in IE/Win (nothing else) with a side-navigation scheme, and the rollovers in IE/Win take about a second to swap (at least on *my* PC).
I realize theres some processor churning going on, but just want to hear some opinion from this great peanut gallery…
Sample link:
http://test.ericksonbarnett.net
I’ve implemented sIFR on a large company intranet, and for the most part it has been a great success. There is one very bizarre issue that some users come across, though.
The corporate standard browser here is a customized version of IE6 running on XP Pro. In the browser, the headings display just fine. The problem arises when certain users choose to print or print preview their page. As soon as they do that, the sIFR text on screen flips upside down!. Although the machines are all built to standard specs, this only happens to some users, and it does so consistently.
I have searched unsuccessfully for others who have experienced this. Does anybody have some possible insight to what could be going on?
BTW – Other browsers handle it just fine.
Marty, no idea. Perhaps you could try it on some other computers? One would assume that it’s easier for you to spot a difference than it is for us.
Michael, that’s a very strange bug… does it happen with normal Flash embed’s as well? And if you use the sIFR print stylesheet? I think it’s a Flash or an IE bug, though, so you might want to contact the respective companies.
Just a quick heads up that I’ve been rolling out the latest version of sIFR on various websites (including my own). It plays nicely inside Mambo through the templating engine.. ;) I’m still trying to crash course sIFR integration direct into Mambo.
Examples in action:
http://www.aiteo.com.au
http://www.absalom.biz
Mark –
I’ve been testing some affected user’s machines and things have gotten more bizarre. Get this:
I am very sure that this is some sort of system level bug with Windows and its interaction with IE. I have made the desktop support guys here aware of the problem so they may look into discrepencies in machine builds. We’ll see what comes of it.
Michael, interesting. Something else you could try is removing all sIFR specific CSS code and replacing different elements. Perhaps it’s a combination of CSS properties with certain elements… but I’m just guessing.
Perhaps it would be an idea to handle this via e-mail, instead of communicating via this thread. Please check my contact “details”.
Everybody with an interest in sIFR (that would be everyone who sees this, no?) please check out the wiki!
I’m having a problem with kerning of all things. Some characters, like ‘t’ for instance, have an expanded space after it. My version of the Trade Gothic family simply does not want to play nice. Some fonts though are just fine.
Anybody have problems the same?
Well, I read about sIFR and decided to try it for the re-design of our intranet. Unfortunately, I cannot get it to work. I am having a problem similar to Thomas, I am getting NOTHING where the replacement should be happening. I even put in a black background color to see if anything was happening.. its not, I don’t even get the black box that Thomas was getting.
I’m replacing “h3” only at the moment. The ‘hidden’ part of the CSS is working on the decoy, but that’s it. The SWF files I exported are fine. When I open the SWFs after export, I get ‘please pass in your text’. I have changed the line-height on the ‘h3’ decoy to 3.0em.. LOTS more space than is needed, still get a complete blank.
I have placed the replacement script at the bottom of the html file. I’m not getting any script errors and I’m testing in IE 6.0 and FireFox, both for PC. Our intranet audience is 99.9% IE 6,so I’m not worried about any Mac versions or even old versions of IE or any Mozilla/Firefox (except me).
I have no clue what is going on here. Any input would be greatly appreciated. I can’t post to a web site for public view, so the only example I could provide is a text file.
Thanks !!
Diane: Have you copied the CSS calls exactly? It sounds like maybe you don’t have the print css file specified specifically as a “print” css file. That might cause the Flash to be hidden. If you right-click where the Flash headlines should be, do you see the Flash contextual menu? (About Flash 7…)
Mike,
Well that MAY be te problem as I didn’t pull in the “print” css file stuff at all. Its extremely rare that anyone prints anything off the intranet site, when they do, its a document or policy in PDF format that they print. So, I’ll put that in anyway and see what happens.
And no, if I right click where the Flash replacement SHOULD be, the context menu is not the Flash context menu, is the usual ‘browser’ contextual choices.
Thanks, and I’ll get back if the print css bit works. :)
Hi, nice work! However, I had some troubles with <a> tags inside replaced content. Links containing escaped URL sequences actually didn’t work!
I’ve changed these lines:
357c357
< sLinkVars += “&sifr_url_” + nLinkCount + “=” + oSearch.getAttribute(“href”).replace(/&/g,”%26″);
> sLinkVars += “&sifr_url_” + nLinkCount + “=” + escape(oSearch.getAttribute(“href”));
Hope this hasn’t any other caveats, anyway, it solved my problems ;)
Thanks.
Lukas, could you provide us some examples of these sequences?
Sure. Try to render this:
<h3>
<a href=”/elch/news/08/02/2005/Hell%F6+W%F6rld.html”>
Hellö Wörld
</a></h3>
If I click the sIFR-link, it tries to forward me to:
/elch/news/08/02/2005/Hell?rld.html
I’ve checked your Flash sources and in Flash the encoded URL works correctly, however the problem is that you’ve to encode the URL again in Javascript, otherwise these “sepcial” characters will be ignored. (at least on Firefox, Safari).
Cheers.
PS: For more Infos, just send me an email to contact [AT] openos [DOT] ch
Lukas, thanks. I forgot to escape hexadecimal escape sequences for href values. I suggest you keep using your solution until we can release the next version.
Why execute sIFR only upon onload?
I’ve put my sifr.js just before the closing body tag and just execute it there, instead of waiting for all assets to load and trigger the onload in some browsers…
Also, the Heartbreak of Liquid:
I’ve tried reading over the comments to find this, but couldn’t find it: is there any hope for liquid layouts? Once I got everything working perfectly, I had to go from fixed to liquid (despite many studies showing that fixed is more usable), and had to cut sIFR.
sniffle
Kevin, we’ll be releasing code with which you can remove and then re-apply the headlines, so that could help you to solve your problems with liquid layouts.
For now you can also use display:inline on headers to make liquid layouts work a little better. 2 things though:
Ok guys, I’ve had no luck with the replacement problem I mentioned on Friday. I pulled in the print.css with copy/paste, so it IS exact but I’m still getting NOTHING where the replacement should be happening.
I went thru the tuning section of your instructions to see if maybe that is causing this problem. I put the sIFR class on the html tag, I disabled the call to the sifr.js. Now, your instructions were not clear as to whether or not I needed to change the visibility on the decoy h3 to ‘visible’ (as opposed to hidden) or not. If I DON’T change it to ‘visible’, I wind up looking at a blank space… so what is there to tune to ???
Didn’t make any difference anyway. I made adjustments to the h3 ‘decoy’ with it set to visible to approximate my h3 style but when I re-enabled everything, I STILL have a blank replacement area, nothing, nada, zip. When you right-click where it should be, there’s no Flash menu.
I cannot imagine what’s wrong. I’m not a javascript coder, my javascripting is minimal at best. I have no script errors. My CSS is fine, it even validates.
There is one other script on the page. We use Dreamweaver and we use the native MM_Preload function to pre-load the images for the CSS menu, but it works just fine. There doesn’t appear to be any conflict between the 2 scripts. The sIFR.js call is the last thing on the page before the closing body tag.
Any ideas ?? I’m totally stumped.
Thanks !
Diane: Hmm, no idea what the problem is. Nowhere in our testing did we try to put the sifr.js call in the body itself though. Maybe that’s the problem. Can you try putting it in the head as is spelled out in the documentation? That might help.
Weelll…. here’s one more thing to consider. I just pasted the replacement call onto the end of the sifr.js file and it WORKS.
Now.. why won’t it work with the replacement script in my page ??
Thanks !
Diane: If you put a .js call anywhere in the body of the page, you can’t really control when it’s “ready” to be used, so your replacement calls were probably triggering before the script was ready. I highly recommend putting that .js insert file in the head element instead of the body. Then you can put your replacement calls wherever you want.
Ok.. that works :) Thanks.
Now.. this font tuning is all over the place. With no line-height set and a font-size of 24px specified, the replacement text is too small, smaller than the styled text. I increment it to 26px.. no change. If I set it to 28px, then it suddenly jumps to huge.
When I go to em instead of px for font-size, its too small. I increment in 10ths from 1.50em to 2.30em and the size is just a tiny bit bigger.. until I set it to 2.40em, then there’s that same jump to HUGE.
I know the goal is to get it as close to the normal styled text as possible, but that is proving to be difficult.
Does it care one way or the other which size spec I use.. em or px ??
Thanks for your help !
Diane, use whatever works best. I’ve also updated the documentation with your suggestion about visibility.
Putting the SIFR script include in the body tag works fine for me, with the onload assignment removed, I just execute sifr(). However, I have modified my sifr.js with my replacement calls so it’s self-contained.
Maybe that will help.
clarification: putting the sifr.js script link just before the closing body tag…
Thanks for all the input guys, I think I’ve got it licked :) Mark, I checked out your modified wiki, looks good ;)
I realize it seems that nobody had a similar problem that I was having with bad kerning, but I did find a solution that I think is worth noting. After I started finding alot of my fonts were coming up bad I had to try everything…
Updating Flash MX Pro to 7.2 solved the problem – thank goodness!
I’m sure you guys are aware of this, but recent versions of sIFR don’t seem to play nicely with the FlashBlock extension. That is to say, the Flash replacement seems to be rendered twice on the page; if it’s at all helpful, I’ve taken screencaps of the new SixApart site (before and after opting into the Flash content).
Ethan: Wow, that is really weird. Incidentally, SixApart is using RC1 which has undergone some pretty major changes since moving to RC2 and then to RC3… so chances are, we’ve already squashed whatever bug is causing that. We’ve notified SixApart of the availability of RC3 so look for an upgrade soon. We are also working with the FlashBlock team on some related things as well.
What’s really weird though is that the Flash headlines render at all with FlashBlock turned on (see your “before” image). I always thought FlashBlock stopped all Flash elements from loading.
Hey, Mike–thanks for the reply. For what it’s worth, the error’s happening on a number of sIFR-enabled sites, including yours; I just picked on 6A because they were making such heavy use of sIFR on their home page, and made for an especially decent screencap. :)
Yeah, good call. I’m not exactly sure where the issue lies, exactly; I’ve not updated my version of FlashBlock in ages, so I rather assumed the duplicate content was due to some hiccup that’d recently crept into the sIFR code. I’ll drop a note to the FlashBlock developer, and see if he’s aware of it.
Thanks again, sir.
it’s a nice solution to an ugly problem but please, don’t forget FLASH is not a open/free(dom) software and is totally and only controlled by Macromedia. it’s why you will _never_ see flash in 100% web clients or in ANY web “standard”.
things can change in the futur, we do not know. in the meantime, webdeveloppers can continue to hack but it’s not a real and good solution.
flash is proprietary, it’s fine and good, but it’s not nice to every player in the industry.
Michel, that’s why it’s so important that sIFR is an add-on solution: you can’t use Flash anymore? Remove the JS file. A user doesn’t like Flash? It shows plain text headlines.
At the end of the day I prefer to be pragmatic and use whatever works. And hey, sIFR itself is open source!
Michel: The .swf file format is indeed open source. If you want to go out and write your own app to create .swfs for sIFR, you’re free to. Right now, it’s easiest to use the Flash editor since it’s already out there, but anyone who wishes to may write their own. There are plenty of apps already out there, in fact, that write out to .swf.
Ethan: Gotcha. Ok, well it’s probably related to that old version of FlashBlock then. I have FlashBlock running on Mac Firefox just for testing purposes and I don’t get that behavior. If you could try grabbing a recent version and then let us know if the issue goes away, that would be great. Thx.
Hey, Mike: looks like the issue’s still happening as of the latest (1.3.0) builds of FlashBlock. Not sure what the problem is, but I thought I’d keep you apprised.
I can hear the yawns now. :) Later on.
Ethan: Yeah, there’s definitely a bit of a yawn factor, but we are really trying to support FlashBlock and AdBlock users as much as possible. With AdBlock, you can at least persistently “opt-in” and the default behavior is to show the text anyway, but FlashBlock is a bit different.
That said, I’m pretty baffled. I installed FlashBlock on Firefox for both Mac and PC and I haven’t noticed any doubling up. Haven’t heard any other reports of it either. Do you perhaps have any other extensions running? Like Maybe AdBlock and FlashBlock at the same time? Something like that?
I am very impressed by what you’ve got here … Bravo. It’s exactly what I’ve been looking for, and seems to be much more friendly than other dynamic text replacement techniques that still only produce images.
There’s only one challenge I’m facing: kerning the Flash generated text. I’ve read in the comments that it cannot be done in the JavaScript. Mark suggested hacking the Flash file. When editing the font in Flash MX though, the kerning box is grayed out. Is there another method?
Thank you
Mike, I’ve got three other extensions: the Web Developer toolbar, Digger, and Bookmarks Synchronizer. Can’t for the life of me imagine why any of those would be causing an issue, but I’ll try disabling a few and see if that makes any difference.
I’d write this off as a fluke install if it wasn’t happening on two separate Macs. Still, if you’re in the clear it’s likely two fluke installs.
I’m attempting to prepare my site for sIFR. All of my measurements are relative—font-size, margin, padding, etc—when I pass call the replacement functions and pass “0.5em” for nPaddingTop and nPaddingBottom the result is an obscenely huge replacement. Is there any way to fix this without moving to non-relative widths?
Also, sIFR seems to work fine when calling the replacements this way:
window.onload=function() { if(sIFR != null && sIFR.replaceElement != null){ sIFR.replaceElement(...); }; }This seems to be an ideal method of keeping the javascript out of browsers and relegating it to a separate js file. Any reason why this isn’t the prefered method of deploying sIFR?
Thanks and great work!
Ryan, unfortunately the only reliable method (as in crossbrowser) to get the dimensions of the to-be-replaced-elements returns pixels. This means that the padding values also have to be pixels (actually, just numbers). Perhaps you could wrap the text you want to replace in a span, apply padding/margin to it’s parent and replace the span. You could also remove the padding using a decoy style.
As for the initializing question, the reason is that the system is far more ingenious than a simple onload. While your method works, it also means that sIFR has to wait for the page to be fully loaded, including images, before it can kick in action. You can find out more about where to put the replacement code by reading Where to Replace. You may also find the wiki useful.
Loving sifr so far. Is it possible to stop the scaling so I can use 8px aliased text? Everything appears anti-aliased at the moment.
Mike, you can specify a fixed height/width using the decoy styles.
In reference to the doubling up of headers and flash block.
I have flash block and Ad Block installed in Firefox on my PC and I get this behaviour as well. One block with the play button and then a block with the actual flash. So if you pressed play you could actually have 2 flash headlines. This occurs with Adblock off or on (although not sure if having it not installed at all would alleviate the problem).
I haven’t tried this behaviour on my Mac (I use firefox for a custom job related to mimetypes on my mac so not sure if its a suitable test).
I’m not sure whether this debate about the page’s appearance with Flashblock or Adblock enabled is a valid one. This is not a situation encountered by the average page user, but of a superuser who know he has said blocking techniques deployed and the potential effect they could have on pages he is viewing. If something seems awry, he can easily disable the blocker and continue. Also, it is a flaw of the blocker if they do not display alternate content of embedded flash.
IMHO, if someone wants to avoid abnoxious Flash adds, that person should uninstall the flash plugin, or disable it in their browser, instead of attempting to circumvent the plugin in a manner that breaks legitimate and accessibility-oriented pages.
But I guess the debate over the merits of Flash/Ad blocking is for another medium.
I completely agree with you, but if MIke wants the feedback we should give it to him. Those who do use the extension (which I only installed to test my own sIFR enabled sites) should be able to whitelist a site which uses sIFR. Although assuming that a user would be a super user just cause he uses Flashblock may be a little much (such as the comment that came through this morning from a flashblock user which was then approprialety deleted).
Hopefully the flashblock creator can fix this issue with sIFR, possibly creatting a rule to allow flash when the class=”* sIFR-replaced” is used before an embed tag. .
Alexis and Ryan: Thanks for the comments. I think you may have solved the doubling-up issue. An AdBlock/FlashBlock combination seems like it could indeed cause something like this. I’ll test.
And of course, I agree about the larger point of programs which claim to circumvent things, but don’t degrade gracefully as they should. As any follower of these threads knows, we have made every effort to degrade sIFR to HTML text under every possible circumstance. No Flash? Fine. No javascript? Fine. No modern browser? Fine. It all degrades perfectly to HTML/CSS. But when an extension reports to us that Flash is installed and then doesn’t let it run, that’s when the problem occurs. To our knowledge, FlashBlock is the only such extension which does this. Mark and I have been in touch with the FlashBlock crew and they seem amicable to helping solve the issue though. We came up with a pure CSS solution whereby they insert two lines of CSS into their extension code and everything should degrade perfectly to HTML at that point. We’ll keep everyone updated on the progress.
By the way, this is a subject for another blog post (and probably a very long one), but I do see a coming cold war between users and advertisers on the web. As ads become more obnoxious, ad blockers will become more aggressive, and pretty soon the entire revenue pipe will be shut down. On the one hand, I have no respect for the opinion of some users that they have the right to view content without viewing the associated ads, but on the other hand, with how obnoxious some of these ads have become, I can hardly blame them. When an ad takes over your entire screen and overlays content, for example, that’s just plain wrong. But the side effect of this is that people have thrown their arms in the air and decided to block even the most polite of ads… like Google AdSense and standard banners.
Hi Guys,
Though sIFR rocks, my site has become quite a memory hog since I implemented it. Firefox freshly booted: about 22MB mem usage. Load my site: 65+MB mem usage. Is this a known problem with sIFR or are other things on my site causing this?
Thanks for a great piece of software!
Marco
Am I the only one now seeing Mike’s header and headline repeated over the top of his comment about advertisers vs. users? Looks a little…… odd.
Marco, I’ve just checked the memory usage of my local test install, and it increased by about 9 Mb… at your site it’s probably a combination of things, since it is quite heavy.
Mikky, that’s a problem which recently cropped up… somethings not right when you use Flashblock and Adblock it seems.
What about if I’m not using either? Just a Firefox install with a small handful of extensions but I don’t have either of those…..
I’m seeing what Mikky is seeing as well… post 261 and 262 have big grey boxes over them. I didn’t correlate it with the header, but I think he’s right (though I don’t see a picture or anything)… it’s been like this since those posts were made. And so I can’t read them. I’ll send a screen shot if you need it… HTH…
I get a large square box at the top of the screen in the header. I’ve been noticing this for a while now. I’m testing sIFR on my site and then I’ll come in here and read comments and then when I go back my Flash is all wonked out and I need to relaunch Safari to get it to come back.
Mikky, I had the same problem last night on a friends machine – Firefox doesn’t come pre-installed with the Flash player (which was kind of a surprise).
I’m guessing the grey box thing has something to do with the fact that this page is now like a million screens long because of the 274 comments. Doubt that it’s even a sIFR thing really, but will investigate (probably just a Flash thing).
(Editor’s Note: Update — Yep, it’s not sIFR related but Flash related… since the header on my site does not use sIFR. This looks like some sort of memory issue between Gecko and Flash. Will report to the Firefox team.)
i ‘ve just implemented sIFR and it works the same way at least in IE/FF/Opera PC.
but — i found two issues:
I’m writing in spanish, using chars like áéÃóú. I just edited “Character” proporties in flash and added those chars, but still doesn´t work. (using iso-8859-1 + helvetica black)
I can´t select the text for copy/paste. “Selectable text” is activated in flash…. can anyone tell me what’s wrong?
crusty, are you lowercasing or uppercasing those characters? Depending on the browser that gives trouble.
I’m not sure what you mean by selecting the text, if you select the normal HTML text you don’t select the Flash text, but the alternative text (which means you can copy it just fine). If you want to select only the Flash text you should be able to do that as well.
yeap, i’m uppercasing the titles, and i find troubles in IE/FF/Op.
the normal html text is selected only when i copy two articles or more. if i put the cursor in the begining of the title, the html text is not selected, and i can’t select only flash text too, like in this blog.
I’m interested in applying sIFR to the body text of a page, my current implementation varies the text size between paragraphs. I using a new instance of a single tag and style for each paragraph, which are in turn separated by headers.
Can anyone help clarify if there is implementation which will ensure the same sized text is used in each instance of a replacement for a particular tag?
I’m wondering if this is as of yet by design or perhaps more related to my implementation. I have some ideas of how to get around it but wanted to ask the simple question first. ;)
(Editor’s Note: Rick, please don’t do that. :) )
(Addition to the Editor’s Note: Rick, sIFR is not designed to handle paragraphs, or large amounts of text for that matter,… so it won’t work.)
Interesting issue here… I’ve been tuning sIFR to a couple sites (will add to the wiki shortly), but one of them has a sidebar that uses a randomizer script. I can’t tune that side for the life of me. It suddenly hit me that perhaps TWO calls are being made to the server?? Is that possible?
Could it be getting one sidebar and then, when replacing it, get another? If so, that could explain the disparity in my sizes. I just wasn’t sure how that was working behind the scenes.
Stephanie.. I have no idea what you are talking about :) Perhaps a link would help? Send me an e-mail and I can have a look for you.
Okay, heres a major worry: QuickTime can (and will) take over the SWF MIME type! That renders the SIFR to be just a small QuickTime Icon. It can be fixed by changing the QuickTime MIME types to default (or removing the SWF from QuickTime’s list of MIMEs.
Is there a way to detect this so that we can force the correct player to run the flash and overide the QuickTime MIME settings?
I have been implementing sIFR in a lot of the sites that we do at the company I work for. For our clients it’s the best possible solution and I’ve been meaning to thank you Mike, and everyone who has wored on the project for giving the world this great tool.
That said, I’m having a problem. :) I have a site that we are developing and they have several headlines on one page that the client wants to be all the same size. So I have made them H2’s and coded the css so that they are displayed at 20 pixels. It works great and looks great, however the headlines are in different sizes and was wondering if there was a way to fix this.
(Screenshot)
Any help or insight you can would be wonderful.
Jeph… have you been “tuning” your fonts? I have been tuning a couple sites this morning and ran into one that I just could NOT get to hold on to the same sizing…. after lots of time spent on it, I found that there was a class on some of the headings that added a line above them AND THE DREADED PADDING ISSUE. lol If you haven’t ever forgotten to check padding in a selector (compared to the sIFR in your JS), you’re in for a treat. ;)
So I’d say to make SURE that there’s not something you’re overlooking that might be adding padding without your knowledge, and really tune those fonts. :)
Are people seeing a fairly large difference in some font sizing between browsers? I use Firefox (mac) and I tuned everything there. Now, when I go to Safari or IE, it’s a good deal smaller than I have been seeing. I remember runnning into this before to some degree, but this is a decent sized difference. Just wondered what other’s experiences had been.
I find that if you set the tags which you are replacing to 100% or 99% width this seems to fix most of those issues.
I’m sure everyone’s aware of this, but the FlashBlock team’s just released a new point version (1.3.0.1) that seems to have fixed the doubling-up issue. Rock.
Alexis, are you saying to put that width value in the decoy style?
Stephanie,
What do you mean by “tuning” fonts? I double checked and there’s nothing in the html code that could be causing problems and padding is set to 0 in the css.
What am I missing?
Hi Jeph, it’s the last step of creating your sIFR headlines, but it’s an important one. Look in the readme.txt file or the wiki for the basics and yesterday, I wrote a blog post with little things I found as I worked on a couple sites (I will try to add those to the wiki today — someone else was editing the page when I tried to get in yesterday. :)) Here’s a link to my blog post:
http://www.communitymx.com/blog/index.cfm?newsid=408
Stephanie, I have been using 100% width in the decoy styles. I believe this was mentioned in one of the previous releases (maybe on the RC1 post?).
I’ve been having the same problems as Steph. I just took an .htm page to .php and once I did that the fonts in my h1 tags that are dynamically generated are showing up at least half the size on IE/Opera/Safari/Mac. On Firefox/Mac it’s normal and on IE/XP it’s good. Seems to me once I added this code to my .css for the h1 tag:
padding: 6px 0 0;
It eliminated the sizing issue but obviously adding padding I don’t want! So I made the padding 2px but that made the font smaller. Ugh! What’s the fix?
OK… as of today (thanks to a suggestion Mark had), mine is fixed. (I couldn’t get the 99-100% width to work.) I swear I’ll add this to the wiki over the weekend but I’m just finishing up a deadline. :P
I found that in my regular CSS, I had line-height, written in percentages. In my decoy styles, I didnt’ seem to need line-height added to my decoy (I was doing my them in FFox) so I wrote no value in to overwrite my earlier regular CSS selectors. Remember we use pixels for font-size in the decoy for exactness? Well, you’ve got to do the same thing with your line-height. I put a background color behind my replacement and found that Safari and Firefox have very different ideas about line height. (Which, of course I knew…. just hadn’t thought of it in this context. Think of zeroing padding and margin on everything because of browser default differences — this is no different.)
After adding line-height IN PIXELS into all my decoy styles, my sIFR headlines are more tuned than they’ve ever been. Yay!
The moral of the story is — if you’ve written any font-size, line-height or letter-spacing in your normal CSS selectors, you really need to declare those same values in your decoy styles to get cross-browser consistency.
Yea, I started playing with some of the ideas right after I made that post but making the switch entirely to pixels worked great! I can finally breathe a little bit easier and get on with the rest of my projects.
One interesting note was that everything was fine until we added the .php code then anything dynamically generated was small and anything not dynamic was fine.
So now I can finally take a breather from this project…….
At least for the next ten minutes……
I have just started playing with sIFR, and have got my fonts working etc.
Is it possible to place a sIFR font character in a span/div and have it draggable (by dynamic HTML)? I need this because I want to use special fonts we’ve made with icon type characters (animals etc) as draggable characters in a web page game.
Any advice, or simple example would be much appreciated.
Rob, it might be easier to do that with plain images. Otherwise the principle of dragging is the same.
Thanks Mark. I didn’t mention that I want to be able to dynamically re-size (sort of OK with images, although edges get ragged) and re-color the icons. We have about 170 different icons (as symbol fonts) and need each in the standard colors (red/blue/green/black/yellow etc) so the number of combinations gets a bit silly. We have used WEFT (MS embeddable eot files) to date, but the whole sIFR approach seems to offer a much better cross browser mechanism.
I’ve had some trouble to date to get the dragging to work. Not sure if I’d got the coding wrong, or was facing an impossibility. Will try again, but any actual working example much appreciated.
Selecting and dragging Flash movies will be tricky. As for the resizing, we have some interesting developments in the upcoming release which can help you with that.
For some reason, this doesn’t work with permalinks in WordPress :-?
Sorry for the double-post, but I also noticed that the bottom of the text is sometimes getting cut off, and the text is different sizes in different places for the same tag, in this instance the h2 tag.
Joey…. I had a font that was getting cut off… is it a script-type font? Anyway, I used the offset property and fixed it that way. Do you have a URL?
Stephanie, thanks a lot. I found the offset and that fixed it. I’m still having a problem with it not showing up with permalinks in WP, though. My URL can be reached by clicking my name.
Joey, what do you mean by it not showing up with permalinks?
Joey… as to the text being different sizes, I just added to the wiki page on “how to use” — in the section about tuning. Just some tips I’ve found by trial and error that may help you with sizing issues:
http://wiki.novemberborn.net/sifr/show/How+to+use
All, I am a Firefox user and one of the most appreciated plugins is the Flash stopper: instead of the animation itself a button shows. This is great to avoid the annoying shouting ads. However, with this plugin, you can imagine how your example page looks like …. Perhaps there is the possibility to pre-check if the user has anti-flash installed?
Paul… see post 286 — It seems that on the 24th, the FlashBlock team released an update – version 1.3.0.1 that is reported to have fixed the doubling-up issue. You may want to test the upgrade. :)
Okay RC4 is out, so I suggest we continue our discussion there.
(I’ve also posted my reply to Paul there…)
Mark, I may be using a term that refers to something you’re familiar with, but is dubbed differently in the WordPress community. Permalinks is the function in WP that changes links like “http://speakbold.com/index.php?p=140” to more search engine friendly links like “http://speakbold.com/deep-city/” by using .htaccess uri rewriting. When I have the rewriting function on, and when I go to any page via a permalink instead of the true address, the flash files don’t show up.
I hope that makes sense. Thanks.
Joey, the cruft-free link you gave above does not work. As for sIFR itself, it’s not dependant on the URI, it depends on whether it’s included in the page or not… so I assume there is a template conflict somewhere.
Hey Mike. Sorry, that address was just an example. Here’s a real one:
http://speakbold.com/archives/2005/02/25/140/
Thanks.
Joey,
The problem is that your SWFs are here:
http://speakbold.com/wp-content/text-replace/dirtyheadline.swf
but your archive pages are looking for them here:
http://speakbold.com/archives/2005/02/25/140/wp-content/text-replace/dirtyheadline.sw
Try using a root relative link in the replaceElement function:
sIFR.replaceElement(“h2”, “/wp-content/text-replace/dirtyheadline.swf”….
Hey, Danilo. That fixed it. Thank you very much for your help. :)
I’m wondering if, given what Todd Dominey has to say about Flash, sIFR might not be headed toward deprecation before it’s fully embraced. On that note, is there a way to anti-alias text dynamically generated in SVG files? Please note that I’m pretty much talking out of my ass on that, having only cursorily, and quite accidentally, come across SVG files lately. When I see “SVG” I think vector graphics, then Illustrator, then anti-aliasing. Is there any room for innovation there?
(Editor’s Note: sIFR has been headed for deprecation since the day we released it… by design actually. It’s hard to think that browsers won’t eventually support truly rich typography. It’s just a stop-gap until there is something better. As for SVG, not sure about that.)
Daniel, the way I understand Todd’s article now is that the popups are caused by Flash? If so, Macromedia/browser devs better fix that! As for the (ab)use of flash for advertising, well, too bad. If you don’t like Flash, don’t install it. I suppose that some day it could be possible that Flash penetration is so low that nobody will take the effort to use sIFR anymore, but I don’t think it’ll be anytime soon – or ever, for that matter.
But we’ll see. Interesting times ahead :)
I just noticed something interesting tonight. I have a new site I’m developing using sIFR to replace the h# tags and I also am using YoungPup’s slideout/transmenus as well. I was just looking at my sample page in IE/XP and when I see the menu slide out it goes underneath the sIFR so it’s like the menu is partially hidden by the text and the white background from the .swf. Doesn’t seem to happen in Firefox or IE/Mac. So is there a workaround to this?
Adam… have you downloaded version 4 yet? I would do that and then set the background of the sIFR to transparent… Flash will take over the stage as if it’s a z index above everything else unless you change the WMODE… I wrote a free article on that at CMX if you want to check it out, but I’d guess that will handle it.
http://www.communitymx.com/content/article.cfm?cid=E5141
I think wmode:opaque is a little less processor intensive and will let you stack elements over the sIFR.
You’re absolutely correct Alexis… Opaque will do the same thing and is less processor intensive… I even said that in my article… I just got home from playing Beach Volleyball games and must admit the brain is not on web developement. Haha!
(Editor’s Note: Jealous.)
I’ve been messing around with the “dont_customise.as” file and noticed that you’ve applied a 100% alpha treatment to the textfiled and was wondering if you could consider adding another attribute to affect this value allowing the use of semi-transparent swf files.
This would be a great feature for a future release.
Marschant.
Uh-oh, Your beautiful web page is displaying rather oddly in Firefox 1.7.5
Comments are all displaying off-screen to the left about 2 em’s or so.
Finally got around to upgrading to rc3.
Had problems with green backgrounds until I added this line from rc2
into the rc3 code base:
if(nPaddingLeft == null){ nPaddingLeft = 0 };
if(sBgColor == “transparent” && sWmode == null){ sWmode = “transparent” };
Lou, it’s a pity that Mike hasn’t updated this page yet.. cause we are at RC4 already! But, to answer your questions:
Background transparency is controlled via sWmode now. The background color you specify is the fallback color for browsers which don’t support transparency.
As for those warnings, I think the error level in Mozilla is set a bit too high. I’ll try to get it out anyway, though :)
Hello
I was using RC3 and just updated to RC4 and i still got the same problem: When browsing the site with firefox 1.0 with the adblock extension ON, I’ve got the flash files detected. Annoying. Any solution ?
See it there
If you need some more info just let me know, just let me know:
info at 55 thinking dot com
Thanks by advance
Franck, just disable the Obj-Tabs. We can’t, nor want, to detect AdBlock.
Does anyone have experience with nesting sIFR objects? I’m building a navigation system using unordered lists and running into a problem with the nested links not being clickable.
Could stacking be a fix?
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.
Using Flash For Web Typography
I recently came across what could be one of the best new uses of Flash that I’ve seen. It’s been dubbed sIFR (scalable Inman Flash Replacement), and it opens up the possibility of using any font at any size on…
sIFR installation is a breeze
I installed sIFR 2.0 RC 3 this morning on my weblog. I have Flash MX 2004 Professional, so creation of…
design
the current design doesn’t use much hackery. here’s all the fun stuff:
http://www.att.com home page redux
The AT&T home page adopted a brandy-new look this weekend. It’s still valid XHTML/CSS, just as before. This time around we’ve revisited the print media style plus added handheld media style. (Finally, I can view the page on my…
Six Apart rediseña
El sitio de “Six Apart” la compañía responsable de MovableType ha sido rediseñado por Mule Design Studio y ahora presenta una imágen mucho más seria y corporatìva sobre todo si lo comparan lado a l…
sIFR installation is a breeze
You need to have a copy of Flash, but the process is dead simple.
sIFR
I don’t fully (read: at all) understand the underlying technology, but given my interest in good design, I can’t help but feel that sIFR (Scalable Inman Flash Replacement) represents a big step forward for the online experience by offering an
Cleaning TypeKey With Some Ajax
I couldn’t help but notice a bit of a delay in loading this site’s entry pages … like this one. Go ahead, reload this page and keep your eye on the “Post a comment” part (or even the sidebar,…
SEFFS: Flash on XHTML
Claus Wahlers has released SEFFS, it’s a method to deploy Flash sites on top of XHTML in an unobtrusive way.I will give it a try, I have test sIFR too. It has a similar approach to SEFFS….
Membuat sIFR Font SWF dengan JSFL
Buat kalian yang suka bloging pasti tahu sIFR (scalable Inman Flash Replacement) atau waktu versi awalnya dikenal dengan IFR (Inman Flash Replacement) yang dibuat oleh Shaun Inman dan kini sudah direvisi oleh Mike Davidson. Fungsi sIFR adalah menampilk…
Die Typo Freiheit mit Flash
Aus Internet World: Mike Davidson: sIFR 2.0 RC 3 is Here…
[…] sIFR […]
[…] of a modern and attractive website using semantic HTML. It reminds me I should take a look at sIFR again. (6) PreviousPost […]