PHP + CSS Dynamic Text Replacement (P+C DTR)

What is P+C DTR?

PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger.

P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS. Sick of using the same three fonts? Tired of editing heading images in PhotoShop? If so, P+C DTR might be for you.

P+C DTR Demo

You're Look'n At It

P+C DTR In Depth

Notice

If you're new to Dynamic Text Replacement, please take the time to read about the original method.

Intro

P+C DTR was originally conceived by Alex Giron of CSS Beauty fame. He'd sent me (R. Marie Cox) a link to the original A List Apart article and suggested that it would be a fun project to try and recreate that method using only PHP; P+C DTR is the result of that suggestion.

Nikita Vakorin has translated this article into Russian! Thanks!

This is a rather alpha-stage experiment; there are some limitations, but there are a lot of possibilities, too.

PHP

Where the original Dynamic Text Replacement used JavaScript to replace the heading text, P+C DTR uses PHP's output buffering functions to parse the page for heading tags, extract the heading text and assign an inline style that points to the image generation script.

The cool thing about using output buffering — versus a custom PHP heading function to create the inline style — is that you can add P+C DTR to just about any existing page without having to hard code the inline styles or function calls.

+ CSS

Almost immediately after creating the first basic script to replace the heading text with an image, the limitations of the method were apparent. The color of the headings had to be the same, the background had to be the same and edits to the style information had to be made in the script itself.

P+C DTR extends traditional dynamic text replacement one step further by allowing a standard CSS file to control the heading's font color, background color and even the font size.

The first time the page is loaded the heading's CSS file is dissected and added to that browser session. This means that the extra hit from parsing the CSS file only occurs once per browser session.

Keep the all heading styles in a seperate style guide.

Limitations

Besides the fact that this sucker doesn't work when the end user has his or her browser's images turned off, there are some more limitations with this method:

  1. You can't give your headings an id or class or any other attributes
  2. You can't have long heading text -- there is no word-wrapping (For word wrapping, check out Joćo Makray's word wrapping fix.)
  3. You can't change the heading styles from page to page on the same site

Discuss

Read more about this method and share your thoughts at the CSS Help Pile's PHP + CSS Dynamic Text Replacement thread.

P+C DTR Download & Install Instructions

  1. Download the P+C DTR zip file and extract the files
  2. Open the image.php file to set the default font properties and assign the path to the font you'd like to use
  3. Load the files to your server to test
  4. If you don't see the heading text images in the example, your server probably does not support PHP image generation
  5. If you get "Error: The server could not create this heading image", try this tip from excitris.com.

If you're working on styling the page, add ?debug=true to the end of the URL for the page you're designing to reset the values held in the session.