sIFR 2.0 RC4 is Here
UPDATE: Version 2.0 is now available. See article here.
Introducing sIFR 2.0 Release Candidate 4! RC4, you say? Why so many release candidates? Don’t you guys beta test?
Well, yes, we do… vigorously. But the truth is that RC1 should have still been a beta, but we had no idea how many improvements we could still make. The good news is that with RC4, we really don’t have any outstanding issues that we know of anymore. sIFR even works in Konqueror now! Hot damn!
So anyway, here is a list of what’s improved in RC4:
- Ability to roll sIFR headlines back to plain text dynamically, or turn them off or on persistently via cookies
- Better support for fringe browsers like Konqueror
- Improved transparency support for Mac browsers
- Squashage of various minor bugs affecting tiny percentages of the population
- Multiple speed improvements
- Mac IE support is now turned off by default. Although sIFR works fine with Mac IE in most situations, we figured since no one tests in that browser anymore and it accounts for such a small percentage of the population, we might as well save people the worry of having to test in it. It is possible to turn sIFR on for Mac IE if you’d like, however.
I may be forgetting a few minor things, but I think that’s about it. Many thanks to Mark Wubben, whose javascript expertise is responsible for almost all of RC4’s improvements. If anyone ever needs javascript or DOM work done, I highly recommend contacting Mark. His skills are second-to-none.
I also want to point everyone in the direction of the new sIFR Wiki. It is only in its beginning stages right now, but feel free to consult it for documentation, tips, tricks, and other sIFR-related goodness. If you are using sIFR on your site, also feel free to add yourself to the list of examples.
Big ups also to Danilo Celic who has created a fabulous Dreamweaver extension which can automatically export your sIFR-ized swfs for you. Danilo also has a nice video presentation showing how to use sIFR that you might want to check out if you haven’t already.
Here are the details about upgrading from previous sIFR versions:
- Once again, we’ve constructed this upgrade so that you don’t need to re-export your swfs. As long as you were using RC2 or higher, your existing swfs will work just fine. There are no changes to the swf code in RC2, RC3, or RC4. There are no changes to alignment or sizing that you need to worry about either.
- In most cases, a simple swapping in of the new sifr.js file is all that is necessary to complete the upgrade. There is, however, one important thing to check. In your replacement calls, you must now use the “if” statement —
if(typeof sIFR == "function")— to wrap your replacement calls. In previous versions, we used this and some other methods, but this one is the mandatory wrapper now. - The “named arguments” method of writing your function calls is now the preferred method we suggest. The old method of writing out your function calls in a prescribed order is still fully compatible, but the newer method (first introduced in RC3) is just easier so we recommend it.
- If you’d like to use the cookieing/enabling/disabling/removing functionality, we’ve included these functions in a separate javascript file called “sifr-addons.js”. A potential use for this sort of functionality would be if your visitors are so curmudgeonly as to complain about nice-looking headlines, you can provide them a link to disable the Flash headlines persistently.
We’ve aimed to make this upgrade as easy as possible for everyone to complete. In most cases, it can be accomplished site-wide with just a few clicks. If you run a really high-profile site, perhaps wait a few days for the first comments to come in (just to make sure we haven’t missed anything), but otherwise, it should be safe to roll with. Happy sIFRing!
And by the way, if anyone’s going to SXSW, Shaun Inman and I will be doing a “Typography for The Screen” panel on Tuesday at 10am in which we’ll cover IFR, sIFR, and other issues related to the state of typography on the web today… and how it can be improved.
Great work…sIFR is truly awesome.
One request: Can you make triple-clicking a line of text highlight the entire thing? Firefox highlights the entire line on triple-click, and IE highlights the entire paragraph.
ditto on the ‘Nice work’. It’s to bad i’ll only be at SXSW on saturday, sunday and monday. Hopefully you two will toss up some notes and stuff online for the rest of us =)
Thanks for teh plug Mike. Actually, it isn’t a DW extnesion, its a script for working with Flash MX 2004. For those interested, it can be found here: Automating sIFR Font SWF Creation With Flash MX 2004 and JSFL.
The Dreamweaver+Flash combo extension extension may come later if I can get around some Mac issues.
I’m excited to begin playing around with the new verions. Keep coding up a storm guys!
This is awesome. I was just about to upgrade all the sites I’ve built with RC3 and wondering how long it would be before the next version was released. You’ve saved me some trouble.
Thanks for an amazing bit of coding guys. This truely is a fantastic step in bringing better typography to the web. I’m truely in awe of your skills and ideas.
Coolness!! Only one thing that I miss in the latest release is that you can highlight multiple blocks of texts in flash headers. RC3 solved that and it somehow it came back.
Cant wait for the final release…
I agree with Mike. I’ve loved using this tool. I just spent some happy time converting a bunch of fonts to sIFR this evening. I’m especially stoked to use some crazy dingbats or dropcaps on a project — just waiting for the right one to come along.
I’m having a problem, tho. I use backgrounds a lot and want to use sWmode, but I’m having problems with it not working. I downloaded RC4 tonight, and updated the syntax in the script call in the footer, but I’m not getting any transparency. Any ideas? Here’s the string I’m using in the footer script (hopefully it posts):
sIFR.replaceElement(named({sSelector:”h1″, sFlashSrc:”scripts/din-medium.swf”, sColor:”#003540″, sLinkColor:”#003540″, sHoverColor:”#003540″, sBgColor:”#FFFFFF”, nPadding : “0,0,20,0”, sCase:”upper”, sWmode:”transparent”}));
Also couldn’t seem to get nPaddingBottom to work either, so I reverted to the older way of writing it. Thanks in advance!
Paul v S.: What exactly do you mean?
Mike: What i mean is that when you have several sIFR headers and you highlight text in one header it keeps highlighted when you highlight a different sIFR header.
(Editor’s Note: I believe it’s always been like this. Flash movies are independent of each other and so they will always act that way.)
Aww… I’m terribly sorry for the problems with the new RC… it seems to be the curse of sIFR: each release suddenly has bugs! Anyway, I’m at school right now, but when I get back I’ll dive straight into the code and get it fixed.
There’s also some new stuff in the wiki which I still need to link to from the front page, but since you can’t download RC4 anymore that’s not much of a problem :)
This is a nifty piece of coding and many thanks to all involved.
However, I’ve got one small irritation. When I view my page without and stylesheet, I get the replaced text AND the original text (i.e.two headers). Can the flash replacement be stopped when no stylesheet is used?
(Editor’s Note: Nope. Thankfully Flash on, JS on, and CSS off is an extremely rare scenario… probably one you’ll never run across.)
Nice to see you’re improving it and even nicer is we can use it : ).
However, on my wish list, among other things is improved support for em-sized text in IE, since i want to enable user controlled text sizing via browser’s native controls. The trouble is FF and Opera size text correctly, but IE is making it a few percentages larger. When i size with pixels everything is OK, but that is not an option at this point. Do you have any suggestion?
sIFR in IE 5.2.3 (Mac) loads movie for the first replaced element and then hangs with a script error, but this is maybe because of UTF-8 entities which are replacing Croatian characters—č, ć, đ, š and ž.
(Editor’s Note: sIFR relies on pixels so unfortunately ’em’ sizing could never been reliable enough to use. Apologies.)
I use thenoodleincident.com ems text sizing in many of my sites and have found that ems work pretty well with sIFR.
a bis set up of styles would be
body {
font-size: 76%;
/* font sizing in ems. 60%, 69%, and 76% are appropriate smaller sizes */
}
h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }
p {font-size: 1.0em;}
Pfew, I made it back home just in time… the fixed version is on it’s way to Mike, who is leaving his building in like 15 minutes when he goes to the other side of his continent. Perfect timing, right?!
Anyway, on to your questions. Brian, we can’t detect this. And actually, how many people will disable CSS when they are browsing a page?
In reply to Paul Visser, who left a comment in the RC3 thread: I’ve made a user script for Greasemonkey which you can use to disable sIFR. Unfortuantely it’s not a very good idea to detect Flash blockers, as they prefer to stay undetected.
That’s it for now, I’m going to update the wiki with content for this release. And I just heard that Mike has made the download available again. Rock on.
Alright, fixed a quick compression problem… sorry about that. Release is now live and safe to test. New file uploaded at 8:15am Pacific, Monday Feb. 28, 2005.
I’ve got it installed on http://www.i-marco.nl/weblog/ but there seems to be a problem. When I use the link to NOT use sIFR it works for the frontpage but on all other pages sIFR happily kicks in again. I don’t suppose one has to disable it per-page right? I assumed it to be a site-wide setting. Doesn’t work as such!
Marco, that’s because you aren’t loading the add-ons in individual archive pages… you might also want to call the rollback function when somebody sets his preference to no.
Mark d’oh… you’re right. Stupid me ;)
I’ll fix it tonight!
This is very sweet. You guys manage to outdo yourselves with each release!
Okay, I’ve just updated the wiki. Also check out the sIFR forum hosted by TextDrive.
Something in the code seems to be triggering my ad filter (Proxomitron with JD2000). That’s certainly unwelcome behaviour. This wasn’t a problem a few releases ago – the headlines on this page and Design by Fire for example work flawless.
Any idea if this is something that could be fixed on your side, or how I could help this myself without rendering the filter useless? I’ve tried to look into it myself, but in vain. Help very much appreciated :)
(Editor’s Note: Uhhhh. That’s weird. Never even heard of that adfilter. Will have to investigate.)
Congrats and thanks to everyone involved (Mike, Shaun, Mark, anyone I missed?) for the sure and steady progress. Even if there’s an RC5, no big. The attention paid to subtle details has clearly made all the difference. Keep it up!
Okay, I’m having a weird problem, and yes, I am a newbie :)
I upgraded to RC4 (it had previously worked under RC3) and it has broken my template under IE6, in that it has “squeezed” the middle column of three.
I’ve set the width of the sIFR headlines to under 100%, which fixed a similar problem in RC3. Please help!!
Here is my page:
http://jamesandannie.cyberflunk.com/
Hi Guys,
Works great for me! :-)
The add-ons are very welcome…
Thanks,
Steven
Okay I just noticed that the wiki was down… so while dodging evil chemistry teachers I managed to login to my webserver and boot it up again… enjoy!
James, I’m not sure what you mean (nor can I, technically speaking, think of anything which could cause something like this). Your page is awfully slow in IE though, you might want to ease down on the sIFR usage a bit :)
Great little app here. Going to start using this on my sites now.
Does sIFR only work on css based tages ie. h1,h2, p etc or can it work on custom tags. I’ve created several tags for buttons and text but can’t get the sIFR to show the font on those custom tags however when I apply the swf to the h1 and/or p tags it works fine. Can someone tell me if its true or not.
Terry, as long as you can get those elements using document.getElementsByTagName you should be fine… it doesn’t handle namespaces though.
Hi Mark,
I use sIFR to replace four headline tags, which I thought was within the realm of reason? I suppose because it’s a blog that cause problems.
Here are some screen caps, if that helps.
http://jamesandannie.cyberflunk.com/images/IE6_screencap_1.jpg
http://jamesandannie.cyberflunk.com/images/IE6_screencap_2.jpg
James, I believe there are 43 sIFR headliens on the link a few comments up… that’s quite a lot, no? :)
But I see the problem now, even thouh I have no idea what is causing it. All I can give you is the advice to play a bit with the CSS… IE oddity i.e. oddity!
Yeah…. much better!!! Works on OmniWeb 5.1 and Safari 1.3 (DP) for Panther!!!!
I really love sIFR but I’d love to see thee huge problem with Mozilla’s AdBlock plugin resolved. Is there any chance it will be resolved at all? And if not, what can one do to prevent those horrible AdBlock tags from appearing? Even falling back to non-sIFR rendering would be much better than this IMHO.
Marco, it’s not up to us to fix those issues. We’ve discussed this with the AdBlock crew and they told us that the new version won’t have Object-Tabs enabled by default. And that’s basically the only problem there is with it: Object-Tabs on Flash movies. If you disable those, you’re fine.
Now, if you still don’t like sIFR, you can use the Greasemonkey user scripts which you can find in the wiki to disable it.
Thanks for the info Mark!
My Creative Director could give you a kiss! Will / Startum.net
What is the best way to set the width of the swf?
I’m using a sIFR header in an iframe, and it defaults to about 110% width, causing an ugly horizontal scroll.
Where have I went wrong?
I wasn’t even aware that the new build of sIFR was out! Just downloaded it and I’ll take care of the wMode stuff later. Thanks all.
Looks neat. Seems to be much better, in certain areas, than previous versions. I’ve used sIFR since RC1, because that’s when I found out about it and it makes life so much easier.
Thank You, Mike! ;)
Commenting mailing to subscribe. New version of sIFR looks good; can’t wait to give it a spin.
hi there!
first of all, thx for the new release (especially the rollback()-function which is really useful for clientside styleswitcher and so on.. very nice :) )..
but i also have a problem with the new release.. in ie 5.0 (win), the headlines are no longer replaced.. (they are turned off but no flash-replacement happens – so the space where the headline should appear is empty). it’s with the standalone version of ie 5.0 (article and downloads under http://www.skyzyx.com/archives/000094.php).
the same behaviour also with the official example page – so it doesn’t seem to be a problem with the code on my page..
when i switch back to rc 3, everything works fine..
anyone having similiar problems with ie 5.0?
Argh :) It seems to work with the source-code versions, so it has to be wrong somewhere in the compressed versions. Thing is, I don’t think I recompressed the IE5.0 specific code for this release… I’ll have a look!
I noticed this as well. Is there something I missed in the upgrade process? The only site I upgraded aslo uses suckerfish drop downs so not sure if that has anything to do with it. I’d post a link but I had to revert to RC3 in the meantime.
Alexis, no… I’m seeing this in my test install, so it’s really sIFR RC4 specific.
For christ’s sake, will someone just tell me how to set a static WIDTH?
(Editor’s Note: For christ’s sake, sIFR doesn’t use static widths or heights. Set a static width for whatever surrounds sIFR elements and that will be your width.)
Nick, perhaps it is not width you need to set. Perhaps you are not properly tuned? Have you read the readme.txt and the wiki for instructions? :)
I really really don’t want this to come accross as sour grapes (or whatever the term is), but I have a question: Is there any way to include a more basic example in the zip file you send out? I’m looking at this and I’m totally overwhelmed. I really don’t mean for this to come off as rude, but is there, perhaps, a user out there who has constructed a simple example? If not, I’m planning on working with this tomorrow, and I think I’ll try and give it a shot. I watched that video presentation and thought he made it look so easy, and then I read the readme and felt very stupid. I’m not really too smart, though, so it could just be that.
Ya, I’m having a major transparency issue as well – it won’t work. I’m getting that infamous green background. I haven’t been able to get the transparent background to work since v.1… unfortunately I’ve updated the site and I don’t have the original script on hand.
Anybody know why it doesn’t work? I’m 99% sure I have it set up properly.
Adam: What version of the Flash plugin are you using? What version of Flash to export the sIFR font file?
Adam (not M.), to add a question to Adam M.’s: what browser version are you using?
Trevor, the readme isn’t entirely up to date (sorry!). Have a look in the wiki, there’s a lot more info there.
I’m having trouble getting my text to be lowercase. Here is my sFlashVars in my javascript:
sFlashVars:”offsetTop=5&sCase=lower”
Any help would be awesome!
Nathan, please check the documentation: How to Use again.
Hey Mark,
Thanks for your reply.
I’m pretty sure I’m doing everything correctly. The offsetTop param works like a charm but sCase does not. Also, I’m not using any special characters.
Any ideas?
Nick,
You can adjust the width and height by using negative values in the paddingtop and paddingright properties.
I’m working on a version of sifr that allows you to enable or disable dynamic resizing. If you disable it you can set your width and height. I also have a version of sifr that reads normal html tags like so:
<flashtags description=”Left Sidebar Navigational H2 headers” selector=”td#sidebar-left>div>h2.title” src=”sifr/andalus.swf” color=”#000000″ bgcolor=”#EE00EE” flashvars=”offsettop=0″ paddingbottom=”-10″ wmode=”transparent”/>
So you don’t have to get into javascript.
Nathan, sCase is not one of the flash vars.
sFlashVars:”offsetTop=5″, sCase: “lower”
booga, it could indeed be an idea to allow people to set an exact width and height. I’ll discuss it with Mike.
but i also have a problem with the new release.. in ie 5.0 (win), the headlines are no longer replaced.. (they are turned off but no flash-replacement happens – so the space where the headline should appear is empty).
Confirming the IE 5.0 windows issue, where the text is not replaced.
neil, yup. I’ve already fixed this for the next release, which will happen soon if all goes well….
Hello
I was using RC3 and now have upgraded to RC4. Most works like a charm. I have only one annoying issue. The flash files get detected by the Adblock Firefox extension (i am browsing with Firefox 1.0, XP) This happens in both in RC3 and RC4
See the problem here RC3
See the problem here RC4
Any solution for that ?
Oh, you posted here too :) Well, no. We can’t nor want to detect AdBlock. If you turn off Obj-Tabs it will no longer be a problem.
I’m using sIFR for headers now, and they look great on PC. When I check it on mac, though, if they show up at all, it’s in the form of tiny, probably 5-10 pixel text.
Has anyone else experienced this problem?
Hi
After a short testing I came a cross one question.
I added sIFR to my H1-element and noticed some extra padding in bottom of element. I´m pretty newbie with sIFR, so I dont really know is this what it suppose to be? Is it possible to remove that padding?
Screenshot with red border around sIFR-element:
http://koti.mbnet.fi/fonziee/sifr.gif
Nick – Does the example page work for you ? If it does, you are not using sIFR on your site correctly. Quite a few people here use a Mac (including Mike and myself for sure) with great results (sans IE5 of course). A link to your site would help as well.
Hey, new to sIFR also, though it seems great! However, I’m having a problem. Please forgive me if this is a stupid question and i have missed an important document while searching however, when i go to open up the .fla to edit it for the font i’d like use and all, flash comes up with “unexpected file format”. Im using Flash 2004 MX (though i have tried the trial version even form the site to see if something was wrong with mine).
Anyone have any ideas? I’d love to get this going to use it on a ton of work i’ve been pounding at latly. Thanks and great work!
I’ve got a problem with sIFR in my html page. The sIFR text begins to high. Now the line-height is to big. Example: *click*
Hope you understand my problem.
In reply to Dave Hogge, please make sure you aren’t replacing the `a` tag, replace a parent of it instead.
Pieter, interesting. It seems as if there is some space below the `embed`. Play around with the CSS a bit, like making the `embed` inline.
Obviously, I can’t view your decoy styles in action… but my guess is that it’s possible that 22pt font size it too large (comparing it to your 14pt in the normal CSS)… Did you use the tips in the wiki on tuning your fonts? :)
I’ve tried everything. But I just can’t find any solution (changed the styles several times…) Is there anyone who can fix this problem for me? (the files are just stored in an open directory) *click*
It’s so strange.
I obviously have same problem with Pieter. Any tips about fixing this?
With “display: inline” that extra-padding disappears, but then IE makes font a few percentages larger than Opera or FF.
I’m also having the font-size issue with IE and FF… IE displays the font larger than FF, and I am also using display:inline on my containing div (essential if you are floating divs…. otherwise, IE will mess with the margin of floated divs.)
I would certainly like to know if anyone has a fix for this… and hopefully the fix will be within sIFR, and not to hack my page to get sIFR to work properly.
Thanks!
Jay, Janne and Pieter, all I can say is play around with the CSS. If you follow the tips in the How To Use in the Wiki you’ll get a long way. Any other browser inconsitencies will require CSS hacks.
Unfortunately (but it’s the only working solution across all major browsers) the display of the Flash text depends entirely on the dimensions of the elements you want to replace. Therefore you really need to tweak it.
link to wiki, please?
As it says on this page: sIFR Wiki.
I think you guys are running into a combination of tuning problems and, in Pieter’s case, perhaps the fact that sIFR was created to replace headings, not inline text, might affect the reason it’s taking up more space. Might that have an affect Mark?
So you have to use the display: inline to overcome the first problem, but then you MUST tune it to overcome the size differences. Did you guys use the tips in the wiki? (putting the class on the HTML element so you can actually SEE the replacement CSS and then turning javascript off and on) These are very important and you likely won’t see consistent sizes until you do them.
Stephanie, well, replacing the inline content of an inline element by a block level element will probably have it’s effects on the positioning of the whole thing.
They only way I have found to use SIFR in an inline manner is to use all caps. I mean if you think about it, you are trying to place a block element (displayed inline ) on the same baseline as your p text. In order for the flash to show small letters such as g, it has to put the bottom of the stem at the bottom of block (which is what you are seeing). With All caps you can tune the font to be pushed to the bottom of the flash element.
I think a good feature to add is the option to enable/disable font scaling. Complimentary features to this would be:
* can specify font size
* can specify static width
* can specify static height
Then if we have weird issues we can just enter values manually rather than tweaking the css.
I tried to use sIFR with a 7px font,
but it always shows me the headlines in a font-size larger than 10px.
is this problem known?
or can anyone send me a working demo with 7px?
know that is pretty much but I can’t find a way out of this..
thank you
markus
Hello,
Im sorry if come off sounding dumb, but what exacly is sifR?
I figured it has something to do with flash and maybe text?
For some reason, I find that certain times when I code to implement sIFR, it just doesn’t end up rendering out correctly. Can’t seem to figure out where things go awry — I double-check my code very closely.
http://dp.gregkaufman.com/sifr/
thoughts?
Hey Anonymous,
You might be interested in the code we wrote for people to disable sIFR in their browsers. You can find it in the wiki.
Thanks,
Greg, your javascript at the bottom of the page is pointing to the wrong place. /pompeia.swf, when it should be /sifr/pompeia.swf
Well, since I read the article, skimmed through the comments (Who’s got the time to read 80 comments before breakfast, honestly? :p) and didn’t see a link posted to it already, here’s the site for “Automating sIFR Font SWF Creation With Flash MX 2004 and JSFL“. Keep on sIFR-ing your heart’s out, folks. :)
When replacing an element with a link inside it, the linked part appears a different color, as expected, but the whole element behaves as a link and changes color on hover. Is this normal? Is there a way to have only the part which originally was a link remain a link?
Kemie, I believe that’s because, in the sIFR scenario, it’s not possible to create links inline: it has to be done by using the whole text box.
But then, I’m but the JavaScript guy. Let’s hear what Mike has to say :)
I’ve partially solved the problem. If I remove the hover color, then it all behaves as expected. Only the original link is linked and in a different color. It would be very nice to have a hover color on the link, though.
(Editor’s Note: A built-in limitation of sIFR is that if you use a hovercolor, the whole text block is treated as a link. Nothing we can do about that until we switch to Flash 7 compatibility as a baseline.)
Hi Guys,
I’m using sifr for dynamic photo annotation on my site http://www.photopiaimages.com and I was just wondering if you could check out a problem I’m having.
It’s fine in IE6, but in Firefox 1.0 and Netscape 7, the sifr text doesn’t appear where it should UNTIL you hover over a link, then it snaps into place.
I’m sure it must be simple and one of you CSS gurus will spot it in a flash (no pun intended!) – I know I have lot to learn in CSS.
Great efforts though.
Paul
Hey Paul. It seems that every time something behaves odd in Mozilla when you mouseover a link, it has to do with floats. In your case, if you add clear:both; to #vcaption it seems to fix the problem (at least, while doing that using DOM Inspector).
Nice site, by the way.
I’ve noticed that on some web pages (such as the recently redesigned movabletype.org) the browser text will show up first, then the sIFR text will snap in to replace it. On others, there will be nothing but a blank spot until the sIFR text shows up.
I’d rather have browser text followed by sIFR text, since the sIFR can take quite awhile to show up over slower connections. Try as I might, however, I can’t manage to reproduce this effect consistently. Can anyone tell me how it’s achieved?
Adam, there’s a CSS rule you can use to change the visiblity of elements you want to replace. If you remove it, the text will be visible until sIFR kicks in.
Come to think of it, it might be possible to change the CSS on the elements sIFR is about to replace just before it actually replaces them. I’m not sure if the browsers will redraw fast enough, but if they do, that’d be the ultimate solution. I’ll give it a shot.
Sounds very cool, Mark. If it works, I’d like to propose the name “progressive sIFR.” :-)
Mike, just wanted to know if i can use sIFR on my site which is commercial ?
Mark
Thanks for the super quick reply. I’ve tried your solution but can’t seem to get it to work so changed the CSS back again but thanks for the heads up on where the problem might be (mozilla + floats = problem!)
I’ll poke around in the CSS some more now I know it’s not a sIFR issue.
Thanks again,
Paul
creeptext, sIFR is licensed under CC GNU-LGPL, which means you can.
Thanks dude >(o:
I just started upgrading to RC 4 on some of our newer site and I can’t for the life of me figure out what’s happening.
I have an H2 in a div with the id of “title” I have the css and the two js calls in my header and the replacement in the footer for “H2″
sIFR.replaceElement(named({sSelector:”h2″, sFlashSrc:”sifr/trajan.swf”, sColor:”#032E0E”, sLinkColor:”#032E0E”, sBgColor:”#FFFFFF”, sHoverColor:”#032E0E”, nPaddingTop:10, nPaddingBottom:20, sFlashVars:”textalign=center&offsetTop=6″, sCase:”upper”, sWmode:”transparent”}));
What’s making me insane, is that when I test locally it works wonderfully. But once I upload it to the server, nothing shows up. I double check the sifr.js file and I do have the asterik in place with no other domains written.
I hope this info helps someone help me figure out what’s going on.
Thanks!
Jeph
Jeph, are you sure the path to the Flash is correct online?
Jeph could you post a link? This goes for anyone requesting help, a link should always be provided.
Mark, it is and was. I am using header and footer includes. And while the header was pulling everything in with /sifr/… the footer /sifr/trajan.swf wasn’t working. So I changed it to the full path and still nothing.
So I grabbed the footer html and replaced the include call so that the footer was now in the main html document and it worked!
I’m not sure what the different is, but it would be nice if I could get it to work via the include as it makes maintaining things much easier.
Any for Alexis: http://projects.newtarget.net/salesu/internal.php
Jeph, in your current post the script is outside the HTML element. If that was the case previously, that probably caused the problem.
Hi there – we’re using sIFR on some of web projects and it’s great!! Thanks for creating it.
I’m trying to figure out the following issue: I want to use sIFR for a few headers on a page and have them all be the same size. Right now, they show in slightly different font sizes (based on their lenghts).
If found one site (http://leigh.rlfans.com/) that seems to have accomplished this, but looking through their code and css, I don’t understand how. Is it just a fluke with the lenghts of the strings (I’m talking about the right-hand column headings)?
I’ve been toying with the idea of either 1) sending the swf a pre-determined maximum font size to use for the each of its replacements or 2) inventing a communication between the swf and the js on the page. I don’t particularly like either of these solutions, but of the 2, the second one seems best since it remains dynamic.
Anyone looking into this or have any suggestsions?
Brian,
I was having the same issues with this. My suggested solution was mentioned in Comment 76. But I’ll post it hear again because people are lazy.
I think a good feature to add is the option to enable/disable font scaling. Complimentary features to this would be:
* can specify font size
* can specify static width of the flash embed/object
* can specify static height of the flash embed/object
Then if we have weird issues we can just enter values manually rather than tweaking the css.
Brian and Booga: The reason that you’re having sizing issues is probably a combination of two things —
1. Your fonts aren’t tuned correctly.
2. You’ve set the display property of your replaced element to display:inline .
Setting the display property to inline is the only reason two one-lined pieces of text would be sized differently.
With regards to the requests to staticly set widths, heights, and font sizes, this goes against the very nature of how sIFR works, so it is not possible. Actually, width could be possible, but that’s it. Width doesn’t need to be set though as long as you don’t set the display to inline… and the only reason you’d ever want to set the display inline would be to have a flexible width. :)
Is tuning fonts like tuning a guitar? I know how to do that…
Seriously though, what do you mean by #1?
Thanks!
(Editor’s Note: It’s in the readme.txt file that comes with sIFR)
Hi Mike,
The css that I use on my site is not inline. I’d like to know what you mean about tuning as well.
Even if we do use css inline I still think it would be nice to be able to set the static width, height and font size. I have a very complex style sheet that being able to set these options would save me a lot of time and frustration. I’ve spent at least a week working on getting this fixed on my site and still haven’t got it just right.
(Editor’s Note: Okay, well it definitely seems like a font-tuning thing then. All of the information about font-tuning is contained in the readme.txt file. I’m surprised it works at all without this step. As for the static requests, again, the very thing that makes sIFR work is the non-staticness of it. If you specify a static font size or static height, sIFR can’t do its thing. Perhaps read the original article to find out exactly how sIFR works. Also, if you post a URL, it would be easier to see what the problem is.)
OK… tuning. It’s a given. It’s the hardest part — it’s also the most important. You can see several bits of info. Like Mike mentioned above — the readme.txt has info. My blog has info: http://communitymx.com/blog/index.cfm?newsid=408&blogger=15
And the wiki has info:
http://wiki.novemberborn.net/sifr/show/How+to+use (likely that’s a lot of the same thing that’s in my blog)… anyway, once you get the hang of this part, it’s not bad at all. You’ve just got to play with it a bit. :)
OK – I big RTFMB @ Me. I read through the readme.txt and the also Stephanie’s Blog (thanks!) and I understand more what is going on.
Mike, I don’t really understand why you say that fixing fonts, widths, etc… is bad. For me, the most attractive feature of sIFR is being able to replace browser fonts. I don’t really care that much about the perfect-fit sizing aspect of it. I’d be happier if I could just force the size and have all my header text be the same size, w/o having to hand tune each one.
Am I missing something here?
Brian, you may have more success using IFR for fixed size text. Obviously the big advancement with sIFR was the scalability factor. Shaun may be the better person to chime in here since I am not sure how IFR has progressed as of late. All I can say is that if you tune your fonts, getting consistent font size is possible with sIFR. There is an obvious learning curve with all CSS, but its worth it in the end. Here is a post about IFR on Shaun sites. You may have to dig some more to see if this is something you want to explore.
http://www.shauninman.com/mentary/past/ifr_revisited_and_revised.php
Brian: The best explanation for how sIFR works is in the original article. What happens is that the page loads and sIFR measures the height and width that your headline takes up. Then, it replaces that entire area with a Flash movie. Then, it renders your text in 6pt font and scales it up until it fits snugly in the box. If you specified a fixed size, the font would almost always be either too small for the box or too big for the box. The key here is that the box size is necessarily determined before any Flash font considerations are taken so the font size is at the mercy of the box size. Obviously we’d prefer that users be able to specify a static font size but unless you use javascript to manually send commands from Flash to the DOM to resize the element after the font has been rendered (very bad), you can’t achieve that. Make sense?
As for the static width, it’s a block level element in most cases so its width is already the full width of the space you’re trying to fill. Not really necessary to change this.
On tuning:
Yes, it’s a big pain sometimes. I’ve found that it can be made less so by choosing a fallback font with a character width relatively similar to your sIFR font.
For example, for my current weblog redesign project I’m using a free font called Day Roman via sIFR. My fallback font has been Georgia, but Day Roman is so much narrower that I’m having to really squeeze Georgia to make this work. This also makes Mark’s suggestion — to make the “dummy” styles visible if you want to show visitors something before sIFR kicks in — produce a less-than-attractive result.
I’m going to try solving the problem by switching my fallback font to Times New Roman. Georgia is really too heavy for what I want anyway, and TNR is closer in width to Day Roman (less tuning).
Mike said:
I recently found out that allowing headers to remain block elements can hurt you in some scenarios.
Say you have a page with a sidebar and that you’ve used a background graphic to give that sidebar a different color. If the layout of your divs doesn’t exactly match up with the width of your two “columns” (not always practical), then the sIFR background will likely overlap onto one column or the other.
In such scenarios, using display: inline fixes things right up.
(Editor’s Note: I’m not exactly sure what you mean by this. A liquid layout maybe? In either case, I don’t recommend using display:inline with sIFR except as a last resort. The only time I’ve needed to use it is when I want to float an element next to sIFR text and have the text wrap to the float.)
I’m trying for an unholy, vertically oriented use of sIFR in this layout:
Click here for unholiness
I hacked the sIFR .fla file and rotated everything -90 degrees so that the text is oriented upwards, but the result is not exactly what I was hoping for. It looks like the text block isn’t resizing to the full dimension of the Flash file. I kicked around in the “dont_customize_me.as” file for a while just trying to scope out how that all worked, but gave up in the hope of a quick fix. The design is supposed to look like this — see where it says “current issue” underneath of the logo. (Notice the intended sIFR-liciousness all over the place…)
It’s possible these shennanigans aren’t supported, but there’s no harm in asking… :) Also, I’m not sure if you guys are taking requests for future releases, but it would be lovely if sIFR could take a rotation parameter that could handle a situation like this.
As always, thanks mucho in advance!
One other quick note for those working with font tuning: I’ve found the most success with making the fonts match up by using a combo of font-size and line-height. The font-size seems to mostly be useful for IE, and the line-height in conjuntion with font-size seems to work great for Mozilla, etc. Also, setting the line-height just slightly higher than the font-size (I use pixels, so it’s generally the font-size + 2px) seems to even everything out nicely. So in your sIFR CSS style it would look like:
.sIFR-hasFlash h1
{
visibility:hidden;
font-size:14px;
line-height:16px;
}
Letter-spacing hasn’t really worked at all for me for whatever reason… Hope that’s helpful to someone.
Holy unholiness, Paul! Vertical shenanigans abound! Ok, here’s the deal: the reason that won’t work is that sIFR text is sized based on browser text. So if you can figure out a way to rotate browser text 90 degrees (could be possible but I’m not aware of any mechanism for it), then you should be able to do what you’d like. But short of that, it’s not possible. The text passage in your design would probably be ok with a standard image though, I imagine.
Hi!
I want to use sIFR to make some text look hand written. However, this doesn’t look very good if you only use one font. Therefore i wonder if it’s possible to combine two or more fonts and switch randomly between them to get a more messy and hand written look – and if it’s possible, how the heck do you do it?
Thanks in advance – Jacob
Adam, gosh, thanks for reminding me of trying to apply the dummy styles just before replacing! I knew I had forgotten something, but I just couldn’t remember :)
No sweat, Mark. :)
Hey Guys.
I experienced the weirdest flash/sifr problem I have ever seen to date. I don’t think It’s entirely a sIFR problem, but it is flash related and I was wondering if you could tell me what your opinion is on the subject.
A client called to say that his site was “broken” -the site currently has 3 sIFR’ed headlines and a flash header (with a flash detect). The flash files load great when the page is loaded and all is well until he clicks the Print icon in the toolbar. Suddenly all flash on the page flips upside down and will not go back to normal. The user is running IE 6.0 and as much as I’d love to say “screw IE” I can’t.
Has anyone come across this? If so, did you come up with a solution. Thanks for the help
Jeph: We actually have heard of this happening but we’re not sure it’s a sIFR issue either. Can you possibly remove all sIFR code and see if it still flips on that guy’s computer? Also, could you have that person go to Browser Hawk’s detection page and send you and I a dump of all the information?
Many thanks.
Kerning!
Is it possible?
If so? How?
If not, when?
Yes Robert, it’s possible. You have to do it in your SWF… then all is well. :)
Stephanie,
How does one kern/track fonts in Flash MX? It looks like I have to switch the font type from Dynamic to Static.
When I do that, the text that appears on my web page is not the text specified in the HTML but is the “Do not remove this text” notice in the .fla or .swf themselves.
Without turning it to Static, the kerning function is not available.
Thanks. :)
You are right Robert… I am wrong. I must have early alzheimers. ;) It was the leading (line height) that we were able to affect in the swf. I don’t believe dynamic Flash text can be kerned.
(And I had your hopes up, eh? Sorry! :))
Hey Mike, thanks for the reply. I can say with almost certantity that this is not a sIFR problem. Ive sent that request to him yesterday so I’m waiting for the response. Altho in the meantime I’ve googled some more and posted on the Macromedia forums and I think I’m heading in the right direction. Someone there mentioned that they have heard of that happening with wmode set to transparent – which I have done.
When we first built the site, the flash was rendered above the flyout (JS Dropdown) menus so that you could not navigate through the site. I tried floating it in a lower div and nothing changed, but when I added the wmode param, the menus showed up again. If only it were as simple as removing that param, but I think you’ll agree that people need the navigation.
I’m looking for an answer – perhaps switching out the JS for one that’s more Flash friendly or something else. But I wanted to give everyone an update. If anyone knows of anything else, please let me know.
Thanks!
Jeph, you could try sWmode:”opaque”.
As I mentioned earlier, I’m incorporating sIFR into a redesign of my weblog. I use WordPress, which lists post comments in an ordered list.
I’d like to have the list ordinals in a large sIFR font, while the comments themselves are in regular browser text. Is this even possible? Could a variant of this method be used?
It’s a little beyond the bounds of this conversation, but if there’s no CSS method of doing what I want, can anyone recommend a way to programmatically increment numbers for each comment with PHP? (this may be a question for the WP support forums)
(Editor’s Note: Is this not built into WordPress? It’s built into MT. There’s an MT tag which spits out the comment number. That’s how I do the big comment numbers on this site. Perhaps there’s a WP plug-in that does it?)
There’s no WP tag that spits out the comment number relative to the current entry, but a comment number (unique within that WP install, I believe) is added to each comment. For example: <li id=”comment-4543″>Blah blah blah blah…<li>
To match that with CSS, I’d have to use an attribute substring selector such as:
Unfortunately, those are CSS3 features that are unsupported in IE. And they still wouldn’t solve the problem of styling (and sIFR-replacing) list ordinals without affecting the list items themselves. This bit of CSS2 would work, but it’s only supported in Opera. Time for a Firefox bug report…
Fortunately, someone on the WP forum suggested a really easy solution using a PHP counter. If only CSS standards were better supported… but we’ve all been down that road, haven’t we?
Adam: Interesting. As a side note, I definitely don’t recommend using sIFR with comment numbering. What if you have like 100 comments on a post? That’s 100 replaces! Too many…
Mike: A good point, but it’s not something I have to worry about at this point. The most comments I’ve ever gotten on a single post is 11. :)
The sIFR numbering is something I’m pursuing “because I can,” but if I ever top 20 or 30 comments on a post I’ll probably get rid of it.
Found a bug. I tried to use text-align: right on a sIFRed h2, and it doesn’t respond to the CSS. If you have the dummy styles set up to be visible, you can see the heading come in on the right and then snap over to the left once sIFR kicks in.
I tried to compensate by floating the heading to the right, but when I do that I lose the ability to have an underline that stretches across the page using border-bottom. It works before I float the heading, but not after. Instead, the border only shows up under the sIFR text itself.
(Editor’s Note: Not a bug. Use the textalign variable in your sIFR function to make this happen. sIFR doesn’t interact directly with any CSS.)
Adam, for the comments loop use this: foreach($comments as $index => $comment){ (the variable names for $comments and $comment might be wrong, it’s just an example). Now $index is the number of the comment.
@Mike:
Doh! That’ll teach me to try something new without re-reading the manual first.
Thanks for your tip/reminder. You helped me solve one of the last problems that was keeping me from going live with the new theme. It’s now up, and the response so far has been positive.
@Mark
Thanks. That looks a bit simpler than the suggestion from the WP forum.
I’m having an odd problem, that I can’t seem to fix: the sIFR flash h2 in my code is replaced correctly, but the original h2 remains right below it.
Example here.
The JS is correctly inserting the span class=”sIFR-alternate” around the h2, after the Flash version. The CSS is on the server, and sIFR-alternate{} is defined (@imported in global.css).
Any idea why? I feel like I ran into this last time I used sIFR, but for the life of me can’t figure out what the fix is. Thanks!
(Editor’s Note: Looks fine to me. Tested in Safari and Firefox.)
Ahh, please disregard the previous post. I had removed the @import declaration and forgotten to move it to a link in the CSS area of my template.
It’s complex, it’s hard to get the brain around, but it has no equal!
Is there any reason why a reg symbol ® wouldn’t show up in my sIFR headline? I made sure it was exported along with all the other characters. I’ve had no other problems thus far. Can someone else try it out and let me know if they get it working? Thanks!
Bonnie, perhaps Flash does not recognize ®. Try to use the equivalent &#??; notation (I don’t know the exact notation, sorry!).
I’m having problems using javascript events (specifically onclick) within anchored links. For example (assuming I’m replacing <h1> titles):
<h1><a href=”#” onclick=”doSomeething()”>Replaced Title</a></h1>
After the text is replaced, the link no longer issues the doSomething command when it is clicked.
Please help!
sIFR replaces the contents of the elements you are replacing with Flash. Therefore, if people click on the link in the Flash, they don’t click on the link you created, so nothing happens.
This script will fail to show the flash headers in Opera 7.54 (probably other versions as well) if the document is served as application/xhtml+xml. I’m no JavaScript pro, but after some experimenting I discovered that the problem is located on line 161 in the main source file. If this line:
if(node.nodeName.toLowerCase() != selector[1].toLowerCase()){
… is changed into this:
var fixNode = node.nodeName.replace(‘html:’,”);
if(fixNode.toLowerCase() != selector[1].toLowerCase()){
Voilá – problem solved. I don’t know whether this will cause problems in other browsers or not, but sIFR still works in IE6 and FF1.0 on my computer. This method should probably be applied to the > selector as well (line 133).
Hope this helps anyone with the same problem. :)
Kim, thanks for reporting that bug. Opera continues to amaze me!
I’ve fixed one bug, only to have another raise its ugly head (sample).
In IE6/Win, a large space is being added to the top of the sIFR element. It appears in the normal position, then jumps south – making me think that it’s the Javascript-named class (now .sIFR-replaced) that is making it jump down (like 200px!). I’ve tried a few IE-only CSS hacks to no avail.
Any ideas or suggestions on how to fix it? I’ve not seen this particular issue before. Thanks!
It seems it is not possible to replace a link with sFIR while keeping the llink funktionality? I there away around this?
I am trying to use sFIR on a linked list:
[ul]
[li][a href…]Link[/a][/li]
[/ul]
and I wouldn like it to add another tag around the [a]-Tag…
Is there a way to do this?
Kai
BTW: great work!
Kai, I just added your question to the FAQ:
http://wiki.novemberborn.net/sifr/show/FAQ#replacing-links
Thats what I was afraid of… ;-)
So I suggest adding this to the wishlist.
But maybe there is another solution for my problem:
I have this list with some links inside of lis – of course there are of different length. But the lis are block-elements and they all have the same length – the length of the logest word. Unfortunately – sFIR now scales each entry to a different fontsize…
Any way to have all replaced elements for one statement the same font-size?
Kai
Kai, this is not a bug, it’s just the way it works. So it won’t change in any future versions.
As for the scaling, this is pretty much determined by the height of the element, now the width.
Hm – Ok – now I got this to work. But I see strange misalignment whe I try to have textalign=right (maybe this isnt supported?).
This is my example (see the menu on the left side).
http://stage.sunbeam-berlin.de/ikee/
Any ideas how to have all the item properly aligned? And I see no links when I put the file online…
Kai
You’re still replacing #primmenue li a and the flash vars are in the wrong form: textalign:right should be textalign=right.
Hi Mark,
thanks for your help!
Now I am using #primmenue li span and this works (I stil wouldt like to get rid of the additional tag but this is ok).
textalign=right ist working fine – thanks for openinig my eyes.
So now we have a dynamic cms-driven flash-enhanced accesible website at stage.sunbeam-berlin.de/ikee/index.php?id=1 (work in progress)!
Kai
Kai, the unordered list transformation is very cool! Looks nice and simple.
You may consider setting the “pre-transform” text to white, instead of black, so there’s less of a change when the JS kicks in.
I wanted to check in and see if anyone had any suggestions for fixing my strange IE/Win CSS bug (above). It’s strange – any ideas?
Thanks, Allan,
I will consider this – in fact at this moment I am waiting for the correct fontfiles – so I will do the tweaking tomorrow.
I have ssen your bug – mysterious… You do have the same margins in you .js as in your css, do you?
Kai
Kai, I checked my margins in the .js and .css and they are both set to zero. I assume you mean the “user-edited” .js:
…nPaddingTop:0, nPaddingBottom:0, sFlashVars:”textalign=left&offsetTop=0
Part of the frustration is that I don’t know precisely which element to edit once the JS has done it’s magic.
I should elaborate: I don’t think the offset is “inside” the flash – from what I can tell, the gap is added above the .swf element. This points the finger at the CSS, IMHO.
If it was only a few pixels, I’d think it was IE’s Box Model bugginess. But this is like, 100+ pixels! Very curious.
I hope this isn’t OT, but it only happens after the JS transform (thus entering a mysterious place for me). Thanks all!
I noticed that the element gets pushed down below another column at left – #navLeft. Could it not be getting cleared or something? It worked before… very odd.
Sorry to post so much! I figured it out – the container in the white area was too wide after the .js did its work, which pushed it down below the element. It makes me wonder if the calculated width is too wide – could the calculations be off (in one or more browsers)?
Hello, Mozilla developer here. This is cool, but it doesn’t seem to solve the underlying problem (at least from our point of view): how to distribute fonts to all comers in a way that doesn’t mean just giving the font away in a way that would violate most licenses, and in a way that permits open source, royalty free implementations.
Actually I suspect the first issue is a problem already; I’m surprised the owners of the fonts you’re redistributing haven’t clamped down.
Robert: Nope, definitely doesn’t solve the underlying problem. Helps in the meantime though. As for redistributing the fonts, the .swfs are locked by domain so other people can’t run them on their own sites. This is a feature of sIFR.
With regards to solving the root of the typography problem on the web, I have some ideas I’ll run by you shortly. Been thinking of some solutions lately.
How easy would it be to edit the .swf to unlock it? Forgive me, I’m ignorant about Flash.
I’m all ears about any new ideas :-).
Robert: Well, I suppose every DRM is and will always be breakable. It’s possible to steal any piece of software or font if you want. What we’ve done is take all reasonable steps from preventing this from happening. Could some decompile a .swf and try to put it back together again? Sure. But, frankly if you wanted to steal a font, it would be easier to hop on your favorite P2P network and find it that way.
Besides, the characters embedded in a .swf are only a subset of the entire font.
Robert: while it’s technically possible to get some font outlines (see above: it’s a subset), others have found that the quality leaves much to be desired. Kerning and hinting is lost, and the outlines tend to degrade somewhat. It’s not worth the effort, really.
Flash has been around for a relatively long time – it hasn’t been a problem for Macromedia or Flash plug-in adoption.
Anyone care to start taking bets on whether Robert works in Bitstream’s or Monotype’s legal department? ;-)
Hi,
I installed this – followed the steps and everything – but it doesn’t seem to be replacing the text that it’s supposed to be replacing with the Flash. Please help…
J
I’ve looked at everything again and I’m quite sure I did everything right. The text should be replaced, but it’s not. Is it possible that my web host is blocking the use of sIFR to optimize bandwidth usage?
J: No, that’s probably not possible. Also, it’s really pretty much impossible to figure out what the problem is without us seeing some sort of URL. Also, make sure you are exporting your own .swfs as the original .swfs are locked by domain (they will not work on your domain).
J: Are you talking about your main site? I clicked over just now and half of a sIFR implementation seems to be on there. The print and screen stylesheets seem to be set up wrong and there are no replacement calls in the .js file or the main page either so sIFR doesn’t know what Flash movies to use and with what parameters.
I’m using the same SWF that I used for RC1.
I put the replacement calls in a separate JS file that contains this code:
//
I then simply call that JS file at the end of the HTML (before the BODY tag).
I forgot to ask: what’s the correct way of setting up my print and screen CSS’s?
J: Please re-export your SWFs. The scripts inside the swfs were changed from RC1 to RC2. No more changes have occurred after that (and we don’t anticipate that any will). With regards to stylesheets, just set them up as they are set up in the example… the screen stylesheet should have a media-type of “screen” and the print stylesheet should have a media type of “print”. Hope this helps.
THanks for the fast responses, Mike.
I’m going to try your suggestion (re-exporting SWF) tomorrow (I don’t have Flash installed on my home computer).
In the meantime, I decided to revert back to RC1 (2.0). I re-uploaded all the pertinent files (CSS’s and JS’s). This is how it was originally, and everything was working fine then. Now it doesn’t work anymore. The text elements that are supposed to be replaced aren’t being replaced.
ANy ideas?
Hi again,
Another experiment I did: I took the example files from 2.0RC1 and put them up on my server without changing a thing. Curiously, sIFR isn’t doing what it’s supposed to be doing.
I am stumped.
Woops… forgot to post the link to the test site:
http://www.2xy.org/area51/provingground/index.html
J: Works for me. Everything is showing up fine on that page.
Hi Mike,
This is what I’m seeing:
http://www.2xy.org/area51/provingground/pgindex.jpg
Is that what the page is supposed to look like after the sIFR replaces the text elements?
Mike,
I got someone to re-export my SWF for me so I tried it again. The script is working on Firefox 1.0.2, but not on MSIE 6. I wonder what I did or didn’t do to cause this?
J
Hi J: Maybe thats something about the security settings on MSIE. If something like “unsecure activex” is disabled (im a german version so I dont know exactly how its called) – the replacement doesnt happen.
BTW: Does anybody know what is “insecure” about the sFir files?
K@i
Kai: I tried that. It didn’t help at all. :-(
J, your example works fine for me. Also, we have a forum where these things might be easier to discuss.
Kai, that’s just how IE handles ActiveX. Flash is an ActiveX object as well.
Can you mix font sizes and weights?
For instance…
“Wood Care”
I’m new to css altogether. This “tool” is awesome. However, I’m not sure if its bc I’m new to css or flash, but I need the backgrounds to be transparent. Also, there seems to be to many variables. Like the decoys. If I change the decoy size it changes the font size? why? I thought they were hidden. Perhaps some better documentation is need. Please Help.
Josh, have you been over to read the documentation at the wiki? Some of us have explained things (I Hope) pretty clearly. If you follow the tuning steps in the readme file, along with the notes in the wiki, I think it will start making sense. :)
I need the text background to be transparent bc I have a background image and the background of the flash text cannot be solid for obivious reasons.
I’m sorry, wiki? Do you have a link to the documentation?
Josh — From the readme file (the section about the parameters you can set):
“sWmode = this parameter is not needed unless you want the background of the Flash movie to be transparent (not recommended) or if you are stacking other DHTML elements above sIFR… if you need transparency, enter ‘transparent’ (which will also enable stacking)… if you only need stacking, enter ‘opaque’… otherwise omit this parameter”
Josh — linked from the top of this page:
http://wiki.novemberborn.net/sifr/show/HomePage
Also, there’s a forum where you might go after you’ve read the readme and the wiki:
http://forum.textdrive.com/viewforum.php?id=20
Good luck!
I cannot get this to work. I have read all the documentation out there and my eyes are bleeding. And still nothing. Will someone please look at this test site and tell me whats going on. PLEASE!
Some must have an answer.
Test Page:
http://www.e-laboratedesigns.com/clients/revstudio/
BTW: Their not a client.. I work for them.. and e-laboratedesigns is my porfolio company.
Josh: Something weird is going on with your server I think. When I try to view the page in Firefox, I don’t even get the entire code. It cuts off right after the opening script tag. When I view in Safari, the only error I see right off the bat is that you didn’t close off your CDATA tag… perhaps that could cause it.
Yeah, your script tag isn’t closed either. Now I’m sure that’s the problem.
Thanks mike, your right. I was puzzled, it’s amazing how you can overlook the easiest things.
Now, perhaps its my lack of knowledge of css, but when I add a margin or padding tag to my h3 it increases the font size…why? I thought that was spacing around the text, not to increase the size?
Thanks again to everyone and Mike.
Is there something odd about the zip file? I expanded it using Stuffit Deluxe v8.02 on OS X 10.3.6 and it unpacked into a directory with some files having zero length. sIFR examples did not work.
I moved the zip file to a PC and it unpacked fine. Copied to a Mac and it worked fine.
eric
I’ve just started using sIFR but can’t figure out how to use sIFR for making an ul>li menu with links in the li-tags. I just want the first level of the ul to use sIFR.
The following CSS-selector should explain exactly what I’m trying to sIFRize:
div#menu ul>li a
Johan, I added your question to the FAQ:
http://wiki.novemberborn.net/sifr/show/FAQ#replacing-lis
sIFR is so great!
I’ve got this bug tho. I’m using sIFR to replace menu tabs. It works perfecly in IE but in firefox the link does not hover and does not click at all…
I don’t think I have anything fancy if not the transparency on the text.
http://wiki.novemberborn.net/sifr/show/FAQ#wmode-bugs
Thanks Mark. I have found my bug though it has no link with the wmode, float, or overflow attributes.
Temporarly I have left empty the href attribute in my tag (example ).
While IE interprets well the tag like normal, Firefox interprets it like there was no tag at all!!
I am happy this bug is not related to sIFR. Your code is realy solid, i’m very impressed.
Thanks again
Is there any way to add letter-spacing (or tracking) to the typeface inside the sIFR Flash movie? I’m using an <h2> tag that has letter-spacing applied to it in my normal screen stylesheet and I’d like to mimic this in my sIFR headlines…
Thanks for any help on this.
I had a problem with extra space under replaced html elements. If I had some text replaced in a h1 element, there would be the largest gap underneath it, then h2, h3, etc. Since the real text is replaced by embed or object elements I tried to set the padding and margin to 0, but that didn’t fix it. However, I looked further and found out that display: block removes the extra space under the replaced elements.
hi,
sifr amazing is an amazing tool! i’m just having one problem: i’m trying to replace a heading that appears inside a table cell. the flash font shows up fine, so i’m figuring that everything is configured correctly, except that the original text also appears, shifted to the right.
this happens on both IE6 and FF1.
also, the div that wraps the content is floated, could this be the problem? i’m pretty new to css, and am trying to use sifr in two sites that i’m building…
any suggestions?
thanks.
Another problem?
I ve implemented sfir on http://www.unendlich-viel-energie.de (which is german for “inifinite power” a german website about renewable energy) and I had reports about errors in opera (no transparent background) and IE 5.5 – no text at all is shown (no flash no standard text)!
Is this a known problem?
In Opera sIFR will fall back to the background color you specified, because Opera 7.x does not support transparent backgrounds. The problem in IE 5.5 is probably one found in IE 5.0, but that has been fixed for the upcoming release (are you sure it’s IE 5.5?).
I am having a problem with multiple lines of the same text showing up. I am new at this…am i forgetting something? Basically the default browser text and the flash text are both there.
What should I do? What have I forgotten. Amazing piece though, thanks.
hi chris,
i was having the same problem a couple days ago. i placed the following css in my style sheet, and it got rid of the default browser text. good luck:
.sIFR-flash { visibility: visible !important; margin: 0 0 -50px -10px; }
.sIFR-replaced { visibility: hidden !important; }
a note about the magin declarations in the css i posted above…i used negative margin values because the font i’m using for some reason adds a gap below and to the left of my headers. the negative margins corrected this for me, so you may or may not need them. this “visibility” bits are the important ones.
Ha ha…That worked a bit too well. I managed to loose both of them. Where are you telling me to put the change? Am I supposed to be changing the part that states: standard sIFR….Should I be using only one CSS documennt for this piece?
Hi, the idea is good but there is a base problem: the code is not valid, so the page don’t conform to W3C Recommandation declared.
Take, for example: http://tests.novemberborn.net/sifr/replacement-body.html
W3C Markup validator said that the page is HTML 4.01 Strict but it isn’t true.
If u use a DOM inspector (in IE, Mozilla, Firefox or whatever u want), you can check what the script generate inside the page:
This in IE:
on error resume next
hasFlash = (IsObject(CreateObject(“ShockwaveFlash.ShockwaveFlash.” &
6)))
and for the resulting code is:
Hello
World
And this is the code for Mozilla DOM Inspector:
Hello World
So the actual problem is that the generated code is not valid.
I’ve created a “static” page for show how the code *should* be done.
Btw, I’ve found problem with Firefox 1.0.3 (also the original code has problem with it).
http://www.robertoscano.info/works/test/softr/
Hope this could help.
Hi, the idea is good but there is a base problem: the code is not valid, so the page don’t conform to W3C Recommandation declared.
Take, for example: http://tests.novemberborn.net/sifr/replacement-body.html
W3C Markup validator said that the page is HTML 4.01 Strict but it isn’t true.
If u use a DOM inspector (in IE, Mozilla, Firefox or whatever u want), you can check what the script generate inside the page:
This in IE:
on error resume next
hasFlash = (IsObject(CreateObject(“ShockwaveFlash.ShockwaveFlash.” &
6)))
and for the resulting code is:
Hello
World
And this is the code for Mozilla DOM Inspector:
Hello World
So the actual problem is that the generated code is not valid.
I’ve created a “static” page for show how the code *should* be done.
Btw, I’ve found problem with Firefox 1.0.3 (also the original code has problem with it).
http://www.robertoscano.info/works/test/softr/
Hope this could help.
Roberto, in a perfect world even the generated code would be valid. Unfortunately we don’t live in such a world, and the way sIFR works now is the only way it can work. Furthermore I think there is a difference between the markup of a page and what happens to the Document Object Model which represents that page. sIFR modifies the DOM, not the HTML.
Also, the test case you pointed to validates as HTML 4.01 Strict.
Hem… if u add by dom elements and attributes that are not defined in the DTD used by the page, the page is not valid.
If I use, for eg, tips that change a class=”blank” using DOM for change it in target=”_blank” this cause that the code of the page is changed (not the “show source”, but the real code send to the browser).
The same is the sifir, that add that isn’t a recognized element inside HTML/XHTML.
For my personal opinion this is an erroneus conclusion, the validity of HTML or XHTML is directly related of the memory browser and the DOM
Hi,
first of all I would like to say that this is a brilliant piece of code. Congratulations for this.
Im facing some problems with internet explorer. I put in all code like told above in your helf files and it works fine for me in firefox, but theres no text displayed in internet explorer 6.
Can someone please help me figuring out why that is?
Every help is appreciated.
Thx in advance
Christian
http://www.ringrocker.com/index2.php
Try to place the replacement statements righte before the close tag of the body.
thx mark – worls fine now ;-)
Roberto has a point in that <embed> isn’t valid (X)HTML. However, I’m of the opinion that it’s the code sent to the browser that matters and not the code in the browser’s memory after DOM manipulation.
Nevertheless, is it possible to use something like the Flash Satay method‘s implementation of <object> to keep the purists happy?
Adam, nope. There are too many browser issues with dynamically generating that stuff.
With the new Safari 1.3 (released as part of OS X 10.3.9) I’m seeing some strange behaviour in some pages using sIFR. The first time the page below (or any page on that site) is loaded, the sIFR headlines are huge (~120pt), but refreshing the page they return to their intended size. Any ideas?
Matt
Sorry – forgot the link.
http://www.cactuslab.com
Adam/Marc,
I’ve posted an example, and also flash satay is a good solution.
I think that developers should change the script for serve correct object for IE (using classid attribute) and correct one for other browser (using type and data attributes).
Matthew, I haven’t had any trouble with sIFR RC3, RC4, or the new proposed Final version with the newest version of Safari. The only time I have ever seen the sIFR screw up in my experience is when using the debug menu to change your user agent. If I have been using IE6 as my user agent to test something, there have been a couple of times when sIFR goes a little crazy even though I have reselected the user agent to Safari. Usually just clicking on “Automatically Chosen” in the user agent (again) fixes the problem.
Thanks Alexis, I haven’t altered the User Agent on Safari 1.3, but am working with Mike to see if we can track down what’s happening. I’ve upgraded the site from RC3 to RC4 (didn’t realise I wasn’t using the latest file) but am not able to test until later today.
Damn, you are right. Now it is happening to me as well.
Mike and I have been spending some time yesterday tweaking sIFR for Safari 1.3 (even found a bug). These sizing issues sound pretty weird, though.
Roberto, unfortunately we can’t use valid code in sIFR, simply because it doesn’t work. There are loads of problems with generating Flash objects/embeds via JavaScript. Why else do you think we need sifr=”true” in addition to class=”sIFR-flash”? If you don’t like this, I can only advise you not to use sIFR.
As for IE, you don’t want to know what it does to the embed we feed it (or to object for that matter).
Mark, but in this case it’s impossible to use sIFR in Europe.
All of the national european accessibility law require the code conformance (in the DOM tree)
Luca, that sounds very odd to me. Do you have a link for me where I can read more about that?
http://www.pubbliaccesso.it/biblioteca/documentazione/guidelines_study/2_technical_reqs.htm#_21
the requirement 1
Luca, could you explain where it says that the page should be valid in the DOM tree?
A page is what is served to the user, not what is shown by W3C Markup Validator. Making dom injection, like adding attributes that are not valid by DTD is a violation of DTD that isn’t recognized by W3C Markup Validator.
Code that don’t conform can cause problems to user agents and to user with assistive tecnologies.
The validity of page is not the served code, is the real code in memory of the browser, the DOM tree.
Hmm, from WCAG:
If you want to discuss this further, let’s do it via e-mail. Here’s my info.
Holy hyperbole! Sorry Luca but I’m not buying that at all. Code that “doesn’t conform” is illegal to use in Europe? I don’t think so. If that were the case, go ahead and jail 90% of the population.
Hi Mike,
what Luca wanna to tell is that for public administration there are requirements in Europe to conform to WCAG level AA that require code conformance.
At the same time here in Italy we have a law that require this conformance for public web sites, otherwise the web site is not legal and the developer don’t will be paid.
I posted this question on the Wiki, but how could one re-render the element after it’s been rendered? I was curious to see if a javascript countdown timer I have could use sIFR and have it update each second after the javascript updates the tex in the HTML. I recalled the “replaceElement” function each second, but it doesn’t render again. Would this type of thing even be recommended?
Mark, you can use the rollback method from the Add-ons to rollback all sIFR elements. Then you can replace them again. The add-ons shipped with 2.0 will allow you to use a selector to specify which elements you want to rollback.
bit confused here…
why does changing the ‘nPaddingTop’ also change the size of the text?
(Editor’s Note: Because the size of the containing box stays the same while the padding between the edges of the box and the type is being increased.)
I just wanted to mention one thing (if it hasn’t been mentioned already) that should probably be added to the readme/documentation: the .sIFR-hasFlash class is applied to the documentElement. Therefore, if you have greater specificity (heh, fun word to say) such as #section h3 then it’s important that the decoy class gets updated as well to .sIFR-hasFlash #section h3 to avoid hiding text in other sections of the page that you may not want sIFR applied to.
Otherwise, this is a great piece of code. In the immortal words of Ms. Hilton, “that’s hot”.
Hey Jonathan… You’re right, it’s quite important to do… Have you read the “How to” tips in the wiki? I think I put that in there last month or so (in the tuning tips)… If that’s not in your version of the files as well, it will probably be in the next release (and don’t forget to add to the wiki when you have good tips!)… :)
Hi!
Just a question. I read it is POSSIBLE to turn mac IE detect on. How can I do that? Thanks in advance. :)
s.
Stefano, well, you’re lucky, cause that’s already done by default in RC4.
Many thanks Mark,
But I see it’s turned OFF by default, and I was wondering if I could turn it ON. I’d still like to use sIFR from mac IE.
:D best,
s.
Well, you said you wanted to turn the detection on ;-) Anyway, check the how to.
hi man,
just a technical question about your blog:
where could i find the function to previsualize the written text before posting, like in your blog?
thanks.
deso sIFR support other languange ? like chinese?
I just try, but not work :(
yuanyuan, you’ll have to place the Chinese characters in the Flash. You might need to do something about the encoding of the Flash file as well (UTF-8, or a Chinese charset).
Hi, Mark (what’s in a name), Shaun,
I did something similar as you guys did and kind of independently developed my own image replcament technique for the design agency I work for (see the URL http://www.fabrique.nl). I didn’t really know of the existence of SFIR until I almost finished the job (what a pain in the a** it was).
It is interesting to see your approach and there are definitely things you guys did a better job at (browser compat :only safari, mozilla end ie support, I still have to clean some things up, document it etc.) .
However you also might be interested in my approach, for example:
– multi-line headers! (it resets the size of the object tag)
– scalability (increase your font-size, refresh and see what happens..)
Further on, something which I am still working on myself (not implemented yet) could be improved? make some kind of container swf – which could be very small and let that one read in the swf with the embedded font.
As a result the browser caches the large swf so that with multiple headings there is significantly less bandwidth needed.
You guys are really doing a great job!!!
Cheers, Mark
Hi Mark,
sIFR already does multiline text and it also scales on page reload as well. Also, one swf is already used for multiple replacements. If you have 10 replacements on the page, it only uses one swf and keeps recycling it from the browser’s cache.
We’ll have a look at your code though. I’m sure it’s got some good stuff in it! Thanks.
Oops, probably little bit to hasty over here
The earlier versions didn’t have that features built in though did they?
Great work!
Mark
For a project I’m working on I needed to capitalize each word (ala text-transform: capitalize in CSS). I couldn’t find this feature within sIFR (there’s only sCase: upper & lower) so I made my own. This might be cool as a new feature and if not, it might be useful to others who read this page.
You can use it by entering ‘capitalize’ as the value for sCase instead of ‘upper’ or ‘lower’.
In sifr.js I added this function:
function capitalize(s) {
s = s.toLowerCase();
if (s.length > 0) {
for (i = 0; i
And also in sifr.js I added this:
case “capitalize”:
sContent += capitalize(sValue);
break;
after:
case “upper”:
sContent += sValue.toUpperCase();
break;
It’s working for me, please let me know your thoughts :)
Jordi, now that 2.0 is out we’ll consider adding a capitalize feature in the 2.1 release :)
Great! Saves me time when updating to a new version like today with 2.0 :) (and I just downloaded and installed RC4 yesterday, hah)
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.
http://home.avianto.com/quicklinks/200502.html#001920
Mike Davidson: sIFR 2.0 RC4 is Here (Another update for sIFR, the one that responsible to those pretty looking title you are seeing in here)…
sIFR 2.0 RC4 released
Mike Davidson has just released sIFR version 2.0 RC4. Among other things it includes various speed improvements which is a good thing since things sometimes got a bit slow. At the moment of writing he temporarily took it offline again but as soon as it…
sIFR 2.0 RC4 is Here
Straight to the point: If you don’t know what sIFR is, and you don’t do web design, don’t bother…. If you want to know what it is, more after the the jump: Mike Davidson: sIFR 2.0 RC4 is Here This weird name hides one of the best innovations on…
sIFR forth time round
I've been working on a idea to include the technique on this site. The problem is that most solutions with this technique don't look that good. In most cases where you would like to use an alternative font sIFR is a poor one. The claim tha…
Tip: Shrink Your sIFR
Dean Edwards’s JavaScript packer can help make sIFR a lighter load for your dial-up visitors….
sIFR: Scalable Inman Flash Replacement
First there was this: Dynamic Text Replacement using PHP.
Via la preview
Come annunciato poco fa, all’incirca un mese e mezzo, ho finalmente messo a posto la grafica: via l’estensione a tutta pagina e via il
Georgia carattere enorme a discapito di un 528px di larghezza* e un Tahoma 11px (anzi, 1.1em) .
Così va megl…
Rewriting a table-based site in CSS
With my total support, one of my clients sub-contracted out a website launch to a PR firm. It was too big and had to be done too fast for me to do it. I’m hosting the site on my…
[…] sIFR – Scalable Inman Flash Replacement by Mike Davidson […]
[…] sIFR? Well Cory Mawhorter has taken inspiration from Mike Davidson and developed a PHP and Javascript […]