Page Areas | Cascading Style Sheets: Designing for the Web (3rd Edition)

Before the browser can put content on paper, it needs to know the dimensions of the area that can be printed on. This area depends on the size of the paper that is being used and the width of the margins around the edges of the paper. Also, the browser needs to know if the page should be printed in "portrait" or "landscape" mode (see Figure 12.3). After all this is established, the page area has been defined and printing can start.

Figure 12.3. Portrait and landscape pages.

Page Selectors and Margins

CSS provides designers with a special selector and a set of properties to define the page area. No element in HTML represents a page (because HTML has no concept of pages) and, therefore, we have no selector to attach the properties and values to. Therefore, a special selector has been introduced in CSS2:

 @page { margin: 1in }

The @page selector selects pages. Declarations inside the curly braces apply to pages on which the document is printed. This example sets the margins on all four sides to 1 inch.

Only a limited set of the CSS properties can be used in combination with the page selectors. The list includes all margin properties and the size property (which is described later). This means that, for example, the color property is not valid so you can't make all text on a certain page have a certain color.

Margins that are set on the page will be in addition to margins specified on elements. Consider this example:

 <HTML>   <STYLE TYPE="text/css">     @page { margin: 1cm }     BODY { margin: 1cm }     H1 { margin: 0 }   </STYLE>   <BODY>     <H1>J'accuse</H1>   </BODY> </HTML>

First, the page has a 1 cm margin on each side. Second, the BODY element also has a 1 cm margin on each side. The result is a 2cm margin on the left and right side of the page, and a 1 cm margin on the top (see Figure 12.4).

Figure 12.4. How page margins and element margins add up on top of a page. The horizontal margins are simply added, while adjacent vertical margins are collapsed.

The top margin is smaller than the left and right margins because of the collapsing of vertical margins, which we discussed in Chapter 8, "Space Around Boxes." The fact that one of the margins is a page margin and not an element margin does not stop the margins from collapsing.

Left and Right Pages

When printing double-sided documents, it's common for "left" and "right" pages to have different margins. This can be expressed in CSS with left and right pseudo-classes:

 @page { margin: 1in } @page :left { margin-left: 2in } @page :right { margin-right: 2in }

This style sheet results in left pages having a 2 inch margin on the left side of the page and a 1 inch margin on the right side of the content. For right pages, the numbers are switched so that left and right pages are symmetrical (see Figure 12.5).

Figure 12.5. Left and right pages often use a symmetrical layout.

Just as there can be conflicts between normal selectors in CSS, there can be conflicts between @page selectors. In the previous example, there is a conflict between the first rule, which sets all page margins on all pages, and the other two rules, which specifically set the margins for left and right pages. Just as with normal selectors, conflicts between page selectors are resolved through specificity: Page selectors with pseudo-classes on them are more specific than page selectors without them. Therefore, the last two rules win over the first rule.

The :left and :right pseudo-classes work even if the document is printed on a single-sided printer. There are two reasons for this. First, it is often impossible for the browser to know if a printer is single- or double-sided. Second, a set of sheets printed on a single-sided printer may later be transferred into a double-sided publication (for example, using a double-sided copying machine).

First Pages

Often, the first page of a document uses a different page box from the rest of the pages. A third pseudo-class addresses only the first page:

 @page :first { margin-top: 4in }

Just as the @page :left and @page :right pseudo-classes are more specific than the plain @page selector, the @page :first selector is more specific than :left and :right. Intuitively, this makes sense: Even if the first page of a document also is a "right" page (which is true in most Western books), the fact that it's the first page is more significant than it being a right page.

Units for Page Margins

The examples in the previous section used inches and centimeters to describe the width of the page margins. These are absolute length units that precisely describe how wide the margins should be. Absolute units work well when you know the exact dimensions of the sheets that are being printed. On the Web, this is generally not the case. If your documents are universally accessible, people from different parts of the globe will print the documents, and paper sizes vary depending on where you are.

In the U.S., the "letter" size (8.5in. by 11in.) is the most common, while "A4" (21.0cm by 29.7cm) is widely used in the rest of the world. One inch is equal to 2.54 centimeters, so the A4 page is slightly higher and narrower than its American cousin.

To make sure that documents print well on all paper sizes, we recommend using percentage units over absolute units when describing margins:

 @page { margin: 10% }

Percentage value calculations are based on the size of the paper. So, if the document is printed "portrait mode" in Europe, the margins will be 21mm on each side horizontally and 29.7mm vertically. On U.S. letter, the margins will be 0.85in. horizontally and 1.1in. vertically. Figure 12.6 shows the page boxes of A4 and U.S. letter page sizes with 10% margins.

Figure 12.6. A4 and U.S. letter page sizes. The stippled boxes indicate the page box of a 10% margin.

The amazing "em" unit, which was given extensive coverage in Chapter 3, "The amazing em unit and other best practices," doesn't work when setting length values in the page box. The reason is that the page doesn't know anything about fonts only elements do and therefore has no font size to relate to. (This will change in CSS level 3, which has provisions for adding page numbers and other text to a page box.)