HTML and CSS Reference
In-Depth Information
Page Pseudo-classes
The
@page
rule supports three pseudo-classes, namely:
:first
:left
:right
A web page is a single, continuous entity, but when printed, it often covers several pages of print. These
pseudo-classes let you specify different margins for printed pages. As their names suggest,
:first
is for the first
page, and
:left
and
:right
are for subsequent pages. Odd-numbered pages use the
:right
pseudo-class, and
even-numbered ones the
:left
pseudo-class.
The following
@page
rules create a two-centimeter margin around all sides of the page, but leave a wider
margin for binding on the appropriate side of the left and right pages (assuming they're printed doubled-sided):
@page {
margin: 2cm;
}
@page :left {
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
}
Not
■
For right-to-left languages, such as Arabic and Hebrew,
:left
is for odd-numbered pages and
:right
for
even-numbered ones.
Controlling Where to Break Content
It can be infuriating when printing a web page to discover that a heading is printed at the bottom of a page, and
all the information relating to that heading is on the next page without anything to identify it. To avoid such
situations, CSS provides the five properties listed in Table
16-3
.
Table 16-3.
Page Break Properties
Property
Initial Value
Inherited
Description
page-break-before
auto
No
Specifies whether a new page should be started before
a particular element.
page-break-inside
auto
No
Specifies whether a new page can be started in the
middle of an element.
page-break-after
auto
No
Specifies how to handle page breaks after a
particular element.
(
continued
)
