Word XHTML - Bullets and Numbering

This is the fourth post by Zeyad Rajabi who owns the XHTML output from Word's new blogging feature . In earlier posts, Zeyad discussed a general overview of the XHTML , details on XHML compliance , and how we map styles to semantics . Today Zeyad is discussing the ways in which styles have been directly tied to specific XHTML tags.

Today will be a short post about lists in our blogging feature. Word 2007 provides you with a rich editing experience that allows you to create a multitude of different types of lists, from simple standard one level lists, multi-level lists, to custom defined bullet and numbering lists.

Given the time and resource constraint for our blogging feature we decided to take a more simplistic route with lists. Our blogging feature only outputs two types of lists: unordered and ordered lists (we do not support definition lists). That is, we are only relying on <ul> and <ol> HTML elements to render the look of lists, which will give full power to the host browser for rendering.

For this release of the blogging feature we are not going to output the following CSS properties:

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

Not outputting such CSS properties limits the fidelity level we will support for our blogging feature when comparing to the full power of Word 2007 bullets and numbering list feature.

Word 2007 allows for defining custom style lists, such as using strings “Heading 1” and “Heading 2” to depict different levels in a list. Given that we will only rely on <ul> and <ol> HTML elements and not the CSS properties mentioned above, the number of lists supported in our blogging feature will be much less than Word 2007.

Sample Lists

Below is a collection of some example lists and the corresponding HTML output.

Simple flat numbered list

  1. item 1
  2. item 2
  3. item 3

HTML:

 <ol>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ol>

Simple flat bulleted list

  • item 1
  • item 2
  • item 3

HTML:

 <ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ul>

Nested bulleted and numbered lists

  • Level 1 item 1
    • Level 2 item 1
    • Level 2 item 2
  • Level 1 item 2
    1. Level 2 item 1
    2. Level 2 item 2

HTML:

 <ul>
   <li>Level 1 item 1
      <ul>
         <li>Level 2 item 1</li>
         <li>Level 2 item 2</li>
      </ul>
   </li>
   <li>Level 1 item 2
      <ol>
         <li>Level 2 item 1</li>
         <li>Level 2 item 2</li>
      </ol>
   </li>
</ul> 

Multilevel List

  • level 1
    • level 2
      • level 3

HTML:

 <ul>
   <li>level 1
      <ul>
         <li>level 2
            <ul>
               <li>level 3</li>
            </ul>
         </li>
      </ul>
   </li>
</ul> 

Nested paragraphs

  • Item 1

    Some text.

  • Item 2

    Some text.

HTML:

 <ul>
   <li>Item 1
      <p>Some text.</p>
   </li>
   <li>Item 2
      <p>Some text.</p>
   </li> 
</ul> 

Nested paragraphs (w/o spaces)

  • Item 1

    Some text

  • Item 2

    Some text

HTML:

 <ul>
   <li style="margin-top:0px;margin-bottom:0px">Item 1
      <p style="margin-top:0px;margin-bottom:0px">Some text.</p> 
   </li> 
   <li style="margin-top:0px;margin-bottom:0px">Item 2
      <p style="margin-top:0px;margin-bottom:0px">Some text.</p> 
   </li> 
</ul> 

Comments are welcome

Any comments or questions are welcome.