The goal of this tutorial is to distill the information at the official site for sIFR into a simple step-by-step process of how to implement sIFR on your site.
After following this tutorial you will have a basic understanding of how sIFR works and will be able to expand into more advanced areas.
It is divided into six sections:
- Downloading all the required files,
- setting up the Flash file for the desired typeface,
- uploading the necessary files,
- replacing the ‘regular’ text with the ’sIFR’ text,
- styling the new text (you’ll be surprised where this happens!)
- applying final touches,
- and end notes and more resources.
Before we begin, keep these things in mind.
- No files will be modified except for those downloaded from the sIFR site. So you don’t have to worry about editing your existing style sheets, etc.
- sIFR degrades very well, so you don’t have to worry about users without Flash and/or JavaScript enabled.
- It’s not too bandwidth heavy (compared to typical Flash files).
- sIFR only works on a web server, as opposed to your local testing environment (i.e. your computer).
- You can use the file sifr-debug.js in this tutorial in place of sifr.js for easier debugging if you wish (it outputs specific error messages instead of just not displaying).
Let’s get started!
1. Downloading sIFR
The first step is to download the sIFR zip file. The list of nightly builds is the only place (as far as I can tell) to get the latest version of sIFR. Go ahead and download the latest version. [UPDATE: It seems that the latest version of the nightlies is showing a green background when you use the “background-color:transparent” property. For now I would use sifr3-r397.zip until the problem is fixed again.] [UPDATE 2: I was wrong, sorry about that!]
When you open the zip file you’ll see four folders and a text file. You can ignore the demo folder for now; the three other folders—css, flash and js—contain the files we need.
2. Creating YourTypeface.swf
Before we upload the sIFR files, we need to create the typeface SWF file from the FLA file. In the flash folder there’s a file named sifr.fla, open this file.
When you open the sifr.fla file you should see a white box (see Figure 2a).
Double-click on this frame to make it active. You should now see gray text that reads “Bold Italic Normal” (see Figure 2b).
To “activate” your typeface, select the text, change it to your desired typeface and then type one character. One character as in a or n, whichever you choose. If you want to have the option to italicize or bold your text then you need to have one character for each.
For example, if I want to have normal text, as well as the option to italicize and/or bold my text, I would type ‘n n n‘ (see Figure 2c). The changes in file size for my particular font were about a 30 KB difference between just normal (70 KB) and all three (100 KB). You can experiment to see how different they are depending on the typeface you choose.
Finally, choose your specific typeface; for this example I chose Arno Pro (see Figure 2d).
Once this is completed and you’ve selected the appropriate typeface, go to File > Publish Settings. In this dialog box make sure the following options are set as they are shown in Figure 2e.
Figure 2e: The Flash Publish Settings for exporting a SWF file.
The default setting for JPEG quality is 80. For my typeface there was no difference between 80 JPEG quality and 100 JPEG quality so I set it to 100. After these are set click the Publish button to create your file. (Your new SWF file should appear in the same folder as the sifr.fla file.)
The file you just created will have a file name of sifr.swf; rename the file to your typeface, so in my case it would be arnopro.swf. Now you are ready to upload the files to your server.
3. Uploading the Files
The following files need to be uploaded for sIFR functionality:
- css/sIFR-print.css
- css/sIFR-screen.css
- js/sifr-config.js
- js/sifr.js
- flash/yourtypeface.swf
Now link to the CSS and JavaScript files appropriately (Figure 3a). (We’ll reference the flash file in the next step.)
<link rel="stylesheet" href="/path/to/file/sIFR-screen.css" type="text/css" media="screen" /><link rel="stylesheet" href="/path/to/file/sIFR-print.css" type="text/css" media="print" /><script type="text/javascript" src="/path/to/file/sifr.js"></script><script type="text/javascript" src="/path/to/file/js/sifr-config.js"></script>4. Initializing sIFR
In this step we will call the SWF file and tell it which text to replace. The file that controls the text replacement is sifr-config.js, you may have noticed that it currently has a file size of zero.
For this tutorial we’ll use an example of two blog posts with the markup shown in Figure 4a and the CSS shown in Figure 4b which produces the output shown in Figure 4c
<h2 class="cpost-title">Blog Post Title</h2><p>This will be our sample text for this example post.</p><h2 class="cpost-title">Another Questionable Title</h2><p>More example text is being shown here.</p>
h2.cpost-title { margin:12px 0 7px 0; padding-bottom:5px; font-family:Georgia, "Times New Roman", serif; font-size:24px; font-weight:normal; color:#9f0000; border-bottom:1px solid #ccc; }
p { padding-bottom:11px; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:13px; line-height:22px; }
Blog Post Title
This will be our sample text for this example post.
Another Questionable Title
More example text is being shown here.
First, open the sifr-config.js file and add the code shown in Figure 4d, where yourtypeface is the name of the typeface you chose when you were editing the Flash file. So my var name would be arnopro. (Note: Make sure your var name is all one word with no spaces, and I would use underscores instead of hyphens.)
var yourtypeface = {src: '/path/to/file/yourtypeface.swf‘ };sIFR.activate(yourtypeface);sIFR.replace(yourtypeface, {selector: 'h2.cpost-title',wmode: 'transparent'});*Note: Make sure you change the right quote mark to a single quote at the end of the second line. (WordPress is converting it to a typographically correct quote.)
This references and activates the SWF file we created in Step 2 and then replaces our titles with the sIFR text. Pay close attention to the intricacies of the formatting because it’s quite intense (and quite unforgiving if you miss something). Also, the wmode: 'transparent' command prevents the default background color being white.[UPDATE: Just use the CSS property, [UPDATE 2: Doing this results in a green background it seems, so I would recommend using background-color, and set it to transparent, see comment #1 at the end.]wmode: 'transparent' for now. Just be aware that it results in a white background in Opera instead of a transparent background.]
5. Styling
Now that we are replacing the regular text with sIFR text we need to style the new text. What’s potentially confusing about sIFR is that the CSS styles for the sIFR text are edited in the sIFR-config.js file. The formatting (for the most part) is implemented with regular CSS syntax, except it’s in a JavaScript file.
The CSS styles are inserted in .sIFR-root as shown in Figure 5a. Basically this is saying, “associate every style in here with the new sIFR text.”
sIFR.replace(yourtypeface, {selector: 'h2.cpost-title',css: ['.sIFR-root { MAIN CSS PROPERTIES }'],wmode: 'transparent'});To style the text you enter CSS properties just as you would in a typical style sheet. So for our example we will enter the CSS as shown in Figure 5b.
sIFR.replace(yourtypeface, {selector: 'h2.cpost-title',css: ['.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }'],wmode: 'transparent'});Now compare the normal text (left column) with the sIFR text (right column) in Figure 5c.
Blog Post Title
This will be our sample text for this example post.
Another Questionable Title
More example text is being shown here.
Blog Post Title
This will be our sample text for this example post.
Another Questionable Title
More example text is being shown here.
Clearly there are some spacing issues that develop when the text is replaced. Thankfully, these issues can be addressed by fine-tuning sIFR’s advanced JavaScript options. But we’ll leave that for another time.
Adding Alternate Styles
You also have the ability to add alternate styles for additional markup between the main text being replaced. For example, if you wanted to style the em and strong tags for use in the h2 titles you could add the code shown in Figure 5d.
sIFR.replace(yourtypeface, {selector: 'h2.cpost-title',css: ['.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }','em { font-style:italic; }','strong { font-weight:bold; color:#333333; }'],wmode: 'transparent'});
So now, in our markup example, if we added the word Very Long with a strong tag it would be output as bold and dark gray (see Figures 5e and 5f, respectively)
<h2 class="cpost-title">A <strong>Very Long</strong> Blog Post Title </h2>
A Very Long Blog Post Title
6. Final Touches
Lastly we are going to set a rule in the sIFR-screen.css file that hides the default text while the sIFR text is being loaded. This prevents the regular text from appearing and then disappearing when the sIFR text loads. To do this open sIFR-screen.css (it’s in the sIFR css directory) and scroll down to the bottom and add the code shown in Figure 6a
.sIFR-active h2.cpost-title { visibility:hidden; }
Now the regular text is not shown when sIFR is active, and if it’s deactivated the text will show the normal styling because of the .sIFR-active class before the h2.cpost-title.
7. End Notes and More Resources
Important notes on the current state of sIFR and about this tutorial.
- Not every CSS rule is valid for sIFR, consult the sIFR 3 documentation for compatibility (specifically the styling section).
- I can’t claim that I’m a sIFR expert so if you discover any errors in the above tutorial please let me know. My main goal was to show others how to get the basics up and running.
Need more reading? Or some help?
- Now that you can choose from a wider variety of typefaces you may find that your job just got a little harder. Read up on choosing type at I Love Typography.
- Also, if you get stuck, Joyent has a forum dedicated to sIFR.
Commentary
Hej David, thanks for this awesome tutorial!
Some remarks:
* If you could state that people should just pick the latest sIFR version, that’d be great. I can imagine people sticking to r397 (”because that’s what the tutorial used”), which would be too bad.
* You can specify the background color using the `background-color` property for `.sIFR-root`. One big reason not to use `wmode` is that transparency is not supported on Linux and defaults to – you guessed it – white.
* Perhaps you could contribute these tutorials back to the wiki? Either verbatim, or as a big link on the relative pages?
Regards,
Thanks for visiting, Mark! I agree about changing the wording on the latest version, and that’s good to know about wmode. I’ll update the tutorial accordingly, and I’ll see about the wiki as well.
One tip - if for no reason you find sIFR not working on Opera 9.2x browser, then you have to manually change the minimum supported version that sIFR dev has set.
In some sIFR 3xx builds minimum Opera version is set 9.50, which is pretty weird since it is a development version and stable versions are currently around 9.2x. siFR does work with 9.2x Opera builds without problems, so you are encouraged to change that. Just search for string “9.50″ and set it to “9.00″.
BTW - David please check how your send form looks in other browsers, esp in opera 9.2x ;)
Thanks for the tip, Jarek. And I’ll check the form styling, thanks for the heads-up.
Adding the sIFR CSS to your basic CSS and print CSS minimize the page load, this way just two CSS files are loaded instead of four.
[…] : designintellection.com Add a comment to “Great sIFR tutorial” […]
I am glad that someone went through the process a little deeper. I think almost all typography fans want to pull off sIFR, but don’t realize how much work it truly is to make it work. Great write-up!
milo: Good call.
Patrick: Thanks! Congrats on your recent redesign as well, it looks great.
Jarek, now you’re just being silly.
sIFR 3 does not work in anything between Opera 9.21 and 9.27. In 9.27, it doesn’t react properly to scale events – still too slow. In effect, the only browser it works in reasonably well is 9.50, unless you zoom in or out too quickly, then Opera crashes.
» This is How You Get sIFR to Work | Design Intellection | nerdd.net…
\r\nWant to use any font on the web? Use Flash and JavaScript to output text in any typeface you wan…
This is really great thanks! I think the biggest problem with sIFR at the moment is it’s lack of proper instruction and documentation, and this really helps to fill that void.
I think it would be great if you did a follow-up that covers some more advanced stuff (but things that I find are necessary on even simple sIFR implementations) like adjusting the offsets and ratios so the spacing around the text stays precise.
This is brilliant stuffs. Thanks!
Nice tutorial
Is there any way to build in an alternative font for non-English text?
puNK!d si por ejemplo es para meter la “ñ”, es cuestión de añadirla dentro de la opción “embed” Pasaría igual con otros caracteres como àèìòù, etc..
You could also put a line on how to embed special/extra characters for internationalisation.
Benek: Maybe, we’ll see!
nocturnale: No problem!
puNk!d: Did Skeku answer your question?
Marin: I haven’t investigated that part of sIFR, I assumed that the special characters associated with the typeface were embedded automatically. I assume that’s not the case?
Sorry, but I dont have any idea with what Skeku said :( Spanish?
Regarding step 6: I’ve been vexed by the flash of default css-styled text and this seems like a neat trick to fix it. I am wondering if there are any accessibility implications, though; my understanding is that elements with visibility: hidden are generally skipped by screen readers. Is the idea that a screen reader will ignore the javascript, and thus sIFRized elements will never get the .sIFR-active class applied to them?
^
Err, nevermind the above; I was momentarily confused.
frustrating / cant get this to work ,((((((((((
flo: Can you tell me which part is giving you trouble?
Figure 4d
var yourtypeface = {
src: ‘/path/to/file/yourtypeface.swf‘
};
should be changed into:
Figure 4d
var yourtypeface = {
src: ‘/path/to/file/yourtypeface.swf’
};
notice the ending ‘
this gave me quite a headache :)
I pulled the latest nightly (sifr3-r405), and i got a green background in Firefox 2.0.0.14 when trying to do background-color: transparent;, which seems to happen before to some people. I got rid of background-color and just used transparent: true or wmode: transparent; and that helped.
P.S. is there any reason the ratio calculator wouldn’t work? I have one troublesome font thats being cutoff so need to run the ratio tool, but the tool wont give me an alert box for the ratios.
Thanks, for best in-depth tutorial yet.
joachim: Thanks for the heads-up, I’ve updated it with a note.
Arian: I imagine the final 3.0 release will fix that. I’m not sure about the ratio calculator. Take a look at
tuneHeightin the JavaScript Methods section.I thnk sIFR is fantastic and is a great way of appeasing the brand guys, whilst retaining accessibility benefits. The only issue I have is that when you resize the text in the browser, the sIFR text remains the same size UNLESS you refresh the page. If there was only a way to rectify this I think it would be hard to argue against using it - or have they fixed this in the recent versions?
Not working for me in Firefox 3 beta.
Thank you so much for this tutorial. It really helps a n00b like me :)
Thanks for the update on transparent issue David.
On a sidenote: Just wondering what is the advantage of doing the css from within the css: property versus straight from a css stylesheet?
I noticed on the novemberborn wiki they do it via just css. (but testing this i couldnt get color: css property to work, but font-size seemed to work).
So basically what would you do,
css style sheet with
h2.cpost-title{
//rule for nonflash users
}
.sIFR-active h2.cpost-title { //rule to override for flash users
} (and possibly sifr css:/wmode: properties just for color and transparency if you need that)
or
h2.cpost-title{
//rule for nonflash users
}
and sifr css property
css: [’.sIFR-root {//override for flash users}’]
(and wmode: if you need transparency)
I wasnt sure what would be a best practice (seems nice though to put everything stylewise as you can in the stylesheet versus the js property)
Thanks,
Arian
Great tutorial, thanks.
I know you talk about uploading the files, but I have just been trying the files locally first without the use of web server, and I was failing miserably. I didn’t realise that you would need a web server just to run these files. I think it would be worth mentioning in your tutorial at the beginning, to save someone else 15 mins of head scratching.
Wow, how helpful! I went through the documentation and the “how-to” seriously confused me. This is much clearer.
But… I’m having a weird issue I can’t work out. My headlines are being replaced with nothing.
Webpage:
http://www.limedaring.com
JS:
http://www.limedaring.com/js/sifr-config.js
I hope it’s really obvious what I’m doing wrong so I can get it fixed! :( Any help?
Not much luck here with Mac Firfox 2.0.0.14 or Safari 3.1.1
http://www.kucia.com/philosophy_sifr.html
Both headings are white. Thought my issue was the background-color. So I changed to transparent: true; . no luck. Thoughts?
Ben: No, it currently does not resize. I’m not sure if that’s a planned fix for sifr3 or not.
Sean: No problem!
Arian: Not sure I can answer that one yet ;)
Tracy: Try removing
background-color:transparentfrom your sifr-config.js file.Eric: Have you tried wmode:’transparent’ ?
This is great when you know how many lines of text you’re going to have ahead in advance. But does this stretch to accommodate more than one line? Additionally, it’s not very accommodating within a layout in which you may/may not being positioning a float element next to it.
Maybe I’m not updated on the latest in regards to this issues, are there ways to address them now?
Arian, regarding the background issue, I’ll look into it. Suffice to say that background-color is not the way to specify transparency, because Flash doesn’t support transparent backgrounds like CSS does, but draws the movie differently. And, since this is still not supported on Linux, background-color is the fallback color in case transparency is not supported.
Ratios should work, although Firefox is your best bet. You may want to post more details in the sIFR forum.
Ben, sIFR 3 scales the text with page zoom. Text scaling is nearly impossible to implement reliably in a generic way.
Arian, regarding the different CSS, the key here is that the CSS defined in the JavaScript applies to the Flash movie. The font size stuff is only there so the text scales along with the font on the page. I’d be great if the CSS could all be in a .css file, but it’s not worth the programming effort.
James, FYI, because sIFR communicates with the Flash movie, it should run from a web server rather than the local filesystem, so Flash doesn’t throw security warnings. This would then cause sIFR to work incorrectly, leading to lots of confusion. I tried making this obvious by alerting an explanation if the sifr-debug code is loaded, I take it you weren’t using this? (David, perhaps that’s something to add to the tutorial: when developing, load the debug code, which causes sIFR to be more verbose.)
Regarding non-appearing Flash movies, this is typically due to a) incorrect loading of the print and screen CSS files, or b) an incorrect path to the Flash movies.
Justin, sIFR 3 renders the text at the specified or calculated font size, and resizes the Flash movie to fit the text. sIFR 2 tried to fit all the text in the space the HTML text took, which (by now) is clearly the wrong approach.
@David Yeiser: no by default extra character sets are not included in the sifr. You have to click the [embed] button next to the anti-aliasing option on the font property pannel. Now you can even have sifr for Japanese websites
Great explanation.. In other examples they always left out how to color/style the text. Thanks a ton!
Mark: Thank you very much for all the clarifying comments.
Marin: Thanks for clarifying as well.
Dan: Your welcome!
finally i managed to get it to work, thanks
Many Thanks for Sharing
I just wanted to thank you for the great tutorial. I was frustrated at the lack of good documentation and this is just what I needed. It *would* be helpful to mention that testing this locally (not on a localhost, but actually just hitting “refresh” in the browser) won’t work. I would have gone on tearing my hair out if it weren’t for another user’s comments. Thanks David.
Hi, great tutorial. Really helped!
FYI - I think the trailing quote mark on illustration 4d is the wrong type.
I know I can’t get it to work. This if the fifth tutorial I’ve tried, and it’s just not doing anything at all. (Yes, I’ve followed your instructions to a T - still nothing is showing up except my regular text - it’s not being replaced.)
Jon: Thanks! Glad it helped.
Shelly: Have you tried using
sifr-debug.jsinstead ofsifr.js?Hey,
I have a problem with sifr on some pages in that if i scroll down the page to text that is sifr (i.e you cant see it when the page first loads) the font goes smaller and then back to its original size when you scroll to it the first time. Anyone have any ideas as to why this would happen?
Richard: Is this problem on IE only? And have you set the
visibility:hidden;property on thesIFR-activeclass?Just a quick note - the reason changing the jpeg compression on publish doesn’t have any effect is that there are no jpegs being published, all that is in the .swf is the font, which is vector, not raster data.
Thanks for the clarification, Kent. Good to know.
Hi David, it is a problem on all of the browsers i tried, but i’ve now fixed the problem by using ratios, and it seems to work a treat now! So if anyone one else ever has this problem… use ratios!
Cheers
Richard
Hi, nice tutorial, but it doesn’t work at all for me. I am really desperate, because I can’t see anything that could be wrong.
var fertigo = {
src: ‘../flash/fertigo.swf’;
};
sIFR.activate(fertigo);
sIFR.replace(fertigo, {
selector: ‘h2.post-title’,
wmode: ‘transparent’
});
I have tried many different settings for “src” even http://, but nothing works. Text is not changed.
I followed all steps as you wrote them.
Uh…I have finally found that error.. “;” after src definition ;X
I’v searched, posted, FAQ’d, can’t get the flash to show. config.js is below. Any clues?
[code]var PepRally = {
src: ‘http://www.izmirhigh.com/flash/PepRally.swf’
};
sIFR.activate(PepRally);
sIFR.replace(PepRally, {
selector: ‘.texttitle’,
css: [
‘.sIFR-root { font-size:24px; font-weight:bold; color:#003399; }’
],
wmode: ‘transparent’
});[/code]
Hi, I can’t get it work, the text just displays as per the original css, what are the common problems when Sifr does not work?
The error I am getting is
Sifr is not defined Line 15
Line 15 is
sIFR.debug = new function() {
has anyone got any clues??
me again sorry, new error is
sifr.js
“function g does not always return a value”
plus another warning repeated many times is anonymous function dos not always return a value???
I’m stuck!
JBD: I don’t see anything wrong with your syntax. Have you tried using
sifr-debug.jsinstead ofsifr.js?Stacy: Can you post a link to your
sifr-config.jsfile?David: debug indicates sIFR not defined. My config is above, where am I not defining?
David
Thanks for replying,
I sat down and did the whole thing again with a fresh head this morning.
It works now but only if I specify the path to the js and css as a path beginning with http://www…….
So i guess that was my problem all along, anyway I am in DIN heaven now and its all thanks to your tutorial ;-)
JBD: I have a feeling that your flash file wasn’t exported properly. Did you follow the exact instructions in the tutorial? I’d try it again and see if that fixes anything.
Dave: I recreated couple times in opensifrr, no luck. It prints fine at izmirhigh.com/PepRally.swf, but won’t display at my index.cgi site. Can only think my code in header or footer.pl is wrong, must be some other place or some modding altogether I’m going to have to do.
Uh… maybe I’m the lone noob here, being a designer and not a coder, but these steps are missing a whole lot of details… I guess this isn’t a WordPress-specific tutorial?
For example, step 3 says: “The following files need to be uploaded for sIFR functionality:”
Uploaded to where? I’m guessing the folder for the theme I’m editing in WordPress?
Next, it says “Now link to the CSS and JavaScript files appropriately (Figure 3a).”
To what file am I adding those lines? I’m assuming it’s a theme file and not the CSS or JS files, because you just told me to upload those… and why would I edit something on my local machine after I uploaded it to my server…
Sorry man, I appreciate the effort in this tutorial but it left me just as confused as the official documentation. Any chance you could clarify these steps for a WordPress installation?
Being someone who is not familiar with Javascript and sIFR but wanting to implement this. The breakdown of the steps was very helpful and worked perfectly.
Thanks for taking the time to do this it was very helpful!
Hi all - having the problem that nothing is showing up. Just white space. The text is being replaced it seems but is being replaced by a blank. Any ideas much appreciated. Thanks, Chad
var din = {
src: ‘http://www.bighello.com/v3/flash/din.swf’
};
sIFR.activate(din);
sIFR.replace(din, {
selector: ‘h2′,
css: [
‘.sIFR-root { font-size:24px; font-weight:normal; color:#000000; }’
],
wmode: ‘transparent’
});
Andrew M: I would learn a little more about CSS/HTML before I attempted sIFR. It can be frustrating for an advanced user, especially so for a beginner. The newly revived Webmonkey might be a good place to start.
Charmarie: No problem, glad I could help!
Chad: Your syntax looks good. I would go through and make sure all your single quotes are correct.
The formatting on the one after
h2is different from the others in the code you pasted, but I think that’s just due to WordPress’s automatic formatting.If that doesn’t do anything I would try using
sifr-debug.jsinstead ofsifr.jsand see if that gives you any specific error messages.Oh wow. That’s just *bizarre*.
Okay, so sorry it took me so long to get back to you on this. I *honestly* did not expect such a speedy-fast reply! That’s just awesome.
Okay, now that I’m over your awesomeness (for the moment anyway) - I finally got it. So I figured I’d share it with the world - I don’t mind exposing my idiocy for all to see, as long as someone is helped by it.
To begin my novelette here, I’ll start by saying I’m a recent convert from PC to Mac, and I’m still learning things.
The debug file wasn’t spitting out a single error - neither were my logs - so I was utterly confused. According to the logs, everything was fine. So I hard-coded all the full paths (rather than relative) still no-go. So I started going through the files on my browser, thinking maybe I did something stupid like point to the wrong spot. When I got the the sifr-config.js file, I was very surprised at what I saw.
Apparently, when I copied your code from the site here into my BBEdit, the Mac inserted some funky characters that I could not see. It was interfering with the functionality of everything. I went back in and basically removed all whitespace. Uploaded and BAM - it works.
So there you go. All is now well, and I have it working now, thanks to you :)
Now, if I could just find Mac version of PSPad…oh how I miss that little program!
Frigging awesome ;) Never used Sifr before and you truly made it an easy task. Its been implemented on a campaign site I’m working on and it was easy peas to implement. Thank you for a great tutorial!
Hello-
got a question, I am having trouble with sIFR showing up in IE 7, it works great in firefox and Safari but don’t know why it’s not working in IE. Any ideas??
Thanks
May I point out the excellent website http://www.sifrgenerator.com, which allows anybody to create sIFR SWF files with the font of your own choice online.
This means no hassle with Adobe Flash and such, just upload TTF and download SWF
I’ve done these steps in order 5 times and this does not work. WTF!!
I got it all working fine in half an hour thanks to this tutorial, now I was just wondering about line-height. The ‘leading’ property in Flash is not very well documented and line-height as a CSS property is not supported.
No can do?
Shelly: Glad you got it working!
Luis: No problem.
Josh: What version of IE? Does it show up at all? Or does it appear and disappear when you scroll up and down?
RGJ: Wow, that’s a neat site. Thanks for sharing!
Joe Hickman: Have you tried using
sifr-debug.jsinstead ofsifr.js?Wolf: Check out the advanced JavaScript options, specifically
tuneHeight.Hi,
I get it to work but with really odd effects: IE 7 is rendering the correct font and size but omits the color (font is always black). FF and Safari (PC) render a small fon, seems to be the right color but hard to tell as it’s rendering the font in about 6pt.
Any thoughts?
Olaf - I actually know how to fix that OMG - I’ve only been at it a week, and I can answer the one about the small fonts :)
Okay - you *have* to have “line-height” specified in your stylesheet for the things you want to replace. If you don’t, then it’ll render a 6pt font size in Safari. (That was the first issue I ran into, myself - and that was the fix - just use line-height and you’ll be set.)
Thanks so much for this tutorial. I’ve tried to implement it but it’s just showing the HTML headers. Something wrong here:
var dinlight = {
src: ‘dinlight.swf’
};
sIFR.activate(dinlight);
sIFR.replace(dinlight, {
selector: ‘h1.sifr’,
css: [
‘.sIFR-root { font-size: 36px; margin: 0; font-weight: normal; text-transform: uppercase; }’
],
wmode: ‘transparent’
});
?
I can’t figure out where I’ve gone wrong, any ideas?
http://www.greg-power.com/index.html
http://www.greg-power.com/flash/
http://www.greg-power.com/js/
Anyone with a spare minute, please take a look, no doubt this will be an embarrassing mistake, heh..
Shelley: Thanks for answering the question.
Jerome: Your syntax looks fine. Have you tried
sifr-debug.jsyet?Greg: I would try two things: 1) Take out the link to
sifr.jsand just usesifr-debug.js, and 2) delete the tab space before the font-size in.sIFR-root. Let us know how that goes.I got it to work! All I did was link the elements like http://www.—.com/flash/dinlight.swf
did the trick.
Cheers for the advice David, sadly neither worked. I don’t get any alert/prompt using only sifr-debug either, odd!
Greg - I’m not an expert but -
In sifr-config.js:
var yourtypeface = {
src: ‘http://www.greg-power.com/flash/fontinsansfr.swf’
};
sIFR.activate(fontinsansfr);
sIFR.replace(fontinsansfr, {
selector: ‘h1.cpost-title’,
css: [
‘.sIFR-root{font-size:1.8em; color:#006633; }’
],
wmode: ‘transparent’
});
Shouldn’t the top bit ‘var yourtypeface’ be ‘var fontinsansfr’.
I think that might be your problem.
sifR is just not working for me.
I have seriously tried everything. Looked through everyones comments and their errors to see where I was going wrong. Nothing.
If anyone is willing to help it would be greatly appreciated.
http://www.blackmint.com.au/blackmint5/scripts/sifr_config.js
Please note, the site is in BETA. Therefore, photos havent been purchased and none of the links have been, well, linked.
Thanks again
Jerome: Thanks for answering the question.
Domenic: There are two things to change in the
sifr_config.jsfile. 1. Where it says MAIN CSS PROPERTIES, that needs to be removed and replaced with actual CSS. 2. Take the note off the bottom, that is probably interfering with the process.Let me know how that goes.
Yes. Spot on.
Thanks David, worked like a charm. Now I have to polish it up!
May I say, I love this site!
Nice article and I’m trying implante it for a day. The acentuations don’t work. With the font Readers when I write ‘canção’ in brower show ‘cano’. I still tryed Embed in flash, but don’t work.
And ratio I put after src:’myfile.swf’ and changed nothing…
Can you help me?
Can anybody help me out here?
I’ve been through this tutorial quite a few times now, ran the debugger and still no go.
I’ve finally managed to have the sIFR display but it is only showing the content of the flash and not using it to replace the text in my .
http://www.cagedlight.com/clients/orleans/index.html
http://www.cagedlight.com/clients/orleans/scripts/sifr-config.js
All help will be greatly appreciated
Ok, I get it now. Didn’t realize that it was folder specific.
Perhaps a special note on that one (unless of course I’m the only one caught out there :P)
Quick note: figure 5d has a missing quote before the selector.
I’ve been having issues with getting either padding or margin (left/right) to work on links. I read about specifying margin-right with no unit, but still no luck. Any ideas? Here’s what I have
sIFR.replace(chaletmilan60, {
selector: ‘#navbox’,
css: [
‘.sIFR-root { font-size: 22px; font-weight: normal; color: #F1A44F; letter-spacing: 1.45; }’
,’a { text-decoration: none; margin-right: 22; }’
,’a:link { color: #F1A44F; }’
,’a:hover { color: #fde994; }’
],
wmode: ‘transparent’
});
Domenic: No problem, and thanks!
Maicon: Can you give us some links to the files you’re working with?
Robin: Thanks for that catch.
christin: Try putting
pxunits on your letter-spacing and margin-right values.I tried your tuto. and it works. the only thing i can’t seem to change is the color of the typeface.:( anyidea why?
OK! i figured it out:) i had a duplicated code in the js file
Hi, and thank you so much for this tutorial! I got this to work, and it looks awesome :-)
I only got one problem with this; When I try to use this on a text that are really long, it puts the last part of the title on a second line and not on the same line as all the other text. Can’t seem to find out the problem and what’s causing this and I am getting more frustrating every time I try to investigate :-)
Take a look at this URL, and you’ll se what I mean ;
http://www.zorensen.no/test
Anyone got a clue? :-)
Sorry, guys.. Found the problem myselves. If you DON’T define the text size in EVERY part of the sIFR script, there can be problems. Make sure you got the same text size everywhere in the document. :-)
weird, since i`ve installed FF3 i cant see the SIFR text in some pages, including this one, at figure 5c (right part).
Ie6&7 renders the SIFR normally, in FF3 it simply is invisible.
on some sites the SIFR renders fine, on others, like this, it is invisible.
anyone noticed this?
thanks
Tried everything exactly as printed here. Just left out the print and screen CSS files.
I’ve been trying on and off for many years to get this to work and it never, ever works.
http://www.beatledork.com/sifr
Any help?
Realized those CSS files were important after all, but still it didn’t change my text at all.
Thanks for the tutorial, David. Never implemented SIFR so fast ;)
Important to note when defining colors: do not use shorthand code.
color: #fff;
does not work. Use
color: #ffffff;
instead.
I’ve tried version 2 & now onto vers 3.0. Unfortunately I am stuck without the perverbial paddle as I cant seem to get the text to appear in the MainNav. I’ve deleted & re-installed a few times and tried everyones comments to no avail. Please Obi-Won, you’re my only hope. =)
Links:
http://www.worldofdecor.com/images/sifr/js/sifr.js
http://www.worldofdecor.com/images/sifr/js/sifr-config.js
Is there anyway you can explain how to connect the sifr-debug.js file for debugging? Do I need to change anything in the sifr-debug.js file to get info? Do you just comment out the sifr.js file? Or do they run together? I am trying to get the ratio calculation for my h1s so they stop jumping.
and THANK YOU, THANK YOU, THANK YOU for this beyond awesome tutorial, you should write documentation for a living… your clarity is sure needed in this space. - Thx, F.
Aaron: The single quote at the end of the second line is incorrect. It should match the others. (
src: '/sifr/mrseaves.swf‘)Let me know if that helps.
fritzd: Just swap the link to sifr.js with sifr-debug.js . (And make sure both files are uploaded, of course.)
Uhm, since I’m an idiot, maybe commenting out the line would help others:
*Note: Make sure you change the right quote mark to a single quote at the end of the second line. (WordPress is converting it to a typographically correct quote.)
David, Thanks for being beyond awesome with the crazy fast reply.
Ok so you don’t use the sifr.js file at all?
Also how do you create multi-color sifr (w/v3), not a link I just need to use a span to spec a color. Any ideas? David? Anybody?
David: Thanks for your reply. Took out that crazy quote at the end, but unfortunately it’s still not happening for me.
When I switch out the sifr-debug.js for the sifr.js, the text within the h2 tags doesn’t even show up at all.
Tweaked it further by putting a direct URL to my font .swf file. Still not happening.
Alright, I downloaded the whole sIFR folder again, except used Trade Gothic for the font instead of Mrs. Eaves. Works great. I guess I just screwed up making the font, will surely try again with Mrs. Eaves and other fonts.
http://beatledork.com/sifr
Though, when I did use sifr.js instead of sifr-debug.js, nothing showed up on my iMac, but now on my MacBook Pro, the h2 text still shows up, anyway. Odd.
My oh my, this would be awesome - if I could only get it to work. Dare I admit I’ve spent the better part of 5 or so hours trying to get this to work… with no success.
I just can seem to get it to replace with the Flash text.
Referenced the sifr-debug.js file and it’s not throwing any errors?!?
HTML
http://www.chocolatedesigns.com.au/yantra/
SIFR-CONFIG
http://www.chocolatedesigns.com.au/yantra/js/sifr-config.js
Any pointers in the right direction would be greatly appreciated…
fritzd: Correct, just use sifr-debug.js. As far as multiple styles go see the Adding Alternate Styles section of Step 5. However, for span you have to use span class=”span” for it to work. See the article on styling in the sIFR wiki.
Aaron: Yeah, sIFR is really great, but obviously still has its problems.
Mara: I would try directly linking to the SWF file in sifr-config.js. And maybe try a different SWF file to make sure it was created properly.
Once again, thanks for being beyond awesome!!! I know have the multi-color and link styles working.
Anyone else you can see my results at http://www.getfluency.com, just use the Web Developer toolbar in FF to see the implications… I used it for my h1’s. Thanks again, David!
No problem, fritzd. The site looks great!
Thanks so much for putting this together. It was so helpful. Much less daunting than the “official” documentation.
how would you implement multiple selectors using the same swf?
I can’t brain this morning - I have teh dumb.
wow - feeling seriously dumb now… figured out the incredibly simple answer on my own. Solution for anyone else who might have teh stoopid like me:
var existence = {
src: ‘flash/existence.swf’
};
sIFR.activate(existence);
sIFR.replace(existence, {
selector: ‘h1.tagline’,
css: [
‘.sIFR-root { font-size:30px; font-weight:normal; color:#ffffff;}’
],
wmode: ‘transparent’
});
sIFR.replace(existence, {
selector: ‘h2.tagline’,
css: [
‘.sIFR-root { font-size:20px; font-weight:normal; color:#8295aa;}’
],
wmode: ‘transparent’
});
Pulling hair out. Used this yesterday and worked fine. Not I get an error (through firefox) saying:
Error: sIFR.activate is not a function
Source File: http://www.TESTSITE.com/js/sifr-config.js
Line: 5
My config file looks like this:
var myriadtextpro = {
src: ‘flash/myriadtextpro.swf’
};
sIFR.activate(myriadtextpro);
sIFR.replace(myriadtextpro, {
selector: ‘h2.cpost-title’,
css: [
‘.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }’
],
wmode: ‘transparent’
});
Any help please…
Thanks
Sorted now…
… stupid me was using and old version of the sifr.js file