The @page rule is for paged media and it is an easy way to define styles for your pages in print style sheets. It extende the box model to define a page block that allows you to style specific sizes and presentations of your pages.
Pages are Print So Pixels are Not Allowed
This is the one place when designing Web pages where you should use print measurements rather than Web measurements to define the sizes of your elements. Print measurements include:
- points
- picas
- inches, centimeters, and millimeters
Don't use any measurements that are relative to the screen resolution (pixels) or the parent elements (em and ex) or relative to the surrounding text or default browser size (percentages and xx-small/xx-large respectively).
@page elements also don't have borders or padding - only margins. So you don't need to specify that information.
Some CSS 3 Properties For Use with @page
There are a couple of CSS 3 properties that are useful when defining your @page styles:
@page Pseudo-Classes
There are three pseudo-classes that you can use with your @page definitions to style specific portions of your paged document:
- :first - to style just the first page
- :left - to style just left-facing pages
- :right - to style just right-facing pages
You can use the :first pseudo-class to give extra prominence to details on your first page. And the :left and :right pseudo-classes can be used to add extra margin in the middle to allow for binding.
Pagination
Pagination is normally handled by the user-agent, placing page breaks only when the page format changes or when the content overflows the current page box. But you can use the page-break properties to force page breaks at different times:
When paginating, you can also end up with widows and orphans, but there are CSS properties you can add to your @page styles to tell the user-agent what to do with them:
A Sample @page Styles
Here is a sample @page style sheet:
@page {
margin: 1in;
size: portrait;
marks: none;
}
@page :first h1 {
font-size: 20pt;
}
