sIFR Update: More Enhancements on the Way
UPDATE: Version 2.0 is now available. See article here.
Three days and tens of thousands of hits later, sIFR has so far held its own as a solid, compatible way to replace browser text with custom typography. I’ve released a few new updates in response to minor glitches reported, but more importantly, a solid release is only days away. In the meantime, please feel to download version 1.1.4 which simply refines the replacement function a bit so that it should work on very complicated replacement rules and such. I’ve also updated the example page.
Here are some of the issues which I plan to address in version 1.2 (to be released hopefully in the next few days):
- Simple instructions your mom can follow. This thing can really be implemented across an entire site in under ten minutes if the instructions are clear enough.
- Support for international character sets. This is an issue I haven’t solved yet because I’m a snooty uncultured American whose foreign language acumen is largely limited to profanities.
- A more rock-solid replacement function that is perhaps even quicker than the current one.
- A built-in adjustment for Flash’s tendency to position text a tiny percentage away from its textbox origin.
- Ability to include a reduced character set, for extra bandwidth savings. Most people probably only need standard letters, numbers, and punctuation, so by eliminating all of the characters you’d never use (like a degree symbol maybe), the .swf filesize can be reduced by, in some cases, 50%. This will involve having an actual textbox on stage in the .fla instead of dynamically creating one. Not as pure as I’d like, but I don’t think there is a way to selectively embed character subsets using pure Actionscript.
- An adjustment for the box-model problem in IE 5.x (PC) whereby offsetHeight and offsetWidth are reported slightly differently if padding is included in the element.
- A change to the display method of the hidden browser text so that it is even more accessible.
- Lockability of .swf files by domain. This will prevent others from using your font .swf file.
I’m probably missing some stuff, but those are the biggies. I want to again thank everyone who has taken the time to put this thing through its paces over the last few days. sIFR is nice in that it is portable enough to pop into your site fairly quickly, and pop out of your site even quicker. The nice side-effect of this is that when I release updates, they should be fairly easy to apply. The upcoming 1.2 release will have its own dedicated page with release notes, but I’m a designer so don’t expect a full-on SourceForge repository or anything.
Please feel free to comment on any of the items above… especially if you have solutions to suggest or additional features to request.
Any thoughts on preloading the fonts? Especially for use in foreign languages that contain a large amount of characters.
Take a break, do something fun (like maybe a fantasy football draft?), and come back to this when you can. The current version is very solid — anything you add is just gravy.
It appears to try to replace even when activeX controls are disabled. I am viewing the page in RssBandit which uses IE with a stricter rule set and the titles are all missing…
It works amazingly in all the good browsers, but if you decide to download SP2 and use IE you won’t see the headings at all, they will be null sets, until you tell it to allow. Beautiful!!! the resize function is just amazing
OK, I’ve had a look at this and I think I know (roughly) how it all hangs together.
So, I’ll offer my services. I’m a technical author by trade (information designer, technical communicator etc etc) and will happily help out with those simple instructions (I agree with Andrei on that one). No offense if you’d rather not involve a complete stranger, but I’d rather offer than not.
Drop me a line if I can be of service, and as soon as I’ve implemented sIFR on my site (part of it anyway) I’ll have an even better idea of how it works. Top job guys.
Have to ask the stupid question…way back when Shaun did the original, I played with it a bit and had a bit of a problem getting the font to embed in the Flash file (I’m pretty much a Flash n00b, but not a n00b at all when it comes to coding)…
Here’s my q: is there some issue using an OpenType font for embedding with Flash? i.e. will that only work with either TrueType or Postscript fonts?
(nice work, btw. Trying to convince an anti-Flash compatriot to allow me to use it, doubt it will happen, but I definitely *will* add it to my “bag of tricks” ;))
(dammit, for some reason I forgot the .com on the above URL, sorry)
Hi Mike,
Wow, i didnt even notice my url suggestion had made it into the file (and that it even worked!)
Along with everyone else, I would like to thank you and of course Mr Inman & Mr Jogin (and others involved) for contributing towards such a useful tool and providing your time and patience towards each post.
If i could buy you all a round at the pub tonight I would.
And if you are ever in New Zealand – you can hold me to that!
Cheers
Thank you for your work.
I tested this script with set to transparent in background, this works fine in FF 0.9.3, IE6 and Mozilla 1.6. Works not good in Opera 7.5, the background are not transparent, is green. Is set to #ffffff is it white.
Well done guys, nice to see this advancing. Will definitely have to pick things apart to see if we can pillage anything for our own “sIFR ” (s = Sprint) which had to be customized to fit our very specific requirements.
That being said, I thought I’d offer up a suggestion that we used on our version. This became all the more pertinent when I saw Scrivs comment on CSSVault about Jeff Croft’s site taking a while to load IFR and I noticed he was using sIFR.
To give us anywhere from a few milliseconds to a few full seconds quicker load time of our IFR implementation, we place a call to the “action” function in the footer of the page. This allows it to fire before “onload” so if an image or two are hanging it can fire when it gets to that point, instead of waiting for those extra items to load. This is particularly helpful if you have ads or something from another server you may be waiting on.
We happen to use a second .js file that we call at the bottom, just in case we ever need to change something it will be easy to do everywhere, but it could just as easily be a call to the function itself.
So you would have to make the following changes:
1 – Initialize a variable at the top called “flashHasRun” (or whatever)
2 – Edit the sIFR function as follows
3 – Add the function or second .js file in the footer (or at least after the last heading is created)
The nice thing about this is that it is completely optional. You leave the onload and if you don’t run the footer call, then the onload will make it run. If you do use the footer, then the variable gets set to make sure it doesn’t run twice.
It can make a noticeable difference on graphic heavy pages, or any page that may hang on a single thing for whatever reason. Is fairly painless to implement, and even then is completely optional.
Anyway… great work guys, hopefully this is of some help.
Can’t wait for those instructions-your-mom-could-follow :-)
I’m loving this feature, and will apply it to my site tomorrow, I hope..
Regarding to-do-list-nr 8; the simple solution would be to put the .swf file off root on your server. That way you can only reach the file through your pages, not via direct link…
This is neat but am I correct in thinking it doesn’t play too well alongside images? I’ve got an image floated left of some text and when the text is replaced, the text drops down underneath the image rather than sitting in the same place alongside.
I loaded this on a test page for my site and it works great in all the browsers EXCEPT for Safari (where I am getting some strange behavior).
I am replacing 11 headlines. IE takes a moment and then renders (no big deal).
In Safari all the headlines render crisp (high-res) but then fade to display the way Flash looks when it is showing in Lower-Res…
Any thoughts?
–
Todd
I hadn’t even bothered to look at IFR before because I was under the impression that it was just another image replacement technique. I couldn’t have been more wrong. This opens all kinds of doors for designers and typography as a whole!
I guess my next question is: Since currently Safari is the only browser to support the CSS2 text-shadow rule, is there any way to add text shadow effects to text using this method so that all browsers can use them?
This not being able to resize with the page issue – would a javascript along the lines of the old NS4-resize-hack do the trick? i.e. onrezise (or something) could trigger a page refresh?
Obviously its not a problem on fixed width sites, but for those of us creating liquid ones…
I don’t recall that somebody reported this so hopefully I’m not being redundant.
An issue I’m having (in Safari at least) is that on certain occasions it will add an extra blank line when text spans the entire width of a column. Certainly, when I either add or subtract a word no extra blank line appears at the end.
As i was playing my gamecube this morning, i had a little thought about why i like the sIFR so much and how it could be made better.
My intial thought was the fact that i could use my own typeface and have it be seen consistently by those with flash. The other thought was that i could specify the sizes to make good looking large text.
On my computer at home I do not have a version of flash mx – which makes life tough to play around with changing fonts and sizes.
The conclusion i came up with – Although i haven’t been able to test yet, I am pretty sure that a file could have the font embedded and exported, then imported at run time into the sIFR file. This would enable uses to create seperate files for various fonts, and use a style switcher to tell the sIFR what font .swf to import and display.
Secondly, it would be nice to be able to control the font sizes out of flash for faster updates. Any thought to including the font size variable in the .js file and then having flash use that to calculate its text size?
Other benefits would include php to dynamically change that font size depending on styles or string length.
Although the simplicity of fewer files would appeal to some – for ultimate configurability perhaps this could be a worthwhile experiment.
Marc:
1. A few people have asked me about using separate files to embed the font. The thing about it is, that’s pretty much already what’s happening. The .swf file is so light that it’s really just one frame of actionscript plus the font. Hence, the situation is pretty much already as you describe it: each file can contain a different font and you can pick which one to embed in the page at run-time. There’s no way around the issue of not having Flash MX though, obviously. You need to – by design – have Flash and the appropriate font on your system to export the .swf out.
2. With regards to the font size issue, this has been dealt with in the newest builds (unreleased). Instead of scaling down, I’m now scaling up which is a lot easier on the processor and a lot quicker, especially when you’re replacing paragraphs and other large areas of text. The scaling never really takes more than a tenth of a second, so it’s pretty much a non-issue now.
Thanks very much for the suggestions and I think you’ll really like the new release when it’s ready. There are so many improvements that it’s going to be a 2.0 release rather than a 1.2… if that means anything. :)
I can no good english, sorry.
I have this Opera Problem with transparenz. I found out this is a Problem of identity of Opera, when i say Opera identyfy as MSIE6.0 the H1 is in HTML-Standard see, i say Opera identify as Opera the background is green in Flash see.
You can see this at this site
I find this is a bug in your script or the script is make to hide for Opera. What is to do?
great work mike !
(sry for posting in the old thread first :)
the script doesnt work when feeding the page as application/xhtml+xml. i tried 1.1.3 first and updated to 1.1.4 a while ago, dont know if the .js has been updated tho, still says 1.1.3 in the header. .
Where is this new version that you promised????
I really hate it when people like you, developing free ideas and techniques for the good of the web community, and with no direct commercial benefit to themselves, don’t meet their release dates.
Take a leaf out of Microsoft’s book for pete’s sake!
;)
hi… great work!
I really don’t have any javascript knowledge, so im hoping you’d be able to help me with this… Is there a way to pass the font-color and background color to TJ replaceElement from the Original CSS? I believe this is possible since you were able to get the name of the elements to be replaced (at least that’s what i was thinking?). If this is already existing, could i get instructions how?
Another thing, since you’re accepting requests for features (one is wahat i have above)… would it be too much if there’s 2 flash files… one, the code; the other would be the font? and then the 1st one would call the 2nd flash file depending on the font coded in the css…
so this could be…
h1 { font-family: CustomFont, Tahoma, san-serif; }
if the font is present in the user’s machine, then dont use sIFR, else, get the flash and use sIFR… Plus we could place a whole database of embedded font for variations but using only one flash-file for the code…
also, passing a value for the horizontal alignment of the flash file (or , again, is this already existing and i just don’t have a clue how to use it?) from the css code…
hope these are relevant features… thanks again.
yikes… so my “feature” about multiple flash files was already mentioned … sorry for that :D
I’d been meaning to ask if you needed to have Flash installed in order to use sIFR. I sort of assumed you did, but I didn’t see anyone mention it explicitly until Mike D. wrote, You need to – by design – have Flash and the appropriate font on your system to export the .swf out.
Here’s my question: can any of the programs that are part of the SWFTOOLS package be used in place of Flash? I have no problem with Macromedia as a company, and wish them success, but I’m also interested in knowing how many tools are available to me. If SWFTOOLS works with sIFR I’d love to know about it.
Brett,
Not having a copy of Flaxh MX myself, I’d like to hear the answer to this too. I tried using flashtools’ font2swf program, but the resulting swf file didn’t work when I replaced the demo font swf.
If anyone has had success with the flashtools for this purpose, please let us know.
Excellent, Mike. Works great for me except on an ASP.NET ecommerce site I’m working on. The H1 is replaced with Flash, but nothing is written, it’s just whitespace. Any ideas? Thanks again for this.
Amazing work. What a huge asset this is for us all. In playing around with it, I have a question:
Can you have links be underlined? So far nothing is working (CSS-wise)… changing color on hover works, but the whole underline action is not happening.
Any thoughs, anyone?
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.