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’