Page Layout

When you are producing printed output the content of your web page will be printed onto one or more separate sheets of paper. The CSS2 standard allows you to specify a size or orientation for the paper as well as margins. Different values can be specified for the first page and/or for left/right hand pages.

To specify these attributes we use the @page command. Using @page by itself will define the default for all pages. We can also define @page:first for the first page as well as @page:left and @page:right for left and right (odd and even) pages respectively. Paper size can be specified as width and length (two separate values), auto, portrait, or landscape. For example:

@page {size: 21cm 29.7cm; margin:2cm;}
@page:first {size:landscape;}

In the above example the pages will be set out to be printed on A4 paper with portrait orientation and 2cm margins except for the first page which will use landscape orientation.

Note that while this is part of the CSS2 specification it is not supported by all current web browsers and so will not produce the desired result in all browsers.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow