Web Publishing
Word-to-Web Styles

Word processors simplify the process of creating & updating professional looking documents. Effortlessly, they facilitate basic document formatting: Titles, headings, font faces & sizes, indents & hanging indents, bulleted & numbered lists, tabs/vertical alignments, etc.

Publishing a Microsoft Word document on the Web & duplicating its look-and-feel is doable if:

1) You understand basic HTML, & can use an HTML text editor; &

2) You use the Word & Web styles documented herein.

This tutorial explains in depth what Word & Web styles or Cascading Style Sheets (CSS) are. It documents the 30 Word & Web styles I use for Web Publishing.

Word can save a document in HTML format. However, the HTML Word produces has fatal flaws. This tutorial explains in depth how to edit the Word-produced HTML via the use of an HTML text editor & eliminate these flaws. The resultant HTML document will not only look as good as the original Word document looked (ie, be professional in appearance), but it will also conform to taut & rigorous Web standards & Best Practices (ie, be professional in substance).

All formatting characteristics of Word styles can be replicated in Web styles -- that is, if you use my scheme. In this sense, Word styles are Web styles. That's the basic deal.

If you're unfamiliar with Word styles, they're briefly explained in the Word-to-Web Styles section of the Web Publishing Introduction document.

Cascading Style Sheets will be explained at length in this document. If you want more, Tizag's CSS Tutorial, Page Resource's Introduction to Cascading Style Sheets tutorial, HTMLSource's Stylesheets tutorial, W3Schools' CSS Tutorial, Westciv's Complete CSS Guide, Brett Merkey's Cascading Style Cheatsheet, the Web Design Group's CSS Properties, & Blooberry's CSS Property Index are good references.

Introduction

Although all version 1.0 Word & Web styles exist in 2.0, this latest version incorporates extensive changes & additions:

1) Changes

a) As discussed at length in the 2.0 Upgrade document, 2.0 uses current software technology. All Cascading Style Sheets & XHTML documents conform to specifications developed by the World Wide Web Consortium (W3C), specifically CSS2 & XHTML 1.0 Strict. Using W3C validation tools, all style sheets & documents have the W3C imprimatur. For more info, please see the 2.0 Upgrade document.

b) 1.0's Web styles (ie, Cascading Style Sheets) were designed to mimic Word styles. However, the resulting Web styles were little more than clones of Word Styles, As such, they did not exploit the full power of Cascading Style Sheets. As one example, Web styles now integrate the CSS Inheritance property. There are dozens of other similar changes. For more info, please see the Web Styles section below.

To gain a sense of how extensive the changes were, peruse the master Cascading Style Sheet for 1.0 and 2.0 by clicking the preceding links.

c) The process of editing the Word-produced HTML document has been simplified & rigorized. It is more brainless, & thus much less error-prone. For more info, please see the Editing the Word-Produced HTML Document section below.

2) Additions

a) New Word styles have been added. For detail, please see the Word Styles - Detail section below.

b) New Web-exclusive styles have been added. For detail, please see the Web Styles - Detail section below.

Thus, the revamp of 1.0 is major. If 1.0 was unquarried marble besotted with reeking, decaying vegetable matter & odious expelled animal offal, 2.0 is Michelangelo's David.

Terminology and Conventions

When used as nouns, ‘HTML’ and ‘XHTML’ have discrete meanings. When used as adjectives, they may or may not be synonyms:

Referencing a document or Web page: A Web page is either an HTML document or an XHTML document, but not both.

Referencing a Markup Language: HTML and XHTML are distinct markup languages.

Referencing everything else: In all other cases, ‘HTML’ & ‘XHTML’ can be considered synonyms, but ‘HTML’ is my adjective of choice: HTML tags, HTML elements, HTML tables, HTML named colors, HTML format, yadda.

Purists may object, but I use ‘source’ and ‘code’ as synonyms for ‘markup’; eg, “Following is example XHTML source”. I also say, “When you code HTML…”, even though only programming languages can be coded & neither HTML nor XHTML are programming languages.

In all of reality, the only thing that's pure is a baby's first smile.

A font-formatting note. HTML or XHTML markup is displayed using the Courier New font. Windows file names, Word menu item names, Word or Web style names, Cascading Style Sheets property names, attributes, or values, & other items of technical argot are displayed using the Georgia font.

Alternative Web Publishing Schemes

This document details 1 of 3 Web Publishing schemes. However, there are others.

Bare bones Tidy scheme

Publishing a Word-created document on the Web can be a simple task:

1) Create the document using Word.

2) Save the Word document in HTML format.

3) Use the HTML Tidy utility to clean up the Word-generated HTML.

4) Using an HTML editor, tidy the tidied HTML source to improve upon Tidy's basic formatting.

Granted, the display of the tidied Tidied HTML leaves a great deal to be desired, but this scheme has a decided advantage: It takes only minutes to do. As an example, for this 75-page Word document, steps #2 thru #4 took about 5 minutes. Tidying the Tidied HTML source involved adding 2 lines, modifying 3 lines, & doing 1 global search-&-replace. Amazing.

For more detail, please see the Bare Bones Tidy Scheme document.

Our bones scheme

This is the scheme this document details.

Lance Armstrong's bones scheme

As the 2.0 Upgrade document details, I've upgraded my Web site to conform to the XHTML 1.0 strict recommendation.

This upgrade is optional. Why upgrade, then? There are manifold good reasons, but you should not consider this upgrade until you understand fully what XHTML is &, more importantly, what it demands. Please see the 2.0 Upgrade document for details.

For an existing HTML document, the upgrade process to XHTML is simple & straightforward. Briefly, I do the following:

1) Using both the Tidy & HTML codesweepers in Macromedia's HomeSite 5.5 editor, convert the HTML into XHTML 1.0 Strict; &

2) Manually edit the resultant XHTML source to re-add the blank lines & white space that the codesweepers removed.

For further info on step #1, please see the Macromedia HomeSite editor section of the 2.0 Upgrade document.

Step #2 is unnecessary. However, I'm OCD about the internal formatting of XHTML documents, & like my blanks lines, white space, & text indents to be just so.

Let me stress an important point: The process of upgrading to XHTML 1.0 Strict occurs only after all procedures this document details have been completed; ie, the upgrade process doesn't supplant this document. Thus, you can promptly forget about all references to the 2.0 Upgrade document.

Which scheme should you use?

You have the hammer.

I Lied

If you dutifully do everything the Detailed Edits section tells you to do, the result will be XHTML, not HTML. Thus, I lied. I really have the hammer, or at least a 2nd one; ie, perhaps a sledge compared to your ball peen.

In actuality, XHTML markup differs little from HTML markup. If you're willing to use an HTML text editor to manually convert the morphidite Word-generated HTML into serviceable HTML, then it makes no sense not to expend the few minutes of extra effort it takes to produce XHTML.

Have I convinced you that it might be a good idea to read the very long 2.0 Upgrade document? No? Well, I understand your reluctance. I promise I won't mention it again. Thus, you can promptly forget about all references to the 2.0 Upgrade document.

Word Styles

There are 30 Word styles detailed in this document. Style categories & the number of styles in each are:

1) Normal (1)

The default Word style. Consider it the style used for a typical Word paragraph

2) Indented text (5)

Text indented from the left margin; eg, this specific paragraph.

3) Bulleted lists (5)

Text preceded by a ‘bullet’ character; eg:

Note the bullet character to the left of this sentence. Note also that this paragraph is displayed on multiple screen lines, and that the text for each line is aligned in the same vertical column.

Bulleted lists are an example of “hanging indents”. In hanging indents, the 1st line is indented to the left of all other lines. The bullet character occupies the indented position.

Note that the bullet character itself can be indented relative to the left margin.

4) Numbered lists (2)

For example, this numbered list.

Numbered lists are also examples of hanging indents, with the number occupying the indented position.

5) Hanging indented text (4)

Hanging indent where text occupies the indented position.

6) Headings & Title (4)

The 3 headings are left justified. The title is centered.

7) Hyperlinks (2)

Visited & unvisited hyperlinks.

8) Other fonts (2)

The default font is Verdana. The Courier New and Georgia fonts are alternatives.

9) Tabbed (1)

Line of text with tab stops every 0.3”.

10) Internal to Word only (4)

Styles internal to Word only that have no Web equivalents.

In all, normal Word stuff.

Every Word document uses/has 2 ineradicable styles:

Default Paragraph Font
Normal

The designates the style as character-level, while the indicates a paragraph-level style.

In Word parlance, characters are a string of letters, numbers, spaces, punctuation marks, etc. Paragraphs are a string of characters terminated by the Enter key (also called the Paragraph Mark). In Word, pressing the Enter key ends one paragraph & begins another.

Default Paragraph Font is not really a style. Its formatting characteristics cannot be modified. It exists in every list of Word styles -- Aloof, unchangeable, mocking us. However, all formatting characteristics of the Normal style can be modified, as can the formatting characteristics of any other style.

Let's detail the formatting characteristics of the Normal style in a document using only the 2 minimum styles. In the Word drop-down menu, selecting Format Style displays the following dialog box depicting these 2 basic styles:

Note that the Delete button is grayed, indicating that the Normal style cannot be deleted.

The Description section of the dialog box summarizes the customized formatting characteristics of the Normal style that I use:

Font: Verdana, 10pt, English (U.S.), Flush Left, Line spacing single, Widow/Orphan control, Keep lines together

The formatting characteristics of the Normal style are shared by every other Word paragraph-level style. Thus, unless customized to be something else, all paragraph-level styles would use 10pt Verdana font.

Clicking the Modify ... button in the above Style dialog box, & clicking the Format button in the ensuing Modify Style dialog box displays the following:

7 formatting characteristics can be customized:

Font, Paragraph, Tabs, Borders and Shading, Language, Frame, and Bullets and Numbering

Let's associate the elements of the Normal style's formatting characteristics with their respective dialog boxes, in the order that the Description section displays them.

1) Font: Verdana, 10pt Font dialog box

2) English (U.S.) Language dialog box

3) Flush left, Line spacing single, Widow/Orphan control, Keep lines together Paragraph dialog box

The Paragraph dialog box has 2 tabs: Indents and Spacing, and Line and Page Breaks.

The Indents and Spacing dialog box specifies the “Flush left” (ie, Alignment: Left) & “Line spacing single”.

The Line and Page Breaks dialog box specifies the “Widow/Orphan control” & “Keep lines together”.

New styles can be added to a document. These styles are automatically saved when the document itself is saved.

These styles can also be saved to what Word calls a document template. This template can then be used by other documents. Thus, a group of documents can share a common template, & a common set of styles.

The Word-to-Web styles detailed herein number 30. Their document template is named Web.dot.

None of the Web.dot styles use these 3 formatting characteristics:

Borders and Shading, Language, and Frame

That leaves 4:

Font, Paragraph, Tabs, and Bullets and Numbering

Web.dot does not use all the dialog box tabs for these remaining formatting characteristics:

The Font dialog box has 3 tabs: Font, Character Spacing, and Text effects. Only Font is used.

The Paragraph dialog box has 2 tabs: Indents and Spacing, and Line and Page Breaks. Only Indents and Spacing is used. The Line and Page Breaks dialog box is not Web-pertinent.

The Bullets and Numbering dialog box has 3 tabs: Bulleted, Numbered, and Outline Numbered. Only Bulleted and Numbered are used.

In Web.dot, therefore, what remains is a small subset of possible style formatting characteristics.

Now for the bad news. Although Tabs are customized for a number of Word styles, tabs themselves do not translate well to the Web. When Word converts a document into HTML format, it translates the tabs into spaces. However, if the translation yields a significant number of spaces (eg, 10 or so), vertical misalignments occur. Proper vertical alignment often requires hand-coded HTML. 4 techniques seem to work:

1) Adding or deleting spaces until the alignment looks OK.

2) Using a fixed-width font like Courier New.

3) Using absolute positioning; ie, positioning text relative to the left margin; eg, 0.9” from the left margin.

4) Creating HTML tables.

These techniques are detailed below in the section on Styles that simulate Word tabs.

To complete this section, let's display the dialog boxes associated with the Tabs and Bullets and Numbering formatting characteristics. Dialog boxes for Font and Paragraph are displayed above.

1) Tabs

2) Bullets and Numbering

Indents & Horizontal Positioning

Indents or horizontal positions in Web.dot are set every 0.3 inches: 0.3”, 0.6”, 0.9”, 1.2”, etc.

These indents are not Word defaults. Following in a dialog box from the Word Styles section above where indents have not been customized:

Web.dot uses different indents: The bullet indent position is 0.3”, & the text indent position is 0.6”:

This simple scheme & mathematical progression makes much sense.

Web Styles

Since they are conceptually related, Word styles convert easily & naturally to Web styles; ie, for every Word style, there is 1 & only 1 Web style. From an architectural standpoint, however, Word & Web styles differ.

Word & CSS levels

Word has only 2 style types: Paragraph-level & character-level. Thus, a Word document can be considered to have 2 levels: Paragraphs & characters.

An HTML document has different levels. As defined by the W3C in their Global Structure of an HTML document article, an HTML document has a hierarchy:

1) The <html> element

This element demarks the highest level containing all other elements in the hierarchy. At a lower level are the <head> and <body> elements.

2) The <head> element

This element contains none of the 30 Word styles.

3) The <body> element

All 30 Word styles are applied within the body of an HTML document.

The <body> element also has a hierarchy:

1) The <div> grouping element

What constitutes a <div> is strictly user-defined. However, as will be detailed below, <div>'s are very useful elements.

2) Block-level elements

Approximately, Word paragraph-level styles correspond to HTML block-level elements.

3) Inline elements

Approximately, Word character-level styles correspond to HTML inline elements.

Based upon the rigorous HTML 4.01 specification & XHTML 1.0 recommendation, this hierarchy is strict: If a block-level element is contained within a <div> grouping element, it must be wholly contained within that <div> & not span multiple <div>'s, & an inline element must be wholly contained within a block-level element & not span multiple blocks.

Insofar as the W3C article is concerned, there are 2 elements defined separately from all others:

1) HTML headings: <h1> thru <h6>

In Word, headings are paragraph-level styles. In an HTML document, headings are considered block-level elements. Thus, the same correspondence detailed above between Word paragraph-level styles & HTML block-level elements holds true here.

2) Hyperlinks: <a href="...">

In Word, hyperlinks are character-level styles. In an HTML document, hyperlinks are considered inline elements. As before, the same correspondence holds true.

There are 2 final elements in an HTML document:

1) Classes

Classes are defined within & by Cascading Style Sheets, & are used within the HTML document.

For our purposes, classes correspond to Word styles. For example, the Word Normal paragraph-level style corresponds to the CSS Normal class.

Each separate class defines a specific set of CSS properties. These CSS properties correspond to the formatting characteristics that a Word style defines. Thus, CSS properties are Word style formatting characteristics. That's the basic deal.

Classes can be assigned to other HTML elements: The <body> or <div> elements, & block or inline elements. As such, CSS classes rock & rule.

2) The <span> grouping element

In Word, a character-level style can conceivably be applied to the entire document. Thus, a character-level style could span multiple paragraphs.

<span> can be considered an HTML inline element. Thus, again based upon rigorous HTML & XHTML, the <span> grouping element should be wholly contained within a block-level element such as a paragraph.

An example is in order. Following is a Skeletal XHTML page that includes the elements discussed above. This page is representative of the Word & Web styles outlined & detailed in this document.

<html>
<head>
<title>...Title...</title>
</head>
<body class="Body">
<div class="Text">
<h1>...Heading 1...</h1>
<p class="Normal">...<span class="Serif">Serif</span>...</p>
</div>
<div class="Images">
...
</div>
</body>
</html>

Following are general comments:

The HTML <body> tag is assigned the Body class. The CSS properties defined in the Body class are shared by all lower-level elements.

Each HTML <div> tag is assigned a separate class; eg, Text and Images. Each class has its own unique set of CSS properties. The CSS properties defined for each <div> are shared by all lower-level elements within the <div>.

The HTML <p> tag is assigned the Normal class. This class corresponds to the Word Normal style. The Normal class uses the same font as the Word Normal style: Verdana, a sans-serif font.

The HTML <span> tag assigns the Serif class. In this particular case, the Serif class overrides the san-serif Verdana font set in the Body class.

The comments above introduce the concept of CSS inheritance. Let's do it more formally.

Using CSS terminology, each lower-level element & its associated class ‘inherits’ the formatting characteristics of all higher-level elements & their associated classes.

For example, note the following excerpt from the above bulleted item:

… the san-serif Verdana font set in the Body class.

As will be detailed later, the Verdana font is set in the high level Body class, but not in the lower level Text and Normal classes. Note the following excerpt from the above Skeletal XHTML page:

<body class="Body">
<div class="Text">
<p class="Normal">...<span class="Serif">Serif</span>...</p>

Specifically, the Text and Normal classes ‘inherit’ the Verdana font from the Body class; ie, these classes do not need to redefine it.

For more info, please see the W3C Assigning property values, Cascading, and Inheritance article.

CSS box model

The W3C's CSS Box Model article discusses the intricacies of said Model, but let's do just the basics.

All HTML block-level elements (ie, Word paragraph-level styles; eg, headings, the Normal paragraph, bulleted & numbered lists) can be considered boxes. Courtesy of the W3C, following is a typical graphic depicting a box & its CSS properties:

The following image depicts the hierarchy of an HTML document using boxes:

To associate the 2 graphics, all CSS properties detailed in the 1st graphic can be applied to the 2nd graphic's <body> box & all the boxes it contains.

Let's simplify. The only box properties that Word-to-Web styles use are the margins: left & right, & top & bottom. Even simpler, the only relevant properties here are the left & right margins.

Like the Verdana font, left & right margins are inherited:

Left & right margins are set for the HTML <body>, specifically in the CSS Body class. These margins apply to all lower-level elements (eg, <div>'s, <p>'s).

A <div> may set its own left & right margins. If so, these margins are relative to the <body>'s margins, & not to the HTML document itself; ie, the <div>'s inherit the CSS properties (eg, margins) of the <body>.

A paragraph (ie, <p>) may set its own left & right margins. Again, these margins are relative to the encapsulating <div>.

Due to inheritance, these margin values are cumulative. Thus, left & right margins for any HTML element are the sum of the left & right margins set in that element & all higher-level elements. For example, if the Body & Text classes each set its left margin at 0.3”, the left margin for the Text class, relative to the entire XHTML document, would be 0.6”.

Originally, I did set the left margin for both the Body and Text classes to 0.3”. As detailed above in the Indents & Horizontal Position section, Word indents are set every 0.3”. Synchronizing Web left margins & Word indents seemed like a no-brainer.

However, when I did a trial upgrade of the 2.0 Upgrade document to XML (Please see the XML: The real skinny section of the 2.0 Upgrade document for more info), the background defined in the Body class did not extend the full width of the screen. Instead, since the Body class set its left margin at 0.3”, the background itself was indented 0.3”. Hell's bells. Bloody taut, unforgiving, & remorseless XML. To fix this problem, I had to set the left & right margins for the Body class at 0.0”.

But, I lamented the desecration of my Web margin-to-Word indent synchronization scheme. How to save it? I finally did.

The solution was to set the left margin for the Text class at 0.6”, but to negatively indent headings relative to it: <h1> indents -0.3”, <h2> -0.2”, & <h3> -0.1”. Since headings are included in the same <div> in which this paragraph is contained (See the above Skeletal XHTML page example), the functional left margin for this <div> is 0.3”:

0.6” (left margin for Text <div>) - 0.3” (negative indent for <h1>) = 0.3”

Success. In both the original & XML-mandated schemes, headings are indented 0.3” from the left margin. It's as if the Body class still set its left margin at 0.3”. Tell me lies, tell me sweet little lies.

Headings look good negatively indented, a palliative to assuage the deep psychic pain caused by the ignominious violation of my Web margin-to-Word indent synchronization scheme.

Anyway, Word indents still equal Web left margins. That's still the basic deal.

Normally, it's unnecessary to ponder left margins; ie, you can be unconscious about their intricacies. However, there are times when the specific values for left margins must either be chosen or set. In these cases, you will need to directly specify left margins.

Fortunately, these times are rare, & occur only when rendering long, multi-column lists where the columns must be precisely vertically aligned. More later in the Styles that simulate Word tabs section.

CSS style types

There are 3 general types of styles within a Cascading Style Sheet:

1) Those associated with specific HTML tags

Following are style definitions associated with 3 specific HTML tags:

hr {

color: Maroon;}

a:link {

color: #FF8000;
font-weight: 700;}

a:visited {

color: Maroon;
font-weight: 700;}

h1 {

margin-top: 2em;
margin-bottom: 1em;
text-indent: -0.3in;
font-family: Verdana, Helvetica, sans-serif;
font-size: 18px;
font-weight: 500;
font-weight: bold;
color: Black;}

Below are brief explanations of this code:

<hr> tag. The horizontal line's color is specified.

<a> tag. The colors for unvisited & visited links are specified. The font-weight value of ‘700’ lightly bolds the font for hyperlinks.

<h1> tag. The number of blank lines before & after the heading, the negative indent of the heading, & the heading's font settings are specified.

Most every HTML tag can be so defined in Cascading Style Sheets.

2) Those associated with classes

In Cascading Style Sheets, classes are defined using a period as a prefix. Following are 3 examples:

div.Navigation {

text-align: center;
font-size: 20px;
color: Maroon;}

.Serif {

font-family: Georgia, serif;
font-size: 16px;}

.BoldYellow {

background-color: #FFFF99;}

The Navigation class is assigned to a <div>, while the Serif and BoldYellow classes are assigned to inline elements.

3) Those associated with specific HTML tags & classes

This form combines the 2 above types. An example is:

p.Normal {

margin-top: 0em;
margin-bottom: 1em;}

This example is explained immediately below.

Word ‘Normal’ style

Since the Word Normal style is the most used, & is the style upon which all other Word paragraph-level styles are based, the Word & Web definitions for it are worth viewing. As before, the formatting characteristics of the Word Normal style are:

Font: Verdana, 10pt, English (U.S.), Flush Left, Line spacing single, Widow/Orphan control, Keep lines together

Some of these formatting characteristics apply to Word only. Of those that do transfer to Cascading Style Sheets, there are 3 separate & associated CSS styles. The Skeletal XHTML page exampled above integrates these 3 styles within the context of an HTML page. These 3 styles are:

.Body {

margin-left: 0.0in;
margin-right: 0.0in;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
background: url(../gen/Background_Grid.png) repeat-y;
position: relative;}

div.Text {

margin-left: 0.6in;
margin-right: 0.3in;
margin-bottom: 1em;
position: relative;}

p.Normal {

margin-top: 0em;
margin-bottom: 1em;}

Below are brief explanations of this code:

1) Body style

margin-left and margin-right. Recall the discussion above: The functional left margin for the Body style (ie, the HTML <body>) is 0.3”.

font-family and font-size. The font face & size are specified. 13px is equivalent to a 10 pt font.

background. The background image for all Web pages is specified.

position. The explanation of this CSS property is complex, & is deferred until later in the section on Using absolute positioning.

2) Text style

margin-left and margin-right. Recall the discussion above: When negatively indented headings are considered, the functional left margin for the Text style is 0.3”.

margin-bottom. The Text style is associated with a <div>. Since the height of 1 em equals the height of the font size being used, the 1em specification functionally inserts one blank line after the <div>.

position. Ditto re deferral.

3) p.Normal style

margin-top and margin-bottom. The number of inserted blank lines before & after is specified.

Note that this style does not set a left margin; ie, the indent of the Word Normal style is 0.0”.

Word ‘HBTI 1.2’ style

Most Web.dot paragraph-level styles focus on indents: Body Text Indents, Hanging Body Text Indents, Numbered List Indents, & Bulleted List Indents.

The Word & Web definitions for the HBTI 1.2” style (ie, Hanging Body Text Indent, indent of 1.2”), plus the associated Word dialog boxes for this style, are worth viewing.

From the Word drop-down menu, selecting Format Style & then selecting the HBTI 1.2” style displays the following dialog box:

From the Description section, its formatting characteristics are:

Normal + Indent: Left 0.3” Hanging 1.2”, Space after “Auto”, Tabs: 1.5”

The equivalent CSS code is:

p.HBTI12 {

margin-top: 0em;
margin-bottom: 1em;
margin-left: 1.5in;
text-indent: -1.2in;}

Note:

The Word hanging indent of 1.2” is equivalent to the CSS text-indent of -1.2in.

The Word left indent of 0.3” is equivalent to the sum of the CSS margin-left & text-indent values:

1.5in - 1.2in - 0.3”

Word & Web styles use different approaches, but yield the same result.

Clicking the Modify... button in the above Style dialog box displays the following:

Note that the Style for following paragraph is HBTI 1.2”.

When a Word style is created, this setting defaults to the style itself. However, some of the 30 Word styles detailed in this document override this default; eg, headings & titles. See the following Word Styles - Detail section for more info.

Other formatting characteristics for this style need to be customized; ie, Paragraph and Tabs.

Clicking the Format button in the above Modify Style dialog box & then selecting the Paragraph... option displays the following:

Note the customized settings for Left, Special, and By.

This style plus the other 3 Hanging Body Text Indent styles (ie, HBTI 0.3”, HBTI 0.6”, and HBTI 0.9”) are the only styles that customize the After setting. All other styles use the default setting of 0 pt.

When set to Auto, Word will automatically insert a blank line after paragraph end; ie, when the Enter key is struck. Since this style is mainly used to format a list of words & their definitions -- said definitions often requiring 2 or more screen lines to display -- always separating list items with a blank line makes sense.

Clicking the Format button in the above Modify Style dialog box & then selecting the Tabs... option displays the following:

Paragraphs & the Enter Key

Asynchronous considerations impact something as seemingly simple as blank lines, or the use of the Enter key in Word. Complications & intricacies arise due to the following:

As with the above HBTI 1.2” style, Word & Web styles arrive at the same destination, but take different routes. That old San Francisco homily is wrong: Sometimes, what's good for the goose is not good for the goose. Sometimes, what's good for Word is not good for the Web.

When the process of editing the Word-produced HTML is taken into consideration, what's good for Word & the Web may not be good for the editing process.

On the other hand:

Writing documents in Word should be easy & natural. The authoring process should not be compromised due to Web peculiarities or inadequacies, or the exigencies & vicissitudes of the editing process.

The editing process should be as painless as possible.

Web standards & Best Practices should be ruthlessly adhered to. They should not be compromised due to Word peculiarities or inadequacies, or the exigencies & vicissitudes of the editing process.

I believe the scheme detailed below for inserting blank lines & using the Enter key honors the above remorseless imperatives.

Is this scheme a big deal? It is:

As detailed in the 2.0 Upgrade document, version 2.0 of my Web site heeds W3C-recommended standards. No compromise here.

In 2.0, using Word is easier. The few simple conventions I've adopted make it so.

2.0's editing process is simpler by a factor of 5 or 10.

To achieve the above, however, I had to nano-obsess on the methodologies for inserting blank lines, & using the Enter key in Word.

Word & Web configurations

In Word, a paragraph is a string of text terminated by the Enter key; aka, the Paragraph Mark. In HTML (ie, on the Web), a paragraph is a string of text bracketed by the beginning <p> & the ending </p> tags. Thus, Word paragraphs are not identical to Web paragraphs, but they are analogous.

The Web style definition for both the Normal and HBTI 1.2” styles includes this setting:

margin-bottom: 1em;

Based upon it, Web browsers will automatically insert a blank line following any paragraphs assigned these 2 styles; ie, since the height of 1 em equals the height of the current font being used, 1 em is logically equivalent to 1 blank line.

All Web paragraph-level styles include the above setting. Thus, all Web paragraphs have a following blank line.

The same is not true with Word paragraph-level styles, however. In fact, except for the rarely used Hanging Body Text Indents styles, no Word style automatically inserts a blank line at paragraph end.

Below is the Paragraph, Indents and Spacing dialog box for the List Bullet style:

Note that the After setting is 0 pt, indicating no blank line afterwards.

Blank lines in Word

Why this Word default?

A partial reason is habituation. I've used word processing programs since the early 1970s. Those early programs were primitive. To insert a blank line, you typed 2 successive Enter keys.

I still use 2 Enter's. I've tried using the Word facility that automatically inserts a blank line, but the grooves in my brain are too deep. Every time I try, I soon revert to the old way.

There is an outside chance I've depressed various & sundry computer keys & mouse buttons one billion times in my professional career. (ie, 30-some years of 250 workdays each [Yea, right. Who ever heard of a computer professional working only 5 days/week?] equals about 69,666 days. 15,000 keystrokes or mouse-clicks per day times [the mark of Satan + 69,000] equals a billion). If a billion it is, how deep do you think these grooves are?

There are 2 additional reasons why I still use the Enter key/Enter key sequence:

1) A default blank line simply doesn't work.

For example, following is text previously displayed in Web Styles:

p.HBTI12 {

margin-top: 0em;
margin-bottom: 1em;
margin-left: 1.5in;
text-indent: -1.2in;}

Considered purely as Word Text, a blank line should follow only the last line.

2) The simple, standard, & straightforward conventions I use in Word for inserting blank lines & using the Enter key are Web-friendly. They mandate that blank lines be inserted via the explicit use of the Enter key.

Let's use this specific numbered list item & the text following it as an example.

As with the HBTI 1.2” style, the List Number style sets the Style for following paragraph to be itself:

As I was typing the text associated with this numbered list item, I entered the text for the list item itself & then hit the Enter key. Word automatically inserted numbered list item #3 on the next display line.

Using my convention, I immediately redid what Word inserted. Since the indented text for the List Number style lies 0.6” from the left margin, I replaced the List Number style with the appropriate BTI2 style (Body Text Indent, 0.6” from the left margin); ie, the style assigned to this paragraph. Numbered list item #3 disappeared. Then, I hit the Enter key & began typing text for the next paragraph.

On the Web, this paragraph & the 4 paragraphs preceding it should be assigned the BTI2 style, not ListNumber. If these 5 paragraphs were not preceded by a numbered list item using the ListNumber style, using the BTI2 style for these 5 paragraphs would be the only choice. That the ListNumber style precedes these 5 paragraphs is irrelevant.

To reiterate, on the Web, this paragraph & the 5 paragraphs above it should be assigned the BTI2 style.

If these paragraphs should be assigned the BTI2 style, why not assign the BTI2 style to the blank line preceding them?

Case closed.

The convention I use is simple: Blank lines are discrete Word paragraphs, assigned the style of the non-blank paragraphs around them.

Even when indentation becomes more complicated, the rule is still simple. For example, the following paragraphs are further indented relative to this paragraph, & are assigned the BTI3 style (Body Text Indent, 0.9” from the left margin):

This paragraph uses style BTI3.

So does this one.

The blank line between the 2 BTI3 paragraphs uses style BTI3, but the blank lines above & below use BTI2.

This scheme is brutally simple, & has no downsides either during the editing process or within the XHTML code:

Deleting the superfluous HTML code that Word creates when it converts these blanks lines into HTML is a simple process that takes about a minute.

For example, this document has around a thousand of these blank lines. Deleting them all using an HTML text editor takes 6 separate global search-&-replace's. Still, it takes only about a minute to delete them all.

Thus, this technique for inserting blank lines honors this imperative:

The editing process should be as painless as possible.

As we shall soon see, Web styles do blank lines their own way, pretty much disassociated from the way Word does them. Thus, how Word does blank lines is entirely its own business.

Word has another facility that can be used to insert blank lines: Shift+Enter; aka, Manual Line Break. This key sequence positions the cursor on the next line at the currently defined left margin. Immediately doing another Shift+Enter inserts the blank line.

However, using Shift+Enter for this purpose does not translate well to the Web. In fact, in some cases, its use dishonors this imperative:

Web standards & Best Practices should be ruthlessly adhered to. They should not be compromised due to Word peculiarities or inadequacies…

Unlike the Enter key, Shift+Enter does not insert an end-of-paragraph mark. Since so, the assigned Word style does not change. This causes problems.

Let's do an example highlighting the Shift+Enter key sequence:

This text uses the Word List Bullet style(Shift+Enter)

(Shift+Enter)
This text also uses the List Bullet style. What the hell are you doing, buttface nuker! From a Web perspective, this text looks like a BTI2 paragraph. It looks like text indented 0.6” from the left margin. It sure doesn't look like a ListBullet paragraph. Where's the bullet character to the left of this paragraph, you cretinous ass? There isn't any, you moronic loser. You're misusing Shift+Enter, you vomitous slug.

Assumedly, you get the point.

There is a good use for Shift+Enter. See the next section.

Using the technique described above for doing blank lines in Word honors this imperative:

Writing documents in Word should be easy & natural. The authoring process should not be compromised due to Web peculiarities or inadequacies.

This technique has no downsides relative to the Web once the superfluous HTML code that Word creates when it converts these blanks lines into HTML is deleted.

Blank lines on the Web

This section references the following excerpt from the 2.0 Upgrade document:

In HTML, the order of the tags in the <head> section is unimportant:

<head>

</head>

This section discusses 2 topics:

1) Web styles with no following blank line; &

2) Using Shift+Enter.

When Word converts the above excerpt into HTML, it replaces the less-than & greater-than signs with what are called their “HTML entity” equivalents. These are:

< - less-than sign or <
> - greater-than sign or >

When browsers encounter a less-than sign, they assume that an HTML tag follows. If Word does not replace the less-than & greater-than signs with their entity equivalents, browsers will interpret, say, <head> as an HTML tag & not what it really is: simple text.

Below is the XHTML code for the above excerpt. Note the numerous HTML entities:

<p class="BTI">In HTML, the order of the tags in the <head> section is unimportant:</p>

If you're discreet about it & won't tell anyone that the XHTML code below is not valid XHTML, let's put the less-than & greater-than signs back & make the XHTML code more readable. Can I count on your discretion? I owe you one. Thanks.

<p class="BTI">In HTML, the order of the tags in the <head> section is unimportant:</p>

Much better, isn't it?

Web styles with no following blank line

In the Word & Web configurations section above, I stated that all Web paragraphs insert a blank line afterwards, yet our excerpt is not peppered with blank lines:

In HTML, the order of the tags in the <head> section is unimportant:

<head>

</head>

What's the deal? Is not each line a separate Web paragraph? Shouldn't a blank line follow each?

Well, the simple truth is that a blank line should not follow some Web paragraphs; eg, the above excerpt. Let's highlight portions of the XHTML code first, & then explain their relevance:

<p class="BTI">In HTML, the order of the tags in the <head> section is unimportant:</p>

BTI2 and BTI2_0em are 2 separate CSS styles:

p.BTI2 {

margin-top: 0em;
margin-bottom: 1em;
margin-left: 0.6in;}

p.BTI2_0em {

margin-top: 0em;
margin-bottom: 0em;
margin-left: 0.6in;}

BTI2 adds a blank line afterwards, while BTI2_0em doesn't.

The “_0em” styles exist only in the Master Web Cascading Style Sheet: Version 2.0, but not in Word. This suffix is added to the appropriate style names during the editing process only for those Web paragraphs that should not be followed by a blank line.

Why do this? This imperative:

Writing documents in Word should be easy & natural. The authoring process should not be compromised due to … the exigencies & vicissitudes of the editing process.

Deciding whether or not the XHTML document should have a blank line following the equivalent Web paragraph would wreak havoc during the Word authoring process. Writing good prose is hard enough. Thinking about the Web while writing could result in sum pretty preety bad proes.

Besides, I've found that adding the “_0em” suffix while editing is simple & straightforward. Deciding which styles need this suffix is close to a no-brainer.

The only categories of styles that use the “_0em” suffix are the Body Text Indents, & bulleted or numbered lists.

The decision whether or not to add this suffix to Body Text Indent styles is obvious from context.

Bulleted or numbered lists are another matter. In XHTML documents, I insert a blank line between bulleted or numbered list items only if the text associated with the list items spans multiple screen display lines. If the text is short, I omit the intervening blank line. Purely a matter of personal style:

Bulleted list example #1 using the CSS ListBullet_0em style:

Here's a short bulleted list item

Here's another short bulleted list item

Bulleted list example #2 using the CSS ListBullet style:

Now, here's a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really long bulleted list item.

Here's another really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really long bulleted list item

Below are the CSS definitions for these 2 styles:

p.ListBullet {

margin-top: 0em;
margin-bottom: 1em;
margin-left: 0.6in;
text-indent: -0.3in;}

p.ListBullet_0em {

margin-top: 0em;
margin-bottom: 0em;
margin-left: 0.6in;
text-indent: -0.3in;}

Below are the 2 bulleted list examples translated into XHTML:

<p class="ListBullet_0em">...Here's a short bulleted list item</p>

<p class="ListBullet">...Now, here's a really, really...

When I'm editing the HTML code that Word produces, I display the partially edited XHTML document every so often in a browser. Missing “_0em” suffixes are obvious.

I chose the no blank line default in Word consciously. No flip of the coin involved here.

Below is a table detailing the number of occurrences of all Body Text Indent, bulleted list, & numbered list styles, both without & with the “_0em” suffix. I surveyed 50 XHTML documents to produce the table.

As is apparent, the blank line is a good default.

To view a table detailiing the number of occurrences of all Word & Web styles, please see the Style Occurrences & Upload Checklist document.

Shift+Enter

There is a direct Web equivalent to Word's Shift+Enter key sequence: The <br> tag. When Word encounters a Shift+Enter, it converts it to <br>.

My convention for using Shift+Enter is simple: If the next line uses the same style as the current line, & if the next line is non-blank, I use Shift+Enter.

Again, here's the actual excerpt:

In HTML, the order of the tags in the <head> section is unimportant:

<head>

</head>

Here's the XHTML with <br> highlighted:

<p class="BTI">In HTML, the order of the tags in the <head> section is unimportant:</p>

QED.

Using this technique honors this imperative:

Web standards & Best Practices should be ruthlessly adhered to. They should not be compromised due to Word peculiarities or inadequacies, or the exigencies & vicissitudes of the editing process.

Web paragraphs are more distinct & integral than Word paragraphs. Web paragraphs have starting & ending HTML tags while Word paragraphs have only an ending (normally invisible) Paragraph Mark.

While Word styles are useful, Web styles are the actualization of what should be considered an inviolable Web standard: Use CSS to completely separate content from presentation. CSS or Web styles should be considered as distinct & integral as Web paragraphs.

Thus, using <br> only within Web paragraphs is a necessary concomitant, which, in turn, imposes a convention on the use of Shift+Enter in Word.

Conclusion: Paragraphs & the Enter key

Was all this necessary? Yes. I triple-dare you to come up with a better scheme.

Word Styles - Detail

There are 2 general categories for these 30 styles:

1) Internal to Word document only versus external

Some styles are intended exclusively for use in the Word document. For example, the Header, Footer, and Page Number styles establish a common header & footer area & a uniformly formatted page number shared by all Word documents based on Web.dot. These styles are so noted in the description area of the following list.

2) User-defined style versus standard Word style

Word has a list of pre-defined styles given assigned names; eg, Normal, Title, Hyperlink, List Number, etc. I added new styles & gave them unique names. Word calls these styles “User-defined”. These styles are so noted in the style name area of the following list.

Also note that Word styles are either paragraph-level (ie, ) or character-level (ie, )

Following is the list of the 30 Word-to-Web styles. Descriptions of each style are those that display in the Description area of the Word style dialog boxes.

1) BTI: Body Text Indent (User-defined)

Normal + Indent: Left 0.3”, Style for following paragraph: BTI

2) BTI 2: Body Text Indent 2 (User-defined)

Normal + Indent: Left 0.6”, Style for following paragraph: BTI 2

3) BTI 3: Body Text Indent 3 (User-defined)

Normal + Indent: Left 0.9”, Style for following paragraph: BTI 3

4) BTI 4: Body Text Indent 4 (User-defined)

Normal + Indent: Left 1.2”, Style for following paragraph: BTI 4

5) BTI 5: Body Text Indent 5 (User-defined)

Normal + Indent: Left 1.5”, Style for following paragraph: BTI 5

6) Default Paragraph Font

Internal to Word document only.

7) FollowedHyperlink

Default Paragraph Font + Font: Verdana, Underline, Font color: Custom Color(RGB(128,0,0)) - Color is

8) Footer

Internal to Word document only

9) HBTI 0.3”: Hanging Body Text Indent of 0.3” (User-defined)

Normal + Indent: Left 0.3” Hanging 0.3”, Space after “Auto”, Tabs 0.6”, Style for following paragraph: HBTI 0.3”

10) HBTI 0.6”: Hanging Body Text Indent of 0.6” (User-defined)

Normal + Indent: Left 0.3” Hanging 0.6”, Space after “Auto”, Tabs 0.9”, Style for following paragraph: HBTI 0.6”

11) HBTI 0.9”: Hanging Body Text Indent of 0.9” (User-defined)

Normal + Indent: Left 0.3” Hanging 0.9”, Space after “Auto”, Tabs 1.2”, Style for following paragraph: HBTI 0.9”

12) HBTI 1.2”: Hanging Body Text Indent of 1.2” (User-defined)

Normal + Indent: Left 0.3” Hanging 1.2”, Space after “Auto”, Tabs 1.5”, Style for following paragraph: HBTI 1.2”

13) Header

Internal to Word document only

14) Heading 1

Normal + Font: 14 pt, Level 1, Style for following paragraph: Normal

15) Heading 2

Normal + Font: 12 pt, Bold, Italic, Level 2, Style for following paragraph: Normal

16) Heading 3

Normal + Font: 11 pt, Bold, Level 3, Style for following paragraph: Normal

17) Hyperlink

Default Paragraph Font + Font: Verdana, Underline, Font color: Custom Color(RGB(255,128,0)) - Color is

18) List Bullet

Normal + Indent: Left 0.3” Hanging 0.3”, Bulleted, Tabs 0.6”, Style for following paragraph: List Bullet

19) List Bullet 2

Normal + Indent: Left 0.6” Hanging 0.3”, Bulleted, Tabs 0.9”, Style for following paragraph: List Bullet 2

20) List Bullet 3

Normal + Indent: Left 0.9” Hanging 0.3”, Bulleted, Tabs 1.2”, Style for following paragraph: List Bullet 3

21) List Bullet 4

Normal + Indent: Left 1.2” Hanging 0.3”, Bulleted, Tabs 1.5”, Style for following paragraph: List Bullet 4

22) List Bullet Tabbed (User-defined)

Normal + Indent: Left 0.3” Hanging 0.3”, Bulleted, Tabs 0.6”, 1.5”, 2.7”, Style for following paragraph: List Bullet Tabbed

23) List Number

Normal + Indent: Left 0.3” Hanging 0.3”, Numbered, Tabs 0.6”, Style for following paragraph: List Number

24) List Number 2

Normal + Indent: Left 0.6” Hanging 0.3”, Numbered, Tabs 0.9”, Style for following paragraph: List Number 2

25) Monospace (User-defined)

Default paragraph Font + Font: Courier New, 12 pt

26) Normal

Font: Verdana, 10pt, English (U.S.), Flush Left, Line spacing single, Widow/Orphan control, Keep lines together, Style for following paragraph: Normal

27) Page Number

Internal to Word document only

28) Serif (User-defined)

Default paragraph Font + Font: Georgia, 12 pt

29) Tabbed (User-defined)

Normal + Indent: Left 0.3”, Tabs 0.6” thru 7.5” every 0.3”, Style for following paragraph: Tabbed

30) Title

Normal + Font: 16 pt, Centered, Level 1, Style for following paragraph: Normal

To summarize, internal to Word styles are:

1) Default Paragraph Font

2) Footer

3) Header

4) Page Number

User-defined styles are:

1) BTI

2) BTI 2

3) BTI 3

4) BTI 4

5) BTI 5

6) HBTI 0.3”

7) HBTI 0.6”

8) HBTI 0.9”

9) HBTI 1.2”

10) List Bullet Tabbed

11) Monospace

12) Serif

13) Tabbed

Creating & Updating Word-to-Web Documents

This section details the creation & update of the Web.dot Word document template, & the use of this template for Word-to-Web documents.

Creating Web.dot

From the Word drop-down menu, select File New. A dialog box similar to the following displays:

The 3 icons represent pre-existing templates. Since Web.dot is basically a blank document with 30 customized styles, the fact that Word pre-selects (ie, highlights) the Blank Document template is cool. Click the (Create New) Template option, & click OK.

The document associated with Web.dot should be blank; else, whatever text it contains will appear each time a new document using this template is created. At this point, however, you can customize margins via the File Page Setup ... command. These margins will apply to all documents based upon Web.dot.

This new template/document will probably include only the 2 ineradicable styles. From the Word drop-down menu, select Format Style. A dialog box similar to the following displays:

Via use of the Modify ... button, customize the formatting characteristics of the Normal style.

There are 2 types of styles in Web.dot:

1) Styles whose names Word assigns

2) Styles whose names are user-defined

Both style types need to be customized.

Word-assigned styles

In the List drop-down list, select All styles. A dialog box similar to the following displays:

Select each of these styles in turn & modify their formatting characteristics:

1) FollowedHyperlink

2) Footer (Optional)

3) Header (Optional)

4) Heading 1

5) Heading 2

6) Heading 3

7) Hyperlink

8) List Bullet

9) List Bullet 2

10) List Bullet 3

11) List Bullet 4

12) List Number

13) List Number 2

14) Page Number (Optional)

15) Title

If you don't gussy-up your Word documents with headers & footers, the Footer, Header, and Page Number styles are unnecessary.

As an example, following is the dialog box that displays when the FollowedHyperlink style is selected:

After customizing these 15 styles, selecting Styles in use from the List drop-down list displays the following example dialog box:

User-defined styles

These styles are:

1) BTI

2) BTI 2

3) BTI 3

4) BTI 4

5) BTI 5

6) HBTI 0.3”

7) HBTI 0.6”

8) HBTI 0.9”

9) HBTI 1.2”

10) List Bullet Tabbed

11) Monospace

12) Serif

13) Tabbed

Via use of the New ... button, create each of these styles & modify their formatting characteristics.

As an example, following is the dialog box that displays when the BTI style is created:

Save this template, & give it the name Web.dot.

Creating a new document

Create a new Word document using the Web.dot template.

Updating an existing document

From the Word drop-down menu, select Format Style & click the Organizer … button. A dialog box similar to the following displays:

Close both files -- yours on the left, Normal.dot on the right -- by clicking both Close File buttons. This display results:

Now, open Web.dot on the left & your document on the right using the Open File … buttons. This display results:

The remaining steps are of the usual kind: Select all 30 styles in the left-hand pane; click the Copy button to copy these styles to your document; click ‘Yes’ when Word asks if you want the Default Paragraph Font and Normal styles overwritten; & click the Close button.

If desired, you can use the Organizer to delete the existing styles in your existing documents. If you do, then your to-be-published-on-the-Web documents will use only Web.dot-defined styles.

Web Styles - Detail

The Cascading Style Sheet analog to Web.dot is named Web.css. To view the file, click on the URL.

In Web.css, the styles common to Web.dot are defined first, followed by the CSS-only styles.

There is no Web.css equivalent for 2 Web.dot styles: List Bullet Tabbed and Tabbed. If these styles are used in a Word document, the equivalent HTML must be hand coded. More later in the Styles that simulate Word tabs section.

Styles unique to Web.css fall into 8 categories:

1) Additional headings

2) Other fonts

3) Alternative bolding methods

4) Replacement for font-related tags

5) Spacing after Body Text Indents

6) Spacing after bulleted & numbered lists

7) Alignment of the number in a numbered list

8) Styles that simulate Word tabs

Additional headings

Font sizes are defined in pixels. Please see the Font Size section of the 2.0 Upgrade document for more info.

There are 4:

1) The styles associated with the HTML <h1>, <h2>, & <h3> tags negatively indent 0.3”, 0.2”, & 0.1”, respectively, to the left of the Normal style's left margin. The p.hA heading doesn't. Its left margin is the same as the Normal style. It displays in 17px Verdana regular font. Font color is the same color as a Followed Hyperlink; ie, .

2) p.hB is similar excepting it displays in 15px Verdana italic font.

3) p.InlineTitle displays centered titles within the <body>. Font is 20px Verdana.

4) p.TableTitle displays centered titles for tables. Font is 20px Georgia.

Other fonts

The Monospace12 style displays in 12px Courier New font.

Alternative bolding methods

The BoldBlue style displays the font in a light blue color, & the BoldYellow style displays the background as light yellow.

Replacement for font-related tags

Eventually, the venerable HTML <u> tag will go away. The U style replaces the deprecated <u> tag:

.U {

{text-decoration: underline;}

As was discussed at length in the 2.0 Upgrade document, HTML tags should be used only for content & not for presentation. CSS should do all presentation. Well, isn't bolded or italicized text presentation? It sure is. Isn't superscripted text presentation? Ditto. Thus, the HTML <b>, <i>, and sup> tags should not be used. The B, I, and Sup styles replace them:

.B {

font-weight: bold;}

.I {

font-style: italic;}

.Sup {

vertical-align: .33em;}

Spacing after Body Text Indents

The 5 Body Text Indent definitions in Web.css add a blank line after each paragraph. To suppress this blank line, the following replacement styles can be used:

BTI_0em

BTI2_0em

BTI3_0em

BTI4_0em

BTI5_0em

The last Body Text Indent item in a series should not use the _0em style.

Spacing after bulleted & numbered lists

The standard bulleted & numbered list definitions in Web.css also add a blank line after each paragraph. To suppress this blank line, the following replacement styles can be used:

ListBullet_0em

ListBullet2_0em

ListBullet3_0em

ListBullet4_0em

ListNumber_0em

ListNumber2_0em

The last bulleted or numbered list item in a series should not use the _0em style.

Alignment of the number in a numbered list

When Word assigns 2-digit numbers to a numbered list, the number itself is left-aligned rather than right-aligned as it should be; eg:

9) Nein

10) Non

To fix this misalignment, the following styles can be used for any double-digit list numbers:

ListNumber_dd

ListNumber_0em_dd

The following is the result:

9) Oui

10) Da

Styles that simulate Word tabs

There is no clear-cut Web equivalent for Word tabs. This section details techniques that can be used to simulate tab-like features on the Web.

Recall the earlier recap of these techniques:

1) Adding or deleting spaces until the alignment looks OK.

2) Using a fixed-width font like Courier New.

3) Using absolute positioning; ie, positioning of text relative to the left margin; eg, 0.9” from the left margin.

4) Creating HTML tables.

Adding or deleting spaces until the alignment looks OK

Indents are cool. Hanging indents are cool. Text with indents & hanging indents looks cool.

HTML needs to be able to do hanging indents.

There are 3 style types in Web.dot that use hanging indents:

The 4 HBTI's

The 5 List Bullet's

The 2 List Number's

The List Bullet Tabbed style is a special case discussed later.

The 4 HBTI styles specifically define hanging indents. Recall the Paragraph dialog box for HBTI 1.2”:

Bulleted & numbered styles also define hanging indents, but implicitly. For example, when the List Bullet style is customized, the horizontal positions of the bullet & text are specified according to the standard discussed above in the Indents & Horizontal Positioning section:

But, setting these indent positions automatically defines a hanging indent for this style:

The Style dialog box summarizes this customization:

Basically, these horizontal indent positions can be considered tab positions. Word treats them as such when it converts a document into HTML format. To simulate a Web tab, it converts tabs into spaces. These spaces may be ‘hard’ (ie, the non-breaking space or  ) or ‘soft’ (ie, a blank).

Both the List Bullet and List Number styles use hard spaces. Following is the HTML code for a sample bulleted & numbered list:

<p class="ListNumber">1)   The structure ...</p>

Bulleted lists use 4 hard spaces, & numbered lists 3.

The 2 HBTI styles use soft spaces. An example is in order.

The following text uses the Word HBTI 1.2” style:

Injunction An equitable remedy in the form of a court order compelling a party to do or refrain from doing a specified act; a cool junction where kids congregate

Following is the equivalent XHTML code:

<p class="HBTI12"><span class="BoldBlue">Injunction</span><span> </span>An equitable remedy in the form of a court order compelling a party to do or refrain from doing a specified act; a cool junction where kids congregate</p>

Although it's not visibly obvious, there are 8 soft spaces before “An”. When Word converts the HBTI 1.2” style into HTML, it inserts those 8 blanks in at attempt to align the columns with the hanging-indented text; ie, “An equitable …”.

However, soft spaces cause problems. As will be discussed in the Detailed edits section, these soft spaces need to be replaced with hard spaces.

Using a fixed-width font like Courier New

An example is in order, one with a more complex hanging indent.

The above example text has 2 columns; the following has 3.

This example uses the List Bullet Tabbed and Tabbed styles. In the Word document, the display is precisely vertically aligned. I'm looking at it right now. Yep. Precisely aligned.

However, you can't see the display. Since there is no Web.css equivalent to the Web.dot List Bullet Tabbed and Tabbed styles, I deleted the HTML that Word generated in its vain attempt to render the code correctly.

When Word renders these 2 styles into HTML code, it uses soft spaces in its attempt to align the 3 columns. This attempt fails. In fact, it is impossible to align the columns using this technique.

In image form, following is Word's best attempt at aligning the columns:

In image form, following is a properly aligned display:

There are 2 possible fixes.

For lists only a few lines long, styles like PreVariation can be used. This style uses the fixed-width Courier New font. Since characters & blanks in fixed-width fonts are the same width, the exact vertical alignment you see on the screen is the alignment you get. Following is an image showing its use:

There are other Web styles used in this image (ie, for the borders, & for the colored fonts & backgrounds), but the basic style does result in proper alignment of all columns. Following is its definition:

p.PreVariation {

margin-top: 0em;
margin-bottom:.25em;
margin-left: 0.3in;
font-family: 'Courier New', monospace;}

For longer lists, the HTML <pre> tag can be used. <pre> forces the enclosed text to use the fixed-width Courier New font. Below is the XHTML code for the above properly aligned example:

<pre class="Pre03">

o   MSNBC      Anchor             Brian Williams (2)
                                  Mike Barnicle
               Reporter           Peter Arnett

</pre>

The above example is part of a list about 75 lines long.

Recall the discussion of left margins in the CSS box model section above. Use of the <pre> tag is 1 of 2 cases (The 2nd is immediately below) where left margins are directly specified.

In the above example, the Pre03 class sets the left margin 0.3” to the right of the currently set left margin.

.Pre03 {

margin-left: 0.3in;}

In effect, this class indents 0.3”.

Using absolute positioning; ie, positioning text relative to the left margin; eg, 0.9” from the left margin

The Current Directories list in the Web Publishing Directory Structure document details over 200 directories. This tabbed list uses 10 vertical columns. If Word can't handle 3 columns (eg, the ‘MSNBC’ example above), it certainly can't handle 10 columns.

Again, I'm viewing a precisely aligned example in the Word document that uses the Tabbed style. Again, you can't see it. Again, this example was recoded.

In image form, here is the example:

This example uses the CSS Absolute Positioning property, perhaps the closest CSS analog to Word tabs.

For the above image, the folder icon is 0.9” from the left margin. To position an element exactly, Web.css styles named APnn are used, where ‘nn’ is the distance in inches from the left margin. Thus, the specific CSS style used to properly position the first folder icon above is AP09 = 0.9”.

Below is the XHTML markup for this example:

<p class="AP09"><img alt="" src="gen/Folder.png" width="15" height="13" /></p>
<p class="AP12">Specific</p>
<p class="AP39">3 aps of Economics, Politics, Science</p><br />

<p class="AP12"><img alt="" src="gen/Folder.png" width="15" height="13" /></p>
<p class="AP15">Economics</p><br />

<p class="AP15"><img alt="" src="gen/Folder.png" width="15" height="13" /></p>
<p class="AP18">Economic Competitiveness</p><br />

Each unique APnn class is defined as a separate style in Web.css; eg:

p.AP09 {

left: 0.9in;
position: absolute;}

p.AP12 {

left: 1.2in;
position: absolute;}

Let's do another example. Consider the following 2-column Word list. Note the Word ruler. The list's 2 columns are vertically aligned at 1.5” & 2.1”.

The XHTML markup for the first list item would be:

<p class="AP15">04E</p>
<p class="AP21"><a href="2004Election.htm">2004 Election</a></p><br />

What could be simpler?

A major benefit of absolute positioning is that multiple elements can be positioned on the same display line, despite these elements all being bracketed by their own <p> - </p> tags. In absolute positioning, the <br> tag forces a new line, not the ending </p> tag. See the above 2 examples.

Now for a refreshing foray into the esoteric.

Remember the CSS box model? Remember these 2 styles?

.Body {

margin-left: 0.0in;
margin-right: 0.0in;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
background: url(../gen/Background_Grid.png) repeat-y;
position: relative;}

.Text {

margin-left: 0.6in;
margin-right: 0.3in;
margin-bottom: 1em;
position: relative;}

What's esoteric? This: Absolute positioning requires relative positioning. More properly, the direct correspondence between Word tab stops (eg, 1.5”) & Web APnn styles (eg, AP15) requires that the position property for both the Body and Text styles be set to relative.

Ultimately, the reason why this is so is straightforward, but not intuitively obvious. In fact, none of the CSS tutorials I cited in the introduction explains this topic well. The best single article I found is Stopdesign's Making the Absolute, Relative, but even it concludes:

Lost yet? It still sounds like gibberish to me too.

Let's see if I can do better.

An element positioned absolutely is still positioned relative to something else. This “something else” may be the entire screen, or a less-than-full-screen-size window, or one of the boxes in the CSS box model. Simply put, absolute positioning requires a frame of reference; ie, absolutely positioned relative to what?

The default frame of reference is the window in which the Web page is being displayed. To change this frame of reference to, say, one of the boxes in the CSS box model requires that the default position property value of static be overridden for that box & all other boxes in which it is contained.

The default value of static for the position property defines the frame of reference to be the entire window. To change this frame of reference requires that this default value be overridden; for example, with a value of relative. When this default value for a specific box is overridden, the top, bottom, left, & right margins for that box now become the frame of reference.

Way past time for an example with pictures. Let's redisplay the box model graphic:

Style	Blank line: Yes	Blank line: No
BTI	390	60
BTI2	517	14
BTI3	103	40
BTI4	37	4
BTI5	5	1

ListBullet	155	141
ListBullet2	35	44
ListBullet3	36	13
ListBullet4	2	1

ListNumber	305	140
ListNumber2	14	6
ListNumber_dd	33	20