Blog // Technology: sIFR 3 Flash Text
10
Mar
This is the first post of hopefully many that describes the technology I have used on this website. It will provide a great reference for me to come back to and also introduce to others some great tools and resources.
sIFR 3
When I first heard about sIFR I had to double take because it almost seemed too good to be true. One of htmls many limitations was the inability to use a bespoke font that differed from those supported by the operating systems and therefore run the risk of it not displaying properly on a users screen. To quote sIFR’s website:
“sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.”
It basically allows you to use which ever font you desire, even if it doesn’t exist on the users operating system. You can choose which elements you wish to apply the transformation to e.g. h1, h2, p.aClassName and even style them exactly how you want. For Quirksmode I have applied sIFR to the h1’s using a font called Corbel, you can test the difference by disabling javascript or the stylesheet.
A few things to watch out for
- sIFR does not work when opened straight from the local filesystem. You must load sIFR from a web server.
- You can’t change the size of the browser text on the fly, you must click refresh for the changes to take effect
- Javascript must be enabled for your Flash Text to display
- Flash must be enabled/installed for your Flash Text to display
Alternative to sIFR
If you want to show off your fancy new fonts and don’t want to run the risk of a user not having flash or javascript enabled, then the other solution I have come across would be to use an image and hide the html text by positioning it off screen. The following css will do just that:
h1.logo{
background:url(http://www.quirksmode.co.uk/wp-content/uploads/2008/03/mainlogo.jpg) no-repeat;
width:284px;
height:65px;
text-indent:-9999px;
outline:none;
}
4 Comments
Leave a Reply
-
Archives
M T W T F S S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 -
Tag Cloud
-
Recent Posts
1
March 16th, 2008 5:59 pm
I have been looking for that for about an hour. I thought it was called zeppyr though, why they have to name it so wierd!
2
March 16th, 2008 6:27 pm
Yeah, it’s a funny old name:-P
3
March 24th, 2008 3:21 pm
@web design brighton: it’s called sIFR for “Shaun Inman Flash Replacement” as a nod to the person who inspired the technique. Funny name, but kind of memorable! :-)
@Quirksmode: The technique you mention as an alternative to sIFR works, but what happens when a user is viewing the site with CSS on/Images off? They see nothing useful, for certain.
I have adapted a technique called “Gilder/Levin” image replacement. The downside is that you have to add an empty span to the heading or text block you want to replace, but it works like a charm for the “CSS on/Images off” scenario since the text is still there and not moved off screen:
http://www.mezzoblue.com/tests/revised-image-replacement/
All of the techniques that Dave mentions in the linked article suffer from some sort of drawback. But at least you can use what suits you the best. My biggest complaint with sIFR is the “CSS off/JavaScript on” scenario in which you see the sIFR heading and the original heading side-by-side. I am hoping to customize sIFR a bit to only display when the user’s browser has CSS enabled.
Good luck and thanks for the read! :-)
4
July 29th, 2008 4:41 pm
I’ve created an alternative to sIFR that I think you might find useful. It is very similar but it doesn’t use Flash and can insert an image that will display the proper text even when images are disabled.
It also requires very little config. Just drop in your fonts and update your CSS, in most cases.
You can take a look at http://facelift.mawhorter.net/.