/ Coding

Application: Dynamic Text Replacement

I developed DTR so that web developers could add custom fonts to their websites, without having to manually create GIFs, or embed <img> tags or complicated CSS code in their (X)HTML.

The editors of A List Apart liked my idea, and they published my article about the method:

Text styling is the dull headache of web design. There are only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML. Sticking with the traditional typefaces is smart for body text, but when it comes to our headings — short, attention-grabbing blocks of text – it would be nice to have some choice in the matter. We’ve become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images.

Read more at A List Apart »

Troubleshooting

If you’re having difficulty getting DTR to work, there are a few steps that I recommend taking:

  1. Try using different font (TTF) files.
  2. Examine the phpinfo() output for your server. You should have the following modules installed: --with-gd, --with-ttf, and --with-freetype-dir. If you don’t know how to find this information, download and unpack the DTR files and upload “info.php” to your server. Then call the script from your web-browser.
  3. Try accessing the “heading.php” URL directly, with a sample string of text, such as heading.php?text=whatever. The script may give you useful error messages.
  4. If the script does not give you useful error messages, open the “heading.php” file in a text editor, and remove all of the ‘@’ characters. These characters are used by PHP to hide debugging information. If you see cache-related errors, that’s okay.
  5. If you’re able to see styled text, but it looks stretched or pixelated under Internet Explorer, you’re experiencing an IE cache bug. Any time you change the size or font-file for your script, you will need to change the filename of “heading.php” to something else, or IE will attempt to apply the old image sizes to your new images. There is no known workaround for this, except to do all your testing in Firefox.
  6. Some fonts have slightly awkward bounding-boxes for their characters, which causes DTR to occasionally crop them incorrectly. At this time the only way to fix such a problem is by manually padding the image boundaries inside the PHP script.
  7. If there are no spaces appearing between the words in your script, you probably have a slightly less-egregious version of the problem listed above.
  8. Some fonts do not contain glyphs for every character you may need. When this happens, such as with certain non-English characters, you will see blocks instead of words. The only fix for this problem is to use a different font.