Printing and Style Sheets

  • Article

The style and link elements support the MEDIA attribute, which defines the output device for the style sheet. Values for MEDIA are screen, print and all. The default is screen, so not setting the MEDIA attribute causes the style sheet to always be applied to the page for the screen as well as printing. The print value specifies that the style sheet is used when the page is printed; this value does not affect how the document will be displayed onscreen. The all value determines that the document is formatted for both the screen and print.

Note  All filter styles, including visual effects filters, are ignored when printing. Windows Internet Explorer renders this content for printing with any applicable text style properties.

Setting Page Breaks for Printing

You can control the placement of page breaks in your documents by using the page-break-before and page-break-after attributes. These attributes indicate when to break to a new page when printing the document and on what page (left or right) to resume printing. These attributes are useful when you want to print long documents into logical sections.

For example, the following document defines a class "page" in a style sheet and uses it to set page breaks in the document.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: Page Breaking</title>
<style type="text/css" media="print">
div.page {
    page-break-before: always;
}
</style>
</head>

<body>

. 
content on page 1 
.
<div class="page">
    . 
    content on page 2 
    . 
</div>

</body>

</html>

You can set page breaks from within a script by setting the pageBreakBefore and pageBreakAfter properties on the style object. The following example sets a page break immediately before each h1 element in the document.

var coll = document.all.tags("h1");
for (i=0; i<coll.length; i++) {
    coll(i).style.pageBreakBefore = "always";
}