Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm160c/exercises/ex06.php

Exercise 6: Dynamic Text Replacement (DTR) PHP Script

Resources for this exercise:

About DTR

One of the biggest challenges facing Web designers is the use of custom fonts. Although a Web designer can use the CSS "font-family" property to specify a specific font face to be displayed on a page, a computer can only display that font if that font is installed in the user's operating system.

To avoid problems most designers simply limit themselves to using the standard fonts that come with Windows and Macintosh operating systems. But using the same old fonts (Times, Arial, Helvetica, etc.) gets to be boring. So some designers use custom fonts by typing some text into Photoshop, saving the words as an image, and placing the image of the text on the Web page. While this allows you to use any font on your site, there are disadvantages to this method, not to mention the fact that creating graphics by hand is extremely time-consuming.

Various techniques for automating the creation of images from text (called "image replacement" or "text replacement") have been developed over the years, usually involving JavaScript and/or PHP. In 2004 Stewart Rosenberger, writing in A List Apart, outlined a technique he called Dynamic Text Replacement which relied on both JavaScript and PHP. Since then several people have improved upon his original code, and the latest versions of DTR need only PHP and CSS.

In a nutshell: You choose a font you wish to use for your site, probably for the headlines. Then you make a few changes to the script and CSS files, upload the font and the script to the Web server, and now all your headlines (say, your <h1>, <h2>, <h3>, and <h4> elements) display using the custom font. That's it. No manual image creation, nor re-coding of any HTML pages, is needed for this to work!

What it does: The script looks at the headline tags of the page and automatically creates images of this text in your custom font, according to your CSS (in your CSS you can specify the color, size, font-family, etc.). These images of the headline text are presented as the background of the actual headlines, and the CSS indicates that headlines do not display, so the user sees the images of the headline text instead of the actual text — although the headline text is in the HTML, so it can be found by search engines and accessibility software. This all happens on the fly, each time a page is served to a browser. (The script also keeps copies of each image it creates on the server, to make future processing more efficient.)

In this exercise you will download, configure, install, and use a dynamic text replacement PHP Script.

1) Create a new Web page for exercise 6.

Because this page will be using PHP, its file name extension must be ".php". So name this file "exercise6.php".

2) This page must contain the XHTML 1.0 Strict DocType, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

4) This page must display your name and say "Exercise 6."

5) This page's <title> must indicate that this is your exercise 6 page, so it should say something like "John Sky's DM160C Exercise 6".

6) This page must contain a relative link to your home page.

7) Read Dynamic Text Replacement for an understanding of the issue — but note that you will not be using this older script, but an improved one based on it.

8) Take a quick look at PHP + CSS Dynamic Text Replacement to see the current state of development of the improved script.— but note that you will not be using the download link on this page that links to a version that may not run on webhawks.

9) Download this version of the P+C DTR from:
http://pcdtr.googlecode.com/files/pcdtr1.6.2.zip

There are other, more updated versions of this script that will work well on many other servers, but this is the latest version that I know will work on webhawks.

10) The download should expand into a folder called example_1.6.1 (even though the version is actually 1.6.2) that contains:

You will only need to edit the style sheet; you won't need to change the other files.

11) To do a very quick test to see the script in action on the Web server, simply upload the whole example_1.6.1 folder, without making any changes, to your public_html folder. Then go to:
http://webhawks.org/~yourusername/example_1.6.1
(replacing yourusername with your own webhawks user name, of course).

10) If the script is running properly, you should see stylized text that looks like this:

dynamic text replacement test

11) Now that you've seen the script in action, delete the example_1.6.1 folder from the server.

12) Find a font that you wish to use for your headlines.Here are a few sites to check out:

Download a Windows TTF (True Type Font) version of the font you wish to use.

13) Now go back and read the README.txt file. This gives you the basic installation instructions to follow. See if you can get it all to work by just following their directions. If you have trouble, the following steps should help clarify their directions:

14) Here's what you need to add to your exercise 6 page:

Add the code:
<?php include 'dtr/dtr.php'; ?>
at the very beginning of your exercise 6 page, before the DocType.

Add the code:
<?php ob_end_flush(); ?>
at the very end of your exercise 6 page, after the closing html tag.

Place this link tag:
<link href="dtr/headings.css" rel="stylesheet" type="text/css" />
in the <head> section of your exercise 6 page.

Note that the style sheet used to control the headlines will stay in the dtr folder, as you indicated by the path to the style sheet. Do not move it into your css folder.

Make sure your exercise 6 page contains <h1>, <h2>, <h3>, and <h4> elements. Place a paragraph after each heading.

Note that you should avoid having carriage returns within your <h1>, <h2>, <h3>, and <h4> elements, as this may cause problems with the headline rendering.

15) Now edit the style sheet, headings.css.

Do not remove the @import statement; leave it at the beginning of the style sheet.

You can use the existing h1 styles as a starting point, or you can remove their styles and start from scratch.

You will need to specify the name of the font you downloaded as you normally would, with the font-family property. For example, if your font file is named:
SkyBold.ttf
your style might look like this:
h1 { font-family: SkyBold, Helvetica, Arial, sans-serif; }

You must style your <h1>, <h2>, <h3>, and <h4> elements at different sizes. These font-size values must use points (as in "28pt" for example) and not pixels or any other unit of measurement.

Note that, in this style sheet that is used by the script, you have the following restrictions:

Note that if you try to use a property not listed above, such as text-align, the script will not function properly. (Later versions of this script can use other properties such as text-align, but those versions will not work on webhawks.)

16) Prepare the files for uploading:

Delete the two fonts, CREAMPUF.ttf and OzHandicraft.ttf, from the dtr folder.

Place your font file in the dtr folder.

17) Upload the entire dtr folder, and your exercise 6 page, to your public_html folder on webhawks.

18) Now you need to make the cache folder (that is within the dtr folder) writeable. Although the script will run without doing this, assigning write permissions to the cache folder will allow the script to store the images it creates for use later, speeding things up.

This means you need to change its file permissions to what Unix calls a permissions set of "766" (some FTP programs may show this as "0766"). Using the following instructions, change the permissions of the "cache" folder. (Do not change the permissions of your exercise 6 Web page — in fact, do not change the permissions of any file or folder other than "cache".)

How to change file permissions using Fetch (Macintosh):

  1. While viewing the list of remote files in Fetch, control-click (or, if you have a 2-button mouse, right-click) on the folder whose permissions you wish to change. (Do not open the folder by double-clicking on it.)
  2. From the pop-up menu that appears, choose "Get Info".
  3. You will now see an "Info" window, with nine checkboxes. (If you do not see the nine checkboxes, click on the tiny triange to the left of "Ownership and Permissions".) Check the appropriate boxes. (To set the permissions for a writeable folder, check the following 7 boxes: Read, Write, and Execute of Owner, Read and Write of Group, and Read and Write of Others. This is known as chmod 766.)
  4. Click "Apply".
  5. Close the Info window by clicking on the small red button in the upper-left corner of the window.

How to change file permissions using CoreFTP (Windows):

  1. While viewing the list of remote files in CoreFTP, right-click on the folder whose permissions you wish to change. (Do not open the folder by double-clicking on it.)
  2. From the pop-up menu that appears, choose "Properties".
  3. You will now see a File Properties window, with nine checkboxes. Check the appropriate boxes. (To set the permissions for an executable CGI script, check the following 7 boxes: Read, Write, and Execute of Owner, Read and Write of Group, and Read and Write of Other. This is known as chmod 766.)
  4. Click "OK".

19) Point your browser at your exercise 6 page. You should now see the custom font used for the headlines.

20) Using your FTP program, look in the cache folder. you should now see some files in the cache folder, indicating that you have properly made the folder writeable.

21) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

22) Make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

23) If there are any errors, fix them, re-upload the page, and validate it again.

24) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.

25) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 4/5/10. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 04/07/10.