One of the bugbears of using standards-compliant web design techiques – keeping content separate to presentation – is that you end up using large font sizes for page headings. And, as you may have noticed if you’re into this sort of thing, large font sizes means very obvious jagged edges. Here’s an example (obviously the fonts are different, you didn’t think I was going to demo this using Arial, did you?):
Ugh, jaggedy edges!
There are several options available to the designer wanting to replace their jagged text with smooth text effect. One of these is sIFR, image replacement using Flash, which is very clever and works very well. However I thought a similar thing could be done using PHP and it’s very nifty GD image library. So I set out to see if the idea would work.
If you’re bored already and want to get straight to the demo, just click here. Otherwise read on for an explanation.
The idea
The idea was pretty simple – use a PHP function to create an image containing the text you want it to, then display that image as a smooth-edge replacement, or the text you enter to browsers that don’t support CSS/images. Obviously the function needed to be able to handle different fonts – to start with just the fonts installed on the system you run it on – as well as different text and background colours. Sounded like a tall order, but I’m brushing up against six foot myself, so I thought could just about scale it. And here it is. My requirements were to display single lines of text, so, unlike sIFR, this doesn’t do multiline stuff. Maybe in the future I’ll think about amending it to do that.
Implementation
Using it is pretty simple – just include the aire.php file then call the function using a simple syntax. You can set various parameters, full details are below.
- Image width – The width of the image to be created
- Image height – The height of the image to be created
- Text for the image – The text to be printed to the image, this will also be the text that appears if CSS or images are not supported in the browser
- Image alignment – Whether the resulting text/image is to be aligned to the left, centre or right. Remember, of the image size you set extends beyond the ends of the text you input your image may not align correctly.. Options: left|center|right
- Background colour – The background colour for the image. This supports hexadecimal (“FFFFFF”) or RGB colour codes (“255,255,255”). Be sure to not put any spaces or other characters in this strings, they must be formatted correctly to work.
- Background transparency – A number from 0 (no transparency) to 127 (fully transparent), this sets the background opacity.
- Text colour – The text colour for the image. This supports hexadecimal (“FFFFFF”) or RGB colour codes (“255,255,255”). Be sure to not put any spaces or other characters in this strings, they must be formatted correctly to work.
- TrueType font filename – The filename of any TrueType font installed on the system. If a TrueType font is not entered the image will be created with the default text of the system. This requires the FreeType library from http://www.freetype.org/.
- Font size – The font size that the text will be written in the image in pixels. This has no effect if a TrueType font is not selected.
- Bottom spacing – For images that hang below the line, changing the bottom spacing is often a good idea. This is a number to set the number of pixels the line that the text sits on is away from the bottom edge of the image.
- Image folder – The folder to store the image files. You must have correct permissions set so that the images can be created.
- Overwrite – Whether to overwrite the current image. This is very useful when you are experimenting with the images the AIRE function creates as it allows you to continually refresh the page until the image created is correct. When you are happy with the images I recommend setting this to 0, so that the images will not be created again.
Fonts
By default I’ve put 14 random TrueType fonts in the fonts folder made available with the function. All those fonts are available from http://www.goodfonts.org/, where there are 300 fonts available for free. Any more fonts you wish to use can be downloaded from there. If you are using a Windows operating system to run your website from you can optionally use any font installed on the system – just comment out two lines in the Aire function file.
Notes
I’ve had variable success making the background colour transparent. It seems that some fonts lend themselves to transparent backgrounds better than other, and that gradiated backgrounds are quite difficult to cater for. All I can suggest is that you try as many options as you need to get an acceptable result.
I’ve tested this under:
- Windows XP running Apache/1.3.33 and PHP/5.0.2 with GD version: bundled (2.0.28 compatible)
- Linux running Apache/1.3.33 and PHP/4.3.10 with GD version; bundled (2.0.28 compatible)
I can’t vouch for the correct working of this function in other environments, but you’re free to have a go.
The function outputs valid CSS, however it is inline, so there may be issues you want to consider there. I’m working on a way to put all the CSS created into a single <style> declaration, however I’m not there yet.
Download
So the only this remaining is to offer you a Zip file containing all you need – now available in Zip and as a Tarball, complete with a selection of great TrueType fonts from goodfonts.org. As normal this software is made available under the GPL open source licence, the details of which can be found here, and I offer NO warranty or guarantee for this script. Before you email me with questions such as "Why doesn’t it work for me?" please read the instructions contained on this page and the demo page – that should be more than enough to get you started. However if you find this useful please send me a message to let me know where you use it, that would make me happy.