CSS For Printing

Paged media include printed pages or pages for an overhead, usually the former. The most common accomodation for paged media on the World Wide Web is print-friendly pages, simplified webpages that don't print unnecessary backgrounds, navigation menus, or so on.

Because of CSS, we no longer need to rely on maintaining simplified webpages along with our screen-friendly pages; we can simply have a print-friendly stylesheet. I've already suggested making the use of display:none; to get rid of things that don't need to be printed, and it is perfectly acceptable to have a page look completely different printed out than it does when viewed on the screen. But there are still some CSS properties that are solely for paged (which includes printed) media.

Page Selectors

There is a special selector that deals solely with pages: @page. This is known as the @page rule. An example of this is to give a 1-inch margin all the way around the page (which is required for many academic reports):

Setting A Page Margin

@page{margin:1in;}

It is very important to remember that when you're printing, the only thing that this rule can control are margins. Furthermore, the measurements em and ex do not apply.

Page Psuedo-Classes

There are three psuedo-classes that are used for a page:

:first: This refers to the first page, which can be set up like a title page.
:left: This refers to the left-hand pages. For example, when you open a book, there's a page on the left and a page on the right. Usually, even-numbered pages are on the left and odd-numbered pages are on the right. This changes, of course, if you're reading right-to-left, though.
:right: This refers to the right-hand pages. Note that this and :left work best for double-sided printing.

These can be used to set different margins for the first page, right-side pages, and left-side pages.

Setting Multiple Page Margins

@page{margin:1in;}

@page :first{margin:2in}

@page :left{margin-right:1.5in}

@page :right{margin-left:1.5in}

It is just as important to note that page setups for browsers are likely to override this.

Page Breaks

When your page breaks off, you don't want a header at the bottom of a page with the content starting at the top of the next. It looks silly. So, CSS 2.1 offers the properties.

Breaking Before or After An Element

Properties:	page-break-before page-break-after
Default value:	`auto`
Inherited:	No

These two properties describe whether page breaks should go before or after an element. They share the same set of values:

auto: This is the default value. The occurs wherever natural
always: There should always be a page break here
avoid: Avoid a page break here.
left: Break to the next left page (even if the next right page is blank).
right: Break to the next right page (even if the next left page is blank).

In many browsers, left or right is treated as always.

Breaking Inside An Element

Property:	page-break-inside
Default value:	`auto`
Inherited:	No

This decides whether or not the content of an element is broken up by a page break. It has two values:

auto: This is the default value. The occurs wherever natural
avoid: Avoid a page break here.

Not all browsers support this, and sometimes the content of the element this is applied to can take up more than one page anyways.

Widows and Orphans

Properties:	widows orphans
Default value:	2
Inherited:	Yes

A widow in this context is a line at the top of the page, with the rest of the content at the end of the previous page.An orphan is a line at the bottom of a page with the rest of the paragraph at the start of the next.

The widows and orphans properties specify how many lines must be either at the bottom or top of a page when an element is split by a page break. The value must be an integer (and be positive)

Not all browsers support this.