This page looks best in a style-aware browser.

[Home] [Styles] [Tutorial 1] [Tutorial 2] [Tutorial 3] [Tutorial 4] [Tutorial 5] [Tutorial 6] [Tutorial 7]

Tutorial 7: Converting Word styles to CSS using the W2CSS HTML translator

CONTENTS

• The W2CSS HTML Translator
• Exercise
• Recap

If you have following along with the previous 6 tutorials, you should now have some understanding of Word's Character and Paragraph styles. Also, you should have some idea of how CSS works within the framework of HTML. This tutorial provides a brief overview of W2CSS — you are referred to the full documentation for a more complete discussion of topics covered here.

The W2CSS HTML Translator

The W2CSS HTML translator creates an HTML version of a Word document. Not only is HTML created, but also CSS classes are output corresponding to each style in the Word document.

Recall that every Word paragraph is linked to a style. The translation creates a CSS class for each Word style, linking this class to each HTML element via the CLASS attribute. This method of using CSS was discussed in the previous tutorial.

Put simply, the translation process involves 2 mappings:

• Mapping Word paragraphs into HTML, and
• Mapping Word formatting into CSS

Key to both mappings is how you use styles in a Word document.

Mapping Word paragraphs into HTML

HTML has grown quite elaborate these days. However, part of the aim of CSS is to return HTML to its simpler roots as a logical markup language. To this end, the W2CSS translator recognizes a very basic and fundamental subset of the full range of current (version 4) HTML.

Since everything in Word is a paragraph, HTML elements are recognized via the Word styles attached to each paragraph.

The following chart shows examples of built-in Word styles and HTML elements associated with each:

In addition to recognizing built-in styles, the translator also recognizes and maps user defined style names into various HTML elements. User defined styles must begin with words or phrases that match character-by-character up with built-in names — the latter part of the stylename can be anything.

The following chart shows examples of user-defined Word styles and HTML elements associated with each:

The full details of which Word styles map into which HTML elements are given in the documentation that accompanies the W2CSS program.

Mapping Word formatting into CSS

The second important mapping is of Word formatting properties into CSS properties. This are somewhat straightforward.

The previous tutorial discusses by way of examples some of CSS’ formatting possibilities.

The following are examples of Word style definitions compared with equivalent CSS definitions. These CSS definitions have all been generated using the W2CSS translator. [1]

Body Text:
  Font: Times New Roman, 
  10 pt, 
  Flush left, 
  Line Spacing Single, 
  Space After 6 pt

(color default is Auto, 
which comes out as Black)

.Body-Text {
  font-family: Times New Roman, serif;
  font-size: 83.33%;
  color: black;
  text-align: left;
  margin-bottom: 0.6em;}

(line spacing single is default)

Heading 2:
  Font: Verdana, 
  12 pt, 
  Bold, Italic,
  Flush left, 
  Line Spacing Single, 
  Space Before 12 pt,  
  Space After 3 pt,
  Keep With Next

(Keep with is not 
available in CSS)

.Heading-2 {
  font-family: Verdana,sans-serif;
  font-size: 100%;
  color: black;
  font-style: italic;
  font-weight: bold;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.25em;}

Character styles and paragraph styles are both handled by the translator. Character styles are mapped into <SPAN> elements.

Exercise

To get a small sense of how the W2CSS translator works, we’ll demonstrate here the translation of a previous exercise (the text of this document was used for Tutorial 1, Exercise A, and also for Tutorial 5, Exercise A where you were advised to save it as Ex5a.doc). This exercise assumes that you have installed the W2CSS template on your computer.

Step 1: Create a new Word document based on the W2CSS template. Type in the text below and apply the styles shown (or re-open Ex5A.doc; then copy the whole document and paste into the new document based on the W2CSS template). Save the document in some rememberable place with a memorable name, such as Ex7A.doc.

Step 2: With the document open and active, go to the Tools menu, pick Macros and run the macro aCSShtmlTranslator. This invokes the W2CSS program. Accept all the defaults (active document, no linked stylesheet) and pick the Translate button.

Step 3: After a short period of time, the translator will finish. You should find an HTML file in the same folder as the Word doc, with the same name. So, for instance, if you’d saved the Word document as Ex7A.doc, you’ll find Ex7A.html in the same folder. If you look at the HTML source, you will see the following [2]

<HTML>

<HEAD>
<TITLE>
This Is The Title To Our Document
</TITLE>
<STYLE TYPE="text/css">
<!--  
.Heading-1 {
  font-family: Arial,sans-serif;
  font-size: 116.67%;
  color: black;
  font-weight: bold;
  text-align: left;
  margin-top: 0.86em;
  margin-bottom: 0.21em;
  margin-right: 0%;
  margin-left: 0%;
  }
.Heading-1 STRONG {font-weight: normal;}

.Body-Text {
  font-family: Times New Roman,serif;
  font-size: 83.33%;
  color: black;
  text-align: left;
  margin-bottom: 0.6em;
  margin-right: 0%;
  margin-left: 0%;
  }

.Heading-2 {
  font-family: Arial,sans-serif;
  font-size: 100%;
  color: black;
  font-style: italic;
  font-weight: bold;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.25em;
  margin-right: 0%;
  margin-left: 0%;
  }
.Heading-2 STRONG {font-weight: normal;}
.Heading-2 EM {font-style: normal;}
-->
</STYLE>
</HEAD>
<BODY>

<H1 class="Heading-1">This Is The Title To Our Document</H1>
<P class="Body-Text">Here is some blathery text: blather, blather, blather, blather, blather, blather, blather.</P>
<H2 class="Heading-2">Subtitle One goes here</H2>
<P class="Body-Text">Here is some more unimaginative text: blather, blather, blather, blather, blather, blather, blather.</P>

<H2 class="Heading-2">Subtitle Two goes here</H2>
<P class="Body-Text">Here is some more unimaginative text: blather, blather, blather, blather, blather, blather, blather.</P>
</BODY>
</HTML>

Recap

For a more complete and detailed discussion of the W2CSS HTML translator you are referred to the full documentation that accompanies the program.

Suffice to mention here that the translator preserves as much information as possible about styles when mapping Word into CSS-compliant HTML. The tedious aspect of tagging Word paragraphs with specific styles needn't be repeated — style links are preserved by the translation.

The translator is not the endpoint but rather can be seen as a starting point — the HTML and CSS created can be modified with other Web page editing tools.

From here you are advised to visit the W2CSS home page and try out using the translator yourself. Have fun!

NOTES

[1] Word utilizes a hierarchical system wherein styles are "based on" other styles. The above definitions for Word styles are actually interpolations from this hierarchy (for example Word gives style Body Text as "Normal+ ..." indicating additional formatting added to or over-riding the formatting of style Normal).

[2] Preface codes have been removed for brevity of presentation.

[Return to Home]

This page created directly from an original MS Word document using the W2CSS HTML Translator.