introduction ~ selectors ~ properties ~ advanced ~ real world CSS cascade & inheritance | font specification | generated content | media | printing

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

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.

• To specify properties for every page, the @page rule has the form @page {/* properties declared here */}
• To specify the properties for left hand side pages, the @page rule has the form @page:left {/* properties declared here */}
• To specify the properties for right hand side pages, the @page rule has the form @page:right {/* properties declared here */}

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

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.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

page

What it does

page identifies the @page rule that should apply to the selected element. page provides the name of the @page rule to be used. @page rules can be named by simply adding the name of the page after the @page keyword. Above we saw the example of a page called figures, to be used to ensure figures are printed in landscape format. This @page rule was

Now we want any of our "figures" to use this rule when they are printed. To do this, we use the page property.

img.figures {
page: figures
}

This says that images of class "figures" (i.e. elements marked up as <img class="figures">) should be printed using the @page rule called "figures".

Possible values

page takes the value auto or an identifier value.

auto specifies that the browser may print the element on the current page.

An identifier is the name of the @page rule to be used for printing this kind of element. An identifier comprises only upper and lowercase characters, hyphens and the characters 0 to 9. An identifier must commence with an upper or lower case character (not a number or a hyphen). Identifiers must not include spaces or underscore characters.

Default values

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

Is it inherited?

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

Browser support

See Westciv CSS Guide, or our CSS Browser Support Table.

Page specific properties

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

• those that relate to the printed page itself, that is the size, the margin and the marks properties. These can only be applied to @page rules. Here we will refer to these as Page properties.
• Those that relate to how the content is displayed within those pages. These properties are the page-break-before, page-break-after, widows and orphans properties. These can be applied to any elements. Here we will refer to these as Page break properties.

Page properties

Size

What it does

The size property of an @page rule allows the printing context for a web page to be established. The size of a page can be either absolute, that is specified by a width and height (see below for details) or relative (specified by one of the keywords auto, landscape and portrait.)

Possible values

size can be specified as either an absolute value, or as a relative value using keywords. Where a relative value is assigned, the browser can scale the content to fit the page size. Where an absolute value is assigned the browser must determine how to place content that is smaller than the size of the page.

Absolute values

Where an absolute value is to be specified, the size is assigned using length values. The values for width and height respectively are separated by simply a space. For example

@page {size: 21.0cm 29.7cm} /* A4 page dimensions in cm */

As a page has no concept of fonts, length units cannot be em and ex units.

Keywords

The following keywords are defined by the CSS2 specification.

• auto The page box will be set to the size and orientation of the target sheet (ie, as the page has been setup).
• landscape Overrides the target's orientation. The page box is the same size as the target, and the normal direction of layout runs parallel to the longer target side.
• portrait Overrides the target's orientation. The page box is the same size as the target, and the normal direction of layout runs parallel to the shorter target side.

Default values

By default the size of a page is auto.

Browser support

See Westciv CSS Guide, or our CSS Browser Support Table.

marks

What it does

For professional level printing, crop marks indicate where the page is to be cut. The marks property enables crop marks to be set for a page. Crop marks only appear where absolute values are used for size. Where a relative value is used, the crop marks appear outside the content, and as this is scaled to fit the target page, no crop marks appear on the printed page.

Possible values

marks is specified by one of several keywords

• crop Crop marks indicate where the page should be cut.
• cross Cross marks (also known as register marks or registration marks) are used to align sheets.
• none Don't render any special marks.

Default values

By default the marks of a page is none.

Browser support

See CSS Guide, or our CSS Browser Support Table.

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

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.

Browser support

See CSS Guide, or our CSS Browser Support Table.

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

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.

• auto Neither force nor forbid a page break before the element.
• always Always force a page break before the element.
• avoid Avoid a page break before the element.
• left (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a left page.
• right (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a right page.

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.

Browser support

See Westciv CSS Guide, or our CSS Browser Support Table.

page-break-after

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.

• auto Neither force nor forbid a page break after the element.
• always Always force a page break after the element.
• avoid Avoid a page break after the element.
• left (For rendering to left and right pages.) Force one or two page breaks after the element so that the next page is formatted as a left page.
• right (For rendering to left and right pages.) Force one or two page breaks after the element so that the next page is formatted as a right page.

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.

Browser support

See CSS Guide, or our CSS Browser Support Table.

page-break-inside

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.

• auto Neither force nor forbid a page break inside the element.
• avoid Avoid a page break inside the element.

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.

Browser support

See Westciv CSS Guide, or our CSS Browser Support Table.

orphans

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.

Browser support

See Westciv CSS Guide, or our CSS Browser Support Table.

widows

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.

Browser support

See CSS Guide, or our CSS Browser Support Table.

next: real world CSS