The @page rule specifies how a document is formatted within a rectangular area -- the page box -- that has a finite width and height.


  • The size property defines the dimensions of the page
  • The margin property defines the margins of the page
    • All margins can be defined using the keyword: margin
    • Or individual margins set: margin-top, margin-bottom, margin-left, and margin-right


@page { size:A4; margin:2cm; }



Values for the size property:

Value Description
auto Page box set to size & orientation of target sheet
landscape Overrides target's orientation. Page box is same as target & longer side is horizontal
portrait Overrides target's orientation. Page box is same as target & shorter side is horizintal
length Values create an absolute sized box. If one value specified, it sets both width & height 

values can be in general units or recognized page sizes, e.g. A4


It is possible to create a named page layout by simply adding the name of your choice after the @page rule. e.g:


@page { size : portrait ; }
@page rotated { size : landscape ; }
table { page : rotated ; }


The above renders all tables in the document on landscape pages.



Left, right, and first pages:

When printing double-sided documents, the page boxes on left and right pages should be different. This can be expressed through two CSS pseudo-classes as follows:

@page :left { margin-left: 4cm; margin-right: 3cm; }

@page :right { margin-left: 3cm; margin-right: 4cm; }



You can also specify the style for the first page of a document with the :first pseudo-class:


@page { margin: 2cm } /* All margins set to 2cm */

@page :first { margin-top:10cm; } /* Top margin on first page 10cm */



Controlling pagination:


Unless you specify otherwise, page breaks occur only when the page format changes or when the content overflows the current page box. To otherwise force or suppress page breaks, use the page-break-before, page-break-after, and page-break-inside properties.


Both the page-break-before and page-break-after properties accept the auto, always, avoid, left,and right keywords.


Value Description
auto Browser generates page breaks as required. Default
always Forces page break before or after the element
avoid Suppresses page break immediately before or after the element
left Force page break so element is rendered on a left hand page
right Force page break so element is rendered on a right hand page



For instance, if your <h1> elements start new chapters, with sections denoted by <h2> and you'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content, this can be achieved by using the following rule:


h1 { page-break-before : right ; }
h2 { page-break-after : avoid ; }



Use only the auto and avoid values with the page-break-inside property. If you prefer that your tables not be broken across pages if possible, you would write the rule:


table { page-break-inside : avoid ; }



Controlling widows and orphans:
In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while widows are those lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.


  • The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
  • The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.

Here is the example to create 4 lines at the bottom and 3 lines at the top of each page:


@page { orphans:4; widows:2; }

Leave a Reply