Printing With Style

Please note, this article is best read if you already understand how to implement printer styles for CSS. If you are unsure of how to implement them I recommend reading my previous CSS print article first.

@page: Changing page attributes

There are two different types of @page rules: general ones which apply to all pages printed off except for those pages which are the results of specific @pages applied to markup elements. @page rules allow a person to dictate the size, orientation, margins and other properties of printed pages.

General @page selectors take the form @page { property: value; }, while specific ones are given a name, for example largetable, in the format @page largetable { property: value; }. There are also 3 pseudo classes which can be applied to pages, taking the form @page :pseudoclass { property: value; }. The three pseudo classes you can choose from are: left, right and first. The pseduo class first is more specific than, and thus overrules, the pseuo classes left and right.

To use specific @page rules, in your print style page set whichever elements you want to appear on these special pages to have the property page followed by the name of the specific page type you want it to be displayed on. For example if you want long tables in an appendix to appear on a separate page you could set the rules as follows.

@page appendixtable {
    size: portrait;
     margin: 1cm;
}
table.appendix {
     page: appendixtable;
}

@page properties

The @page property size is probably the most powerful part of the @page rule. It allows you to specify the orientation of the pages, or the size you want content to take up within pages. It can take values of portrait, landscape, auto, inherit, or the length and width of a page. If only one value is specified for the lengths, that becomes the width and height. If two are specified the first is the page's width, the second is the height. If you use lengths, you may not specify them in ems, exs or percentages.

You may also set margins for page boxes, with the property margin. Margins may not be set in ems or exs.

Cross or crop marks can be set to render just outside a page box's edge (the page box is the area defined by the size property). The allowed values for the marks property are crops, cross, inherit, or none. Crop marks are marks are used to show where to cut a page, while cross marks are used to align pages.

Page breaks

You can also set page breaks in a few different ways through CSS2. Three of these methods, who are very similar are page-break-before, page-break-after and page-break-inside. Page-break-inside can take the values avoid, inherit and auto. The page-break-inside rule applies to the children of the element it is set on. The value avoid tells the browser to avoid a page break inside that element if at all possible.

Page-break-before and page-break-after can take all the values of page-break-inside, and also the values, always, left, and right. A value of always tells the browser always to have a page break there. The values left and right tell the browser to put a page break there, if the next page will then be that value, or two if it will be the opposite value. So if a value of left was set and the next page would normally be a right page, two page breaks are inserted instead of one.

The other way of controlling page breaks is with the properties orphans and widows. These properties take the values inherit or an integer value. If the number of lines of text which will remain on the bottom of a page is less than the widows value,or the number of lines of text on the next page will be less than the orphans values, then the whole container will be moved to the next page.

If you want to read more about printing in CSS2, go to the W3C's official page.