@page

The @page property allows you to define the size of a page, the orientation and any margins that apply to the page. This is called a page box. You use:

• The size property to set the size of the page
• The margin property to set the width of the margins

There is no padding and no borders.

The size of a page may either be absolute or relative. Relative pages allow browsers to scale a document and make the best use of the target size. Three values for the size property create a relative page: auto, landscape, and portrait. Length values for the size property create an absolute page size.

Here are some examples:

@page {size: portrait;}
@page {size: landscape;}
@page {size: 8in 11in;}

The last example sets the width of the page to 8 inches and the height to 11 inches. If you only enter one length, it makes the width and the height of the page the same (the page is a square). You can’t enter percentage values for the size property.

Alternatively:

@page {size: auto;}

The example matches the page box to the page used in the printer.

If a page does not fit the target sheet, the browser might:

• Rotate the page box 90° if this make the page fit
• Scale the page to fit

If the page is smaller than the target sheet, the browser can put the page wherever it likes. The W3C recommends that browsers print the page in the centre so that information is not lost.

If you want to add a 1” margin on all sides:

@page {size 8.5in 11in; margin: 1in;}

Alternatively:

@page {size: auto; margin 10%}

The percentage value on the margin property is relative to the page box. For left and right margins, percentages are relative to page box width while for top and bottom margins, they are relative to the page box height. In our example, if the page is 21.0cm x 29.7cm (that is A4 to those of us who don’t work in metric), the margins are 2.10cm and 2.97cm.

You cannot specify the margins for a page in ems or pixels.

You can add a name for a page layout (after all you can have more than one page layout for your web page). For example:

@page normal {size: portrait; margin: 1in}
@page wide   {size: landscape; margin: 1in}

You can then apply the page layouts to a tag:

p.wide {page: wide}

If you apply a named page and the previous tag uses a different page, this causes a page break. So you need to be a bit careful.

The :left, :right and :first pseudo-classes specify whether the style applies to the first page, all left pages, all right pages, or a page with a specific name.

If you print double-sided, the margins should be different for left and right pages. For example:

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

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

You can also specify a style for the first page of a document:

@page :first {margin-top: 3in;}

This example adds a large top margin the first page.

The marks property specifies crop and cross marks for the page box.

Note: You set up the page size but the browser has control over how the page actually prints. It can:

• Print single-sided or double-sided
• Transfer several (small) pages to one sheet (n-up)
• Transfer one (large) page box to several sheets (tiling).
• Create signatures. A signature is a group of pages printed on a sheet which appear in the correct sequence when you fold and trim them like a book
• Print one document to several output trays
• Print to a file