A List Apart: Comments on: Dynamic Text Replacement

Posted by: kadavy

2012-01-31T13:00:49+00:00

That is all.

Posted by: Colm

2012-01-31T13:00:49+00:00

Is it not an Accessibility requirement that you must be able to resize text? with this method I don't see the possiblity of increasing the size of the dynamic images? Other than that minor flaw, the method is excellent!

Posted by: Chris

2012-01-31T13:00:49+00:00

Good question, however, if we look at accessibility in a logical way, it does not make sense to only zoom the text anyway. Screen magnifying software (every OS these days has inbuilt ones) magnify the whole screen. So does Opera, btw. It would be interesting to see how much more users use these tools rather than the hard to find (at least in IE) browser zooms.

Posted by: amon-re

2012-01-31T13:00:49+00:00

One method to solve the accessibility method is to add a JavaScript script which doesn't just increase the font size, but also loads new images.

Posted by: CM Harrington

2012-01-31T13:00:49+00:00

Interesting idea. Personally I find it a bit heavy and limited, as you can't kern or otherwise manipulate the headline image dynamically. This could lead to fitting problems. The other flaw is that this doesn't work for screen readers. Most modern screen readers use IE as the rendering engine, and merely speak everything that it sees. If the javascript replaces the headlines with images, they will no longer be read. This however is untrue in regard to text-only browsers. Obviously they will work "properly", as the text will not be replaced.

Posted by: Andy Moss

2012-01-31T13:00:49+00:00

Does this method allow for different coloured matts? or are the images using an alpha channel? Also is it possible to set the images to render with only one picture as the volume of connections this would create could affect busy sites. Im certainly not criticising this. I think its a wonderful idea, just some thought for version 2 :)

Posted by: oVan

2012-01-31T13:00:49+00:00

Anyone care to make an asp.net version of this? Microsoft uses dynamically generated in a lot of places now: see the gray banner "Microsoft Windows Small Business Server 2003" at http://www.microsoft.com/windowsserver2003/sbs/howtobuy/default.mspx They use an asp.net script with the text to display encrypted as parameter to generate these headers: http://www.microsoft.com/library/toolbar/3.0/subbanner.aspx?t=TWljcm9zb2Z0IFdpbmRvd3MgU21hbGwgQnVzaW5lc3MgU2VydmVyIDIwMDM=&f=FFFFFF&b=757575&s=A7A7A7&r=False&font=Segoe,+13pt&v=0&c=HgjbLWiigY01WAeFBYwa4dzXjGY=

Posted by: amon-re

2012-01-31T13:00:49+00:00

I believe this could be fixed by specifying an "alt" attribute, no? :)

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

To answer some questions posted here: 1) Yes, this method allows for different matte colors. The matte color (if transparency is chosen) will be the $background_color variable. No alpha channels are being used (because of IE's lack of support), but this script could be altered to do so, if you were inclined. 2) As mentioned above, screen readers should all read this text correctly, because the ALT tag is maintained throughout this process. To my knowledge, no screen reader will ignore an ALT tag, if it is present.

Posted by: Ned Baldessin

2012-01-31T13:00:49+00:00

Safari (v1.2.2) doesn't store the replaced images in cache, so each time you reload the page you have to wait for the images to load. This doesn't occur in Moz (and I haven't tried yet in other browsers). The HTTP headers sent by the PHP script are : Date: Tue, 15 Jun 2004 14:17:51 GMT Server: Apache X-Powered-By: PHP/4.3.7 Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: image/png Maybe adding headers like "Expires", "Cache-Control" and "Pragma" will force Safari to store them ? Cheers.

Posted by: waylman

2012-01-31T13:00:49+00:00

Very interesting solution. However, if I understand things right you have to edit a php file to change the color and a js file to change the font (or is it the php file for both?). Not exactley convienient. What happens when you want an alternate stylesheet with different colors and/or fonts? While this method may work great for some, I just don't see it working for everyone. Now, if there was a way to define the color, font, textsize, etc in the css and use that data to create the images I could see this as a more usefull solution.

Posted by: ceejayoz

2012-01-31T13:00:49+00:00

Replacing text with a link in it seems to lose the link... any workaround?

[url="#"]link[/url]

becomes a nonclickable heading...

Posted by: matt

2012-01-31T13:00:49+00:00

Have you tried the

's on the outside of the 's?

Posted by: Roel Van Gils

2012-01-31T13:00:49+00:00

Chris: it is true that modern browsers like Opera allow you to scale everything on a webpage, including the images. Hoewever, if you're visually impaired (like me), it's not nice to read titles that look like ugly pixelated bitmaps when they're enlarged. If you would use vector titles (Flash or SVG), then the enlarged titles would still look crisp and be a lot easier on the eyes. Opera does a very good job on enlarging pages that consists of plain HTM text and Flash applets (don't know about SVG), but bitmaps will be bitmaps... btw: enlarging an image is also possible in Firefox. The Mouse Gestures extension has a very intuitive and elegant way tot do that and I use it a lot when I need to read small bitmap print on webpages. To read the small vector fonts in Flash applets, I usually just use the 'Zoom in' function on the context menu of a Flash movie.

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

waylman: Both the font and the colors are stored in the PHP file, which generates the images. Although it would be nice to store this image in a CSS file, and dynamically apply it, it would require a lot more Javascript to do so, and the JS file here is already 8k in size. Either way, it's still better than specifying your font/colors in Photoshop. ceejayoz: You can make linked-headings work by replacing the link tag, not the heading. If you replace the heading, the link will be wiped out.

Posted by: ceejayoz

2012-01-31T13:00:49+00:00

I'll try that, thanks! :-) Wonderful script, btw.

Posted by: Ryan Schroeder

2012-01-31T13:00:49+00:00

I was under the impression that PNGs aren't properly supported by certain browsers... Is there a particular reason you don't use GIFs?

Posted by: Peter Zsodlos

2012-01-31T13:00:49+00:00

Haven't tested it yet, but this is how I would go about doing it: Modify the image generating script to take its parameters from the $_GET array. In the php script specify some defaults, and update the appropriate properties supplied to the script. In javascript create an additional function (get_font_style(selector)), which would determine the style information for the text which is to be replaced. Then just sit back, and call replaceSelector(selector,get_font_style(selector),true);

Posted by: Peter Zsoldos

2012-01-31T13:00:49+00:00

correctly spelled is: Peter Zsoldos. I think I just my rights to make fun out of all my non-HUngarian friends who can't spell it. ouch.

Posted by: Hanan Cohen

2012-01-31T13:00:49+00:00

Create a PHP file with one command that will tell you everything about the environment.

Posted by: phnk

2012-01-31T13:00:49+00:00

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 by: Rob Brackett

2012-01-31T13:00:49+00:00

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 by: atmos

2012-01-31T13:00:49+00:00

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 by: atmos

2012-01-31T13:00:49+00:00

I got burned by trying to use tags. :(

Posted by: Chris Barr

2012-01-31T13:00:49+00:00

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 by: atmos

2012-01-31T13:00:49+00:00

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 by: Ryan Masuga

2012-01-31T13:00:49+00:00

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 by: Chris

2012-01-31T13:00:49+00:00

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 by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

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 by: Iolaire McFadden

2012-01-31T13:00:49+00:00

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 by: Su

2012-01-31T13:00:49+00:00

If I turn line-wrapping on in the JS file, I get a bunch word-images butting right up against each other. Is anybody else having this problem? It's happened with two completely unrelated(different foundry and designer) fonts so far.

Posted by: two brains

2012-01-31T13:00:49+00:00

:: is it not an Accessibility requirement that you must be able to resize text? :: with this method I don't see the possiblity of increasing the size of the dynamic images? Use relative sizing of images http://www.wats.ca/resources/relativesizing/20

Posted by: David Grant

2012-01-31T13:00:49+00:00

Haven't read it yet!

Posted by: Chris

2012-01-31T13:00:49+00:00

Thanks for sharing.

Posted by: Justin

2012-01-31T13:00:49+00:00

I've been thinking about this very idea for quite some time now, in ASP.NET of course. I've written several handy image manipulation/generation objects for my own personal use (auto thumbnail creation, importing images from my digital camera) and have had some ASP.NET code that was fairly well suited for this purpose sitting around, just begging me to apply it to this very subject. As ALA always does, the fire under my butt has been lit and I've got a nice working script available: http://software.enjoybeing.net/dev/gen_heading/generator.aspx?h_text=Look+At+This+Auto+Generated+Text! The thing I am now struggling with is retrofitting the JS code from the article to work with my .NET page. Something I don't understand is the usage of the testURL and test image. The JS seems to initially request a PNG image and appends a querystring value to it... this seems quite odd because what is an image going to do with a query string value? I think the idea of generating header text OTF (on-the-fly) is the way to go, makes other image replacement techniques look stone-age. As not to fill up this discussion with technical talk about ASP.NET solutions to this idea, feel free to drop me a line via: http://software.enjoybeing.net/contact/ Great article!

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

Justin: The testUrl.src has a query string appended to it as a precautionary measure. We append the current time (in milliseconds) to the URL string so that it never requests the same URL twice. This should prevent browsers from caching the test image. Although caching the test image might sound like a good thing, this idea was put forth by Peter-Paul Koch to prevent browsers that cache the image from not firing the Image.onload function (since the image is already loaded). If the testImage.onload function does not fire, we can't be sure that the browser supports images at all, which is a key factor in this technique.

Posted by: Javan

2012-01-31T13:00:49+00:00

Is there any way to apply this only to tags with a specific class like {h2 class="font"} ? I would like to be able to use this to generate just one letter in a heading like {h2}{span class="letter"}H{/span}ello{/h2}, but it seems I can't do it without eating up the whole span tag. Any ideas?

Posted by: Marty M.

2012-01-31T13:00:49+00:00

Can this technique be done straight up without converting to images? As in can you load a font onto your server, and then have the font appear on your site, without it being converted to an image - and the other person still being able to see that font? (I'm going to guess no, but if it's a possibility I'll be more than happy to hear that solution.)

Posted by: Brendan Taylor

2012-01-31T13:00:49+00:00

As long as you're not using alpha transparencies, Internet Explorer (and every other modern browser) should support PNG just fine. PNGs are preferable to GIFs in most cases; they allow a wider range of colours and compress better.

Posted by: Justin

2012-01-31T13:00:49+00:00

Got that ASP.NET version completed, changed the image type to GIF and had to make the test image (test.gif). I just changed the URL's for the h1 and h2, changed the test image to a GIF, that's it. I also had to modify my .NET code a little bit, changed the querystring parameter name. Therefore my previous example I posted no longer works. This is because I originally used "h_text" for the querystring key, now it uses the same key as the PHP equivilent, which is just "text". Here's the final product: http://software.enjoybeing.net/dev/gen_heading/ Since I apply an underline to the image text, it is obvious that the JS code sends a request for each individual word rather than the entire string of text enclosed in the H2 tag... isn't this a waste of resources (not to mention the underline effect is lost). Also, it would be problematic if the dynamic image performed more advanced techniques, such as gradients or predefined images before/after the string of text. Let me know how it works, again, feedback here: http://software.enjoybeing.net/contact/

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

Javan: By customizing the javascript code, you can change which selector is used to find replaceable images. So instead of writing "h2", you could tell it to replace "h2 span" which -- like the equivalent CSS selector -- would only target tags that are inside

tags. marty: unfortunately, it's not possible to do this without images. Font embedding is supported by IE/Win, but it's not standards-compliant. Until a better solution is supported by different browsers, we're stuck with either images or Flash.

Posted by: Marty M.

2012-01-31T13:00:49+00:00

For the prompt reply. I figured as much. Cool article, and we will attempt to use this technique in the near future. M.

Posted by: Justin

2012-01-31T13:00:49+00:00

Compare the above example with this one: http://software.enjoybeing.net/dev/gen_heading/generator.aspx?text=this+is+just+some+random+text+that+is+really+long+and+should+show+a+single+underline The underline carries through the entire string of text, as it should. I'm sure it's a quick modification to get the JS working as I had hoped. Just an FYI.

Posted by: Joe Burke

2012-01-31T13:00:49+00:00

I can't be absolutely certain, but there is an ancient IE filter AlphaImageLoader which will work with Win IE to produce alpha transparencies. ALA has an article by Michael Lovitt relating to the subject at http://www.alistapart.com/articles/pngopacity Hopefully this will help.

Posted by: Frank S.

2012-01-31T13:00:49+00:00

IE and FIrefox (pc) are not loading the images. On Mac, Safari loads it fine but not firefox. Help :)

Posted by: Rajeev

2012-01-31T13:00:49+00:00

Just in case anyone is trying to do this, there is a quick and easy way to turn of antialiasing of fonts, which is pretty much nessecary for bitmap fonts and obtaining the "pixely" effect. Just go to line 94 of the PHP script and insert a - (negative/minus sign) before $font_color. (For the people who aren't fluent in basic programming, that just negates the number, or the color index in this case.) For some reason, that's the only way to disable anti-aliasing when using the imagettftext() funtion.

Posted by: Frank S.

2012-01-31T13:00:49+00:00

Nevermind... I forgot to add the test.png. On a related note, Safari seems to be able to work w/ out it.

Posted by: brian

2012-01-31T13:00:49+00:00

If you want to resize the font you can simply send that as another parameter in the image tag. So heading.php?text=URLs Are Fun becomes heading.php?text=URLs Are Fun&font_size=72 then some minor edits in the PHP file and you can dynamically resize, re-colour, and re-font, all your headline images at once!

Posted by: Thomas

2012-01-31T13:00:49+00:00

The downside of �display:none� for the print text in a browser that doesn't load images *and* stylesheets: Doubled text.

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

The only browsers that support images and javascript but not CSS are older browsers, and this script uses object-detection to ignore them. So Navigator 4.0, for example, will not apply this technique. It's conceivable that someone could manually disable CSS in a modern browser, but why would anyone do that? And if they did, why would they leave regular images enabled? I don't believe this is a serious concern.

Posted by: tom lyczko

2012-01-31T13:00:49+00:00

i am not a javascript guru, etc., but here is an idea: extend the php/GD/etc. script to create multiple images with different appearances, give them names that can be referenced within javascripts or css code that perform rollover and style-switching in the manner described in several other ALA articles?? i imagine this would require standardizing the image filenames created by the php/GD/etc. script so the javascript knows what to do... seems also possible that the php code could also dynamically create the actual javascript code or know which javascript filename to write into the code... this would make a good part 2 / part 3 follow-up to this excellent article. thank you for reading this... :) tom

Posted by: Russell

2012-01-31T13:00:49+00:00

Wow! This quite the trick. Im excited (mabet a little to excited!) by how much impact this will add to my sites using content management systems and how easily it will be to plug-in.

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

I was not aware when I wrote this article, but Shaun Inman (http://www.shauninman.com) developed an similar technique in April of this year. His technique uses Flash exclusively, rather than PHP images, but the principle is virtually identical. While I believe that both of our methods have benefits over one another, Shaun very clearly came up with this idea first. Had I done better research beforehand, I would have either credited Shaun with the development or decided against writing the article entirely. Anyone who's interested should check out Shaun's fantastic replacement technique at http://www.shauninman.com/mentary/past/ifr_revisited_and_revised.php

Posted by: Ian Anderson

2012-01-31T13:00:49+00:00

I just wanted to add my $0.02 about accessibility issues with this technique. 1. "if images are requested then the user can use them". This is false. Most people with visual impairments or blindness surf with IE win and images on. You can't tell whether the user will be able to see the images in any way from the server end. Very few special needs users use text-only browsers. 2. Images cannot be recoloured on the fly or resized unless the user has special software such as the screen magnifier SuperNova and knows how to use it. There are many serious accessibility issues caused by these limitations. These issues can be minimised by ensuring that there is high contrast between the foreground and background colours, that a sans-serif font is used, that the text size used is large enough to compare with IE's large setting for body copy, that the design does not use commonly confusable colours such as red on black, red on brown etc etc, that the images are not placed over a background image. 3. The bottom line is that yes, you are compromising accessibility using any of the image replacement techniques; In real world web design we need techniques like these, but the question is whether you apply some common sense to minimise the additional problems you are causing.

Posted by: Chris Hester

2012-01-31T13:00:49+00:00

No-one has yet pointed out the issue of copyright. I assume it would be illegal to upload your favourite fonts to the server. Can freeware fonts be copied in this way? Or does it not matter since the fonts are turned into images? (I can see the law defining uploading the font as "copying" it, and even distributing it as the server contents are mirrored, that's all.)

Posted by: Ansgar

2012-01-31T13:00:49+00:00

I have been playing around with this script (i.e. these scripts) for a while. Great idea. And some great hints in this discussion either. However, I was wondering about special characters that you might need in foreign languages. Is there any way to have a ö character? It is said that this should cause no trouble to the script, but in fact it does not work. Any ideas? Ansgar

Posted by: apartness

2012-01-31T13:00:49+00:00

Shaun shared his IFR technique with us as a potential ALA article before publishing it on his site after we decided to pass on it. We thought Shaun's technique was marvelous and innovative, but we had some problems with it, and declined it. With the present article, no such problems presented themselves, so we approved and published Dynamic Text Replacement. The two techniques are different and were evolved independently. Both have their strong pluses. For us, the accessibility benefits of DTR made this article an easy buy.

Posted by: apartness

2012-01-31T13:00:49+00:00

>>No-one has yet pointed out the issue of copyright. I assume it would be illegal to upload your favourite fonts to the server. I'm no expert on intellectual copyright law, but I don't see why you make that assumption. This method does not embed copyrighted fonts on the page. This method simply creates GIF images of text. It's no different than opening Photoshop and manually creating type GIF images, except that the process is automated. Is your concern that someone might hack their way into the system and download the font without paying for it? If that is your concern, I must say it seems unlikely to me that a dedicated hacker would expend energy trying to steal a font from myclient.com. For one thing, said hacker would have to KNOW that the type GIFs on the page are being dynamically generated via a font stored on the server. And how would he or she know that? Besides, why rob a lemonade stand when you can rob a bank? It seems to me that any dedicated hacker determined to download fonts without paying for them would spend his or her time trying to attack Adobe.com or Veer.com � not my clients' sites.

Posted by: Rich

2012-01-31T13:00:49+00:00

You normally pay for the use of a typeface on a X x CPU licence basis. In effect you pay to use on an agreed number of computers (normally 1x, unless its a bulk licenses) - uploading it to a server (as you need to do in this example) is an additional CPU.

Posted by: Josh

2012-01-31T13:00:49+00:00

WOW. Using PHP to dynamically create an image (or 3-4 or however many) on every page hit CERTAINLY won't be a resource drain on a server... right? Doh! Even with image caching this still seems unreasonably wasteful. Shouldn't we be designing in a more typeface independent manner in the first place?

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

Sending cached images to a browser incurs almost no overhead. The processor requirements for loading a PHP file and checking whether the file exists is virtually nothing. Compared to something like database access, sending a static file is practically a day off for the server. There is something to be said for designing in a "typeface independent" manner. Let's be pragmatic, though: current web design only provides maybe seven universally accessible fonts to choose from: That's not a lot of choice, and this method is simply another option for designers who have tighter requirements. Having just visited your website, I can see that you're not in total disagreement: Well over half of the words on your home page are represented as images.

Posted by: Josh

2012-01-31T13:00:49+00:00

Argh! I salute you, that was a masterful retort.

Posted by: Stuart Robertson

2012-01-31T13:00:49+00:00

This is a really great article, and something that I'll find very helpful on my next project. I also had trouble with no spaces appearing between the words. I added this line to function javascript_to_html($text) $text = $text.' '; which seemed to do the trick... although I'm guessing there's probably an easier / cleaner way to fix the problem.

Posted by: Sean Burke

2012-01-31T13:00:49+00:00

Cool article, but... Ever since I viewed the demo, my fonts have been screwed up. If I view some emails in Outlook or view some websites, the font that was used will show up. It's quite annoying.

Posted by: rADo

2012-01-31T13:00:49+00:00

This is a great example of a technique, which is a plus for sales, for getting bigger profit from your CMS. This technique will please customers. It will generate more cash. I love it :)

Posted by: apartness

2012-01-31T13:00:49+00:00

>You normally pay for the use of a typeface on a X x CPU licence basis. In effect you pay to use on an agreed number of computers (normally 1x, unless its a bulk licenses) - uploading it to a server (as you need to do in this example) is an additional CPU. Aha. Now I'm with you. Yup, you might have to pay a licensing fee for storing an additional copy of a font on a server, depending on the font house and its licensing fee structures.

Posted by: Andrew Dunning

2012-01-31T13:00:49+00:00

Another legal issue I'd be concerned with is people downloading the font ��either someone with FTP access or someone who just figured out the URL. I'm probably just being paranoid, but I can see it happening.

Posted by: Stuart

2012-01-31T13:00:49+00:00

If you were concerned about someone downloading the font by figuring out the URL, couldn't you just rename the font file X3CR3L.TFF or something similar?

Posted by: Christopher

2012-01-31T13:00:49+00:00

Some sanity checking should probably be added to limit the total number of cached images as this could be used as a DoS on the servers' available disk space. Otherwise, someone could just run through the dictionary and start creating boatloads of images of worss. Just a thought.

Posted by: Mathieu Pigeon

2012-01-31T13:00:49+00:00

>Shouldn't we be designing in a more typeface independent manner in the first place? If by �designing� you imply �communicating in a visual medium�, I�d have to say no. Designing without typography is akin to writing without verbs. You may get understood, but it�s crude, as is the typographically poor web of today. Good typography is the result a few thousand years of development; it should not be dismissed because current technology isn�t (yet) able to fully exploit it.

Posted by: Matthew Sweet

2012-01-31T13:00:49+00:00

Does this system re-renerate the images every time the page is loaded, or once a session, or are the images saved to a temp dir or to the websites webspace. The reason I ask is because image generation can be a pretty taxing thing for an application server, particularly for highly traffiked websites. Any thoughts?

Posted by: Keith Harper

2012-01-31T13:00:49+00:00

OK, I do everything with standards now, but I am coding a freelance 300page website that needs to work all the way back to the dreaded Netscape 4.77 and IE 5.0, for education. We figure for an education site, schools could very well be using old browsers + computers. So my question, does this PHP script work with legacy browsers like N4.77? if it does, awesome! I really don't want to wind up producing hundreds of image headers

Posted by: Sandy McArthur

2012-01-31T13:00:49+00:00

I found adding: image.border = 0; to replacement.js at line 96 to be helpful.

Posted by: Cameron

2012-01-31T13:00:49+00:00

Great article, just one question though, when comparing the dynamic headings with those I created in Photoshop, the dynamic ones are far inferior in quality - to the extent I couldn't bring myself to switch over. I'm using the same font size, background & foreground colour, etc, and have played around with the settings in the scripts but to no avail. As an example, here's one of my PS headers - [img]http://pacepro.cameronyule.com/images/welcome.gif[/img] and here's a dynamic one http://pacepro.cameronyule.com/heading.php?text=Welcome to Pace Any ideas? Or is it back to manual graphics for me :mad:

Posted by: Juan Tamad

2012-01-31T13:00:49+00:00

Pardon me but I'm not much of a PHP coder. I've been trying to implement dynamic text replacement but somehow the text graphics are not showing up on my page. I know my webserver has PHP version 4.3.5 with gd enabled. I have my font and files in the right places. The php code is being executed without any error messages but no images appear, I get the icon for broken image links instead. What am I doing wrong, or are there server-side issues I have to troubleshoot first? Thanks.

Posted by: Erik Foppen

2012-01-31T13:00:49+00:00

Has anyone had problems with IE caching images sizes with this technique? When I change fonts or sizes, IE still uses the image sizes of previous fonts, so the text look really ugly. Mozilla and Opera (obviously) don't have this problem.

Posted by: Erik Foppen

2012-01-31T13:00:49+00:00

by adding a boolean called clearcache in de javascript file, and by adding this to line 90 of that file: [div class="codeblock"]


if(clearcache) url += "?date=" + (new Date()).getTime();

[/div] you force IE to clear its image size cache.

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

I noticed that IE bug as well. Your fix works, but by addding a unique string to the end of the image's URL, you're preventing *any* caching, which may not be ideal. I've found it better to slightly change the URL of my PHP file whenever I alter the font-settings. That way, my visitors can cache the images without worrying about this stupid IE bug making the headings pixilated.

Posted by: Dan Williams

2012-01-31T13:00:49+00:00

The php itself could cache the images so that they are only generated once per heading change, otherwise the php redirects to the cached image saving server load of GDI. Not a huge deal on low traffic websites but every processor cycle helps on larger ones.

Posted by: Dan Williams

2012-01-31T13:00:49+00:00

Didn't get enough sleep!

Posted by: Joe

2012-01-31T13:00:49+00:00

if you have a CRLF and/or TAB after the opening tag, but before the characters, Mozilla will pass PHP the escaped CRLF and TAB characters to render in the images.

Posted by: Len Hardy

2012-01-31T13:00:49+00:00

I'm having a problem with one TT font file in particular. I have no problems with any other font that I try. For this problem font, the image shows up as a series of "boxes" instead of the text. The font looks fine in any other vehicle that I use to view it. Of course, this problem font is the font that I really want to use :-) Anybody have any ideas?

Posted by: Seb Frost

2012-01-31T13:00:49+00:00

A very very good point! On a static site you could get around this by generating (by whatever method) a list of all the words in the headings on the site whenever a new revision is uploaded and only letting the php script return those, but on a dynamic site you may find that your headings are dynamic (is the case for me) so that's not a viable option...

Posted by: Seb Frost

2012-01-31T13:00:49+00:00

PHP is a server-side language, that means it's operation is completely unaffected by the browsing medium. This is as opposed to Javascript which is a client=side language. With Netscape 4.7 you may have troubles running the JS file, though I'm sure someone here could make it work - but that person isn't me, I shamelessly turn a blind eye to anything prior to Netscape 7 ;)

Posted by: Mark James

2012-01-31T13:00:49+00:00

As mentioned in the article, it is possible to use this technique to replace tags with dynamic Flash movie. A simple test page exists with downlaods available for additional/altered files at http://www.famfamfam.com/flash/dtr These do not have the overhead of running PHP scripts to create image content, although they do have problems as you can most likely see; Flashes of unstyled/unsized content, and differing appearance on various browsers are among the current bugs. Most, if not all of the bugs with this are fixable for anyone who has the time. I hope someone is interested enough to finish off this alternative method for a great technique.

Posted by: Bruno Torres

2012-01-31T13:00:49+00:00

Isn't there any possibility to use this script in a server that has only php 4.1? I asked the admin, and he said he can't upgrade php. I could change the server, but this is from a friend and is free to me. Is there any modification i can do to make this technique works in php4.1? the gd is installed in the server. The technique is great, i'd like to use it. Thanks.

Posted by: Brian LePore

2012-01-31T13:00:49+00:00

In IE for Windows, if you go to Internet Options -> Security -> Internet and set it to High, then this does not get run at all. If it's set to Medium it runs, but not on High.

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

Bruno: PHP 4.1 did not come with the GD library support by default, but if it is installed on the server, and the module is included in PHP, then this technique will work fine. Brian: IE with "high security" disables all ActiveScripting support, which includes Javascript. So, naturally, that would disable this technique entirely. However, if the Javascript does not execute, the standard headers will still remain, and they can still be styled using standard CSS techniques as a fallback.

Posted by: Perry Johnson

2012-01-31T13:00:49+00:00

I've implemented a similar technique on a new site, but the prospect of a little unobtrusive automation intrigued me. The problem is that I have several headings that need replacement, all with different styles and colors. My solution moves most of the configuration into the page calling the scripts. The javascript in the main document is like this: [removed] function imageHeader(selector,phpfile,wordwrap){ this.selector = selector; this.phpfile = phpfile; this.wordwrap = wordwrap; } var imageHeaders = [ new imageHeader("h5","heading.php?font_size=14&font_color=00ABE4&background_color=FFFFFF",true), new imageHeader("h2","heading.php?font_size=22&font_color=FFFFFF&background_color=CCC592",true) ] [removed] In replacement.js , I've replaced this code replaceSelector("h2","heading.php",true); with this code for (var i = 0; i < imageHeaders.length; i++) { replaceSelector(imageHeaders[i].selector,imageHeaders[i].phpfile,imageHeaders[i].wordwrap); } Also in replacement.js , replace this code: var url = items[i].url + "?text="+escape(tokens[k]+' ')+"&selector;="+escape(items[i].selector); with this code: var url = items[i].url + "&text;="+escape(tokens[k]+' ')+"&selector;="+escape(items[i].selector); Finally, in heading.php , set up the PHP script to accept those variables from the query string if($_GET['font_size']){ $font_size = $_GET['font_size']; } if($_GET['font_size']){ $background_color = $_GET['background_color']; } if($_GET['font_size']){ $font_color = $_GET['font_color']; } It would be so nice if the javascript could parse the CSS color: , background-color:, white-space: and font-size: properties to populate that query string for the PHP script. This way, we'd only have to include the javascript in the head and ALL the styles would remain in the stylesheet where they belong.

Posted by: Bruno Torres

2012-01-31T13:00:49+00:00

Ok, but the server where i host my site has PHP 4.1 with GD support and it doesn't work there. I get lots of "The server could not create this heading image" errors. Is there anything i can do to solve this? Besides having GD support, my php must have any other functionality? May it be necessary any modification in the script? I hope so... Thank you..

Posted by: Michael Carvin

2012-01-31T13:00:49+00:00

Likewise, in heading.php you could add this at line 25, just below $cache_folder... $selector = $_GET['selector'] ; if($selector == "h2") { $font_file = 'supercoolfont.ttf' ; $font_size = 12 ; $font_color = '#ff6600' ; $background_color = '#ffffff' ; $transparent_background = true ; $cache_images = false ; $cache_folder = '/whatever' ; } I'm publishing this site over the weekend (save for a few Flash bugs), and found it works quite easily. I don't feel comfortable in Javascript yet, but a simple if() statement in PHP doesn't frighten me off. Still have to thank Perry for a kick in the right direction though.

Posted by: Andrew Booth

2012-01-31T13:00:49+00:00

Title

Text

But ideally I'd do the replacement when the content is created and embed the names of the cached images in element id's.

Title

Text

Posted by: LazyJim

2012-01-31T13:00:49+00:00

has anyone thought how many images you will be adding to the download time of your pages? A new image must be downloaded EVERY time the same words come up because it's dynamically created. Why not just have images for every letter of the alphabet and replace each letter on your page with a single-character image? Users then only need download about 30 images per font size (including CAPS), and then each letter would be retrieved from the cache! (Not recommended for body text - but then again images aren't recommended for ANY text!)

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

For normal use, each of these headings will be between 1k and 3k. Placing even three or four of these on a site is not a large addition to the download time of a site. Many things in web development are a trade-off. Using individual characters would not work, because 1) the kerning of characters would be destroyed and 2) the ALT attributes of each image would be rendered entirely useless, making this technique unaccessible. I don't think *anyone* is recommending this technique for body text. It's simply one more option for headings.

Posted by: LazyJim

2012-01-31T13:00:49+00:00

"I don't think *anyone* is recommending this technique for body text." Ah good! oh yes the alt text would become meaningless! As a header-image-generator this is an excellent tool! But to me it just feels wrong some how :/

Posted by: Nevel

2012-01-31T13:00:49+00:00

First of all, I love the idea and the creativity behind it. Quote from a previous post: "Now, if there was a way to define the color, font, textsize, etc in the css and use that data to create the images I could see this as a more usefull solution." First of all, I think it's a choice, whether or not to use CSS. When using replacing images, you obviously don't think CSS is good enough to serve your needs. And if you do want to control your images trhough CSS, it might not require that much JS, I guess. Just from the top of my head(haven't had the time to test this yet): var newEl = document.createElement('span'); newEl.className = 'imgStyle'; var color = newEl.style.color; Or am I being silly here?

Posted by: Dave

2012-01-31T13:00:49+00:00

I'm hoping I don't get flamed w/ a bunch of RTFMs here but here goes... I have downloaded the replacement.js, layout.css and the .php file provided in the article, but how do I implement it? Obviously the .js and .css gets included in the head but what do I do with the .php file? Include is just like a js file with the script src tag? I have php 4.3.6 installed and running, but I am a CF programmer and know pretty much NOTHING about php. Can I include the php file with cfinclude? Also...how do I know if I have the GD graphics library? And if I don't have it, where do I get it? Please forgive my "newbieness".

Posted by: Dave

2012-01-31T13:00:49+00:00

Allow me to thwart the RTFMs before they begin. It works! It took some work to get the php_gd2.dll as it is not installed by default like its said to be. But it's working great. Thanks Stewart for the great article and ALA for providing such great info!

Posted by: iG.STUDiO

2012-01-31T13:00:49+00:00

It's so amazing to observe the evolution of the idea in a creative environment. This is why I love ALA discussions. There is, I believe, an infinite number of ways for driving a nail into a board - starting from a hammer and working your way up to a microscope - and most of them get the work done. What to use - is entirely up to us. This article introduce yet another way - great. Even better, it works! Anyone wants to port it to .NET or any other platform - go right ahead, and don't forget to share. Waste of bandwidth? Hard to fathom without testing under real load; I would say, it might cause some issues in some cases, but this is not the point. The point is - the more ways of skinning the cat we discuss, the larger the world population of the skinned felines will grow. Ewe. I meant it in a positive way, actually. Hmm. Anyway, great work, great concept, and great discussion. Keep it up. Sidetrack: [LazyJim] ...Why not just have images for every letter of the alphabet and replace each letter on your page with a single-character image?... This is yet another way. And, you don't even need PHP or any other server-side technology to implement it, you can get away with simple [removed] take a string of text, split it between characters, loop through the resulting array and write to the page whatever structure you wish to insert "YourArray[i].gif" image for each letter. Assuming that you have all the images pre-made and uploaded to the server. Here is the sample: http://javascript.internet.com/messages/print-line.html I wasn't entirely happy with this solution, because each line of text would require numerous server trips on the first load (not only that, there was an issue with illegal characters in a file name, like " .gif", "?.gif", "..gif", etc.), so later I revised the script, using single image as a shifting background for the series of floating DIV's and a set of CSS rules to position the background: http://www.gerasimenko.com The next iteration of the script does, in fact, dynamically replace the H1, H2, etc. tags it finds on page onload. I was going to submit a tutorial on this matter to ALA for a while, and finally did earlier this week, inspired by the article we are discussing now (I wonder if this post will be considered a "previous publication" and ALA will dismiss my submission because of that). Yet another way. [Stewart] ...Using individual characters would not work, because 1) the kerning of characters would be destroyed and 2) the ALT attributes of each image would be rendered entirely useless, making this technique inaccessible... The kerning will be affected, yes, but not destroyed, it's just a matter of dynamic positioning of each letter. Kerning in Photoshop is not bulletproof either, and highly typeface-dependable. The ALT attributes will make sense no more, true, but there is also TITLE you may be able to apply to the parent node element to make it up. [Nevel] ...When using replacing images, you obviously don't think CSS is good enough to serve your needs... True. It isn't. At least not yet. This is why Stewart developed this technique in a first place.

Posted by: Dave

2012-01-31T13:00:49+00:00

I set the font_size parameter to 14 (rather than the default 50), but the resulting images are still the same size and the type is all fuzzy. Is there another parameter I need to set somewhere?