Web Publishing
Various & Sundry

Paul Carvel: Passion is a positive obsession. Obsession is a negative passion.

Aldous Huxley: Single-mindedness is all very well in cows or baboons; in an animal claiming to belong to the same species as Shakespeare it is simply disgraceful.

Samuel Johnson: Leisure & curiosity might soon make great advances in useful knowledge, were they not diverted by minute emulation & laborious trifles.

 

Albert Einstein: I know quite certainly that I myself have no special talent; curiosity, obsession & dogged endurance, combined with self-criticism, have brought me to my ideas.

Claude Monet: Color is my day-long obsession, joy & torment. To such an extent indeed that one day, finding myself at the deathbed of a woman who had been & still was very dear to me, I caught myself in the act of focusing on her temples & automatically analyzing the succession of appropriately graded colors which death was imposing on her motionless face.

 

I rebuke Carvel, Huxley, & Johnson. Passionate single-mindedness & a doggedly endurant obsession with minutiae & trifles are imperatives for the software professional.

I ratify Einstein & Monet. Crafting a work of science or art compels being consumed.

This document addresses these topics:

1)   Colors. This Web site's color scheme.

2)   Tables. Spreadsheet-formatted data & its presentation.

3)   Charts or graphs. The graphical representation of data, both my Excel-Produced Charts or Graphs & Charts Produced by Others.

4)   JavaScripts. The scripts used on this Web site.

5)   XHTML Document Skeletal Structure. The XHTML document template.

In all, 5 magnificent obsessions.

Colors

Is choosing a Web site's color scheme an art, or a science?

Colors as numbers

Digital colors are ruthlessly mathematical; yet, look what they render:

Click on any thumbnail to view Monet's masterworks in all their colorful splendor.

Enough of the non-mathematical, already.

Is there an underlying rigorous but simple mathematical nature to color as there is in Einstein's science (ie, E = MC2)? If there is, can it help simplify the design of a published Web's color scheme? Is it possible to capture the essence of Monet's mastery of color, digitize it, & paint a Web site with it as he painted a canvas?

Fortunately, there is: The RGB color scale. In it, colors are defined purely as numbers.

You hate numbers? How about pictures? Consider this:

As we shall see, the RGB color scale meshes with the Excel color palette; ie, Einstein & Monet merge.

The goal of this Intro section is to outline & detail various color schemes. These schemes include both the classics existing since Web-time immemorial plus schemes entirely of my own nomenclature.

As a prelude, the classic schemes are:

1)   Safe colors

2)   Named HTML colors

3)   Grayscale colors

Schemes of my own are:

1)   The “NN% Increment” color scheme

2)   The “ColorNNN” scheme

3)   The “Arithmetic Difference” color scheme

Understanding these 6 schemes helps achieve mastery of digital color.

RGB color

The RGB color scale has red, green, & blue components. Each component is an 8-bit byte. Since each bit can have 2 possible values of 0 or 1, an 8-bit byte has 256 possible values: 2**8 = 256. Since the 3 RGB 8-bit bytes total 24 bits, the RGB color scale has 16,777,216 possible values: 2**24 = 16,777,216.

24-bit color equals 16 million possible hues. If he were alive today, Monet would be orgasmic.

RGB numeric values are expressed in either decimal or hexadecimal. In decimal, values range from 0 to 255; in hex, from 00 to FF.

The RGB color scale has a category called ‘Safe’ Colors, numbering 216. These colors use a small set of decimal or hexadecimal values for their RGB components:

Decimal: 0, 51, 102, 153, 204, 255
Hex: 00, 33, 66, 99, CC, FF

6 values each for the 3 RGB numbers yields 216 possible values: 63 = 216.

Once upon a time when computer monitors were primitive, Web designers used only Safe Colors. However, now that 24-bit digital color is omnipresent, Safe Colors are a scheme of the past. Still, Safe Colors appeal for their simplicity.

The Safe Color scheme is tidy from one perspective: When the 6 decimal values are divided by 255, the maximum decimal value an RGB byte can have, a simple mathematical series results:

  0 / 255 =   0%
 51 / 255 =  20%
102 / 255 =  40%
153 / 255 =  60%
204 / 255 =  80%
255 / 255 = 100%

This series increments by 20% between values. Hence, let's call Safe Colors the 20% Increment color scheme. No one else uses this terminology, but we will. As we shall see, this terminology was begging to be contrived.

What about other increments? How about a 25% or 50% increment? Using the same simple math, let's calculate the values for a 25% increment:

 63.75 / 255 =  25%
127.50 / 255 =  50%
191.25 / 255 =  75%
255.00 / 255 = 100%

Not good: Bytes can't store decimal values.

Let's try again. Using 256 (the number of possible values) as a denominator rather than 255 (the maximum value), the following results:

 64 / 256 =  25%
128 / 256 =  50%
192 / 256 =  75%
256 / 256 = 100%

Not good #2: 255 is a byte's maximum value

So, how can we fix these problems with the 25% Increment color scheme? Simple: We fudge.

Consider this.

What is the midpoint number of this number series?

1, 2, 3

“2”, right? However, what is the midpoint number of this number series?

1, 2, 3, 4

“2.5”? Good try, decimalizer, but no. There is no midpoint number for this series, nor for any number series with an even number of values. Thus, there is no midpoint number for the 256-value RGB number series.

Enter fudging. Since RGB-color-scheme-time immemorial, 128 has been considered the midpoint number of the RGB number series. Hence, the 50% Increment scheme uses a small set of decimal or hexadecimal values for its RGB components:

Decimal: 0, 128, 255
Hex: 00, 80, FF

Similarly for the 25% Increment scheme:

Decimal: 0, 64, 128, 192, 255
Hex: 00, 40, 80, C0, FF

If these 2 number series were ruthlessly regular & scrupulously symmetric, “256” & “G0” would be the ending numbers, but they aren't, so they aren't.

Why this discussion on the 50% % 25% Increment color schemes? 2 reasons:

1)   Colors defined using the 50% Increment scheme are considered as standard as safe colors; &

2)   As we shall see, the NN% Increment scheme has great utility.

For the 25% Increment scheme, 5 values each for the 3 RGB numbers yields 125 possible values: 53 = 125.

For the 50% Increment scheme, 3 values each for the 3 RGB numbers yields 27 possible values: 33 = 27.

The 216 colors of the 20% Increment/Safe Colors palette:

The 125 colors of the 25% Increment palette:

The 27 colors of the 50% Increment palette:

The 20%, 25%, & 50% Increment schemes partially overlap; specifically, all 3 schemes share these 8 hex-defined RGB colors:

000000
0000FF 00FF00 FF0000
00FFFF FF00FF FFFF00
FFFFFF

In the discussion below, I assign these 8 colors to the 50% Increment scheme. Doing so makes sense.

Microsoft color palettes

Consider the standard Word & Excel color palettes:

All colors on these palettes use either (and only) the 20% or 50% Increment schemes. Let's determine the mix, & the number of colors defined by each scheme.

Note the rightmost column of the Word-Excel common palette. This column defines Grayscale colors discussed separately later.

For the 35 remaining colors in the common palette, below are colors by row & column number. If the color is one of the 140 Named HTML colors, its color name is also given.

(1,1) 50%, decimal (000,000.000), hex 000000, Black
(2,1) 20%, decimal (153,051,000), hex 993300
(3,1) 20%, decimal (051,051,000), hex 333300
(4,1) 20%, decimal (000,051,000), hex 003300
(5,1) 20%, decimal (000,051,102), hex 003366
(6,1) 50%, decimal (000,000,128), hex 000080, Navy
(7,1) 20%, decimal (051,051,153), hex 333399

(1,2) 50%, decimal (128,000,000), hex 800000, Maroon
(2,2) 20%, decimal (255,102,000), hex FF6600
(3,2) 50%, decimal (128,128,000), hex 808000, Olive
(4,2) 50%, decimal (000,128,000), hex 008000, Green
(5,2) 50%, decimal (000,128.128), hex 008080, Teal
(6,2) 50%, decimal (000,000,255), hex 0000FF, Blue
(7,2) 20%, decimal (102,102,153), hex 666699

(1,3) 50%, decimal (255,000,000), hex FF0000, Red
(2,3) 20%, decimal (255,153,000), hex FF9900
(3,3) 20%, decimal (153,204,000), hex 99CC00
(4,3) 20%, decimal (051,153,102), hex 339966
(5,3) 20%, decimal (051,204,204), hex 33CCCC
(6,3) 20%, decimal (051,102,255), hex 3366FF
(7.3) 50%, decimal (128,000,128), hex 800080, Purple

(1,4) 50%, decimal (255,000,255), hex FF00FF, Fuchsia, Magenta
(2,4) 20%, decimal (255,204,000), hex FFCC00
(3,4) 50%, decimal (255,255,000), hex FFFF00, Yellow
(4,4) 50%, decimal (000,255,000), hex 00FF00, Lime
(5,4) 50%, decimal (000,255,255), hex 00FFFF, Aqua, Cyan
(6,4) 20%, decimal (000,204,255), hex 00CCFF
(7,4) 20%, decimal (153,051,102), hex 993366

(1,5) 20%, decimal (255,153,204), hex FF99CC
(2,5) 20%, decimal (255,204,153), hex FFCC99
(3,5) 20%, decimal (255,255,153), hex FFFF99
(4,5) 20%, decimal (204,255,204), hex CCFFCC
(5,5) 20%, decimal (204,255,255), hex CCFFFF
(6,5) 20%, decimal (153,204,255), hex 99CCFF
(7,5) 20%, decimal (204,153,255), hex CC99FF

Quasi-interesting. Fuchsia & Magenta are the same color, as are Aqua & Cyan. Hence, there are but 138 unique Named HTML colors.

Interesting. While Red & Blue have their associated RGB component at the max value (hex FF0000 and 0000FF, respectively), not so with Green (hex 008000). The name for max green (hex 00FF00) is Lime. Ergo, shouldn't it be renamed the Red-Lime-Blue (ie, RLB) color scale?

Very interesting. Below are the 15 named colors:

(1,1) 50%, decimal (000,000.000), hex 000000, Black
(6,1) 50%, decimal (000,000,128), hex 000080, Navy

(1,2) 50%, decimal (128,000,000), hex 800000, Maroon
(3,2) 50%, decimal (128,128,000), hex 808000, Olive
(4,2) 50%, decimal (000,128,000), hex 008000, Green
(5,2) 50%, decimal (000,128.128), hex 008080, Teal
(6,2) 50%, decimal (000,000,255), hex 0000FF, Blue

(1,3) 50%, decimal (255,000,000), hex FF0000, Red
(7.3) 50%, decimal (128,000,128), hex 800080, Purple

(1,4) 50%, decimal (255,000,255), hex FF00FF, Fuchsia, Magenta
(3,4) 50%, decimal (255,255,000), hex FFFF00, Yellow
(4,4) 50%, decimal (000,255,000), hex 00FF00, Lime
(5,4) 50%, decimal (000,255,255), hex 00FFFF, Aqua, Cyan

All named colors are defined by the 50% Increment scheme. Yes, I made a somewhat arbitrary decision in assigning these colors to the 50% Increment scheme, even though they can also be assigned to the 20% &/or 25% Increment schemes:

(1,1) 20%/25%, decimal (000,000.000), hex 000000, Black
(6,1) 25%, decimal (000,000,128), hex 000080, Navy

(1,2) 25%, decimal (128,000,000), hex 800000, Maroon
(3,2) 25%, decimal (128,128,000), hex 808000, Olive
(4,2) 25%, decimal (000,128,000), hex 008000, Green
(5,2) 25%, decimal (000,128.128), hex 008080, Teal
(6,2) 20%/25%, decimal (000,000,255), hex 0000FF, Blue

(1,3) 20%/25%, decimal (255,000,000), hex FF0000, Red
(7.3) 25%, decimal (128,000,128), hex 800080, Purple

(1,4) 20%/25%, decimal (255,000,255), hex FF00FF, Fuchsia, Magenta
(3,4) 20%/25%, decimal (255,255,000), hex FFFF00, Yellow
(4,4) 20%/25%, decimal (000,255,000), hex 00FF00, Lime
(5,4) 20%/25%, decimal (000,255,255), hex 00FFFF, Aqua, Cyan

If you buy my decision, none of the named colors on the Word-Excel common palette are defined by the 20% or 25% Increment schemes. As a result, there seems to be no overlap between Safe Colors (ie, the 20% Increment scheme) & the Named HTML colors.

Very-plus interesting. This lack of overlap seemed inconsonant, so I created a Named HTML Colors table to reference all named colors versus all NN% Increment schemes. Here's what I found:

    15 colors are defined by the 50% Increment scheme.

    Only 1 color is defined by the 25% Increment scheme: Silver.

    No colors are defined by the 20% Increment or Safe Color scheme.

    122 colors use none of the 3 increment schemes.

Perhaps we should recheck the garlic, crucifixes, & wooden stakes hanging around our front door in case Safe Colors come a-knockin'. More later.

Anyway, what's the mix of the colors on the Word-Excel common palette? Of the 35 colors, 22 use the 20% Increment scheme, & 13 use the 50% Increment scheme. This (22:13) ratio is significantly different from the (216:27) ratio of total 20%-Increment-scheme colors to total 50%-Increment-scheme colors; ie, colors defined by the 50% Increment scheme just might be good colors to use.

To be punctilious, let's do the Excel extended color palette. 10 of these colors are duplicates of the colors on the common palette. Why this is so is a mystery. These duplicated colors are highlighted. The colors are:

(1,6) 20%, decimal (153,153,255), hex 9999FF
(2,6) 20%, decimal (153,051,102), hex 993366
(3,6) 20%, decimal (255,255,204), hex FFFFCC
(4,6) 20%, decimal (204,255,255), hex CCFFFF
(5,6) 20%, decimal (102,000,102), hex 660066
(6,6) 50%. decimal (255,128,128), hex FF8080
(7,6) 20%, decimal (000,102,204), hex 0066CC
(8,6) 20%, decimal (204,204,255), hex CCCCFF

(1,7) 50%, decimal (000,000,128), hex 000080, Navy
(2,7) 50%, decimal (255,000,255), hex FF00FF, Fuchsia, Magenta
(3,7) 50%, decimal (255,255,000), hex FFFF00, Yellow
(4,7) 50%, decimal (000,255,255), hex 00FFFF, Aqua, Cyan
(5,7) 50%, decimal (128,000,128), hex 800080, Purple
(6,7) 50%, decimal (128,000,000), hex 800000, Maroon
(7,7) 50%, decimal (000,128,128), hex 008080, Teal
(8,7) 50%, decimal (000,000,255), hex 0000FF, Blue

Of the 41 discrete colors on the extended Excel color palette, 27 are defined by the 20% scheme, & 14 by the 50% scheme.

Grayscale colors

The colors in the rightmost column on the Word-Excel common palette are Grayscale colors.

Grayscale is what its name indicates: Gray scaled from black to white:

Excepting the border, the above image has 256 columns. All 3 RGB values are 0 for the leftmost column, increment by 1 for each column, & end at 255 for the rightmost column.

An aside. Doesn't the right side of the above image seem to be thicker than the left side? It's not: The image is a constant 68 pixels high. This seeming effect is an optical illusion.

In grayscale, all 3 RGB values are identical. For example, pure black has an RGB value of decimal (000,000,000) or hex 000000 & is called “Gray 100%”, & pure white has an RGB value of decimal (255,255,255) or hex FFFFFF & is called “Gray 0%”. In between are the various shades expressed as percentages: eg, “Gray 75%” has an RGB value of (064,064,064), & “Gray 40%” has an RGB value of (153,153,153).

Hence, Grayscale colors are also specified using the NN% Increment scheme, just as the 20%, 25%, & 50% Increment color schemes are.

On the Word-Excel common palette, the 5 grayscale colors are:

(8.1) - Gray 80%, decimal (051,051,051), hex 333333
(8,2) - Gray 50%, decimal (128,128,128), hex 808080
(8,3) - Gray 40%, decimal (153,153,153), hex 999999
(8,4) - Gray 25%, decimal (192,192,192), hex C0C0C0
(8,5) - Gray 00%, decimal (255,255,255), hex FFFFFF

My Excel color palette

I use a customized Excel palette, redefining 6 colors. The following graphic highlights these changes:

For charts & graphs, I needed finer Grayscale colors than the ones the standard palette provided, & so replaced them. These finer colors are defined using my “ColorNNN” scheme where “NNN” is the decimal RGB value:

(8,2) - Gray208, decimal (208,208,208), hex D0D0D0
(8,3) - Gray224, decimal (224,224,224), hex E0E0E0
(8,4) - Gray240, decimal (240,240,240), hex F0F0F0

The NN% Increment scheme would be unsuitable for naming these colors:

Gray208 Gray81.25%
Gray224 Gray87.5%
Gray240 Gray93.75%

Thus, my ColorNNN scheme is nomenclature plus a little math.

The “NNN” can be any decimal number between 0 & 255, but in practice should be some even multiple of powers of 2. For example, the differences between the above 3 Grayscale colors is 16 = 24. And, the difference between Gray240 & pure white (decimal 255,255,255), the 5th of the Grayscale colors, is a fudged 15. Nice & tidy; nice & regular.

16 seems to work; ie, a difference of 32 is not fine enough, but a difference of 8 is too fine.

RGB colors can also be defined using this scheme:

- Red224, decimal (255,224,224), hex FFE0E0
- Green224, decimal (224,255,224), hex E0FFE0
- Blue224, decimal (224,224,255), hex E0E0FF

Note the difference with Grayscale: For Grayscale ColorNNN colors, all 3 RGB components have identical values, while for RGB ColorNNN colors, 1 RGB component has the max value of 255, with the values for the other 2 components varying but having identical values.

This scheme can be further extended. For example, 2 of the RGB components can assume max value, with the other single component varying.

Following are the 3 Named HTML colors with 2 components at max value:

- Aqua, decimal (000,255,255), hex 00FFFF
- Magenta, decimal (255,000,255), hex FF00FF
- Yellow, decimal (255,255,000), hex FFFF00

This yields:

- Aqua224, decimal (224,255,255), hex E0FFFF
- Magenta224, decimal (255,224,255), hex FFE0FF
- Yellow224, decimal (255,255,224), hex FFFFE0

The following graphic depicts expanded particulars on the ColorNNN scheme. Decimal numbers appear on the left, & hex on the right.

The 3 other colors I replaced on the Excel color palette are:

(3,2) - Blue204, decimal (204.204,255), hex CCCCFF
(4,2) - Blue153, decimal (153,153,255), hex 9999FF
(5,2) - Blue102, decimal (102,102,255), hex 6666FF

Although these 3 colors are defined using the 20% Increment scheme, they are also defined using my “Arithmetic Difference” scheme.

An example is in order. Consider the following 5-step transition of red to blue:

- Decimal (255,000,000), hex FF0000
- Decimal (204,000,051), hex CC0033
- Decimal (153,000,102), hex 990066
- Decimal (102,000,153), hex 660099
- Decimal (051,000,204), hex 3300CC
- Decimal (000,000,255), hex 0000FF

Note the arithmetic differences between the decimal values for the 3 RGB components; ie, they are all equal.

This scheme can transition any color to any other color using any number of steps. Normally, however, the from/to colors are standards ones, & the number of steps is small.

Below are sample transitions:

- Black to White
- Red to Green
- Red to Blue
- Green to Blue
- Aqua to Maroon
- Aqua to Yellow
- Maroon to Yellow

Ergo, the Arithmetic Difference scheme applies to the 3 blue colors I inserted on the Excel color palette; ie, the difference in the red & green components is decimal 51 or hex 33:

(3,2) - Blue204, decimal (204.204,255), hex CCCCFF
(4,2) - Blue153, decimal (153,153,255), hex 9999FF
(5,2) - Blue102, decimal (102,102,255), hex 6666FF

My NN% Increment, ColorNNN, & Arithmetic Difference color schemes are a combination of nomenclature plus simple arithmetic. However, using this terminology & math has helped me left-brain right-brained color.

Summary

Below are a few summary rules:

1)   Good choices for background colors exist among the 140 Named HTML colors.

Below are the bottom 10 rows of the 140-row Named HTML Colors table. Clicking any link displays a separate page with the selected color as background, & all other Named HTML colors as foreground. Thanks to W3Schools for this outstanding feature.

Note the irregular numeric values for these colors; eg. Wheat at decimal (245,222,179), hex F5DEB3. It appears these aesthetically pleasing colors -- of the type, say, that painters use -- give the finger to mathematical regularity. We might even conclude that their utility as background colors lies in their very irregularity.

Lighter colors seem a better choice than darker colors as background. The sorted-by-hex-value column of the Named HTML Colors table naturally groups these lighter colors mostly at the bottom, facilitating the choice of a good background color.

2)   Good choices for background colors are not Safe Colors.

This finding was unexpected & mostly counter-intuitive, but conclusive, nonetheless. When I think background colors now, I think irregularity.

3)   Good choices for foreground colors exist among the colors defined using the 20%, 25%, or 50% Increment schemes.

As we've seen, these colors are mathematically regular.

The total number of colors available using the NN% Increment schemes are:

    20% + 25% Increment

The 20% Increment scheme has 216 colors, the 25% scheme 125 colors. Since there are 8 colors duplicated between these 2 schemes, total colors available are:

216 + 125 - 8 = 333

    20% + 50% Increment

The 50% Increment scheme has 27 colors. Total colors available are:

216 + 27 - 8 = 235

Colors aplenty. Besides, using more than a few basic colors for a Web site's overall color scheme is discouraged by the gurus.

4)   Colors on the Word-Excel common palettes are good default foreground colors.

I found them to be so.

5)   Nomenclaturing the NN% Increment, ColorNNN, & Arithmetic Difference schemes was a good idea.

When I think color now, my corpus callosum carries heavy traffic between the right & left sides of my brain; ie, Monet & Einstein communicate.

My Web site colors

Background color

The primary background color is Ivory, one of the 140 Named HTML colors:

- Decimal (255,255,240), hex FFFFF0, Ivory

Ivory is the color used:

1)   Inside the 10 X 10 grid squares of the primary background image.

2)   As background for all other images; eg, the and icons, & the following graphic:

Navigation menu colors

Below is a sample navigation menu:

The background color for the navigation menu is Light Yellow, another Named HTML color:

- Decimal (255,255,224), hex FFFFE0, Light Yellow

Ivory is actually a lighter shade of yellow than Light Yellow. Compare their decimal values.

The navigation menu uses 3 addt'l colors:

- Decimal (255,204,000), hex FFCC00: Border color; color (4,2) from the Word-Excel palettes
- Decimal (128,000,000), hex 800000: Font color on mouse over; color (2,1) from the palettes
- Decimal (255,230,112), hex FFE670: Background color on mouse over

Note that the Background color on mouse over is a transition color derived using the Arithmetic Difference scheme:

- Decimal (255,255,224), hex FFFFE0: Background color for menus
- Decimal (255,230,112), hex FFE670: Background color on mouse over
- Decimal (255,204,000), hex FFCC00: Border color for menus

Background grid colors

Below is a truncated version of the background image:

The leftmost grid's color is the navigation menu's border color, & the rightmost grid's color is Ivory. The 3 intermediate values are based upon the Arithmetic Difference scheme:

- Decimal (255,204,000), hex FFCC00: Border color for menus
- Decimal (255,217,060), hex FFD93C
- Decimal (255,230,120), hex FFE678
- Decimal (255,243,180), hex FFF3B4
- Decimal (255,255,240), hex FFFFF0: Web site primary background color

The Grayscale color used for the grid lines in the background image is Gray240:

- Decimal (240,240,240), hex F0F0F0

HTML <textarea> tag colors

For Internet Explorer only, it is possible to Color your scrollbars. I did so. Following is an example.

Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA. Now is the time for all good men to come to the aid of their country & expunge with extreme prejudice the utopian Marxists whose sole aim is the destruction of the USA.

The colors synch with the Web site color scheme.

Other colors

These 2 colors:

- Decimal (255,204,000), hex FFCC00: Menu border color
- Decimal (128,000,000), hex 800000: Menu font color on mouse over, Maroon

are used for the , , navigation arrows.

Maroon is omnipresent, used for:

    The horizontal line separating the body from the footer

    The footer font color

    Visited hyperlinks

    The font color in the alternative p.hA and p.hB headers

    The right arrow & bullet images

Colors already referenced are used elsewhere:

- Decimal (102,102,255), hex 6666FF: “Blue font” bolding
- Decimal (255,255,153), hex FFFF99: “Yellow magic marker” bolding

XHTML headings are displayed in Grayscale:

- Decimal (000,000,000), hex 000000: Gray000 or Gray 100%, used for <h1>
- Decimal (064,064,064), hex 404040: Gray064 or Gray 75%, used for <h2>
- Decimal (128,128,128), hex 808080: Gray128 or Gray 50%, used for <h3>

Colors are a wrap.

Tables

Tables on this Web site display data. What higher honor can there be?

Tables and CSS

As discussed at length in the 2.0 Upgrade document, properties of tables are set using CSS much more so than using HTML table tags.

For example, the master Web.css style sheet sets default properties for the HTML <table> and <td> tags:

table {

margin-left: auto;
margin-right: auto;
table-layout: auto;
text-align: left;
font-size: 12px;}

td {

padding-left: 3px;
padding-right: 3px;
white-space: nowrap;}

Re table class:

    The auto value for the margin-left & margin-right properties centers the table on the screen.

    The auto value for the table-layout property makes the browser do the heavy work of generating the smallest-width table & smallest-width columns via use of the CSS automatic table layout facility. The resultant tables look more symmetric. The XHTML markup is shorter & simpler, too.

    The left value for the text-align property sets the default alignment for table elements. Elements can be centered or right aligned if this value is overridden.

    The 12px value for the font-size property sets the default table font-size. This value can also be overridden.

Re td class:

    The 3px value for the padding-left & padding-right properties sets uniform white space on the left & right of data elements within a table cell.

    The nowrap value for the white-space property guarantees that browsers will not gratuitously insert carriage returns or lines feeds within a table cell.

These 2 entries in the master style sheet help establish standards for tables.

Table standards

All tables on this site have a standard look & feel. Considerations are:

    The overall table is functionally transparent versus the background; ie, the background can shine through. Individual cells can & do set their own backgrounds.

    Table & cell borders are standard: Border line types, widths, colors, etc.

    Column header cells are standard: Background color, fonts sizes, weights, etc.

    Table data cells are standard: Background color, font sizes, weights, etc.

    Separator rows between major sections of tables are standard: Background color.

Table styles

A fixed set of styles is assigned to table cells. These styles are resident in the Tables.css style sheet. At last count, discrete styles numbered about 170. An example style is:

.ac_bnsnn {

text-align: center;
border-left: 1px solid #993366;
background-color: #FCFCFC;}

Re this style:

    “ac” denotes “align center”

    “bnsnn” denotes border top, left, bottom, & right. A value of “n” sets no border; a value of “s” sets a solid border.

    The cell is assigned a standard background color.

Class names (eg, ac_bnsnn) conform to a fixed schema or convention where specific formatting characteristics are separated by underscores, with the 1st letter identifying the formatting characteristic:

a

Alignment of text: Center, Right, or Zed for empty cell. Left is the default alignment.

b

Borders: Top, left, bottom, right:

s

Solid-line border

g

Solid-line border: Gray

d

Dashed-line border

i

Internal-to-tables solid-line border

n

No border

c

font Color, specified using Named HTML color names.

g

backGround color; eg, Grayscale color, Named HTML color, ColorNNN scheme color (eg, blue204), etc. If ‘z’, there is no background color; ie, the Web site background shines through.

s

font Size in pixels.

w

font Weight; eg, bold.

h

Header cell with these standard formatting characteristics:

Background color: blue224

Font size: 13px

Font weight: bold

Following are example class names:

    ar_bsndn_cblue_ggray240

Align right. Solid border on top, no border on left & right, & dashed border on bottom. Font color blue. Very light ColorNNN Grayscale background color.

    al_bssin_s16_wb

Align left. Solid border on top & left, internal-to-tables solid-line border on bottom, & no border on right. Font size 16px. Font weight bold.

    ac_bsssn_h

Align center. Solid border on top, left, & bottom, & no border on right. Apply the formatting characteristics associated with a table header cell.

    az_bnsnn

The table data cell contains no data, hence no alignment; Solid border on left.

    az_bnnnn_gz

No alignment, border, or background. Essentially, let the Web site background shine through.

Some considerations on borders.

Normally, the style for a specific table cell sets its top & left borders, but not its bottom & right borders; rather, cells below it & to its right do.

Think about it. Since the cell below a specific table cell also sets its top border, doing so sets the bottom border of the cell above it. Thus, the cell above it does not need to set its bottom border. Similar considerations apply for the right border.

There are 2 exceptions to this rule:

1)   Rightmost table cells always set their right border, & bottommost table cells always set their bottom border; ie, these borders are the table borders; &

2)   Table data cells always set their bottom border if this border is not null; ie, is a dashed or solid line. This line is a visual aid, intended to separate groups of 4 or 5 tables rows from each other in long tables. Without this line, it would be more difficult to scan table rows left-to-right. This convention turns out to be the most intuitive; ie, It says: This row is the last row of this group.

Below is a representative table that uses all major permutations of table cell class name conventions. Following the table is a graphic. Moving the mouse pointer over any table cell in the graphic displays the actual XHTML markup for that cell as a tooltip pop-up information box.

Move the mouse over any table cell below to view the XHTML markup for that cell.

Table colors

HTML tables use 3 primary colors:

- (204,204,255), hex CCCCFF - Light Blue: Background color for header cells
- (153,051,102), hex 993366 - Plum: Solid lines on outside borders
- (255,153,204), hex FF99CC - Rose: Dotted lines; solid lines on inside borders

These colors exist on the extended Excel color palette:

None of these colors (ie, Light Blue, Plum, & Rose) are Named HTML colors; ie, the color names are informal.

Other general background colors used are:

- (252,252,252), hex FCFCFC - Gray252: Background color for data
- (240,240,240), hex F0F0F0 - Gray240: Background color for separator rows

Other background colors used in a few tables are:

- Blue224
- Red224

Font colors are default black, but can be:

- Blue
- Red

Excel-Produced Charts or Graphs

Data rocks. Tabular data rocks tumescently. The graphical display of tabular data rocks orgasmically.

At last count, there were 92 Excel-produced charts on this Web site: 85 in the Economics section, & 7 in Politics.

Types of charts

Using Excel terminology, general chart types are bar, column, & line. Examples of specific chart types are:

1)   Bar

2)   Bar X 2

3)   Column

4)   Column X 2, 2 blue lines

5)   Column X 3, 3 blue lines

6)   Line - Single

7)   Line - 1 to 3 blue lines

8)   Line - Double

9)   Line - Triple X 3, Type I

10)   Line - Triple X 3, Type II

11)   Line - Quadruple

12)   Line - Sextuple +

If your internet connection can tolerate 1,112KB of image data, you can view all 92 Excel-produced charts resident on this Web site by clicking the Systems Documentation - Excel Charts: Charts URL.

Chart standards

As with tables, rigorous standards are applied to charts.

Chart colors

Following are sections of the Charts - Types + their Excel settings table from the Systems Documentation - Excel Charts: Intro document, applicable to the subject being discussed.

1)   Colors added to the Excel extended color palette

I use a customized Excel palette, redefining 6 colors:

The table excerpt below summarizes these changes:

The 3 shades-of-blue colors are used for the bars in the “Bar X 2” chart type, for the columns in the “Column X 2, 2 blue lines” & “Column X 3, 3 blue lines” chart types, & for the lines in the “Line - 1 to 3 blue lines” chart type.

The 3 Grayscale colors are used as background for the chart plot area & chart legend. The specific Grayscale color chosen depends upon its contrast with the color(s) used for the bars, columns, or lines; ie, the Grayscale color blends nicely.

2)   Basic chart area colors

The table excerpt below details these colors:

3)   Bar & column chart colors

The table excerpt below details these colors:

The bars in bar charts & the columns in column charts may be 1, 2, 3, or more pixels high/wide. If at least 3 pixels, the bars/columns use different colors for the border, & for the inner area. The specific colors used depends upon the specific bar or column chart type. Please see the Charts - Types + their Excel settings table from the Systems Documentation - Excel Charts: Intro document for specifics.

4)   Line chart colors

The table excerpt below details these colors:

Please note that the color names above are those used by Microsoft, & bear no resemblance to the color names for the Named HTML colors.

The color used for the 1st line is Periwinkle, the 2nd line Rose, the 3rd Light Yellow, etc.

Please note the following:

- Blue153, decimal (153,153,255), hex 9999FF
- Periwinkle, decimal (153,153,255), hex 9999FF

Yes, Blue153 & Periwinkle are the same color. Thus, since bar & column charts use Blue153 as the color for the 1st bar or column, & line charts use Periwinkle as the color for the 1st line, all charts use the identical same color for the 1st bar, column, or line. But, I name them differently for good reason; ie, when the other 2 colors are named Blue102 & Blue204, Blue153 somehow seems a better name than Periwinkle.

This document uses 83 individual 10 X 10 color swatches; eg, the 2 immediately above. Their file names are of the form “Color_Whatever”. A complete list of the Whatever's for colors with more than 1 name are:

- Aqua, Hex00FFFF
- Blue, Hex0000FF
- Blue153, Periwinkle, Hex9999FF
- Blue204, LightBlue, HexCCCCFF
- Gray000, Hex000000
- LightYellow, Yellow224
- Magenta, HexFF00FF
- MenuBorder, HexFFCC00
- MouseOver_Font, Hex800000
- Plum, Hex993366
- Red, HexFF0000
- Rose, HexFF99CC
- Yellow, HexFFFF00

To quote Shakespeare: “That which we call a HexFF99CC by any other word would smell as sweet.”

Still, the different names have value; ie, they sharpen the distinctions among the various manifestations of color.

5)   Other colors

The Charts - Types + their Excel settings table details these other colors.

Chart look-and-feel

Regardless of chart type (ie, bar, column, line), all charts look the same. For example, all chart titles have a single-pixel width Rose-colored border, a white background, use 14pt Verdana font, & are centered between the rightmost & leftmost plot area axes. Other such considerations apply. For detail on these standards, please peruse the Charts - Types + their Excel settings table.

These standards are applied as the chart is being created.

Chart distances

When I'm at a 1-item Buffet for Anorexics, I pick wildly & randomly; otherwise, I prefer regularity.

As in the pixel distances within an Excel chart.

After I produce an Excel chart, I spend the next 30 minutes or hour adjusting the pixel distances within the chart. The following section of the Charts - Types + their Excel settings summarizes these pixel-distance standards.

How do I set these pixel distances? Via this iterative process:

1)   Copy the Excel chart to the clipboard, & paste the chart into Paint.

2)   Determine the pixel distances either within or between chart elements.

3)   Go back into Excel &, using the mouse, adjust those pixel distances that do not conform to the pixel-distance standards.

Yes, this iterative process is tedious & grinding, but charts -- particularly versus each other -- look appreciably more professional.

Let's discuss an example, the following Excel chart:

After applying all other standards to the chart, I copy it to the clipboard & paste it into Paint.

In Paint, I note that the grid size is 10 X 7. I then determine the pixel distances between the plot area borders. For example, they might be 413 pixels for the horizontal distance, & 263 pixels for the vertical distance

I then do some simple math:

413 / 10 = 41.3
263 / 7 = 37.6

Since the horizontal & vertical gridlines create a rectangular grid, it appears that the closest, most regular square grid size would be 40 X 40. With this grid size, the pixel distances between the rightmost/leftmost & topmost/bottommost plot area borders would be:

400 / 10 = 40
280 / 7 = 40

I then go back into Excel & try to move the rightmost plot area border 13 pixels (ie, 413 - 400) to the left, & the bottommost plot area border 17 pixels (ie, 280 - 263) downwards.

Then, iterate: Copy from Excel; paste into Paint; in Paint, determine the pixel distances; in Excel, adjust these distances if necessary. This iterative process continues until the gridline distances are exact to the pixel.

Is this process tedious & grinding? Fuck, yes.

Next, this iterative process is applied to the chart title until the title border is centered between the leftmost & rightmost plot area borders, & is 8 pixels above the topmost border.

The legend then has an iterative process applied to it. Its right border is moved right or left until the distance between the left border & the 1st pixel of the colored lines is 8 pixels, & the distances between legend entries are 20 pixels. Since Excel can't seem to cut its apron strings with the legend, one of the distances between legend entries is always either 19 or 21 pixels, but never 20. Sigh.

Next, the same iterative process as applied to the title is applied to the legend until the legend border is centered between the topmost & bottommost plot area borders, & is 8 pixels to the right of the rightmost border.

Finally, the last step. In Paint, the chart area border is drawn. The distance between this border & the next-innermost pixel on the top, left, bottom, & right of the chart is set at 8 pixels.

Nominally, the adjustments made to the title & legend could be made in Paint more easily & quickly, & with greater precision. However, if the data set used for the chart is revised, these same changes would need be made in Paint again, but not so if the changes are permanently made to the Excel chart itself. For example, I changed the data sets for a number of charts appearing in this document. The only manual manipulation I needed to do was to redraw the chart area border, an easy, non-iterative process that took less than 5 minutes.

Why this obsession with the details of charts -- and with tables, too, for that matter? Simple. When the human eye sees symmetry & nicely contrasted & balanced colors, the eye tells the brain: “Hey! This thing is wonderful! It's gotta be right!” The brain then has a hard time denying the gravitas, legitimacy, & credibility of the tabular or graphical data.

Sometimes, presentation is 99% of substance. Machiavelli rocks, too.

Charts Produced by Others

There are about 40 other charts resident on this Web site produced by other entities or organizations. These charts exist as separate image files just as Excel-produced charts do.

However, these charts sometimes suck. Below are 2 example charts we can call ‘before’ images.

The Heritage Foundation is a top-tier conservative think tank. Its annual Index of Economic Freedom makes a strong, compelling case that citizens are far better off in countries where their gov't taxes less. Their tabular data is impressive, both in content & presentation.

However, not so with charts. Below is their primary chart from their current 2005 Index:

Decent-looking chart. However, if you examine the chart at the pixel level, you'll notice that the edges of all text are blurred, & that the characters used for the data points are not identical-to-the-pixel-level & are similarly blurred. Contrast this chart with my version:

Much better, isn't it? The text appears sharper, & color highlights the 5 different data sets.

How did I convert the chart? Basically, by hand-drawing nearly every non-null pixel.

Was this process tedious & grinding? Much more so than with Excel-produced charts.

Was this process worthwhile? You tell me: Which chart sells better?

The 2nd example. The US Department of Labor published (Warning: PDF file) A Chartbook of International Labor Comparisons. Below is one sample chart:

Again, decent looking. Again, even at an Adobe Acrobat reader magnification of 100%, blurred edges exist. Contrast this chart with my version:

Again, the conversion process was tedious & grinding, & involved hand-pixelating much of the chart. Since I used 13 of the charts from the US DOL document, the conversion process was hyper-so.

But, again, which chart sells better?

JavaScripts

A Web site without JavaScripts is like a sex orgy without protuberances & orifices.

Developed by others

I use 4 freely available JavaScripts developed by others. These scripts & their kind developers are:

1)   Menu Navigation

    Developed by Ger Versluis, available on the Dynamic Drive Web site as HV Menu.

    Separate scripts for code & data. Only the data script needs to be customized.

    The code & data scripts are located at the end of the XHTML document, just before the closing </body> tag. A JavaScript function call needs to be inserted in the XHTML document before the 2 scripts themselves are inserted.

    The 2 scripts are external; no in-line JavaScript is required.

    Code script name: menu_com.js.
Data script name: menu_whatever_var.js.

    Included in all documents.

2)   Back Link associated with an image

    Developed by Idocs.

    2 separate code scripts. Neither script needs to be customized.

    The 1st code script is located at the beginning of the XHTML document, just after the opening <body> tag. The 2nd code script is located where the associated image (eg, ) is intended to be displayed; ie, this script displays the associated image.

    The 2 scripts are external; no in-line JavaScript is required.

    Code script names: backlink.js, backlink_do.js.

    Included in tens of documents.

3)   Tooltip information pop-up boxes associated with a mapped image

    Developed by Walter Zorn.

    Separate scripts for code & data. Since the code script contains configurable variables, it is normally customized. Also, I customized the code script code in 1 instance to fashion my own custom format for the pop-up box. The data script is 100% user written & defines the individual mapped areas of the image & their associated pop-up messages.

    The code script is located at the end of the XHTML document, just before the closing </body> tag. The data script is located where the associated image is intended to be displayed; ie, this script displays the associated image.

    The 2 scripts are external; no in-line JavaScript is required.

    Code script name: tooltip_wz_whatever.js.
Data script name: tooltip_gm_whatever.js.

    Included in 2 documents.

4)   Change Font Size OnClick; ie, Increase, Decrease, or Restore font size

    Developed by Dynamic Web Coding.

    2 separate external code scripts, & 2 separate in-line code scripts. Neither external code script needs to be customized. The 1st in-line code script is standard, while the 2nd needs to be customized.

    The external code scripts are located at the beginning of the XHTML document, just before the closing </head> tag. The 1st in-line code script is located where the “Increase, Decrease, or Restore” message is to appear, & the 2nd is located at the end of the document, just before the closing </body> tag.

    The 1st in-line code script is standard boilerplate. The 2nd in-line code script defines the XHTML tag or tags to which font size changing is to be applied, & the font's default, mimimum, & maximum sizes.

    External code script names: dw_cookies.js and dw_sizerdx.js.

    Included in 1 document.

Since the Menu Navigation JavaScript is omnipresent, it will be discussed further. Not so for the 3 other scripts: The Back Link script is trivial, while the Tooltip & Font Size Changer scripts are used in only 2 & 1 documents, respectively.

However, all is not lost. There are 3 demo programs for the Tooltip & Font Size Changer scripts. All have a minimum of supporting verbiage. Additionally, the XHTML markup for the entire document is included & displayed after the demo code. The JavaScript code is highlighted. All 3 of these demo programs use the Navigation Menu & Back Link scripts. Thus, if you desire, you can learn more about these 3 scripts by persuing these demo programs.

The demo programs are:

1)   Tooltip: Tooltip Demo: HTML Table and Tooltip Demo: Map.

2)   Font size Changer: Change Table Font Size.

As before, the Navigation Menu code script does not need to be customized; it can be used as is. However, every XHTML document has its own unique, customized data script. Explaining why requires a brief explanation of the data script itself. For a complete explanation, please see the author's comments.

The data script has 2 parts: Variables & what the author calls the menu tree:

    Variable values can be changed; ie, customized. I so have. For detail, please see the previous Navigation menu colors section.

    The menu tree defines the XHTML documents that comprise a specific menu. Each menu tree item has a number of variables or parameters that define various characteristics of the menu tree item.

Now I can explain why each XHTML document requires a unique data script.

As an example, the menu tree entry for this program in the data scripts of all other XHTML documents is:

Menu6=new Array("Various & Sundry","WebPub_VariousSundry.htm","",2,15,160);

A brief explanation of the parameters:

    “Various & Sundry” - Menu item description

    “WebPub_VariousSundry.htm” - XHTML document associated with the menu item

    “” - Background image, in this case null

    2 - Number of menu sub items

    15 - The height of the menu item in pixels

    160 - The width of the menu item in pixels

In this program, this menu tree entry is:

Menu6=new Array("&nbsp;<b>Various & Sundry</b>","","",2,15,160);

Note that the document name is bolded, & that the XHTML document name is null. Why is the document name null? Well, if you're already in the document, there's no need to link to it.

That's it. That's all. I bold the menu item description to inform the user where they are in the menu tree.

Other considerations re the menu are:

1)   The menu on the Home Page is displayed vertically:

On all other pages, it displays horizontally.

2)   There are separate menus (ie, sub-menus) for Web Publishing, Writing, Economics, & Politics, so indicated on the Home Page menu via the right triangle.

3)   The Home Page menu tree includes the menu trees of its 4 sub-menus. Thus, you can link to any XHTML document on this site directly from the Home Page. This feature alone is worth the price of admission.

4)   Long documents (eg, this one) are bookmarked. These bookmarks are themselves menu item entries, appearing on the menu in the bookmarks sub-menu.

5)   If one document links to another document on my Web site, the purpose of this linked-to document being to amplify or example some specific technical point (eg, the Change Table Font Size document referenced above), these linked-to documents are themselves menu item entries, appearing on the menu in the auxiliary documents sub-menu.

For my purposes, this menu works; ie, it resonates with my Polack peasant soul.

Developed by myself

There is but one, what I call the Backdown script used in Web Publishing's Directory Structure document. The script is short (ie, fewer than 20 lines long), but has great utility.

In the Directory Structure document, I display a graphical image that details all the directories I created for Web Publishing. As I explain the directory structure, I refer the user back to this image multiple times; ie, a picture is worth a thousand words. What the script does is simple: If the user decides to ogle the image, clicking the button that displays both before & after the image returns the user to the specific document location among many from which the user linked to that image.

In the document, there are actually 2 images: The aforesaid physical directory structure, & a set of Navigation Menu images. This facility works for both.

This facility can be termed a forwards reference; ie, the return-to location is downwards in the document. I also use the script to make backwards references. For example, I might say something in the beginning of the document to the effect that this topic will be further explained in the following Whatever section. If the user so desires, s/he can link to that section & peruse it. In this Whatever section is always a URL that will link the user back to the specific location from which the user linked to this section.

I've never seen this facility used anywhere, but it sure simplified the writing of the document. Sometimes, technical topics suffer from the chicken-and-egg syndrome; ie, Topic A can't be explained unless Topic B is explained first, but Topic B can't be explained unless Topic A is explained first. Enabling these forward & backward references resolved this major problem that I've wrestled with countless times before; ie, I'll use this facility again when necessary.

The script is no big deal. It's JavaScript 101. As an alternative, the user could click the browser back arrow instead of clicking the button. But, it sure is utile.

The script requires specifically named bookmarks to be assigned to the from & to locations. Examples are:

    I1T2 & I1F2

    I2F10 & I2T10

    Note3T & Note3F

In fact, the assignment of these bookmarks turned out to be a more vexing task that writing the JavaScript. No matter. The script works. As a result, I believe the Directory Structure document is more quickly graspable.

XHTML Document Skeletal Structure

All XHTML documents on this site have an identical skeletal structure. This skeletal structure is equivalent to an XHTML document template. Following is this template.

Please note that, in this template below, long lines of XHTML markup have been split into multiple lines to guarantee that each individual line will fit when displayed on a standard 800 X 600 size monitor screen. For example, lines 54-64 are actually 5 lines in a normal XHTML document.

Note also that I like white space between tags.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5
6 <head>
7

These are standard, & are included as is.

8 <title>lfdf: (Section) - (Document)</title>
9

Titles are important: They display on the browser window's title bar, & are the default descriptions saved when a URL is saved as a Favorites or Bookmark.

As a result, I always include the Section (eg, Web Publishing, Economics) & Document (eg, Various & Sundry, XHTML Document Template) descriptions in titles.

I'm amazed how little attention Web developers pay to titles. If there is no <title> in an HTML/XHTML document, the default Favorites or Bookmark description becomes the URL. Even when a page has a title, I've found most titles to be poorly descriptive of the Web page. Not so here.

10 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
11 <meta http-equiv="Content-Style-Type" content="text/css" />
12

As is.

13 <link rel="stylesheet" type="text/css" href="css/Misc.css" />
14 <link rel="stylesheet" type="text/css" href="css/Tables.css" />
15 <link rel="stylesheet" type="text/css" href="css/Web.css" />
16

Every XHTML document includes Web.css. If necessary, Misc.css & Tables.css are included.

17 </head>
18
19 <body class="Body">
20

As is.

21 <script type="text/javascript" src="js/backlink.js"></script>
22

Included if the Back Link script is used in the document.

23 <div class="Text">
24
25 <br />
26

As is.

27 <p class="Title">(Section)<br />
28 (Document)</p>
29

The exact same corresponding verbiage from the <title> appears here.

30 <p class="Normal"></p>
31

As is. The entire body of the XHTML document replaces line 30.

32 </div><div class="