Discuss: Dynamic Text Replacement
by Stewart Rosenberger
- Editorial Comments
22 Implement it in a different place?
This is definitely a neat technique, but it seems a bit processor and bandwidth intensive, especially for a large, content managed site (which seems to be where it’s targeted). Why not generate the images when the content is added? While it would require modifying the CMS slightly, it might be a better overall solution.
posted at 10:46 am on June 15, 2004 by Rob Brackett
23 Similar Approach
I used a strikingly similar method for a while(pure php, no javascript), but eventually realized straight up text was ok for me. :) I used http://mmcc.cx/php_imlib/ which has some interesting text manipulation routines text direction, bluring, layering etc. At the time(a year or so ago) I hadn’t yet embraced pure xhtml/css so I simply had a php function any of my pages could call. get_path_for_text($str) It returned the img block with appropriate alt tags etc filled in.
If you wanted something hackish but controlable via your css sheet you could take on a method like the following. Setup a generic class that isn’t being used elsewhere in your xhtml, and have your text generation script parse the color,size,font,etc from your css(using php of course) This would still work with the caching mechanism, but you’d have to check to make sure your css file was older than your cached image, you can do this with stat(a php builtin function). If your image was older than your css, you treat it as non-existent and generate(overwrite) a new one. This wouldn’t be hard functionality to add to the script posted with this article.
posted at 11:09 am on June 15, 2004 by atmos
25 Bandwidth
I was wondering if dynamically creating images in this fashion will take up extra bandwidth or server resources. On a large site it would seem that a technique like this could cause extra work for the server and possibly slow down your page.
posted at 11:12 am on June 15, 2004 by Chris Barr
26 Re: Bandwidth by Chris Barr
Yeah, images are gonna be larger than simply transmitting the text. They’re not gonna be huge though, and that’s a trade off for getting a slightly more artistic presentation. Note that they’re not regenerated every time the page is loaded, when it generates the images the first time it keeps them on disk. So the next time it realizes “Hey ! I’ve got one of those right here, no need to bother creating it.” It allows you to not have to go into photoshop/the gimp everytime you need a new image for your templatized text.
posted at 11:17 am on June 15, 2004 by atmos
27 Very Cool. ColdFusion, anyone?
I think this technique is superb. The main problem I have with any text-replacement method is the fact that there is no line-wrap. I’ve come very close to getting the Flash Image Replacement to successfully wrap, but haven’t quite got that to work. This looks like a great solution to some of the more difficult gif-based dynamic text solutions I have seen. I appreciate the PHP, but is there anyone out there skilled enough to make this work in ColdFusion?
Thanks for a great article.
posted at 11:27 am on June 15, 2004 by Ryan Masuga
28 Screen reader myths
First of all, it is an alt ATTRIBUTE, please stop using the term alt TAG. Secondly, all windows based screen readers do use the IE engine, but read out the content on the screen, not generated content via DOM. It is easy to claim a lot about things not being accessible, another to simply check it in the real environment.
posted at 11:31 am on June 15, 2004 by Chris
29 some more thoughts
As others have pointed out, my code only generates each image once, and then stores it. Sending the image again has negligible overhead.
I wouldn’t recommend DTR for a site that needed to replace more than a handful of headings per page. But on a page with even half a dozen headings, this method saves a lot of effort, and doesn’t significantly add to page load time.
Ryan: Line wrapping is, in fact, supported by this technique. By setting a simple flag in the Javascript, you can have it generate a separate image for each word. As long as this images have the same baseline (which this PHP script ensures), the words will line up and wrap correctly.
posted at 11:39 am on June 15, 2004 by Stewart Rosenberger
30 Mac OS X Convert True Type fonts for use in PHP
I wile back I was playing around with this due to some samples on Marc Liyanage’s Mac OS X PHP pages and found it very hard to find TrueType fonts that worked.
Here is a link to my solution using the X11 application PfaEdit to covert Mac OS X true type or type 1 fonts to a usable true type format for PHP:
http://iolaire.net/current_site/blog.php?m=200402#74
iolaire
posted at 11:40 am on June 15, 2004 by Iolaire McFadden
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






21 Very impressive
This article is very impressive. Font restriction is quite a frustration when you move from DTP to web design. This solution is just great, thanks a lot.
posted at 09:51 am on June 15, 2004 by phnk