Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

complete css guide

Printing

CSS2 introduced a mechanism for closer control over printing web pages that are styled using style sheets. In this section, we'll look at how this works.

There are two aspects to consider with printing. The page, and the contents of the page.

For the page, we need to consider what size it is, whether it is oriented as a portrait or landscape, what printing marks might be required, and what margin it has.

For the content we need to worry about where pages break, and what is done with widow and orphan lines of text (we'll explain these terms below).

In CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking.

The @page rule

Browser support

Get browser support information for @page in the downloadable version of this guide or our browser support tables.

At the heart of printing in CSS2 is the @page rule. This is similar to the @media rule, which you can learn about in the section on Media.

The @page rule defines a context for printing. Essentially it describes the paper sheet that the web page is going to be printed on.

@page rules work very much like the standard statements of a style sheet, though they take properties specific to pages that no other statement can use, and can also have margins specified using the familiar margin properties.

The properties of a page can be applied to every page, or differently to left and right hand side pages. When printing for bound publications, the margins on the left and right hand sides are usually different to take into account the center binding.

Named pages

@page rules can be named, which, in conjunction with the page property we will see below, allows particular elements to be printed on particular kinds of pages (that is pages set up in a particular way). For instance, its easy to set up an @page rule for printing figures. Suppose we want to print any figures in landscape format. We can set up a named page like this

@page figures {

size: landscape

}

The name of a page is simply placed after the @page keyword and before the properties for the rule. Below we will see how the page property tells the browser which @page rule to use to print an element.

Page specific properties

There are two sets of properties associated with how pages will actually be printed.

margin, margin-left, margin-right, margin-top, margin-bottom

Browser support

Get browser support information for margin in the downloadable version of this guide or our browser support tables.

What it does

Margins are the only general properties from CSS that can be applied to pages.

The margin properties set the top, left, bottom, right and all margins respectively.

Possible values

Margins can be specified as either a percentage, a length or using the keyword auto.

Margins can be negative values.

Percentages

A percentage margin value sets the affected margin to that percentage of the width or height of the page. For instance, a margin-right: 20% sets the width of the right margin to 20% of the width of the page. margin-top: 20% sets the height of the top margin to 20% of the height of the page.

Length values

We cover length values in detail in our section on values. With length values, you can set the margin to an absolute value, or a value relative to the size of the element itself. Note that because a page has no concept of fonts, the em and ex units cannot be used to set the margin of a page.

Default values

If no margin value is specified, the margin of a page is zero.

This is one of the slickest designed pieces of sofware I have ever heard of.

Richard Clement, Aspen Pharmacare

Page breaking properties

When content is to be printed, we need to worry what happens about page breaks. Customarily, new sections begin on new pages. An author may want a page break inserted before a table or illustration.

CSS2 provides two properties which allow control over where the page will break when it is printed. These properties, page-break-before and page-break-after, can be applied to any element. They might be used to create a page break before headings of level one, or only headings of a certain class (for instance class="section").

A further problem when printing documents arises when only a few lines of a paragraph can fit at the bottom of a page (these are referred to as orphans) or only a few lines remain to be printed at the top of a page (these are referred to as widows). CSS2 provides two properties to specify what occurs with widow and orphan lines.

page-break-before
Browser support

Get browser support information for page-break-before in the downloadable version of this guide or our browser support tables.

What it does

page-break-before specifies how or whether a page breaks before an element. You can specify that a page should not break before a certain element, or that it should, and that the next page should be a left or right hand page.

Possible values

page-break-before can take one of several keyword values.

Default values

If no value is specified, the page-break-before is set to auto.

Is it inherited?

An element does not inherit the page-break-before property of the element which contains it.

page-break-after
Browser support

Get browser support information for page-break-after in the downloadable version of this guide or our browser support tables.

What it does

page-beak-after controls how or whether a page breaks after an element. You can specify that a page should not break after a certain element, or that it should, and that the next page should be a left or right hand page.

Possible values

page-beak-after can take one of several keyword values.

Default values

If no value is specified, the page-beak-after is set to auto.

Is it inherited?

An element does not inherit the page-beak-after property of the element which contains it.

page-break-inside
Browser support

Get browser support information for page-break-inside in the downloadable version of this guide or our browser support tables.

What it does

page-break-inside controls whether a page breaks inside an element. You can specify that a page should not break inside a certain element.

Possible values

page-break-inside can take one of two values.

Default values

If no value is specified, the page-break-inside is set to auto.

Is it inherited?

An element does not inherit the page-break-inside property of the element which contains it.

orphans
Browser support

Get browser support information for orphans in the downloadable version of this guide or our browser support tables.

What it does

orphans specifies the minimum number of lines of an element that must be left at the bottom of a page when the page breaks. If fewer than this number of lines can be placed at the bottom of the page, the page breaks before the element and the entire element is printed on the following page.

Possible values

orphans takes an integer value. This value specifies the number of orphaned lines permitted.

Default values

If no value is specified, the orphans is set to 2.

Is it inherited?

An element does inherit the orphans property of the element which contains it.

widows
Browser support

Get browser support information for widows in the downloadable version of this guide or our browser support tables.

What it does

widows specifies the minimum number of lines of an element that must be left at the top of a page when the previous page breaks. If fewer than this number of lines can be placed at the top of the page, the page breaks before the element and the entire element is printed on the following page.

Possible values

widows takes an integer value. This value specifies the number of widowed lines permitted.

Default values

If no value is specified, the widows is set to 2.

Is it inherited?

An element does inherit the widows property of the element which contains it.

Style Master CSS Editor

Web Directions Conference