/JavaScript/ Dynamic text replacement
20/03/2007 | Filed under Develop > JavaScript
Steve Tucker demonstrates how easy it is to implement rich text fonts into your web pages using sIFR, giving headings and pullquotes a professional look.
Click here to download the tutorial files.
The web is a constantly developing medium. But there still are, and always will be, boundaries and constraints – limitations presented by today’s technology that we simply can’t overcome. Of course, all good web developers know these limitations, and keeping yourself up to date is a significant step towards mastering the skill of web design. But there are some people who take it a step further by exploring new ways to extend the barriers. These people open up new possibilities for what can be achieved and, in web design, they offer us temporary solutions prior to tomorrow’s technology.
One such individual is Shaun Inman (www.shauninman.com), the man responsible for Mint and Designologue, who pushed the boundaries when he conceived IFR – the forerunner to sIFR. And this brings me back to my original point: if you want to keep up to date, then you should know the boundaries and you should know sIFR.
What is sIFR?
sIFR (scalable Inman Fl ash Replacement) is not a new technology; it’s a new technique that marries existing technologies – Fl ash, JavaScript and CSS – to improve web-based typography where mainstream techniques, such as CSS image replacement (www.mezzoblue.com/tests/revised-image-replacement), aren’t possible. A perfect example of this is a regularly updated news headline. With sIFR, you can now style short passages of text with a font of your choice, regardless of whether those fonts are installed on your visitors’ computers or not.
Accessibility and web standards are not issues with sIFR. Because of the way we integrate it into websites, sIFR requires no alteration to your XHTML markup. Therefore, the semantic structure of web pages remains unaffected and search engine spiders are unhindered when crawling content. Better still, should a key requirement of this technique – such as Fl ash or JavaScript – not be available, visitors will simply see the original browser-rendered text styled with CSS.
sIFR will give you a buzz the first time you use it. I was so excited the night I discovered it that I didn’t go to bed until at least 3am – and I missed the bus for work next day! You may be thinking at this point that I need to get out more, but once you understand sIFR (and this is no hard task), you’ll be just as delighted as I was at being able to overcome yet another boundary of professional web design. No longer will your site titles have to support Comic Sans or Times New Roman when they clearly look much better in Photoshop using Interstate Light. Are you buzzing yet? Great, then let’s get started.
Throughout the course of this tutorial, I’ll go through the simple step by step process of implementing your first rich text font into a web page using sIFR techniques. No more than a basic knowledge of JavaScript and Fl ash is required. Knowledge of CSS is more important for the final stage, when you will make sIFR’s Fl ash-rendered text fit elegantly into a demonstration web page.
From the ground up
There’s no point delving into sIFR head first without a common point of reference. You must first decide which passages of text you intend to replace, and understand their context within the document. So, let’s first take a look at the XHTML page. It will represent the foundation for the project:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sIFR</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
</head>
<body>
<h1>What is sIFR?</h1>
<p><abbr title=“scalable Inman Flash Replacement”>sIFR</abbr> is the
technique of using Flash, Javascript and CSS in order to display text, such as
headings in an attractive rich text font, regardless of whether the client’s computer
supports it or not.</p>
<h2>Why is it so cool?</h2>
<p>sIFR is so cool that it’s coolness needs no explanation. A bit like David
Hasselhoff. You can see it in action on this page’s three headings.</p>
<h2>Want to know more?</h2>
<p>Want to know more? Visit <a href="http://www.mikeindustries.com/sifr/"
title=“Information on sIFR”>Mike Davidson’s website</a> for more information.</
p>
</body>
</html>
It’s important to be aware that sIFR is only intended for use on short passages of text; ideally, headings and pull quotes. The text you choose to replace must be copied and converted into Fl ash by the client – a process that can noticeably increase page-loading times when large quantities of text are involved. For this reason, I’ve made the decision to replace only the H1 and H2 headings in the document with rich text.
To begin setting up sIFR on your page, you must first download the official release pack. This is freely available for download under the CC-GNU LGPL licence from Mike Davidson’s website (www.mikeindustries.com/sifr), and a copy is included on this issue’s CD. Mike Davidson is one of the lead developers responsible for turning Shaun Inman’s unstable IFR prototype into the professional sIFR tool you’re using today.
Unzip the release pack and you’ll find three folders and a number of files. A little intimidating as this may seem, there are only two files in there that you really need to focus your attention on: the ‘sifr.fl a’ Fl ash file and the ‘sifr.js’ JavaScript file. Whenever you get a free hour, read through the material within the Documentation folder, as there are many other helpful guides on how to style your sIFR text, manipulate sIFR via JavaScript and efficiently debug, should you ever need to.
First, you must create the Fl ash font. It’s important at this stage that you don’t move any of the files currently within the sIFR folder, because a number of them are vital for the mechanics of your Fl ash application and the generation of your font. Open the aforementioned Fl ash file (sifr.fl a) in your Fl ash editor. The first thing you’ll notice is that the canvas is empty. This isn’t actually the case; the text element within it is simply invisible. Double-click anywhere within the work area and you’ll see some text appear: ‘Do not remove this text’. Select this text element and, using the drop-down fonts list within Fl ash’s
Properties panel, change the font to whatever takes your fancy and to what is the best fit for the look you’re trying to achieve on your website. For this tutorial, I’m using the Bookman Old Style font, but remember, whatever font you go for, don’t pick Comic Sans or Times New Roman. The whole point of sIRF is to enable you to be more creative. You may set other visual styles here, too, should you wish to bold up or italicise your text, for example. Underlining, however, is a little different, and should be done later as we work on the sIFR JavaScript file.
Once you’ve set your font and are happy, export the finished Fl ash movie by clicking File > Export > Export Movie, and save it into the same folder as your XHTML document. When I’m using sIFR, I always find it good practice to name this exported file after the font I’ve set within it. Doing so can aid maintenance of your sIFR files should you later begin using several fonts on the same website at once. As I said, in this example, I’m using Bookman Old Style, so in export, I’m naming my movie ‘bookman.swf’.
We now have an XHTML foundation and a Fl ash movie set up to mimic text in a desired font. Next, we need to insert it into the document. Step forward ‘sifr.js’.
Preparing the sIFR JavaScript
While your Fl ash movie acts as an effective storage medium and rendering engine for your font, it can’t carry out the desired act of text replacement alone. A third party (in this case, JavaScript) is required to fetch and feed text into the Fl ash movie and then insert that movie into your document. Call the sIFR JavaScript engine from within the markup document, identify which text elements are to be replaced and with which font, or fonts (Fl ash movies), they are to be replaced with. This is a simple process that should take you no more than 15 minutes.
Call the ‘sifr.js’ file by placing it into the same folder as your XHTML document and using the following syntax:
<script type=”text/javascript” src=”sifr.js”></script>
We can now provide sIFR with the replacement instructions for the text. This is achieved using the replaceElement method of the sIFR object, and the basic syntax is as follows:
sIFR.replaceElement(named({comma-separated arguments}));
This may appear like gibberish if you’re not familiar with JavaScript or any similar object-orientated programming language, but using this syntax correctly is quite straightforward when fully explained.
Where I’ve identified the space for comma-separated arguments, we can insert ‘instructions’ for sIFR, each separated by a comma. There are quite a few instructions you can employ in order to style your text elements correctly. Some, such as the CSS selector and the Fl ash movie source file, are mandatory. Others, such as background colours and transparency effects, are not.
Now, let’s identify the element containing the text we wish to replace. The ‘argument’ (a term in programming used to describe information passed to a function or method) we need is called sSelector. The syntax of the value we give it is just like any regular CSS selector, within quotation marks. An example could be “body div#container h4”, or “blockquote p”. It all depends on your markup. Additionally, like CSS, you can identify multiple elements for replacement with comma (,) separation. In this case, we only want to replace the H1 and H2s, so the complete JavaScript command so far looks like this:
sIFR.replaceElement(named({sSelector:”h1,h2”}));
Now we need to tell the sIFR object the location of the Fl ash movie we created earlier. This is done via the argument sFl ashSrc. The command now looks something like this:
sIFR.replaceElement(named({sSelector:”h1,h2”,sFl ashSrc:”bookman.swf”}));
There are many more arguments you can pass that change everything from the text and background colour, to padding, underline and alignment settings. You can see the whole list of available arguments in the box on page 79. For the purpose of this example, I’m going to render all my headings blue and in upper case. The finished JavaScript looks like this:
sIFR.replaceElement(named({sSelector:”h1,h2”,sFl ashSrc:”bookman.swf”,sColor:”#3 366cc”,sCase:”upper”}));
It may seem quite a mouthful, but by breaking the whole command down, you will realise that it’s actually not so complicated.
You can now place this command anywhere you want in the document, after the sIFR JavaScript engine has been called using the <script> tags. You can insert it further down within the <head> tag, or store and call it from within another external JavaScript file. However, to keep all the sIFR-related materials together, and to clearly separate all JavaScript behaviour from the structure, I’m going to place this command at the bottom of the original ‘sifr.js’ file, just below the sIFR engine. If you now save all these changes and load up your XHTML document in a browser, you should see the results of your handiwork; your H1 and H2 tags are now replicated in the font of your choice. There’s just one problem, though; the original browser-rendered H1 and H2 headers are still visible, and the rich text may not be the correct size to fit within the context of the page. This is where CSS comes into its own.
Visually tuning sIFR with CSS
The installation of sIFR into your website is now complete, but its aesthetic implementation into your web page is far from perfect. With CSS, you can control exactly which elements display, and how. Tuning sIFR via CSS is fairly easy. Should you take some time to explore the sIFR release pack, you’ll find a standard piece of CSS (below) that you can conveniently drop into your site’s style sheet. This will solve the major problems, such as removing the original browser-rendered text from display.
/* Do not alter this CSS */
.sIFR-flash {
visibility: visible !important;
margin: 0;
}
.sIFR-replaced {
visibility: visible !important;
}
span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-flash + div[adblocktab=true] {
display: none !important;
}
Instructing the Fl ash-rendered text to appear the correct size in all browsers is a little more tricky. By nature, your Fl ash movie will automatically resize itself to fit within the element whose content it’s replacing. Therefore, to resize the movie and the text it’s rendering, you must resize the original element using CSS manipulation. Take a look below to see how I’ve done it:
.sIFR-hasFlash H1 {
line-height:28px !important;
height:28px;
font-size:28px;
visibility:hidden;
margin:0 !important;
}
.sIFR-hasFlash H2 {
line-height:20px !important;
height:20px;
font-size:20px;
visibility:hidden;
margin:0 !important;
}
sIFR places a class of .sIFR-hasFl ash on the <html> tag. So, to style any sIFR element, all you have to do is append this class before it in the CSS selector:
.sIFR-hasFl ash H1
I’ve used a mixture of line height, height and font size to achieve the exact crossbrowser element height. I’ve used ‘visibility:hidden’ to prevent the original browser-rendered text from appearing before sIFR loads and replacing it. The four occurrences of the ‘!important’ declaration exist only to clarify confl icting CSS commands when sIFR is and is not active. Take a look at the full CSS file on the CD to see what I mean.
The best way to learn sIFR tweaking is through experimentation with different browsers and CSS combinations. You should get used to the process fairly quickly. Most cross-browser design issues will occur when trying to get Internet Explorer 6 to render sIFR text exactly the same size as other browsers, such as Firefox. But keep at it – you’ll get there in the end.
And that’s it! You’ve effectively replaced your document’s browser-rendered H1 and H2 headings with attractive, rich text font equivalents. Hopefully, you should now be able to transfer the knowledge you’ve gained from this tutorial across to any standards-compliant website with speed and ease, and will gain as much from using sIFR as I do. But remember, sIFR is only intended as a temporary measure; a stepping stone until the day browsers begin to support fonts stored on servers rather than just local machines. But until that time, let’s enjoy the new creative freedom that sIFR offers. Once you become fully acquainted with it, you’ll wonder how you ever got by without it.
Bookmark with:
Comments
Richard B / 20/03/2007 / 12:37
Great write up Steve, thanks.
ralph / 20/03/2007 / 16:30
for the typo3 users out there:
http://typo3.org/extensions/repository/view/gb_sifr/1.1.0/
Ty G. / 20/03/2007 / 22:10
Nice write-up Steve, sIFR's been on my ToDo List for a while now.
Likely I'll start here, when I get a-round to it.
Can you get them to crank up the text a notch or two for articles like this...
Barry McGee / 20/03/2007 / 23:59 / http://www.barrymcgee.net
Thanks, great introduction to sIFR, I just got it working on my site however it took me a while as I'm unfamiliar with JavaScript, I didn't realise I had to include
if(typeof sIFR == "function")
...and therefore was stuck for a while until I took apart Mike Davidson's example, you may wish to update the article to include this...
Many thanks,
Barry
Chris Huff / 21/03/2007 / 05:55 / http://www.designsbychris.com
Thanks for the article. sIFR is definitely the way to go right now when it comes to image replacement. I need to implement it on my sites...
nigel / 21/03/2007 / 07:55
"sIFR (scalable Inman Fl ash Replacement) is not a new technology; it’s a new technique"
excuse me? where have you been for the past 12+ month?
Spencer / 21/03/2007 / 13:15 / http://www.vizualight.com
As a novice web designer who's trying to learn things on his own, this is going to be a huge load off my back. A big thanks to you for this.
Carlos Eduardo / 21/03/2007 / 18:54 / http://project47.viscontbox.com
I've used it in a few works...
I think it's not necessary but, when a design comes to you code HTML and CSS and you have to use that different font, sIFR is a excellent alternative, making it a dynamic text.
Ward / 21/03/2007 / 23:57
Yea, I agree its a little weird reading about this now. Its been reported on and rehashed lots of places. Kind of a waste of space.
Kyle Meyer / 23/03/2007 / 01:24 / http://www.astheria.com
You're calling the document XHTML, but it has a HTML Doctype.
Other than that, nice work.
Nix / 26/03/2007 / 22:53 / http://www.michaelnixdesign.com
This is a great write-up and tutorial. The scattered instructions on Novemberborn and Mike Davidson's site took me hours to implement sIFR on my site. I wish I would have found this earlier, but I'm happy either way to see sIFR being promoted here in such a clean manner.
Niko Neugebauer / 15/05/2007 / 11:23 / http://www.nikoport.com
Nice article, but just wanted to add that sIFR is quite old by itself,
and the most current version is being developed by Mark Wubben
and the 3rd version is available at http://novemberborn.net/sifr3
Sanjeev / 25/05/2007 / 16:08 / http://www.designjaunt.com
Thanks a million for this tutorial! I tried implementing sFIR using the official documentation but it just wouldn't work for me. I'm fairly good in my HTML & CSS skills but for some strange reason the damn thing just wouldn't work for me!! But with your tutorial, it actually worked... thanks once again :-)
You Rock!!
Ando / 04/01/2008 / 22:37
An amazing write up steve, the best of 2007 by far, great work. Keep it coming. :-) Superb
Rudy / 11/04/2008 / 22:39 / http://www.contentheavy.com
I noticed you cannot use Sifr on anchors tags, as it kills the anchor? is this truly the case? ... great article, thx!
sci / 17/09/2008 / 10:03
Thanks for the tutorial.
How does this hold up with screen readers?
rebecca / 05/01/2009 / 09:30
Thanks, the original documentation forgets to outline the basic steps. This was a huge help, it should be added to the official documentation.
JustinM / 27/01/2009 / 21:20 / http://www.interstartv.com
Badabing badaboom! Just wanted to let you know I was struggling with this for a couple of weeks before finding this article. Thank you very much, Steve!
craig david / 03/04/2010 / 13:08 / http://www.logodesignpros.co.uk
Some strange reason the damn thing just wouldn't work for me!! But with your tutorial, it actually worked... thanks once again :-)
