sIFR 2.0: Release Candidate
UPDATE: Version 2.0 is now available. See article here.
Alright, we have a solid release candidate! This evening, I present sIFR 2.0 Release Candidate 1, and unless any major problems are found, this will end up being the exact code in the final release. I want to thank everyone who has put sIFR through its paces and helped Mark and me squash bugs and add feature enhancements. It wasn’t until I released sIFR that I fully realized the power of open source. What may have taken months to develop otherwise, instead took only weeks… and only evenings at that. I know I still have to create the official sIFR primer and idiotproof instructions, so I’ll be doing that over the next week or so and monitoring this comment thread for any issues which may arise. The download is here and the updated example is here.
And since David Guillory asked, it is indeed pronounced “siffer”. Spread the word to the homies.
What’s new in this release
Here are some details about sIFR 2.0 RC1:
- This release was mostly for fine-tuning. The concentration was on stability and reliability.
- Proper uppercasing is now supported and it won’t mistakenly uppercase your URLs in the process. Please note that “upper” or “lower” are now passed in as the last parameter of the function to induce uppercasing or lowercasing. This is the only change which may affect existing implementations.
- Various DOM and speed improvements.
- More consistent font sizing.
- Support for common usually-escaped characters like “, ‘, &, and %.
- Automatic whitespace-stripping, following the same conventions as HTML.
- Complete IE 5 Mac compatibility.
Quick Instructions
The usage instructions are identical to the previous betas with the exception of the upper/lowercasing change mentioned above. Here is what to do:
- Download 2.0 Release Candidate. sIFR is licensed free of charge under the standard CC-GNU LGPL.
- Get familiar with index.html. That’s really the only file which contains the things you’ll need to adapt. It contains the replace statements at the bottom and the CSS at the top.
- To make your own .swf files, simply open up the .fla file in Flash, doubleclick the textbox which is on stage (it takes up the whole stage), and choose your own font from the Properties palette. Then, choose File > Export and you’re done!
- The parameters to use in your replacement functions are explained in the html file. Plug in your parameters and you’re good to go!
Additional Notes
You won’t have to replace any of your existing replace statements (from beta 2) unless they are affected by the upper/lowercasing change mentioned above. You need only replace your .js file and your .swf files. You may notice a slight font sizing difference between the last beta and this release. This release’s sizing is more correct and consistent so please roll with the new.
There are only two significant issues I know of which remain unsolved:
- Possible weirdness in certain versions of Opera.
- Certain typefaces, especially script fonts, may contain characters with non-conventional metrics which can cause clipping of letters in some cases. An example is a handwriting font (like Cezanne, for instance) where the crossbar on the “t” extends far beyond the width of the T. Sort of like if you were signing your name and you dragged the tail end of the last letter back over the word. The problem with this sort of font is that Flash is unaware of the stray strokes. The only solution to this, moving forward, is for users to manual adjust the left and right margins in the Formatting palette in Flash if necessary. I don’t consider this necessarily “solving” the issue, but if you find yourself in this predicament with an ornate script font, give it a try.
Thanks for all the hard work, Mike and Mark! Installing this new version as we speak – I’m sure it’ll work great…
Any plans for any other future releases? I know you said it’s a final release, but is this the end of the development road for sIFR?
Man, I was totally going to ask if we can call it siffer.
Good work, Mike and Mark! I keep repeating myself, but I have to say that you’re really leading the (r)evolution of type-on-the-web with this thing. I’m glad to — in some way — have been part of it.
Gabriel – I had some similar problems to begin with. Once you get your head around it all, it becomes a lot easier to sort those issues out. Persevere and you’ll make it work :-)
Nice one Mike. Currently being implemented accross a number of our projects where we’ll see real benefits.
One thing though – the name, sIFR. It’s a small issue, but one that’s been bugging me a while now.
1) Why the small “s”? (In fact, why an “s” at all – Flash is inherently scaleable)
2) Why is Mr. Inman more important that the other contributors?
3) Why is it Flash Replacement, when it’s really Text Replacement (with Flash).
4) Do you really pronounce it “siffer”? Eugh.
Bearing that in mind, I’d say Flash Text Replacement (FTR) would be a better choice. It’s pronounced FTR, not “Fitter”. ;o)
Still, it’s the best thing I’ve seen on the Web in YONKS.
sFIR is great… BUT!
When I try it, the text is not replaced, but rather added. I can still se my h3 heading underneath the sFIR-flashfile.
Other than that small hickup, its fine.
Strange thing – if there a multiple headers on a page, only the first one is replaced. Or – like in this example – when h2 and h3 tags share the same swf file, only h2 is replaced.
Oh, sorry. Here’s the link.
Regarding “sIFR”, this has to do with the history of the technique. Originally it was founded by Shaun Inman, then someone called it IFR. The “s” is for “scalable”, because the original IFR version wasn’t.
And as with all things which evolve (I think), you don’t suddenly change the name completely to draw more credit to you.
evil_mad_developer, I suspect you don’t have the right CSS in your page.
Krzysztof, they are replaced just fine. Perhaps you disabled CSS after the replacement to test it? The h1 and h2 have a transparent background, and the font-color is white, so you won’t see them.
An important comment for everyone noticing size differences between Mozilla and IE: you need to specify a with other than auto.
Regarding the origins of the IFR acronym: IFR is just an anagram of FIR, and pays homage to Fahrner Image Replacement. And it’s “Flash Replacement” instead of “Text Replacement” for the same reason, to parallel FIR. The scaleable distinction is important because the original technique is limited to the font-size specified when the swf is exported. sIFR is smart enough to know it’s place and resize accordingly.
Suddenly, everything works fine :)
Right behind you, guys! Doing an ASP.NET adaptation of sIFR.
Mark/Shaun,
Cheers – that explains it all. (except the small “s” – I’ll let that one go)
Jim
:)
Hello. I am the French user of this technique. I am often brought to use the characters “ô ù à é è ç” and others. I noted that these characters are not in the result of flash. How I can change it?
(Editor’s Note: To add extra characters, click the “Character…” button on the Properties palette in Flash before you export your .swf)
I am not home on my mac, so this may be a Windows issues with the zip file again, but I am getting this error when exporting the swf
C:\Documents and Settings\Alexis\Desktop\sIFR 2.0 rc1\customize_me.as: Line 1: ‘;’ expected
/* sIFR (Scalable Inman Flash Replacement) Version 2.0 RC1
Shaun, thanks for the clarification. I didn’t really pay attention to the original IFR…
Maxime, you’ll have to add them to the Flash file. Adding all these characters by default will increase filesize dramatically.
Well its definitely a PC issue with the current zip file. I VNC’d to my G5 and exported the swf from there and did not get the error message I posted above.
And God said, “let there be type!” and there was type and it was good.
Nice work :) Just a small note though. Maybe you already know about it: the uppercase feature doesn’t work for accented characters (like Ã¥, ä and ö, which are used a lot in Swedish).
That’s the only problem I have noticed during my very limited testing.
Roger, blame JavaScript for that ;-)
Hi Mike,
Just a quick note to say that I’m still getting the variation in pixel height we found using the previous version, i.e. text in the right-hand column is 2 pixels shorter than the text on the right.
Also, I wonder how well the domain check works with uk domains such as housedoctor.co.uk as the flash file doesn’t seem to work with the domain locked to that.
All the best,
—
Ian
(Editor’s Note: Ah crap, I am only checking for top-level domains… didn’t consider that top-level domains can contain two sections… will try and fix in the release)
Mark: Ah, so that’s where it goes wrong. Well, nobody can expect you guys to write your own toUpperCase() function ;-)
Been lurking upon your work on sIFR since the beginning, but now I just have to come out and take a stand – this is absolutely brilliant!
There’re still some problems, eg. transparency with Opera, but I guess I shouldn’t worry about it too much. It’ll be fixed in a future release (of the browser), right? :)
f opera.
thanks guys for the new release and the instructions. very much appreciated :)
Awesome, awesome work. sIFR will be implemented in a large-scale web project slated to be launching by the end of the month from our agency.
One thing I have found – IE5.2 Mac will not replace unless the replacement functions are in the actual HTML. Putting the replacement code in the .js does not work.
again, this sIFR technique is money, and thanks for all the hard work.
question…. is the “*/” a mistake in the below style?
span.sIFR-alternate { visibility: visible !important; display: block !important; position: static !important; left: auto !important; top: auto !important;*/ }(Editor’s Note: Uhhh, yeah, that’s a mistake. I just fixed it. Thanks!)
Is it just me or are there problems with links being sIRF-ized?
I have
sIFR.replaceElement(“h1”, “17thdegree.swf”, “#508DD0”, “#508DD0”, “#508DD0”, null, 20, 0, 20, 0, “textalign=left”, false);
despite this, my link starts blue (#508DD0), then stays blue when moused over, then on the mouse out it turns to black. Then when hovered after that, it turns blue and goes back to black on the mouse out. Am I just missing something here?
Mike,
Did you remove lowercase support in this version? Because I don’t see the option listed in the updated example, and since I’ve replaced the .js file and re-exported the .swf my titles are no longer in lowercase.
If you did remove it, can you bring it back? If not, I can just revert to the old version….
(Editor’s Note: This is fixed now. I uploaded a new RC1 file at 12:45PM Pacific Time on Thursday, October 7th. Please re-download.)
James,
One of the caveats that I believe I mentioned in previous releases but did not reiterate it here is that if you specify either a hovercolor or link underlining, the entire Flash movie is necessarily turned into a button (no way around this without losing Flash 6 compatibility). So what this means is that mixing linked and non-linked text is best done without using hovercolors or link underlining (although you *can* specify a linkcolor).
Simply awesome work guys. Thank you from the bottom of my heart. I’ve convinced many of my clients to go the CSS route and now I can offer a beautiful, accessible, indexable alternative.
I’ll be loading it in the morning to take it for a spin. :)
First. Awesome!!!
Thanks a bunch to all involved, possibly the best thing to have happened to the web in ages. Beautiful fonts without having to cut hundreds of headers. Yay!
Minor note, Not sure if its been mentioned before.
I originally installed version 1.1.3. And this worked fine. In fact, better than fine because for some reason, the .swf didnt sit on top of the z-index/stacking order meaning my html menus could sit on top of the flash file. version 2 however works as you would expect and sits top most. Ill keep using 1.1.3 for this reason but thought you might like to know. Hope all that made sense.
Yeah,
Disregard the minor note bit. I’m a spaz.
But still. Thanks!
Pete
Nice one guys! Keep up the good work!
I’ll be updating real soon. Big ups to Mike for the nice use of the word “homies”.
Great work here Mike and Mark. Quick question, any stats on the amount of downloads of sIFR?
Sorry to be a pain, but is this error just me? I thought last time it was becasue you zipped the file on windows. This only happens on my windows box here at work, on my G5 at home there is no problem.
C:\Documents and Settings\Alexis\Desktop\sIFR2.0rc1\sIFR 2.0 rc1\customize_me.as: Line 1: ‘;’ expected

Marty Stake, replacements in the script are cached by sIFR and executed on page load. The JavaScript method needed to do this is not supported nativly by IE/Win 5.0 and IE/Mac 5.x. A workaround is being used for IE 5.0, but – this is pure theory, I don’t have a Mac to test this on – appearantly this workaround isn’t working.
I’ll try to debug this with Mike, as for now you can place the replacements before the body closes or in an external JavaScript file which is loaded before the body closes.
Thanks for all the work so far Mike and Mark
Implemented sIFR on my blog and am about to use it on a fairly large site i’m developing.
Dynamic headlines while still getting greater typographic control – fantastic!
When you say “Possible weirdness in certain versions of Opera.”, do you mean that the Flash text doesn’t appear sometimes when you load the page, until you refresh the page? Because that’s what I’m getting on jukebo.cx — in IE it’s all working fine, but Opera (version 7.54, on Windows) is having occasional problems…
I was to implemet this into my blow but noticed when I run this on WinXP with SP2 and IE 6 that I get a security warning. First a yellow bar at the top of the window. If I click it and choose “Allow .. content” i get a popup with the text
Allowing active content such as script and Active X… may harm your computer.. are you sure run active content.
Is this just me because I have not seen any comments about it.
Jens,
Don’t worry about this. It’s only because you’re running it locally and XP SP2 throws up warnings when you run any Flash locally in IE.
@Paul: I’m having a similar problem in Opera 7.54 on Win XP SP2. Example: on https://mikeindustries.com/blog/files/sifr/2.0/ the big centered headline “the gothic times” doesn’t get rendered at all and there is no h1, too. When you hit reload the page scrolls a bit down (it gets longer) and there is a big white gap where the headline should be.
Besides this problems: it’s a brilliant piece of work and on behalf of millions of web designers I say: THANK YOU!!!
Greetz from Germany
Marty Stake, I was wrong. There were no onload events firing for IE/Mac! It’s fine now, but you’ll have to wait for the next release (while we wait for more bugs).
(Editor’s Note: This is fixed now. I uploaded a new RC1 file at 12:45PM Pacific Time on Thursday, October 7th. Please re-download.)
@Christoph: I don’t have the same problem on the sample page — the headline appears fine for me. In fact I’ve only noticed this problem appearing on jukebo.cx, which I’ve developed, so I did wonder if there was just something wrong with my implementation. However, it works fine in IE. Not that that really means anything, of course.
Having a small problem with the height of the flash text. I am trying to place a border on the bottom only but end up with a massive gap. I have changed the setting to no avail. I have set the margins and padding to 0 on all elements to test but that makes no difference. Any ideas??
I’m experiencing the same problem James mentioned (#29), with incorrect color on rollout. I created this sample using the files included with the sIFR 2.0 RC1 download, and simply changing the text and link colors assigned to the h1 replacement.
When you load the page, the headline is correctly displayed in #6298C1. When you rollover the headline, it is correctly changed to #999999. When you rollout of the headline, the text color incorrectly changes to #000000, instead of reverting to #6298C1.
Mike’s response did not seem to properly address this problem. It seems there was a misunderstanding. I apologize if in fact I am incorrect.
Thanks for everything, Mike et al.
(Editor’s Note: Thanks… this was a regression bug. It was important enough to cause me to update RC1 and fix it. I updated the file at 12:45PM Pacific Time on Thursday, October 7th. All should be fixed now.)
The fix works. Now it’s not just money, it’s cash money.
Great work and thanks to everyone involved.
First off, sIFR is beautiful and I commend all of your hard work.
I’m using it in a soon to be released mini web app (MacForce Bundles) and am running into some issues in a few browsers.
Thanks times ten.
Javan, If sIFR in IE5 Mac is giving you trouble (which in more complex sites it seems to), you can use this.
.sIFR-hasFlash h2.bundle {
visibility: hidden;
/*\*//*/
visibility: visible;
/**/
margin:0;
}
Basically it will still show the h2 html in IEMac, all other browsers will hide the h2 html and replace with sIFR.
Thank you muchly for all your hard work and effort in getting decent fonts onto the web, without resorting to browser or platform specific typeface rendering.
With the release of this RC, all I can say is: bring on the eye candy!
Just a short comment: Creating individual .swf files based on sifr.fla did not work for me (Win2k, Flash MX) – never got any text in the swf. But I found out, that the first blank line in dont_customize_me.as and customize_me.as lead to a syntax error. Removed the blank line and everything just works fine. Big thanks for sIFR!
Is anyone else having trouble getting sIFR to work on a textpattern site?
This is pretty bad ass… I works for me
I haven’t seen anything mentioned about this, so I’ll see if anyone here has run into it. I’m only able to create the dynamic swf from Dreamweaver MX 2004. I can not get a file correctly processed from Dreamweaver MX. I am using the version of the files just downloaded. Another developer and I are on MSN and he’s having the same problems. (I’m on a MAC, he’s on a PC)
Is this a known issue?
I’ve got it showing up on Firefox, but it won’t show on IE. Any ideas what I’m missing?
click
Thanks!
cjs, I’m quite confident that this has something to do with the placement of the script tag which loads sIFR. Put it in the head, not in a table.
Peter, sIFR works on the client side. Whether you’re using TextPattern or not does not affect sIFR (unless something funky is going on with regards to the stylesheet… but without a demo I can’t verify that).
Thanks Mark, I tried putting it in the head of the page instead of the header include file but I’m still not seeing it in IE…
cjs, then it might be a CSS problem. No offence, but the source is a real mess, which doesn’t help matters.
I sent e-mail to Mike about this a while back, but I started to feel like I was nagging, so I dropped the issue. However, my “gripe”, if you could call it that, still stands.
With Flash MX 2004, there’s a feature to keep text aliased. I used a pixel font with the sifr.fla and selected the option to keep the text aliased. I set the JavaScript to require the client to use Flash 7. However, when I view the page in any browser, the text just disappears. Other replaced text shows up just fine, but not the pixel ones. The box, though, is there, because I can select it, even though it’s blank. Weird.
Any ideas?
Mark, no offense taken, I didn’t build the app. I appreciate the help, I’ll post if I find an answer. Thanks.
Hey Lars, what program did you take the lines out with? I have tried modifying these files in Dreamweaver and NotePad but Flash MX/WinXP still gives me these errors. Not a big deal since I am doing most of my work on a mac but I would like to be able to play around with the files here at work.
alexis, notepad nor any other windows editor where of little help to me, too. but then i ftped the files to a UNIX server, opened them in vi (unix editor) and – voila – there seemed to be a MAC character at the start of the first line. after deleted it the sIFR.fla worked just fine!
it should read “after i deleted it” at the end of that entry above *g*
Thanks Claus, I used pico on my mac to remove the characters and now all is well.
I am having trouble creating/exporting the swf file using Flash MX (not MX2004) in version 2.0.
I’m following Mike’s directions, loading the sifr.fla, double clicking the text box, choosing a new font, then exporting the movie to FlashPlayer 6. But after entering my new font in the JS replacement section, nothing is loading in my browser. Double-clicking the swf file just reveals a blank, not the text: “Please pass in your text” as in the examples tradegothic.swf and vandenkeere.swf.
Does this only work with MX2004? Any ideas?
I may be overlooking something real obvious in the documentation but…can someone point me to some information on controlling leading and extra white-space within the replacment div’s?
The heading replaced here has an inordinate amount of white space at the bottom of the text I can not, for the life of me, seem to get rid of. Do I need to use negative margins or some other tweak, or am I overlooking something from a previous post?
Any insight greatly appreciated!
Following up on my earlier question regarding my inability to create a swf file, here is the output message I’m receiving :
\\path-to-my-file\sIFR\customize_me.as: Line 1: ‘;’ expected

I have re-downloaded the zip file; the example works flawlessly. The action script includes do not appear to be working correctly in creating a .swf from the .fla file.
Any suggestions would be much appreciated!
I’m really looking forward to getting this bad boy out on the highway. Kudos for the hard work.
However, I’m getting the same error as above. I tried editing in vi as Lars and Alexis did, and the first time I saw ^M all over the place in dontcustomize . .then I reupped and the character was gone. Just to be safe I saved in vi and then pulled them back down off the server. Still get the above error no matter what I try.
What is the maximum font-size? I’m getting a ceiling of about 125px. Is there a way to increase this limit?
Just sort of pushing the limits and seeing what’s possible.
Thanks for the work.
Great job, the only things who is missing for accessibility is the proportional font resizability, for exemple see
here
Trying to implement the SIFR at Milkround.com, and the flash means the drop down links are no longer clickable. It is the h2 tags that I am replacing…
Any resolution to this yet?
Umm, kinda n00b here so i’m gonna ask a dumb question.
Can I use a certain font-face even though the user doesn’t have it installed in their com?
Forgive me for such a dumb question, i’m really new here. Good job to Mike!
Ben, most likely you have to set the background of the flash to transparent.
So something like this:
sIFR.replaceElement(“h4.classname”, “/sIFR.swf”, “#171A23”, null, null, “transparent”, 0, 0, 0, 0);
Alexis,
I appreciate the respone and you were correct. however even when specifying a background, it still obscures the menu and makes the sub-links, (in the dropdown) unusable.
(Furthermore, with a dark blue background, it goes through the menu and looks worse!)
Code used:
sIFR.replaceElement(“h2”, “/s4/jobseekers/_sifr/fonts/lucidahandwriting.swf”, “#FFFFFF”, null, null, “#1C387C”, 8, 0, 8, 30);
If your url string is particularly long, flash cuts it off. Is there a simple way to fix this or do I need to dig into the code? The url im trying to pass it is: http://cobrand.lawinfo.com/common/faqandforms/dsp_coresults.cfm?cat=106&state=&act=form&site=univision&cbID=120&i=b&cbURL=univisionabogados.lawinfo.com
I know its long, but its valid html for all I can tell. Thanks.
Quick question: is there a way to change the default padding of the Flash result? I’m trying to put borders on the text, very close on the bottom. Unfortunately I’ve been unable to make it work; it seems like the Flash wants to put at least 5 pixels of dead space below it. I have the padding everywhere set to 0, I set new style rules to change the margins/padding, nothing seems to change this basic fact. I also went and changed the Line Height from 2pt to 0pt in the Flash itself; again, no change.
This is a tiny thing, but a very frustrating one. I can upload the files of what I’m working on if needed.
Thanks!
Ben, if you use a background color it will certainly not work. What happens when you use the following? I would change the bg color with a div background color which contains the h2 tag.
sIFR.replaceElement(“h2”, “/s4/jobseekers/_sifr/fonts/lucidahandwriting.swf”, “#FFFFFF”, null, null, “transparent”, 8, 0, 8, 30);
This page I made uses an older version of siFR but it has suckerfish drop downs which work just fine.
http://www.rhinopallet.com/products.asp
The version above uses siFR version 1. I manually changed the wmode to transparent. Some one may have to correct me but I think version 2 sets wmode to transparent when you use the following syntax .
sIFR.replaceElement(“h2”, “/s4/jobseekers/_sifr/fonts/lucidahandwriting.swf”, “#FFFFFF”, null, null, “transparent”, 8, 0, 8, 30);
Any chance we could get this to work with the vertical bar “|” character? Otherwise, this is really great stuff!
Like everyone…nice job!
I was wondering if there was a way to adjust the kerning of the characters? I have a heading of 14px all caps and would like to space it out a bit. I’ve played around with everything and still it goes back to the same spacing. Any help appreciated. :)
I just began implementing this today. All is well in mt Firefox1 test, but the Flash replacements do not show in IE6.
Could someone point me toward my mistake?
Hi,
Thanks for all your hard work on this it really works well and certainly opens a lot of new design avenues. I do a have one problem though and forgive me if it is caused by my inexperience with CSS.
Can you confirm that sIFR does not work when applied to an html list containing links?
I want to use sIFR for a navigation menu displayed as an inline list (my CMS outputs menu links as a list). The ‘menu’ is displayed in FLash but loses any font size control applied to it (it goes really big) and loses any spacing between the words and operates as a single link.
e.g. “link1link2link3link4”
You can see what I mean here: http://ssd23.digital-word.com/folders/services/services/
CSS here:
http://ssd23.digital-word.com/assets/templates/default.css
I really appreciate any light you can shed on this.
Thanks.
Adam
Adam, you are replacing the whole menu with one Flash element. No wonder things break down…
You can use normal CSS selectors in sIFR. So, instead of “h4” you use “div#horizontalNav li”.
Randy: curiously enough, I was having the same kind of problems today. Neither my WXP/SP2 IE6 nor my friend’s W2k IE6 were to display anything. Also, when I try to view the sample demonstrated above, well – it just doesn’t work. I have Flash properly installed, Opera and Firefox work well, and I did allow the Javascript to be run when asked.
If I’m not entirely mistaken, this could point a possible flaw in the code. Anyone else experiencing the same?
Mark,
Thank you so much for that. I am very new to CSS and you just saved me a lot of head scratching. I can now say I am truly in love with sIFR!
You are a scholar and a gentleman , sir!
Cheers,
Adam
This is so great I’m in awe of your dedication.
I just thought that I’d mention in case anyone is using “line-height” in their CSS file with sIFR that the sizes will be distorted on different platforms and didn’t show up on my Win IE. This was specific to the actual item being replaced by sIFR and not the other elements on my page/CSS.
Anyone else experience this?
Mike S, this has to do with the dimensions of the element as calculated by the browser. Nothing we can do about it, alas…
I having the same problem that a few other folks have mentioned, but no one has responded to yet. (see comments 46, 67, and 77) I’m getting the white space at the bottom of the movie. The solution seems to lie within the use of the the “.sIFR-hasFlash h1” properties but I can’t seem to make it work like I want. Anyone have any tips or tricks they have discovered? I’m trying to use Interstate BlackCompressed.
I was just looking at this for the first time ever, and what a nice piece of work it is!
I might have some technology to share.
Would you guys be interested in experimenting with dynamically resizing SWF’s within a page? I have been experimenting with it in the past and have found a quite compatible way of pulling it off.
It would allow you to get resizing blocks of Flash text, although it wouldn’t allow for you to put some inline blocks in the resizing text, like you have in your example, unless you’d find another workaround for that.
Thanks for the great work people!
This is very cool. One question: will google find text that’s been replaced using sIFR? I’m guessing the answer is no, but I could be wrong. If the answer is no, is there any way around this problem?
another question, probably a dumb one:
what’s the advantage of sIFR over dynamically generating header images using PHP?
You know, I’ve been playing with this since its inception and must say you people are to be commended. This is simply an astounding evolution for web designers, and your work will undoubtedly be utilized by thousands.
Congratulations, and thank you.
Two recurring issues, and corresponding band-aids:
Again, you people rock. This is a revolutionary technique.
Cheers!
Hello great work and I adore it, but somebody just contacted me to tell me he is confronted with the placeholder for flash instead of the plain text.
Url: http://www.templaterie.de/showroom01/index.php?c=1&s=schmucktext
(It’s a German page realized with Editland 1.0, a miniCMS on PHP.)
My visitor used MS IE6. I could ask him whether he had or has a previous Flashversion or Flash installed/active at all.
Thank for your help, anyway.
Yours
Silke
@T
That’s quite easy: Copy&Paste resultes in a textcopy and not an image.
By the way I’am a flashdummie and very far from a JS-Expert … would it be possible to rotate the line slightly by feeding the degree. On my sample I immitated a post-it and to have the text rotated by 10-20° would just top the impression.
Kind regards from Backnang (Germany near Stuttgart)
Silke Schümann
Allright … your page looks the same to him.
It is “javascript im ie (java sun)”, he thinks.
I hope you can solve that one.
It doesn’t realy make sense to have keywords and header replaced by turkish puzzlepiece-shapes placeholders. :o)
Yours Silke
@T
Oh, another easy question:
Google will just fine find, read and index the text, as you write a plain XHTML-File and formatting this via CSS an JS. Google doesn’t run JS-functions. ;o) Which is actually another advantage towards images generated by php.
T, as Silke wrote, the replacement is done on the client side in a browser. Search engine spiders don’t run client side code. Another advantage of this solution, besides the one Silke pointed out, is that there only has to be one Flash file downloaded for each font, so it should save in bandwidth.
Mark Wyner, you can set some specific CSS for to-be-replaced elements using html.sIFR-hasFlash. The letter-spacing issue is weird, but I assume Mike can put that in the documentation?
Peter Dekker, thanks for the offer. sIFR indeed has issues concerning resizing the Flash objects when the text is resized or if the window itself is resized. Unfortunately there is no nice way to detect a text resize: no event is fired on a text resizet. A workaround might be to check the height of a certain element (body tag?) every second, but that would involve an interval and would be very unreliable.
Also, I don’t think it’s that dramatic if sIFR doesn’t follow text resizes, as it should be used for headers and not body text. As for window resizes, I think that’s even less of a problem.
So, to conclude, I don’t think the code necessary to resize the Flash objects is worth the trouble.
Silke, I don’t have trouble with the site in my version of IE (6.0.2800.1106). As for the titled line, go ahead and hack the Flash file ;-)
@ Mark
Well, nor have I. I wonder what blooming configuration it takes to get this and how often it occurs. At the moment I ask my visitors to let me know and hopefully it is a rare exception. Though I’d rather wish there wasn’t any exception at all.
Thanks for pointing out bandwidth, I hadn’t thought of it yet.
Because of Silke’s post on a different forum I am now able to play around with this great piece of software. I did something similar before, but I just concentrated on the replacement of standard pictures with flash-elements. I took a totally different approach, mostly using PHP to do handle the replacement. Your realization is way better. Your concept is great and the resulting software is something I will enjoy using.
So, thank you all ! GREAT WORK !
Is there anyway to take one “font.swf”, and be able to maniuplate it to display all large caps on the first character of each word, and display smaller caps on the characters following the first?
Example:
BLAH STATE UNIVERSITY
I tried intertwining hx tags but I don’t think that is legal xhtml nor did it work.
Theoretically here is what I’m thinking…
<h1><span class="large">B</span>LAH
<span class="large">S</span>TATE
<spanclass="large">U</span>NIVERSITY
</h1>
I applied styles, and could not get it to work, any suggestions?
Has anyone found a way to float an image (or anything else) next to a sIFR element? I’m not able to do it… I tried the typical way of putting the image right inside the opening tag of the heading element… Instead of floating, the text appeared beneath the image. I also tried placing the image before the heading element as well as after the first couple words, just for a kick. That didn’t work either.
Is this not possible due to the Flash portion? I have floated Flash elements before… and if I disable JS, I can float the image next to the CSS styled text. I’m about to give up here tonight… just thought I’d ask if there was a way I hadn’t thought of.
I’m not sure if there is a more appropriate forum to post these little funky things in… please point me to the right place if there is. :) Meanwhile, I ran into something strange. Not sure if it’s a bug or just “how this works”… but thought it was worth mentioning.
If I use sIFR for a heading, but don’t want to use it for all headings, the ones I do NOT use it for, are removed, just as if I were replacing them. Only, since I want to use CSS instead of Flash, nothing is there to replace it. In the case of an H2 selector I wanted to style with CSS, I’ve removed the .sIFR-hasFlash h2 selector as well as the sIFR.replaceElement(“h2”,… in the javascript at the bottom of the page. Is there something more I need to do? Or is this a replace all headings or no headings issue?
I put an example up because I had to make a minimum test case to figure out why in the world my text was disappearing. :)
Here is the min-test with the main text area in a P element-
http://www.kpcinc.com/philosophy/testerP.htm (that’s basically how it should look)
Here is the min-test with the main area as an H2 element-
http://www.kpcinc.com/philosophy/testerH2.htm (it should look just like the one above…. and if you disable javascript in your browser, it does.)
And on the floating issue I mentioned in the number 103 post, I’ve made a test case to show that as well. I mispoke above — the image disappears if I place first within the replaced H2 element. It shows, but the H2 element shifts down if I put it right before the H2.
http://www.kpcinc.com/philosophy/tester.htm
Thanks for any info or ideas… you can email me at stephanie@communitymx.com if needed.
As far as I watch the behaviour of the replacement, it analyses its space first and then takes it as a small block. It takes all away what is in the >-tag provided for replacement. Thus it doesn’t make sense to put images within the >-tag.
As the block with flash appears as such it will only stay next to an object and not float around. Only if there is a parameter to tell flash to regard objects that take part of the same space and move a little it will work. You have to look for a function within in flash not CSS.
H2 replacement
If you tell your CSS take all out, it will take all out. If there are exceptions (class / ID) you have to tell your CSS not to take it out.
…
I wish I knew more about flash. :o)
@Ben Lumpkin
this question was answered in the kick-off-thread. You have to choose a font with caps to solve this problem.
The ‘Why’ you can read in my post 105.
I have the same problem with Maxime. I tried the technique in Greek language and there is an empty space instead of the greek h1 text.
Following Mike’s advice (Editor’s Note: To add extra characters, click the “Character…” button on the Properties palette in Flash before you export your .swf) the .swf file’s size increased from 10KB to 17KB but without to solve the problem.
In the export’s report file there isn’t any greek character
Font Name Bytes Characters
— —- —-
Arial 16508 !”#$%&'()*+,-./0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
You first have to create a Flashfile with greek letters. I have to integrate the German Umlaut and sharp s (ß) and if my client is more international oriented all the other likely to needed letters with accents and what have you.
ooops sorry … maybe your font doesn’t support the letters you integrated .. did you check this?
Stephanie, as Silke pointed out you’ll have to tweak the CSS and JavaScript selectors (first argument of replaceElement).
Was using this on a little site I created last weekend – it’s brilliant – but someone commented that they couldn’t see ANY headings at all because they have a Flash blocker installed.
So the Javascript was removing the original H1’s but then not showing new ones because his browser was blocking it – he can override it by clicking “show this object” – Firefox extension, I think.
Obviously this’d be annoying if he has to do it on every page – and he’s not going to be the only one running the blocker. What’s the best way around this problem – I’m open to suggestions!
Silke, I solved my problem by setting the encoding of the index.html to UTF-8 (meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″)
I had created the .swf files with Greek characters following Mike’s advice but without the UTF-8 encoding the sFIR technique didn’t work.
Thanks for your advice; you motivated me to try again.
@Panagiotis
strange … I don’t use utf-8 yet and it was working fine with ISO-8859.
Mikky, perhaps the blocking extension could be updated so it detects sIFR. I discussed another idea at my weblog.
Stephanie:
If you only want certain headlines to be replaced, just be specific with your replace statement and CSS rules. So, for instance, if you only want H2s with a class of “test” to be replaced, you create styles for h2.test and .sIFR-hasFlash h2.test.
If you just leave the .sIFR-hasFlash h2 in there, it will apply to all H2s and turn them invisible. So in short, just make sure your CSS code matches your replacement code precisely.
Also, with regards to floating stuff next to sIFR text, you have to set the display property of the text you’re replacing to “inline”. Otherwise, the element will span the entire width of the horizontal space and be replaced by Flash text which also spans that width.
With regard to three issues mentioned above:
1. Line-height. You should be able to use whatever line-height you’d like. I’ve had no problems with this at all. Just remember that when you change the line-height, you are changing the size of the box which the Flash takes up. Also, remember that by making good use of the decoy styles (.sIFR-hasFlash [whatever]), you can make sure the box actually doesn’t get bigger if that is your desire. Remember, what happens is that the browser text is rendering using the [whatever] style, then it is classed with the .sIFR [whatever] and turned invisible, and then it is replaced by the Flash text. So your browser text can be classed in a completely different way than your decoy text.
2. Leading in Flash. Unfortunately, there is no way to get tighter leading in Flash than the default value of 1. You can go greater than 1, but unfortunately not lesser.
3. Extra space at bottom of Flash text. The problem here is that your Flash font and your decoy text is not properly “tuned”. By applying negative letter-spacing, you are making the metrics of your decoy text closer to the metrics of your Flash text, and that’s why it’s working better. This is a step that should be taken all in circumstances.
Silke,
You are right. The problem was the absence of the encoding. It works fine with ISO-8859.
in polish
another type letter like ąśćłó is not visable
paste
<
meta http-equiv=Content-Type content=”text/html; charset=iso-8859-2″
%gt;
or another
iso-xxxx-x
or
utf
in example
sorry for brutally dirty and bad english ;)
The letter-spacing technique has not worked in my case. Any letter-spacing value on my .sIFR-hasFlash h2 from 5px to -9px doesn’t seem to affect any change at all. A value of -10px or less makes the text DISAPPEAR entirely.
So, still puzzled.
Hi,
something weird happend while I was exporting to myfont.swf
You can write into the sIFR-part notes. Though nobody can save his notes onto my server, I still rather prefer it to be without this ‘feature’.
What settings did I miss, during the export procedure?
I notice an error when javascript is enabled and styles are disabled. Both replaced headlines and headlines that should be replaced are shown.
Hi,
I found my error. I forgot deactivating the checkbox import. :o)
Many people seem to comment on the lack of certain characters used for their language. Perhaps a few designers who regularly use non-English language ought to host a sIFR page with a localized package. Mike has fairly frequently mentioned that not all charaters are included in the default set because the file size would become unreasonably large.
David Robarts, localized packages… I like that. Perhaps it can be done for the official distribution here.
Jeff, clearly you haven’t looked very well at the technique. CSS is used to hide the original text. There’s no way to detect if CSS is enabled anyway. And who would browse the internet using JavaScript but not CSS? Doesn’t make much sense to me…
Mikky, perhaps the blocking extension could be updated so it detects sIFR. I discussed another idea at my weblog.
A nice idea. Let’s hope the developer can be persuaded as it’s a fantastic technique, I’m just too scared of getting a load of people with this problem beating down my door!
Nice work Mike, et all…I have a question, sorry if it has been answered elsewhere. After experimentation and searching I haven’t yet found a solution for this.
Can one have mixed italic and non-italic font face in a single using this method?.
I know Flash itself can do this if you embed both font faces in the swf, but no luck with the sIFR2. Anyone know or can point me in the correct direction? It is a business critical need for us, and much as I would love to implement your technique, it’s a deal breaker without. Any help much appreciated.
Thanks again for all of the hard work and creativity,
Laurie
I answered my own question. One CAN mix italic and regular text in a single H1 Tag. First, select one character in the fla’s holder.txtF field and style as italic with the property inspector before embedding the font as per usual.
Publish the new .swf file.
Then the important bit. in the H1 itself, use the <I > around your italic text </I > vs the regular less than and greater than signs. There you have it, mixed html styling with embedded font. Have fun!
-Laurie
PS, you also must comment out the piece of dont_customize_me.as that affects the italic prior to publishing the .swf
if (holder.txtF.htmlText.indexOf(““) > -1) {
fmt.italic = true;
}
Good work guys, this is awesome!
I have a question tho: in Opera 7.5, nothing shows at all, neither the sIFR, neither the normal text. I was wondering if there is a workaround for that.
Also, I made some clickable titles. The links work, but the cursor (to hand) doesn’t change on rollover. How can I achieve that?
Thank you and continue the good work!
Guillaume, could you give us a testcase for the Opera problem please? A more specific Opera version would be handy too.
For some reason, when I view the demo page (https://mikeindustries.com/blog/files/sifr/2.0/) in Firefox (1.0 PC), only the “The Gothic Times” and the “Geneva Plan Signed” headlines appear. The other headlines are blank, with no text at all.
I just started using Firefox as my main browser…could the issue have something to do with one of my settings?
I want to use sIFR so bad! But I don’t want web pages I design to load with blank headlines. Am I doing something wrong here?
Clay,
Not sure what’s going on there. You’re the first person to report something like this. Do you know if you’re getting browser text headlines or Flash headlines? When I installed Firefox last on my PC, it didn’t include Flash.
Also, are you running any other add-ons like ad blockers or have you otherwise modified any noteworthy preferences?
Mike,
So glad to get such a quick response. I know that Flash 7 is enabled in my Firefox browser. The 2 headlines I can see appear to be Flash headlines.
I do not have any add-ons or ad blockers running.
Hmm…doesn’t surprise me that I am only one experiencing Firefox issue. It is my bad luck that is probably the issue.
Well, if any possible remedies come to mind, I would love know them. Thanks, Mike.
I’m also experiencing the ‘nothing at all’ problem in Opera (post 129)
Can’t give a verison number unfortunately, ’cause at the moment I’m only testing Opera via BrowserCam
But here’s the test case:
sIFR Opera test
If someone could assure me that this does indeed work in the most recent version of Opera, that would be great!
wicked technique by the way, thanks and all that!
Scott
Scott, I just installed the latest Opera 7.54 and it worked just fine. Mike will contact some Opera folks today to see if they have any clue.
It’s odd though, Opera renders sIFR really fast now, as compared to the previous installation I used… I’m clueless.
Ok I take that back. I’m getting unreliable behaviour with the test page now.
I think I found a solution for the Opera problems. Please head over to my website for more information and a testcase.
Well, I realized that the Firefox issue I was having was only happening on my computer. I tried Firefox on another computer and it worked. Don’t know what that was.
So, I got it set up on a site I am creating, and I set the javascript to only replace my H1 tags. I got the H1 tags working, but now all of my H2 tags are completely blank, in both Firefox and IE6, and I am not even telling the script to do anything with the H2s. I give up…I must be doing something wrong, even though I have checked everything.
I wish I was one of the other 99.9% that seem to have no problems setting this up! Ah, well :)
Clay, I suppose the CSS rules hiding the other elements are still there…
Had a doozy of a problem, none of which I believed was the fault of sIFR, but it’s worth mentioning here. I had a site that needed a certain font to be used for a list, and I figured it was a chance to try out sIFR, especially as the list was dynamically generated.
Trouble was the font used was “Industria” and either the metrics were weird or Flash had trouble understanding them, as the list items were appearing in different sizes for no discernable reason. Substituting it with any of the example fonts and no problem, it was only using the font the client wanted. Of course.
In the end I found single words always worked fine, so I replaced all spaces in the html tag with underscores, eg <li>this_is_dodgy</li> (using PHP in my case). Then I added a line in the sIFR jscript (about line 285) and changed those underscores back to spaces:
sText = sText.replace(/_/g, “%20”);
I don’t exactly know for sure why, but it works, so who’s to argue. It ain’t perfect as the list tags have underscores in html, but it’s readable sans stylesheets, so I’m happy enough. Just in case anyone else is struggling with imperfect fonts…
oh, the now corrected page is at:
http://www.studiolimonard.co.uk/portfolio
There is some strange issue.
Not sure, what exactly is going on.
Using (guess what?) sIFR, cyrillic encoding 1251.
All seems fine… till the moment I create 3 headers on one page, 3 columns in table.
All these headers have other size, bigger and bigger each next.
Can u say something about? And sorry for my english, btw.
Have anyone used this for asian languages like traditional/simplified chinese etc? Currently working on a 40+ language site and would need to know if it would work. Mail me or post here. Thanks.
If you think I’m going to read 150 posts, forget it. However I did read about the first 50, so hopefully I’m somewhat updated before I go ahead go point my cursor to the comment box.
This is something I’ve been looking for ever since I learned server side technology. It seems no matter who or where I asked the question “Can I install a server-side font?” or “are there such thing as server-side fonts?”
Never would I receive a clear example. What I particular like about this this sIRF project is that it still looks great in the source (Perfect for SEO). My only tiff still (and I’m assuming a few folks already mentioned this in the 150 posts…) accessibility issues. I did, however, catch a glimpse of mojombo link on how they have managed to allow for some basic (limited) css. Rather than creating the whole new file, you can manipulate it with some simple css 1.0 specs.
anyone know any updates on that?
I guess what it really comes down to is how much the webmaster really cares about accessibility.
For those who complain about not being able to resize the font with their browser….Well, the webmaster is most likely only using it on headlines anyway, so the text is “already big enough.”
I’m with Dustin – way too many mosts to read. So if this has been answered already, forgive me.
My question is how do you set the width to be bigger? My longer headlines get cut off. I couldn’t find it in the css – and i tried just making my flash movie bigger, but it didn’t seem to want to work. Also, the uppercase/lowercase feature does not appear to be working. I’m using the version I downloaded as of October 30th.
Besides that, it works great. Thanks!
Again, if this has already been asked, I apologize.
Jina, the Flash objects are as wide as the HTML elements. So, you have to make the HTML elements wider.
If you only want to do this for sIFR, use “html.sIFR-hasFlash” in your CSS selectors. These rules will only apply if Flash has been detect and sIFR will replace elements.
Dustin:
There are no known accessibility issues. Please read the original post for details of how the technique works.
Mark, you are right…I didn’t remove the CSS ‘hide’ rules for the other tags.
Thank you for pointing out the obvious!
COOL SITE
First off: thank you for a great invention that will be used alot.
To the problem: I cannot open sifr.fla, I get “Unexpected file format” using Macromedia flash MX 2004. Am I the only one getting this error?
Lookin’ good!
However, I seem to have trouble getting ‘smart’ quotes from it. What’s more, a heading with a smart quote seems to trigger that gigantic text bug that some people have discussed.
Is there something that can be twiddled to change this? I already tried exporting all characters from the font, and tried encoding my smarts as various flavours of entities. Nothing seems to help.
I’m using Flash MX (the first, not 2004), MacOS X, and already tried it with plenty of fonts.
Hi,
I have been using sIFR on my textpattern install and it seemed to be working nicely, however a few posts in and some replaced headings seem to just completley vanish and yet others are perfectly fine and show up as expected.
There are no unusual characters in the heading just ordinary letters.
I understand that there are problems with transparency with “Opera and Macs”. What are these problems?
You guys are amazing. Kudos!
Please, if you encounter problems, show them to us on a webpage.
Jonathan, replacement now works fine in RC2 in Opera. It’ll render a transparent background as green though, but thee’s nothing we can do about that.
Thanks for your reply Mark. Is Opera the only browser that handles transparency incorrectly?
Break tags? I can’t make them work. Ideas?
Prolly some rookie mistake on my part.
Sorry, here is an example of the problem I’m having.
Sorry for the time it took to respond.
My Opera version is 7.51. I contacted Mike and he gave me a sniffer that detects Opera it and shows only the text for it.
By the way, my sIFR links still dosent work. The link works, but the hand cursor dosent appear on rollover.
Here’s the link : http://www.revolver3.com/validation/sen/en/sitemap.php
Thanks in advance!
The example at https://mikeindustries.com/blog/files/sifr/2.0/ doesn’t work in Opera 7.21 & it fails to show the text which it should if it can’t show the swf.
Will it it be fixed in the final version?
Great work. This is a great implementation of something I’ve thought about for quite a while.
I noticed that the css hides the flash and shows the HTML when printing. I tried to disable this, but the flash text prints extremely small/in the wrong position. Does anyone know a way to get proper printing?
-Adam
Jonathan, older versions of Mozilla do this as well. At least I saw this problem in Mozilla 0.9.4 (which more or less equals Netscape 6.2).
Johan, break tags are not supported.
Guillaume and Amit, this is fixed in RC2. I’m not sure when RC2 will be released, though.
Guillaume, I think this is a Flash problem. I’ll defer to Mike on this…
Raena, thanks for pointing this out. I think it’s a flaw in the quote escaping code in the JavaScript – so actually it’s my fault… darn :-) I’m going to do some tests with this so it will be fixed in RC2 (good it ain’t out yet).
Raena, luckily for me it wasn’t the JavaScript which was at fault. The Flash files are not encoded as UTF-8, while smart quotes are UTF-8 characters. I assume the Trade Gothic Flash file is UTF-8, while the others aren’t (please read the note at the beginning of this entry).
Please reencode your Flash files and let me know. Props for the testcase, by the way.
Hi Bruce Hampton,
I think that string ”  ” is UTF-8 related. OSX is by default UTF-8 enabled, but my version of Windows (Win2k/IE6) was not by default. Downloading fonts from Microsoft’s site might help. Or browsing a website that is using UTF-8 encoding may request IE to update itself. I forget how I got around this problem but it was a hassle.
Mark: are you sure? My Flash files still didn’t work properly for me when changing the page’s charset to iso-8859-1. The provided Flash files worked fine in both cases.
Further, I do not know what to change to re-encode them in UTF-8.
Raena, it seems I was mistaken. Mike told me (and you, I believe) that this had to do with the Flash version you used to export the Flash file. It works fine in MX 2004.
Hi,
I cannot seem to get sIFR to recognize forced line breaks. I am replacing h1 text, and the Flash works like a champ, but it doesn’t recognize “br” tags. Has anyone else had any luck with this?
Otherwise its a fantastic bit of kit, nice work Mike et al.
Thanks!
OK
DAH
Mark, Mike and the gang: just wanted to say “thanks” for all your hard work and effort on this. You’ve created something really cool.
Just launched our first site using sIFR (as headings on the sectionhead pages): famelab
Hey!
As often happens when I post questions about things online, I found the answer to the question I posted in #167 above about ten minutes after I posted it.
Here’s the thing: The designers on my project require the ability to put line breaks in their headlines. I tried just putting in a <br /> element, but I noticed that while the Flash got taller, as if to accommodate the line break, the text did not break.
The fix goes into sifr.js. The code that traverses the DOM needs to be told to add the <br /> element to the text that it passes to the textfield in Flash. I added the following code after line 227 in sifr.js:
// This bit is required in order for the Flash to retain any // inserted line breaks if (oSearch.nodeName.toLowerCase() == "br") { sContent += "<br />" }It seems to be working so far.
Truly Brilliant! Wow. Thank you so much for this. I will be implimenting it in my own work shortly :)
David, after the linebreak was first suggested I thought it would indeed be handy. Then I forgot about it :)
I’m going to have a look today if I can get it to work using a newline character, rather than the HTML tag. Anyway, it’ll be in RC2.
Mark, hello. Let me try to repeat my stupid question.
There is a page in russian.
http://design.b.mcn.ru/works/
3-column table layout. Same headers for all 3 columns using sIFR last version. In IE 6.0 SP2 all these headings have different sizes…
Is it a bug? And what to do?
Can the flashes have transparent backgrounds so that HTML backgrounds show through?
Just a small question. Has anybody experienced problems with different font sizes between Internet Explorer and Firefox? It looks like Firefox actually displays the fonts smaller than they are supposed to be and IE renders them as they are supposed to look. I don’t know what the problem could be or where to start trying to solve it. I’m really confused and any help would be greatly appreciated.
Bryan, I have same problem. Dunno, is it bug or something.
Mark, any comments?
Philip, yes, this is possible. Note, though, that Opera 7 will display a green background instead of a transparent one.
hwat and Bryan, unfortunately you need to specify width and height properties for IE. Without these IE gives the elements larger dimensions. The Flash text is scaled to these dimensions, thus the size looks different.
So IE (once again) is the one at fault? Just so I don’t start messing things up again. I have to specify width and height properties for the box correct? Not just the font? It’s weird, because when I assigned the different text sizes, I felt that IE displayed them right.
Oh well. Thanks for your help Mark. I really appreciate it.
I have a question. I have not edited the .as files yet, but I have noticed that headings appear “bigger” then other pages. Usually 1 word headers (h2 in my case) appear like I assumed they would, but once I add 2-3 words to the h2, the whole font size looks like it is smaller.
What is the fix for this?
Thanks
Mark, the problem with different sizes of same headers still exists btw, look plz:
http://design.b.mcn.ru/works/
Same headers (h4) are rendering with absolutely different sizes, in IE and Firefox.
Oh, sorry, I’ve just mistaked in code. Works fine now, thnx for great tool!
has anyone encountered problems with their sIFR functionality within the new release of Firefox 1.0 ?
i’m having a problem where it was working fine across all browers when firefox was the beta version, but now my sifr is shoved down into my content area.
My install failed completely in FF 1.0. Fine in all prior versions. Sigh.
Jamon, Baxter, without a link to a testcase I can’t verify your problems, nor attempt to solve them…
Hi, I’m trying to implement sIFR with a fairly antequated content management system, and everything is fine except that the cms’s extreeemely large URL’s are getting cut off when being passed to the flash, and hence not working at all-
An example
/InfoID/419/RedirectPath/Add1/FolderID/133/SessionID/{8150341C-5D04-4DD5-9408-8BCCF94B715C}/InfoGroup/Main/InfoType/Article/PageVars/Library/InfoManage/Zoom.htm
Is cut to:
/InfoID/419/RedirectPath/Add1/FolderID/133/SessionID/{8150341C-5D04-4DD5-9408-8BCCF94B715C}/InfoGroup/Main/InfoType/Article/Page
I realize how absurd this is, and have no control over this aspect of the CMS. Thanks in advance for any help –
I was hesitant at first to give this thing a try. First I thought it was overkill for the site I was working on, then I thought it was way to complicated for a simple guy like myself. Finally, I decided to give it a try. I can’t believe how easy it was. You guys really did a nice job with this. Within an hour I had the previous site completely updated with fresh, new, and very pretty I might add, h1 tags styled up with Adobe Calson Pro. It was so much easier than I expected. So, if you’re reading this thinking that it all looks too complicated, give it a try. You may be just as surprised as I was.
Oh, and if you’re curious how the site turned out, you can catch a sneak peek at http://www.gurrydesign.com/portfolio/awakenamerica/.
Just to let you know: the latest Opera 7.60 preview, which supposedly fixes the green background problem, also makes sIFR’d text virtually uncopyable and unclickable (in case it’s a link). This at least with the above example.
Strangely enough, IFR text (here, on Shaun’s site and on JustWatchTheSky) works fine – it’s copyable and the load seems slicker than ever.
Could the fix be a simple tweak in sIFR, or are Opera users still in trouble? :)
Ezku, thanks for letting me know. I have an idea of how this might be solved, so I’m going to try that today. Opera has really been annoying us…
(Mike, hang on with RC2 until I’ve figured this out, please!)
Dave, I’ll look into this. It sounds very, very odd though.
Ezku, it’s an Opera problem. We’re using different methods to create the Flash objects in Opera 7.60 and in older versions. When using the older-version-method in 7.60 the text still could not be selected. Doing this was the idea I was talking about.
Now, onto Dave’s problem.
Dave, I was unable to reproduce this problem. What are the browsers in which you encountered this problem and could you show me a testcase?
Dave, of course the problem could also lay in the Flash file… in either case, a testcase would be handy :)
A bug in Firefox, mozilla?
Titles “Contacts” and “My contacts” looks different in Firefox.
In IE all is OK.
The one font in SWF for both, but “Contacts” is smaller for 1-2 pixels because there is no “y” symbol. Font size set to 25px.
This is not a problem of height/weight of around tables or something.. I think. Words without lower characters “y; q; g; j” looks smaller. Please check it.
ST, I think this makes some sense. “My contacts” is higher than “Contacts”, but it has to fit in the same box. Thus, “My contacts” appears to be smaller than “Contacts'”. As for why IE (as you wrote, haven’t checked it) renders this different than Firefox I have no idea
Perhaps this difference could be taken into account in the Flash script…
Okay, here’s my next problem:
Firefox 1.0 has been giving me problems with sIFR, and a screenshot is included. It seems like only one “image” pops up, even though there are other definitions that’ll require the same substitution. It works fine in IE, but I’m really getting annoyed on why this happens in Firefox.
Again, any help is greatly appreciated. :]
PS: This is the same site in IE6 (I use Avant) Please notice the size difference in the two browsers as well.
Bryan,
The inconsistency is quite similar to the problems in Opera in RC1. Unfortunately I haven’t been able to reproduce your problems (and you’re the first who mentions them for Firefox, by the way). Could you give me the exact build date of Firefox, and the Flash version and OS?
As for the font sizing issue, could you create a page which doesn’t load sIFR? The text (and/or the element) should be larger in IE than in Firefox even without sIFR.
Thanks for your help in tracking down these problems, and props for your site!
(Perhaps we should take this bugtracking outside of the comment thread here? You can find my e-mail address here)
Did this ever get done and if so where might I find it? I’m not rushing anyone as I can only imagine how busy you gentlemen are but if it exists, I would like to see if I’m missing anything. Also is there a wiki or a forum that I should also be checking in addition to the comment threads?
Hey sunshine,
We’re now trying to get the latest bugreports out of the way (there appear to be some problems with size differences between IE and Firefox). Then we’ll publish RC2. As for the documentation, I don’t know yet.
You can also check a good review at noscope.
Regards,
– Mark
Is there anyone wanting to help out on the new KSafari?
Steve
Steve, sure Mike and I are willing to.. but some more information than this question would be handy :)
Any news on the release date for RC2?
Absalom, any time… I hope :) Mike’s a bit busy at work I’m afraid.
Post #200 – what an honour.
I sincerely hope this is not an issue raised elsewhere – i apologize in advance.
Also, i am unable to replicate the error or provide it online as it is on a dev server with a clients soon to be released website. I will have to just try to describe it the best i can
Using the image replacememnt works fine. The layout is a css based using floats. Had some problems when one of the divs was determining its width using margins so we bit the bullet and declared a width.
The problem occurs when any sIFR element has a link involved. (i would generally not link any flash replacements but this may not be avoidable )
The rollover and states changes are fine and dandy on rollOn and Rolloff at the initial page load position – eg, not scrolled.
As soon as you scroll down the page and scroll up, it seems like the sifr fails to recognize the rollOver effect on the replaced element until you click on it.
Which suggests it has trouble finding the focus of the element in a completely floated environment after scrolling.
First time i have had this problem and until the site goes live i cannot replicate the problem.
Thoughts anyone?
Im my friday afternoon i tend to develop incoherant tho…
I should also mention this occurs in firefox 0.9 build on win xp. IE no problem, I will be testing on firefox 1.0 soon and the Macs when the designers head in at drinks.
When you minimise, swap tabs back and forth or go to another program window and back – the problem fixes itself. I guess it has to redraw/render on the swap back perhaps. I need a beer…
Hi Marc,
It’s funny that I heard about this bug just yesterday. I’ll see if I can reproduce this problem today. Thanks for the observation that it worked after blurring and focusing the window, that might be a nice work around ;-)
I’ll let you know.
Marc and others, please check my post Marc’s problem.
How do I force a set font size for all instances of a certain element? When I implimented sIFR it made each headline a different size.
Sorry Wubben,
here you go
i’m having a problem where sifr was working fine across all browers when firefox was the beta version, but now my sifr is shoved down into my content area with the new release.
http://medical-career.net/test-test.asp
This is the only page i left it on for now so i could do some work with it.
thanks.
Kris, make sure the elements are the same height if sIFR is disabled.
Jamon, the box I’m using now only has the 1.0 Preview. I’ll check later.
Just heard about sIFR the other day, but it has me stoked.
Would it be practical to add to the sifr.js file code to PRELOAD the .swf font files? My headlines show up one at a time as the .swf files load and it seems to me that preloading them in the referenced .js might get them all to render simultaneously.
Also, are .swf font files cached? Or do they have to load again each time? I know that the .js and image files are cached, but i don’t know a lot about Flash.
Great work. This is a great implementation of something I’ve thought about for quite a while.
I noticed that the css hides the flash and shows the HTML when printing. I tried to disable this, but the flash text prints extremely small/in the wrong position. Does anyone know a way to get proper printing?
http://www.vikingler.com
Jamon, odd. I’m sure it’s a CSS problem though. Are there any problems if sIFR is disabled?
Mark,
when sIFR is disabled the h1 tag also stays in the same place as if it were a CSS problem…but I can’t make any sense of why everything was fine in the .10 firefox version, but when the new released version came out, it started doing this???
have there been any other posts with similar issues?
thanks.
Thanks for everyone’s contributions. I am someone with decent CSS knowledge yet zero flash skills (if that is at all possible). Like Sunshine before, I am wondering if anybody could provide idiotproof instructions on how to change the font in the sifr.fla file, then export it as .swf using FlashMX 2004. Any step-by-step instructions would be appreciated.
Yes, I have tried to check Joen’s noscope, but the site is still down…
Thanks.
has anyone successfully applied a drop shadow to sIFR text?
geoff
Uli, documentation will be released along with the final version. Some patience, please :)
Hi,
I’ve been nagging people about the importance of visual design in general and typography in particular in web design for years. Have tried a solution offered at AListApart but my host didn’t support the requirements. So I have tried your technology and it’s awesome.
But I can not make line height and font size match in a decent way. Have been sitting for 4 hours fiddling with the .sIFR-hasFlash h1 style (I only use H1) to no avail.
Whatever I try, it’s impossible to decrease line height to e.g. 70% of font size, and there’s impossible to have a fixed font size at all. If someone can give a good advice, I would be thrilled: http://www.proformica.com/font/
Cheers,
Dan
PS to above: Have also tried to set this in the .swf file, but never managed….
Cheers again,
Dan
i like sifr as much as anyone, but i so wish we could get realy crisp and clear fonts when using sifr, i find that 9 out of 10 sifr “headers” arent as crisp as flash can be (goes for both my own sifr files and others)
anyway, looking forward to the next rc
I ceratinly hoe you don’t think I’m a nuisance, posting three messages, but this is troublesome:
When I edit the headlines so they have just a few words, the font size variation is huge!If I write three words, the size is OK. If I add a word, the font baloons, if I take out a word, the font shrinks. I do nothing else in the CSS.
This means that different pages will get headlines from about 18-20 pixels to 70-80 pixels, randomly. Is there any way to control this?
Cheers,
Dan
well clearly something is wrong for you then.
if you have defined your font size in your css file correctly, regardless of how much text you put in your html file the sifr flash file will render it @ the same size, actually the sifr swf should increase in height the more stuff you type.
so if i were you i would start over from scratch, redownload and start all over with a clean file.
or if you havent tried that, type some more text so you get a second line of text, if that renders a crisp and pixel perfect font for you then you´re having the same issue as me :)
the only issues im aware of as far as the font goes is that it´s impossible to get a crisp and clear font unless you for some weird reason use multiple lines….. and that´s (the muffled font) something that im seeing in 9 out of 10 sifr headlines both my own and others, and yeah this does bother me :)
Dan, sIFR uses the actual height of the element to scale the Flash. The difference between line-height and font-size is of no importane here. I think you can specify a line height by using a Flash variable, but I’m not sure. Let’s hear what Mike says to that :)
Mike H: Sorry, I don’t understand what you mean since it seems as your two statements are contradicting each other: 1) If I have a styled size, it should be rendered that way regardless of how much text, and 2) the sifr should increase in height the more I pout in there. Maybe I’m just thick (it’s 8 p.m. here), but I don’t understand.
I have tried several times with fresh files. If you click my name above this post, you’ll see the files.
Mark: I don’t understand your post either. What do you mean by “the difference between line-height and font-size is of no importance here”? To me, it’s v e r y important. Can you elaborate?
Both: Thanks for replying, Very appreciated.
Cheers,
Dan
Mike H.: I don’t agree with your assessment of text quality in sIFR being any different than any other Flash file. That’s all it is — a Flash file. We haven’t received any complaints about this (in over 600 comments about sIFR) and I certainly don’t notice anything funny at all. Can you point to an example? Perhaps create a normal .swf file with a font embedded in it and then create the same thing in sIFR and show them to us side-by-side. That would perhaps give me a better idea of what you’re talking about.
Dan: Your issue is occurring because you are using a font with markedly different metrics than the font you’re replacing. It is extremely narrow whereas all browser text fonts are more or less of “normal width”. That’s okay though… all you need to do is tune your decoy style (.sIFR-hasFlash h1) with negative letter-spacing until they are roughly equal. So something like this:
.sIFR-hasFlash h1 {
letter-spacing: -2px;
}
Basically, you just need to get it so that the same number of words fit on one line using both the regular text and the Flash text. This is the only tricky part about implementing sIFR, but it shouldn’t take more than 10 minutes or so.
Also, with regards to line-height, unfortunately Flash doesn’t support really small line-heights. The default in sIFR is “1” and you can’t go any smaller, but you can go bigger by passing in “leading=2” (or whatever) in the second-to-last parameter of the function.
In order to understand how sizing works in sIFR, please read the original article on the subject. Flash fonts are sized by the size of the box they replace… not necessarily the direct size of the browser text font.
Mike,
A million thanks. However, it did not work all the way. At least the font size remained the same as long as I kept the wording to ine line only. As soon as I wrote enough to make it break into two lines, the font size dropped to about 60%.
Also, strange things happens in Firefox on Mac: When I place the cursor on the text, other areas of the page goes invisible. IE/Mac shows a border at the top of the tag, only that it’s defines for the bottom where it shows in other browsers. In Safari, it’s fine until you scroll so that the text disappears from the viewport and then scroll it back again: It returns pixelated.
So, after fiddling with this for a day, I must say that I’m duly impressed and I think you’re on the right path. Kudos. But the concept is not yet so good and solid that I dare using it on a live site. I’ll keep my fingers crossed for you guys though, because the lack of typography on the web is a shame.
Cheers,
Dan
Dan:
With all due respect, if your implementation isn’t working, it’s probably your own issue. 99% of the time people write about things that aren’t working, they write me back a few minutes later to say it was just something in their CSS or a similar misstep.
If you aren’t able to get sIFR working on your own site, then yes, I wouldn’t recommend using it on a commercial site, but let’s just not jump the gun and say things like “the concept is not yet so good”. That is not the case.
here you go Mike (nice name btw :P)
and just for the record i do love sIFR and regardless of this we´re using it and will continue to use it.
just being curious and it´s not realy that big of an issue, but even when looking @ the abc news website or your own topics i do see the same fuzzines and yes it´s of course a regular flash file, but im atleast getting clearer fonts when im not using sIFR or when im using multiple lines in a sIFR swf(which you´ll see in my screenshot) and thats what triggered my interest in what is causing this and if there´s a solution for it, a very small issue for sure and as you said, most ppl dont even seem to think about it.
here´s the screenshot, showcasing the same html website with the same css settings, the same html and the same sIFR file and settings, the one difference is that i´ve in the small thumbnail removed one textline so it´s just one instead of two text lines and as you can see it´s fuzzy.
I can do the same change to all the sIFR text in the screenshot and they will all get fuzzy in various degrees, and it doesnt mater what font im using either, no biggy just an observation.
I´ve highligted the line i´ve changed with a red line below it, but the difference is easily noticable.
http://www.mikaelhaggstrom.com/drafts/draft1.jpg
Great solution! I have been forever annoyed about font limitations on the Web.
One question. Would it be possible to create a flash file that imports a font file beside it and uses this to display the text as you load the page? This would mean you would only ever need one Flash file.
This may seem like a stupid question. Obviously, I am not experienced with Flash. It also seems fairly obvious, so I’m sure you’ve already considered it.
Mike has found the problem of the long URL bug (comment one and comment two).
We’ve thought of a solution, and coordinated our actions on the Flash and JavaScript end. If all goes well we’ll be able to launch RC2 next (before) weekend.
Stay tuned!
This is great, but…
How would I go about inserting an image so it follows after the text in the Actionscript?
Matthew, play around a bit with the CSS. The image will be in a span tag, which is hidden by CSS and placed after the Flash element. You’ll probably have to wrap the text in another span in order to hide that one.
(Hey Mike, are you editing the page or something? I think I spotted a mistake there (gone now, though) :-P )
MikeH:
Ah!!! You’re using pixel fonts. That is the problem. It is impossible to control the exact size of fonts in sIFR and that is the problem. In your “blurry” example, the font is getting rendered at a size other than its “native” size, hence the blur. It is pure chance that when you use multiple lines, the font goes back down to its native size.
I definitely don’t recommend using sIFR with pixel fonts and I will be sure to put this in the FAQ for RC2 (coming this week I think!).
Sorry, could you elaborate on that? Would I have to enter anything extra into the script?
For some reason Safari does not display sIFR. I have tried both versions 1.2.4 and the developer version 1.3 of Safari. I also understand that transparent is displayed as green with Opera, Safari & OmniWeb(uses Safari’s Webcore engine). Any reason for this? Are they using a older version of the flash player?
Thanks.
Jay, as far as I know sIFR worked just fine in Safari… could you give us some more information on the setup and page you used to test sIFR in Safari?
Matthew, if you use Firefox (or Mozilla) open up the DOM Inspector and look up a replaced element. You’ll see an embed tag and a span tag which contains the original content of the element. There’s a CSS rule applied to that span called (if I recall correctly) .sIFR-replaced span. This rule moves the span off screen. If you have placed the text in your element in a span, but not the image, you can change this rule to target the span which now exists in the other span. Then you can use some CSS to position the image.
I hope this made sense ;)
Is there sIFR for dummies section? What does this do, and why would I use it?
Thanks
Mathias
Mathias, not yet. It’ll be there with the final release of sIFR 2.0
But, in short, sIFR replaces text from elements with a Flash movie which shows this text. This allows webdevelopers to use a font of their liking in allmost all browsers out there.
mike: cheers
mathias: and since flash creates the text in runtime you can use the sIFR solution in a cms system, which is something you woudnt be able to do if you used images instead and thats just one of the drawbacks if you would use images instead of sIFR.
Hi there,
it’s a very nice idea, but the result with an AdBlock(er) in FireFox 1.0 isn’t convincing, because there is no way to distinguish between “good” and “bad” Flash on a website:
http://www.xento.net/sIFR.png.
I don’t know, but in my opinion it looses quite a lot because of that. And if you block all Flash, no alternative texts are given, so it’s not very accessible …
Keep on going!
Tobias.
(Editor’s Note: Yep. This is a failure of the ad-blocking technology in my opinion. If you try to block noise using brute-force, you’re bound to block some signal as well. On the bright side, if you actually disable Flash, you do see the correct alternate content. The only negative situation is the one you mention where you can still see the Flash headlines but you get those annoying little tabs. I hope the people who develop this plug-in work to modify it so you can at least set trusted sites.)
Big props to the developers of this sweet little trick!
I’m trying to replace all my links in my menu with sIFR, but can’t seem to get IE6 to get it right, which Firefox do. IE doesn’t make the text clickable, just the padding…
Test: http://www.gatesofmetal.se/ny/
Probably some screw-up somewhere I havent spotted.
Some code:
CSS:
div#Nav a
{
color: #ffffff;
display: block;
background-color: #222;
text-decoration: none;
font-weight: bold;
padding: 4px;
border: 1px solid #333;
border-bottom: 1px solid #CC6600;
}
sIFR.replaceElement(“div#Nav a”, “sIFR/vandenkeere.swf”, “#ffffff”, “#ffffff”, “#ffffff”, “transparent”, 4, 4, 4, 4);
Appreciate any help…
Hans, don’t replace the a itself, replace the surrounding element. That way the link will be in the Flash file. Appearantly you can’t click on the Flash object in IE.
Sifr is great – but the only thing that puzzles me is the uppercase thing. What is the correct syntax that goes in the sIFT.replaceElement?
Is it just upper, or “casing=upper”? Can’t seem to make it work.
How would you change this
sIFR.replaceElement(“h3”, “tradegothic.swf”, “#000000”, null, null, null, 0, 0, 0, 0);
to have uppercasing turned on? Yes, I feel stupid for asking.
sIFR.replaceElement(“h3”, “tradegothic.swf”, “#000000”, null, null, null, 0, 0, 0, 0, null, “upper”);
I have used sIFR on a couple sights and love it. I am implementing it again on a new site , however I am just getting a white block of text. I searched a bit and found out that the fellow over at 9rules had a similiar problem that was solved by hitting his head on the keyboard. I tried that and still have a white block? Any ideas?
Thanks for the work
David
Hey David, let’s debug this thing then! Use the DOM Inspector in Firefox to make sure the elements are actually replaced. If not, that is the problem. The text is already hidden by the CSS, but the Flash isn’t showing up. That would probably mean the selector is wrong. If the elements are replaced, make sure they have the right source.
If all that won’t help, put a link to a testcase here.
(RC2 has been released. Please see the new post)
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.
sIFR 2.0 rc1
sIFR 2.0 rc1. A whole bunch of numbers and letters that mean “a new version of a cool web technique”….
sIFR 2.0: Release Candidate
Scalable Inman Flash Replacement….
Redesign launch: toledobloggers.com
Last week was spent working solidly on my proposed redesign of toledebloggers.com — a sinister cabal of bloggers from the Toledo (OH) area. I haven’t attempted to outline my design process before so I thought I might give it a…
sIFR has been updated!
It’s officially now: sIFR 2.0 RC1.
My Favorite Javascripts for Designers
http://www.blakems.com/archives/000087.html
Vakker tekst, i Flash
Det finnes utrolig mange .gif rundt om kring hvis eneste formål er å gjengi “pen” tekst, slik at den ser ut som i Photoshop. Hørte jeg “vanskeligheter” med oppdatering? Nå finnes det en Flash-løsning, som gir pene, myke bokstaver. Om…