Internet Explorer 8 is fully compliant with the Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) specification, including all printing (or "paged media") features. Using CSS print styles, you can control how your Web page will appear when users transfer the page's contents to paper (or other medium) using a printer (or any output device listed in the user's Print dialog box). CSS print styles enable you to specify the following print parameters, all of which are described and demonstrated in this article:

• page margins (including specifying different page margins for the first page, or for the left and right pages of double-sided documents)
• page breaks (including forcing or forbidding page breaks before, after, or inside a generated box)
• orphans (specifying the minimum number of lines of a paragraph left at the bottom of a page)
• widows (specifying the minimum number of lines of a paragraph left at the top of a page)

Note that, for the most part, these CSS print styles require Internet Explorer 8 or later. Prior versions of Internet Explorer contained incomplete support for CSS print styles. We'll point out which versions of Internet Explorer support each CSS print style as they're described.

<meta http-equiv="X-UA-Compatible" content="IE=8" />

This topic contains the following sections:

• Page Margins
• Page Breaks
  • Specifying Page Breaks Before or After Content
  • Forbidding Page Breaks Inside Content
• Orphans and Widows
• Conclusion
• Related Topics

Page Margins

You specify page margins for printing in CSS by using the @page rule. You can specify margins for all pages, for just the first printed page, or for just the left (of the binding) or right (of the binding) pages of a double-sided document. You can specify top, bottom, left, and right margins in one of the supported CSS Length Units Reference (for instance, em units or centimeters (cm)). The basic syntax is as follows:

@page selector {
    rules;
}

The selector is optional and can be one of three selectors (:first, :left, or :right). The rules can be any combination of the margin properties—margin, margin-top, margin-bottom, margin-right, and margin-left—set to a supported value. Omitting a selector applies the rules to all pages.

For example, the following @page rules will result in a left margin of 2 inches (in) on just the first page. Thereafter, every left (of the binding) page, starting with page 2, will have a left margin of 1.5in and a right margin of 1in; while every right (of the binding) page, starting with page 3, will have a left margin of 1in and a right margin of 1.5in. Keep in mind that these margins will apply even if the user has a single-sided (non-duplex) printer.

@page :first {
    margin-left: 2in;
}

@page :left {
    margin-left: 1.5in;
    margin-right: 1in;
}

@page :right {
    margin-left: 1in;
    margin-right: 1.5in;
}

This feature requires Microsoft Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Click Show Me to see these @page rules at work. (To avoid actually printing the pages, right-click the Web page, and then click Print Preview. Note that each sample linked from this page has been written to demonstrate the specified behavior on sheets of US Letter-sized paper. Feel free to save the files to your hard disk and alter their content for your country or region's standard paper size.)

Compatibility note The @page rule and its three selectors are available in Internet Explorer 8 and later, when the page is rendered in IE8 mode or higher. For more information on document compatibility modes, see Defining Document Compatibility.

Page Breaks

Web pages are continuous; content flows down the page, and users must scroll to view more. To transfer this continuous content to paged media such as paper, the content must first be "chunked" to fit onto multiple sheets. By default, once a sheet is filled with content, the content continues onto the next sheet where it left off. To improve upon the default model, though, CSS 2.1 specifies support for page-break properties that enable you to dictate how the continuous content of your site is chunked and arranged onto physical sheets. There are three page-break properties: page-break-before, page-break-after, and—newly supported in Internet Explorer 8—page-break-inside.

Specifying Page Breaks Before or After Content

The author of a Microsoft Word document can force a printed page to end and another to begin by inserting a page break. As a Web page author, you can do essentially the same thing by using either the page-break-before or page-break-after property. This comes in handy when you have a passage of text or an image that you want to ensure starts on a new page, or has a page of its own.

You can instruct a page break to always occur before or after a given element or to never occur before or after a given element, if possible. The basic syntax is as follows:

element { 
    page-break-before: value; 
}

element { 
    page-break-after: value;
}

The value is optional, and can be one of six:

• always forces a page break before or after the element
• avoid forbids a page break before or after the element, if possible
• auto neither forces nor forbids a page break before or after the element; this provides the same effect as a normal, unchanged printout
• left and right behave the same way as always
• inherit means the property is given the value of the same property for the element's parent

Omitting a value is equivalent to using the auto value.

As an example, take a look at the following snippet.

#booktitle {
    page-break-after: always;
}
.bookchapter {
    page-break-before: right;
}
.chapdesc {
    page-break-after: always;
    font-size: medium;
    font-style: italic;
    color: purple;    
}
.caption {
    page-break-after: avoid;
}

The idea behind the page breaks defined here is to create a page that will appear somewhat like a book or a formal paper when printed. Therefore, the following selectors are available:

• The booktitle ID selector represents the title of the book. We want it to stand on its own, so it's instructed to always break after the title.
• The bookchapter class selector represents the name of each chapter of the book. It forces a page break before its content.
• The chapdesc class selector represents an inline description of each chapter, intended to immediately follow the chapter name. It forces a page break after its content.
• The caption class selector is intended for a section of text that should always appear on the same page as something it describes (for example, a caption preceding a table or an image). For that reason, a page break is forbidden after that element. Keep in mind that, depending on the length of your content, the avoid value may not work as you intend. Test your page thoroughly.

This feature requires Microsoft Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Click the Show Me button to see the same sample as before, with these page-break selectors added. Right-click and choose Print Preview to see what effect they have.

Compatibility note: The page-break-before or page-break-after properties have been available since Microsoft Internet Explorer 5. However, avoid functionality is available only in Internet Explorer 8 and later, when the page is rendered in IE8 mode or higher. For more information on document compatibility modes, see Defining Document Compatibility.

Forbidding Page Breaks Inside Content

If you have a section of text or other content that you don't want to be broken up by a page break, you can accomplish this by using the page-break-inside property. The basic syntax is as follows:

element { 
    page-break-inside: value; 
}

The value is optional, and can be one of the following three:

• avoid forbids a page break inside the element, if possible
• auto neither forces nor forbids a page break inside the element; this provides the same effect as a normal, unchanged printout
• inherit means the property is given the value of the same property for the element's parent

Omitting a value is equivalent to using the auto value.

As an example, look at the following code.

blockquote.importantquote {
    page-break-inside: avoid;
}

In this case, when we have a blockquote that is assigned the importantquote class, it should not be divided by a page break. Of course, if the quote was longer than one page, it would have to be broken for the entire quote to be printed.

This feature requires Microsoft Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Click Show Me to see the same sample as before, with this page-break selector added. Right-click and choose Print Preview to see what happens. Note that the paragraph before the blockquote was assigned the caption class from before, so it will always remain on the same printed page as the quote, even if the quote is moved to avoid page breaks.

Compatibility note The page-break-inside property is available in Internet Explorer 8 and later, when the page is rendered in IE8 mode or higher. For more information on document compatibility modes, see Defining Document Compatibility.

Orphans and Widows

You may recognize the terms "orphans" and "widows" from desktop publishing. An "orphan" is the first line of a paragraph when it appears alone at the bottom of a page. Similarly, a "widow" is the last line of a paragraph when it appears alone at the top of a page. In publishing, lone lines of text at the top or bottom of a printed page full of text are generally considered undesirable.

CSS provides a mechanism for defining whether orphans or widows are allowed, as well as how many lines each is allowed to be—the orphans and widows properties. The basic syntax is as follows:

element { 
    orphans: value_o; 
    widows: value_w;
}

The value_o is optional and represents the minimum number of lines allowed at the bottom of a printed page. The value_w is also optional and represents the minimum number of lines allowed at the bottom of a printed page.

Omitting a value is equivalent to setting it to 2. Also, the widows property has precedence over the orphans property. This means that if the value for the widows property causes the number of lines at the bottom of the previous page to drop below the minimum value for orphans, the orphans value will be ignored, in favor of the widows value.

As an example, look at the following code.

p {
    widows: 3;
    orphans: 3;
}

This code example specifies that no fewer than three lines of paragraph text (text within a p element) are allowed at either the bottom or top of a printed page.

This feature requires Microsoft Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Click Show Me to see the same sample as before, with these properties added. Right-click and select Print Preview to see what effect they have.

Compatibility note The orphans and widows properties are available in Internet Explorer 8 and later, when the Web page is rendered in IE8 mode or higher. For more information on document compatibility modes, see Defining Document Compatibility.

Conclusion

You've now learned techniques for optimizing your Web pages for printing by using CSS and Internet Explorer 8. Watch this space for more CSS How-to articles in the future.

Related Topics

• CSS Compatibility and Internet Explorer
• CSS Improvements in Internet Explorer 8
• Printing and Style Sheets