Tom’s Graphic Design Journal

While I'm at it here, I figured I might as well share my two cents about dynamic text replacement. Or in other words, how I get all the pretty titles to show up on my blog automatically without creating images.

This is not a tutorial on "exactly" how. You can read some of the following sites and figure out how quite easily, the people who created these powerful scripts also include instructions. However, I wanted to review some of these better known ways as well as their pros and cons.

There are two popular ways dynamic text replacement is done. One is by using server-side software to create images from font files (there's several ways to do that) and the other is through Flash. All of these methods do require javascript though which may or may not be an issue for some viewers. Fortunately there will always be a default display so it degrades well and doesn't ruin things. This also makes all of these methods search engine friendly.

sIFR is the way through Flash. It is quite nice and gives you the most control I think. It will allow you to fine tune and adjust spacing between words and padding/margins all around which comes in handy...but not letters, there is no kerning with sIFR becuase dynamic flash text did not support it (sIFR version 3 apparently has it, but it's beta). However, you can control leading.

Another method is by using a javascript and PHP script by Stewart Ulm, an article can be found on A List Apart about his method. Another similar method would be by using Python. You can find out more about Peter Bengtsson's approach here. Yet another variation is a script done completely in PHP and CSS that is based off Stweart Ulm's script, found at joaomak.net. There is no kerning support (currently) for these methods either...yet

sIFR
Pros: Flexibility, anti-aliasing control, leading control, margin/padding control. Really nice looking because it uses Flash's engine for graphics (can technially use gradients or something for color).
Cons: Requires Flash, takes a bit of fiddling especially with odd fonts and text wrapping, larger base file size (but reuses swf file so in the long run it can be smaller), links can't use right click...to open in a new window, etc.

Stewart Ulm's Script
Pros: Fast (small file sizes..less than 5kb for a title you see here), easy to configure, doesn't require Flash to be installed.
Cons: Not easy (apparently it's somewhat possible) to kern/letterspace.

Peter Bengtsson's Script
The same pros and cons of Stewart Ulm's script...Just uses Python instead which may or may not be a con.

joaomak's Script
Pros: Doesn't require Flash or Javascript, valid XHTML and CSS, text/letter wrap (after page has been loaded...so if someone resizes their browser window), small file size (since there's no javascript and PHP is mostly server side, I'd imagine the only thing you're loading is very tiny images for each word...meaning this should be fastest loading script).
Cons: You can't specify class or id attributes on your text that you're replacing. That one hurts a bit.

One thing I didn't touch on (but hinted at) was transparencies. The sIFR technically could allow for it, so you could put your text overtop of an image background as you can with Flash movies...however, not all browsers support it. There is no (to my knowledge) support for the transparent backgrounds using the other scripts. I'm unsure if you can generate png images with the scripts...if you could, it would then be a matter of using the CSS filter property to get it working for IE6...but you then run down that road which has complications when you bring links into play.

sIFR is probably the most robust and best looking with the most options. I may in fact use it for my blog over Stewart's script. I'm not using Peter's because I'm not familiar with Python. Again, I personally did not use sIFR because of load times and because it doesn't allow for people to right click on links to open in a new browser window (and yes I have seen one attempt to fix this, but alas, it does not work on Firefox2).

I don't believe in any one "right way" for anything on the web. Any web designer/developer should know that. Even with "standards" there are just too many possibilities out there. The only two things that matter is what you can do...and what you can't do. Ultimately, it's your call...but don't go crazy with it because it will slow down load times if you were to replace ALL of your text on the page.

   

While I'm at it here, I figured I might as well share my two cents about dynamic text replacement. Or in other words, how I get all the pretty titles to show up on my blog automatically without creating images.

This is not a tutorial on "exactly" how. You can read some of the following sites and figure out how quite easily, the people who created these powerful scripts also include instructions. However, I wanted to review some of these better known ways as well as their pros and cons.

There are two popular ways dynamic text replacement is done. One is by using server-side software to create images from font files (there's several ways to do that) and the other is through Flash. All of these methods do require javascript though which may or may not be an issue for some viewers. Fortunately there will always be a default display so it degrades well and doesn't ruin things. This also makes all of these methods search engine friendly.

sIFR is the way through Flash. It is quite nice and gives you the most control I think. It will allow you to fine tune and adjust spacing between words and padding/margins all around which comes in handy...but not letters, there is no kerning with sIFR becuase dynamic flash text did not support it (sIFR version 3 apparently has it, but it's beta). However, you can control leading.

Another method is by using a javascript and PHP script by Stewart Ulm, an article can be found on A List Apart about his method. Another similar method would be by using Python. You can find out more about Peter Bengtsson's approach here. Yet another variation is a script done completely in PHP and CSS that is based off Stweart Ulm's script, found at joaomak.net. There is no kerning support (currently) for these methods either...yet

sIFR
Pros: Flexibility, anti-aliasing control, leading control, margin/padding control. Really nice looking because it uses Flash's engine for graphics (can technially use gradients or something for color).
Cons: Requires Flash, takes a bit of fiddling especially with odd fonts and text wrapping, larger base file size (but reuses swf file so in the long run it can be smaller), links can't use right click...to open in a new window, etc.

Stewart Ulm's Script
Pros: Fast (small file sizes..less than 5kb for a title you see here), easy to configure, doesn't require Flash to be installed.
Cons: Not easy (apparently it's somewhat possible) to kern/letterspace.

Peter Bengtsson's Script
The same pros and cons of Stewart Ulm's script...Just uses Python instead which may or may not be a con.

joaomak's Script
Pros: Doesn't require Flash or Javascript, valid XHTML and CSS, text/letter wrap (after page has been loaded...so if someone resizes their browser window), small file size (since there's no javascript and PHP is mostly server side, I'd imagine the only thing you're loading is very tiny images for each word...meaning this should be fastest loading script).
Cons: You can't specify class or id attributes on your text that you're replacing. That one hurts a bit.

One thing I didn't touch on (but hinted at) was transparencies. The sIFR technically could allow for it, so you could put your text overtop of an image background as you can with Flash movies...however, not all browsers support it. There is no (to my knowledge) support for the transparent backgrounds using the other scripts. I'm unsure if you can generate png images with the scripts...if you could, it would then be a matter of using the CSS filter property to get it working for IE6...but you then run down that road which has complications when you bring links into play.

sIFR is probably the most robust and best looking with the most options. I may in fact use it for my blog over Stewart's script. I'm not using Peter's because I'm not familiar with Python. Again, I personally did not use sIFR because of load times and because it doesn't allow for people to right click on links to open in a new browser window (and yes I have seen one attempt to fix this, but alas, it does not work on Firefox2).

I don't believe in any one "right way" for anything on the web. Any web designer/developer should know that. Even with "standards" there are just too many possibilities out there. The only two things that matter is what you can do...and what you can't do. Ultimately, it's your call...but don't go crazy with it because it will slow down load times if you were to replace ALL of your text on the page.