Sifr 3 flash font replacement

The solution is Sifr

Sifr isn’t a new phenomena. Sifr 2.0 was actually born back in april 2005, despite that is the use of sifr not very common. We think that’s caused by the quite tricky installation and many give up on it. The good thing is, if sifr is installed once, it’s kind of easy to use again and again and again.

Sifr works like this;

1. A normal (X)HTML page loads in your browser
2. In a split-second a javascript runs and checks if the user has the Flash player installed and checks for the tags, ids, classes, divs etc., where you asked the sifr to work.
3. If the Flash player isn’t installed or javasript is de-activated (!), the (X)HTML site will just load ordinary as you specified in your CSS styles, and the user will just get a page with CSS titles where the sifr should have been. If the Flash player is installed and javascript enabled, the server will read all those players you want sifr to “work”.
4. Last step, the server measures and calculates and replaces the text with sifr (Flash text)

All these steps happens faster than your browser can load the whole site. All of your text is still markable and SEO friendly… Sifr works perfect with CMS and / or systems like WordPress.

Please judge for yourself;

NoSifr: http://www.jahallo.dk/kunder/lab/nosifr/

Sifr: http://www.jahallo.dk/kunder/lab/sifr/

Installing sifr!

Uhh, this is where a lot of people gives up. We want the Internet to be a prettier place, so please hang on!

We’re going to work with the newest version of Sifr,version 3, beta 2 (we’re still waiting for the final verison 3)

We expect that you already downloaded sifr from the above link. Open the file “sifr.fla” i Flash.

Inside Flash you double-click on the blue box and the movieclip will open. It should look like this;

Important(!), in your export settings you set;

• Flash version has to be Flash 8
• Put “Load order” to “Bottom up”
• ActionScript version has to be 2.0
• “Protect the movie from import” and export

You can name the swf file whatever you want. If you work with multiple fonts in your site you should call your files [name-of-font].swf.

All the Flash work is now accomplished.

The HTML settings

Be aware that sifr only works server-side. That means you have to test it at your web-server.

Make a new HTML doc ((X)HTML 1.0 or 1.1). We have to link the HTML doc with the CSS docs which you find in the downloaded files. You’ll off course find them in the directory “css”

This is done like this (should be copied to your header);

<link rel=”stylesheet” href=”sIFR-screen.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”sIFR-print.css” type=”text/css” media=”print”>

If you moved the docs to your own file structure, then make sure you link the docs the right way. In the same way you have to link the JS docs;

<script src=”sifr.js” type=”text/javascript”></script>
<script src=”sifr-config.js” type=”text/javascript”></script>

The JavaScript document

Open the file “sifr-config.js”. We just let the font-file keep it’s original name, sifr.swf, therefore the code in the JS doc should look like this;

var scriptfont = {
src: ‘js/sifr.swf’
};<

Once again, remember to check that the file is linked right. In our example the file is placed [dir]/js/

After the the font-file is loaded, and the server “knows” what to do with it, the following code places the sifr;

sIFR.useStyleCheck = true;
sIFR.activate(scriptfont);

“swf-fonten” aktiveres. Dermed stopper vi browseren i at loade swf filen igen og igen. Vi er nu klar til at “replace” teksten med vores Flash font;

sIFR.replace(scriptfont, {
selector: ‘h1′
});

Translated this code says, that all text formatted as h1 shoul be replaced with the scriptfont

Our gathered code now looks like this;

var scriptfont = {
src: ‘js/sifr.swf’,
// sIFR.domains = ['novemberborn.net'] // Don’t check for domains in this demo
sIFR.useStyleCheck = true;
};
sIFR.activate(scriptfont);
sIFR.replace(scriptfont, {
selector: ‘h1′,
});

This is the basics about sifr

Advanced sifr

We ran in to a couple of problems with the sifr, and therefore we decided to find out a bit more about the issue. To make this solution (the menu);

http://www.jahallo.dk/kunder/lab/sifr/

We added;

1. Ratios (a mathematic calculation of the building and kerning of the font)
2. Transparency
3. CSS styling (sifr will not just inherit your styles from your CSS doc)

Calculate ratio

What we already have;

var scriptfont = {
});
src: ‘js/sifr.swf’,
};
// sIFR.domains = ['novemberborn.net'] // Don’t check for domains in this demo
sIFR.useStyleCheck = true;
sIFR.activate(scriptfont);
sIFR.replace(scriptfont, {
selector: ‘h1′,

Replace the code “.replace” in line 7 with “.debug.ratios”, so your code now will look like this;

var scriptfont = {
src: ‘js/sifr.swf’,
};
// sIFR.domains = ['novemberborn.net'] // Don’t check for domains in this demo
sIFR.useStyleCheck = true;
sIFR.activate(scriptfont);
sIFR.debug.ratios(scriptfont, {
selector: ‘h1′,
});

Upload to web-server and refresh your browser. You should get something like this;

Copy all the content in the dialog box, and paste it like shown below

var scriptfont = {
src: ‘js/sifr.swf’
,ratios: [8,1.3,10,1.27,15,1.22,19,1.18,27,1.17,28,1.16,37,1.15,48,1.14,49,1.13,
55,1.14,88,1.13,89,1.12,92,1.13,93,1.12,94,1.13,98,1.12,99,1.13,106,1.12,107,1.13,1.12]
};
// sIFR.domains = ['novemberborn.net'] // Don’t check for domains in this demo
sIFR.useStyleCheck = true;
sIFR.activate(scriptfont);
sIFR.replace(scriptfont, {
selector: ‘h1′,
});

Ratios are unique, so you have to repeat this procedure for all fonts you’re using.

Transparency

Actually this is very simple! After your “selector” you add the following code;

,wmode: ‘transparent’
});

So the code looks like this - with the correct ratios AND transparency;

var scriptfont = {
src: ‘js/sifr.swf’
,ratios: [8,1.3,10,1.27,15,1.22,19,1.18,27,1.17,28,1.16,37,1.15,48,1.14,49,1.13,55,1.14,88,1.13,89,1.12,92,1.13,93,1.12,94,1.13,98,1.12,
99,1.13,106,1.12,107,1.13,1.12]
};

// sIFR.domains = ['novemberborn.net'] // Don’t check for domains in this demo
sIFR.useStyleCheck = true;
sIFR.activate(scriptfont);

sIFR.replace(scriptfont, {
selector: ‘h1′
,wmode: ‘transparent’
});

CSS styling

CSS styling of sifr is possible. This part we will run over quite fast. The specific assignment (top menu for Ronaldo official web site), called for link-styling. We wasn’t that thrilled about the standard blue / purple links…!

Therefore between our “selector” and “wmode”, add;

,css: [

'.sIFR-root { text-align: left; font-size: 16px; color: #FFFFFF; margin-left: 0px; margin-right: 0px; }',

'a {color: #ffcc00; text-decoration: none;}',

'a:hover {color: #FFFFFF; text-decoration: none;}'

]

});

All wrapped up, we have this code;

var scriptfont = {

src: ‘js/sifr.swf’

,ratios: [8,1.3,10,1.27,15,1.22,19,1.18,27,1.17,28,1.16,37,1.15,48,1.14,49,1.13,
55,1.14,88,1.13,89,1.12,92,1.13,93,1.12,94,1.13,98,1.12,99,1.13,106,1.12,107,1.13,1.12]

};

// sIFR.domains = ['novemberborn.net'] // Don’t check for domains in this demo

sIFR.useStyleCheck = true;

sIFR.activate(scriptfont);

sIFR.replace(scriptfont, {

selector: ‘h1′

,css: [

'.sIFR-root { text-align: left; font-size: 16px; color: #FFFFFF; margin-left: 0px; margin-right: 0px; }',

'a {color: #ffcc00; text-decoration: none;}',

'a:hover {color: #FFFFFF; text-decoration: none;}'

]

,wmode: ‘transparent’

Watch the solution in action here; http://www.jahallo.dk/kunder/lab/sifr/

Sifr documentation: http://wiki.novemberborn.net/sifr3/

Download source