PSD to WordPress, PSD to HTML, PSD to Drupal

These days most frontend CSS-developers face with a problem of using custom fonts when coding web pages. The technology of sIFR (Scalable Inman Flash Replacement) became very popular because it gives rather flexible and easy to use solution of this problem. If you are new to this technology please check sIFR Documentation for more information.

Though sIFR gives many useful additional abilities for the developers there is one thing which is not trivial to do with sIFR. Imagine that you need to highlight some parts of the sIFR text with different color(s). The solution which cames in mind is splitting the text into several tags and applying sIFR to every tag individually. Unfortunately this doesn’t work in many cases because of impossibility to make the width of sIFR element flexible, so more elegant solution needs to be found.

If you ever tried to find ready-made solution you’ll definitely find the solutions published at Maratz.com website (Two colors in sIFR 2.0.1, Two color sIFR example). This solution was great until Adobe released a new version of Flash Player (10.x). This release contains many security updates and it appeared a big pain for those developers who used javascript/flash libraries – many of them stopped working immediately. This was also true for sIFR and the updated version was released. Unfortunately the solution of Maratz.com is no longer working with Flash Player 10.x. In this article we are going to present another solution of using sIFR 3.

The Solution

Why sIFR 3? Unlike sIFR2 it already includes a variety of different effects. One of them is supporting css-styles for internal tags.

So we present a tutorial for using sIFR 3 and some of its new features.

sIFR Download

First of all you will have to download sIFR 3 latest version and make an .swf using adobe flash.

Install and Include

Now you have all the components to create your own sIFR replacement. Copy sIFR JavaScript files somewhere on your server and include them in your page header like this:

<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-debug.js" type="text/javascript"></script>

after that create and include a new css file for sIFR object styles. Here is an example:

@media screen {
	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
		padding: 0;
	}
 
	.sIFR-replaced, .sIFR-ignore {
		visibility: visible !important;
	}
 
	.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}
 
	.sIFR-replaced div.sIFR-fixfocus {
		margin: 0pt; 
		padding: 0pt; 
		overflow: auto; 
		letter-spacing: 0px; 
		float: none;
	}
 
	/* Place your style here */
	/* Example:
	.sIFR-active h1 {
		font-family: Verdana;
		visibility: hidden;
	}
	*/ 
}
 
@media print {
	.sIFR-flash {
		display    : none !important;
		height     : 0;
		width      : 0;
		position   : absolute;
		overflow   : hidden;
	}
	.sIFR-alternate {
		visibility : visible !important;
		display    : block   !important;
		position   : static  !important;
		left       : auto    !important;
		top        : auto    !important;
		width      : auto    !important;
		height     : auto    !important;
	}
}

sIFR Config File

To make sIFR working we should activate it and write replacement rules. It can be done in config file (usually named as “sifr-config.js). Standard config-file in the sIFR 3 demo package has very detailed comments. But let’s have a look at it shortly:

// Make an object pointing to the location of the Flash movie on your web server.
// Try using the font name as the variable name, makes it easy to remember which
// object you're using. As an example in this file, we'll use Futura.
// Please make sure that you use absolute path to the swf file on your server.
var diavlo = { src: '/sifr3/swf/diavlo.swf' };
var cochin = { src: '/sifr3/swf/cochin.swf' };
 
// Next, activate sIFR:
// if you have more than one font you should write them all here, because "activate" functon should be only one.
sIFR.activate(diavlo, cochin);
 
// we are ready to replace elements on the page now. See example codes to finish editing this file.

sIFR Replacement

So now when we’ve included sIFR we’re ready to replace a few elements. We will guide you from basic usage to more complex.

Example 1. Basic replacement

To enable usual sIFR replacement use such code:

sIFR.replace(fDiavlo, {
  selector: 'h1.example1',
  css: '.sIFR-root { background-color: #F9F9F9; color: #775555; }'
});
/*
 fDiablo - object with source path to .swf file (example: {src: '/swf/diavlo.swf'} )
 selector - css-like selector string
 css - styles to be used in flash object. ".sIFR-root" is base style for all object 
*/

Example 2. Multi colors sIFR

You can use different colors and even styles for inline tags in replacement element. Basic styles are: font-style, font-weight, text-decoration, color, background etc. Full list of available css properties you can read at sIFR 3 documentation

sIFR.replace(fCochin, {
	selector: 'h1.example2',
	css: [
		'.sIFR-root { color: #775555; }',
		'em { font-style:italic; color: #444477; }',
		'strong { font-style:bold; color: #44aa44; }',
		'.bold { font-style:bold; text-decoration:underline; }',
		'a { color: #aa4444; }',
		'a:hover { color: #bbbb44; }',
	]
});
/*
 css - this property can be an array of styles also. use tag name as css-selector to re-define styles. 
*/

Notes: Please do not use attributes for inner tags. If you do this tags can be ignored.
Tags available to re-style are: <a>, <strong>, <em>, <span>.
If you want to use <span> tag you should assign some class attribute to it and style this element using class selector (“.bold” in our example).

Example 3. Transparent

Sometimes you need to make the background transparent in sIFR flash object. “wmode” property allows you to do that!

sIFR.replace(fDiavlo, {
	wmode: 'transparent',
	selector: 'h2.example3',
	css: '.sIFR-root { color: #ddaaaa; }'
});
/*
 wmode - used to set wmode for <object> params
*/

Example 4. Advanced filters

sIFR 3 allows you to make different design effect filter like shadow or blur.

sIFR.replace(fCochin, {
	selector: 'h1.example4',
	css: '.sIFR-root { color: #aa7777; }',
	filters: {
    DropShadow: {
      knockout: false,
      distance: 3,
      color: '#cccccc',
      strength: 3,
      angle: 120 
    }
  }
});
/*
 knockout - set to "true" or "1" to disable sIFR main color (it becomes white)
 angle - by default is 60 (right and bottom)
*/

Also such filters are available: DisplacementMap, ColorMatrix, Convolution, GradientBevel, GradientGlow, Bevel, Glow, Blur, DropShadow. You can read about the properties of these filters at sIFR Documentation

Sources

You can download these examples or try them with our online sIFR 3 demo.

You can read more detailed information about sIFR 3 methods and features in the official documentation: http://wiki.novemberborn.net/sifr3/

Tags: Adobe Flash, Multi color sIFR, sIFR

This entry was posted on Wednesday, May 6th, 2009 at 8:04 pm and is filed under Javascript, Just Labs, Web Design, XHTML/CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.