Next / Previous / Contents / TCC Help System / NM Tech homepage

23. The @page rule: Paged media

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 is one of:

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.

23.1. The size property for paged media

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.

23.2. Controlling page breaks

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;

23.3. Orphan control

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 lines, use this declaration:

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; }
}

23.4. Widow control

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 lines or fewer, use this declaration:

widows: n;

For example, to suppress single-line widows inside an li element:

@page
{ li { widows: 1; }
}

23.5. Crop marks and alignment targets: the marks property

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;

23.6. The page attribute: Selecting a page type

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; }