Home > Articles

  • Print
  • + Share This

How to Preformat Text

Remember earlier when I said that browsers ignore the returns, tabs, and extra spaces that you enter into your text editor? The <pre> (preformatted text) tag lets you get around this default behavior. By enclosing text within the preformatted text tag pair, you can force the browser to see all the extra spaces, returns, and tabs you type in your text editor. This task shows you how to use the <pre> tag.

Figure 2.4 You can "drop" preformatted text into your page without worrying about getting the formatting codes right.

Why Not Preformat Everything?

The <pre> tag has limitations. Preformatted text is usually presented in a monospaced font style, such as Courier. Monospaced fonts (like the one used by your old typewriter) are more difficult to read and don't look very nice. Another problem is that different browsers interpret tabs differently. This can cause tab stops that line up nicely in one browser to look sloppy in another.

Still, there are good uses for preformatted text. An example is when you have a word-processing document that you want to include on your Web page. It doesn't have to be a very long document before you start to lament the time it takes to add a paragraph tag for each new paragraph. You can quickly copy the page from your word processor and paste it within a preformatted tag pair in your text editor to preserve your paragraph breaks.

  1. Begin Preformatting

  2. To tell the browser where the preformatted text begins, type the preformatted text tag, <pre>.

    <html>
    <head>
    <title>Working with the 
    Preformatted Text Tag Pair</title>
    </head>
    <body>
    <font size="2" face="arial, helvetica">
    To begin a preformatted text area, 
    I add the preformatted text tag.
    <pre>
    </font>
    </body>
    </html>
  3. Type the Text

  4. Type the text exactly as you want it to appear on the Web page. Make sure that you include returns, extra spaces, and any tabs you want to use. Be careful not to make your lines too long (generally less than 60 characters) because they might become too long to show up on the browser screen without making your visitor scroll.

    <body>
    <font size="2" face="arial, helvetica">
    Next I type the information I want 
    preformatted, including extra spaces, 
    tabs, and returns.
    <pre>
     Tropical   European Domestic
     Hawaii    France  Southern California
     Puerto Rico Germany  New England
     Bahamas   England  Midwest
    </font>
    </body>
  5. End Formatting

  6. After you've added all the text you want, close the preformatted text area. Type </pre>.

    <body>
    <font size="2" face="arial, helvetica">
    Finally, after the text is entered, 
    I type the closing tag to close the 
    preformatted text area.
    <pre>
     Tropical   European Domestic
     Hawaii    France  Southern California
     Puerto Rico Germany  New England
     Bahamas   England  Midwest
    </pre>
    </font>
    </body>
  7. Test the Page

  8. Save your page and test it in your browser to see whether your preformatted text looks the way you hoped it would. One caution: Although some HTML tags work when embedded within a preformatted text area, not all do. And support for tags that work on your browser is probably not consistent in other browsers. In other words, don't include other HTML tags within the preformatted text tag pair. (see figure 2.5)

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.