Page Layout and Section Breaks

Many important Microsoft Word page layout settings are stored on a section-by-section basis within a document. Many of these section-level settings are intended to format printed output and might not be displayed when opened in a Web browser. However, these settings are used when the page is opened in an Office program, so Word saves them to HTML using CSS.

Dividing an HTML document into sections

Word preserves section-level structure in HTML by enclosing each section's data with Div elements. The syntax of these Div elements is as follows, where n is the successive section number

<div class=Sectionn>

The settings of each section is referenced in the class attribute of the section's Div element. Because these settings are meant to format the printed page, Word uses the syntax of the CSS Printing Extensions and contains CSS definitions in the Head element rather than in Div elements.

Section settings

Word uses the @page definition to store document layout settings for the entire document. For storing section-level page settings, Word uses similar definitions with the following syntax, where n is the successive section number.

@page Sectionn

This allows Word to apply page formatting to individual HTML elements referenced through the class attribute.

Word applies page settings to Div elements enclosing the sections using the following syntax, where n is the successive section number

div.Sectionn

The complete syntax for a three-section document is shown below:

<head><style> <!--

@page { document-level settings }

@page Section1 { first section settings }
div.Section1 { page: Section1; }

@page Section2 { second section settings }
div.Section2 { page: Section2; }

@page Section3 { third section settings }
div.Section3 { page: Section3; }

--></style></head>
<body>

<div class=Section1>first section data goes here</div>

<div class=Section2 >second section data goes here</div>

<div class=Section3> <third section data goes here</div>

</body>

Section break types

Word has five section break types to control how text flows across the break:

All five section break types are represented in the browser window by a BR element that introduces a line break. Word normally positions the BR element before the opening Div element for every section except the first. Word uses the clear=all attribute-value pair to ensure that text following the break character comes after left and right-aligned images.

Word saves the break type to HTML by applying styles to the BR element preceding a section. No BR element is placed before the first section, and the remaining sections use the page-break-before style attribute.

For the special case of column breaks, Word uses the mso-column-break-before style attribute. To differentiate section BR elements from page break BR elements, Word uses the mso-break-type style attribute. Word only inserts this attribute when the document contains section breaks.

Margins

Word stores page margin information for each section using the margin attribute within each section's @page definition. For gutter margins and mirror margins, Word uses the mso-gutter-margin and mso-mirror-margins style attributes, which only save to HTML in non-default cases. 

Word uses the mso-header-margin and mso-footer-margin style attributes to save the header and footer margin settings to HTML.

Page size and orientation

Word stores page size information in the size attribute. Browsers that support the CSS-PX "size" standard will properly format the page dimensions of printed Word documents. Word exports the page size information in the measurement unit selected by the user. Because the CSS-PX defaults to the size:auto attribute, Word always specifies the absolute page dimensions when saving to HTML, even for default page dimensions

Word treats page orientation and page dimensions as independent settings, so the mso-page-orientation style attribute describes the section's orientation. Word only uses this attribute for the non-default value landscape.

The following example shows how Word saves page size and orientation to HTML.

@page Section1 { size: 8.5in 11in; mso-page-orientation: landscape }

Paper source

Word uses the mso-paper-source style attribute to store paper source information. This style attribute has two possible values, specifying the paper source for the first page and the one for all other pages. If they are the same, only the first value needs to be listed. This style attribute is not exported to HTML when the first page paper source matches the CSS default value of 0.

Page numbering

For each section, Word page numbering settings are saved as HTML using the following style attributes:

Line numbering

For each section, Word line numbering settings are saved as HTML using the following style attributes:

Columns

Word saves column settings to HTML, but columns do not display in the browser window because HTML and CSS do not yet support multicolumn layout. For each section, Word column layout settings are saved as HTML using the mso-columns style attribute. The syntax for this attribute follows, where integer is the number of columns; widthN is the width of the nth column and spacingN is the width of the nth spacing between columns, from left to right.

mso-columns:integer || even | not-even || widthN spacingN

The number of width values depends on whether column width is fixed:

The Word column separator is saved in HTML using the mso-column-separator style attribute.

The following sample shows a 3-column layout where column one is 3 inches wide, column two is 1 inch wide, and column three is 2 inches wide. There is a .25 inch space between each column and a separator line between.

@page Section1
	{size:8.5in 11.0in;
	margin:1.0in 1.0in 1.0in 1.0in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;
	mso-columns:3 not-even 3.0in .25in 1.0in .25in 2.0in;
	mso-column-separator:solid;
	mso-paper-source:0;}

When importing HTML, Word performs some error correcting to protect against a mismatch between the number of columns and the number of width values. The width column number value takes priority. Extra width values are ignored. Missing width values are generated by repeating the last width value.

Headers and footers

Headers and footers are section-level settings. Because they contain richly formatted data that must be stored in a separate subdocument, they are covered in the Headers and Footers topic.

Page borders and shading

Page borders and shading can be applied to a section but are not displayed in the browser. Page borders are very similar to paragraph borders, which Word extends to apply borders to the page context. Word saves most of the page border settings to HTML in exactly the same way as paragraph borders, except that the style is applied to the @page definition for that section instead of a P element. For a more detailed discussion of borders and shading and their elements, see Borders and Shading.

For each section, Word page border settings are saved as HTML using the following style attributes:

Word also offers art for page borders that is not available for other types of borders. The mso-border-art style attribute sets the style of the four borders. It can have one to four values, and the values are set on the different sides, similar to the border-width attribute. If multiple values are used, they can only consist of none and a single value representing the border art. The border color of art borders is always Auto, which Word does not save as HTML. The border width is a variable and is saved in HTML using the border-width attribute.

Forms protection

If the DocumentProtection element appears in the header with the forms value, it is possible for some sections to be protected and others not. In this case, Word adds the mso-forms-protection style attribute to the @page definition for the section. The mso-forms-protection style attribute has a default value of yes and it is only listed with the value no in the @page definition of sections that are not protected.

Vertical text justification

Word has a section-level setting to align text vertically on the page in different ways. This is saved as HTML using the mso-vertical-page-align style attribute. The value names for this attribute follow the convention used for the vertical-align attribute.

Suppression of endnotes

Word has a section-level setting to suppress display of endnotes at the end of a section. This is saved as HTML using the mso-endnote-display style attribute.

For information about the style attributes that Office uses and their possible values, see the Style Attributes topic.