Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
You can specify rules that apply only when the content is presented on fixed-size pages such as PDF output. In general, the rule has this format:
@page { … }
The rules inside the braces are applied to paged media.
It is important to distinguish between pages and sheets. For example, “two-up” printing places two page boxes on a physical sheet.
You can also create named page types with a rule of this format:
@page name { … }
See Section 23.6, “The page attribute: Selecting a page type” for more information
on named pages.
If you want some rules to apply only to odd pages, even
pages, or the first page of the set, use this option to
the @page at-rule:
@page page-selector { … }
where the page-selector
:right for right-hand pages.
:left for left-hand pages.
:first for the first page.
You can use margin properties inside the @page rule to define the margins of the page.
For example, this rule would set up a page with one-inch
margins all around:
@page { margin: 1in; }
You may also use the individual margin properties such as
margin-left to set different values for
different margins. See Section 15.7, “The margin properties”.
The declarations described below may appear only
inside an @page rule. They apply only to
presentation of the content on fixed-size pages.
This property allows you to specify the size of a page box. There are several forms:
size: width height;
Specifies the absolute size of the page box as two dimensions (see Section 6.1, “Dimensions”). For example, to specify a sheet 20cm wide by 33cm high:
@page { size: 20cm 33cm; }
size: auto;
Sets the page size to the sheet size.
size: portrait;
Selects portrait orientation, with the longer sides vertical.
size: landscape;
Selects landscape orientation, with the longer sides horizontal.
Three properties, allowed only inside @page
at-rules, let you control where page breaks fall.
page-break-before
Specifies when page breaks can occur before some element. Values allowed:
always: Always start a new
page before this element.
avoid: Avoid page breaks
before this element.
right: Insure that this
element starts on a new, right-hand page.
left: Insure that this
element starts on a new, left-hand page.
page-break-after
Specifies whether page breaks are allowed after
some element. Values are the same as for page-break-before: always
means always start a new page after the element;
avoid prevents a page break after
the element; right forces the
following element to start on a new right-hand
page; and left forces the following
element to a new left-hand page.
page-break-inside
To prevent page breaks inside a given element, use this declaration:
page-break-inside: avoid;
An orphan is one or more lines by themselves at the bottom of the page. It is often considered bad typesetting practice to have single-line orphans, and some shops don't even like two-line orphans.
To suppress orphans with n
orphans: n;
For example, if you want to make sure that a p (paragraph) element has no orphans of three
lines or fewer:
@page
{ p { orphans: 3; }
}
A widow is the opposite of an orphan (see Section 23.3, “Orphan control”): one or more lines by themselves at the top of a page.
To suppress widows of n
widows: n;
For example, to suppress single-line widows inside an
li element:
@page
{ li { widows: 1; }
}
You can specify two additional decorations with the marks property.
marks: crop;
Adds crop marks to the printed output. These marks show a print shop where the physical edge of the paper will appear.
marks: cross;
Adds alignment targets to the printed output. These marks appear on every sheet in the same position, so a print shop can line up sheet images.
You can get both these decorations with this rule:
marks: crop cross;
The page attribute, allowed only inside an
@page at-rule, allows you to specify that
some element will appear only on a certain page type.
The general form:
page: page-name
where the page-name is specified just
after the “@page” in the
at-rule.
For example, suppose you want all table
elements to be displayed on a page with landscape
orientation. First you define a new page-name that
specifies a landscape page:
@page land { size: landscape; }
Then you connect the table element
with that page name using this rule:
table { page: land; }