Maddog's HTML for Real People Chapter 4, Lesson 5


[INDEX] Ch 4, L 5 - Fixed-Spaced Text

If you already know how to turn "fixed-spaced" or "mono-spaced" text on and off in HTML, you can skip this lesson.

Most browsers use a proportional font as their default font for displaying text. "Proportional", in this context, means that the character only takes as much room as it needs, proportional to its width. For example, an 'i' takes up considerably less width than a 'W'. The default proportional font is quite acceptable for most text passages.

Occasionally, however, one might want to use a fixed-spaced font. With fixed-spaced (or mono-spaced) fonts, each letter takes up exactly the same width. It's the kind of typing you would get with an old typewriter (in the old days, you see, before word processors, you see...oh, nevermind...).

Why would you want to use fixed-spaced fonts? Well, they can help to set off certain words that you want to emphasize, like a color, or a definition, or a name. Often, computer programmers use it to show source code, because it allows a display consistent with what you might find in a typical programming editor.

You have your choice of two tags:

<TT></TT>
OR
<CODE></CODE>

Let's see how this might be applied:

HTML Source Code Follows:


Let's print 10 letter 'i' in a row, first using proportional font, then fixed-space:<BR>
iiiiiiiiii<BR>
<TT>iiiiiiiiii</TT><BR>
Now let's print 10 letter 'W' in a row, first using proportional font, then fixed-space:<BR>
WWWWWWWWWW<BR>
<CODE>WWWWWWWWWW</CODE><BR>
The RGB code which represents the color <TT>green</TT> is <TT>#00FF00</TT>.<BR>
The line <CODE>printf("Hello World");</CODE> constitutes the only line of code inside the body of <CODE>main()</CODE>;<BR>
(End of HTML Source Code)

Demonstration Follows:

Let's print 10 letter 'i' in a row, first using proportional font, then fixed-space:
iiiiiiiiii
iiiiiiiiii
Now let's print 10 letter 'W' in a row, first using proportional font, then fixed-space:
WWWWWWWWWW
WWWWWWWWWW
The RGB code which represents the color green is #00FF00.
The line printf("Hello World"); constitutes the only line of code inside the body of main();

(Demonstration Ends)

In the first set of 'i', the proportional font text was much shorter than the proportional 'W' in the next set. But the fixed-spaced font 'i' took up the same width as the fixed-spaced font 'W'. The <TT></TT> and <CODE></CODE> tags give us a more control over the spacing, and can be especially useful when forming pure-text tables or lists. It should be noted, that these are inline tags, that is, they may be inserted anywhere in a run of text, and do not by themselves cause any automatic end-of-line actions.

Notice that the fixed-width font provides a measure of distinction for the word "green" and the 'C' code fragment in the last two lines. (and we are, after all, individuals of great distinction, aren't we?)


-PREVIOUS- -CHAPTER- -INDEX- -NEXT-

Overseer: Monty Northrup ... maddog@io.com ... leave e-mail ...
...to maddog 'n' miracles homepage...