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.
- 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
@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.
- those that relate to the printed page itself, that is the margin 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.
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.
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.
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.
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.
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.
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.
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.
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.