2008 Oct 17
See Cascade Rules. A print media uses discrete pages, unlike the screen media which has continuous (i.e. unbounded) height. Print media styles are expected to apply to "print review". It is usually better to use: points, pt, for print media and pixels, px, for screen media.
In order to save ink, the styles cannot force a print media to show background. This can only be done in the agent, usually by changing a preference or option. An example of the way to force no background printing is:
* { color: black !important; background: white !important; }
A page, or page box, is analagous to an element box in that it has: a margin area and within that the content (or page) area. The parameters are set using the page directive, e.g.:
@page { margin: 0.5in; }
There was a size property in CSS2 but it was dropped in CSS2.1 (due to
lack of support).
There used to also be values of portrait and
landsacape, but they are no longer available.
@page { size: 8.5in 11in; margin: 0.5in; }
It is possible to give the first page, left and right pages each a different or modifed style:
@page { margin: 0.5in; }
@page :first { margin-top: 2.0in; }
/* gutter */
@page :left { margin-right: 1.0in; }
@page :right { margin-left: 1.0in; }
| Property | Values | Initial Value | Applies to | Inherited |
|---|---|---|---|---|
| @page | <identifier> | auto | inherit | auto | block-level elements | yes |
|
page-break-after page-break-before |
auto | always | avoid | left | right | inherit | auto | non floated block-level elements with a position value of relative or static | no |
| page-break-inside | auto | avoid | inherit | auto | non floated block-level elements with a position value of relative or static | yes |
| size | <length> | auto | landscape | portrait | inherit | auto | the page size | no |
|
orphans widows |
<integer> | inherit | 2 | block-level elements | yes |
One purpose of the @page directive is to give it a name, or identifier so that sets of pages can have identical styles.
It may be chosen that a title which is an h1 element should be centered on a page by itself and each section should start at the top of a page. This can be done as follows:
h1 { page-break-after: always; align: center; margin-top: 3.0in; }
h2 { page-break-before: always; }
The values left or right will cause one or two page breaks (as needed) to force the page to start on the specified side.
The property page-break-inside is only mildly useful in that can specify to avoid a page break if possible.
The orphan property specifies the minimum number of lines that can appear at the bottom of a page without forcing a page break. The widows property specifies the minimum number of lines that can appear at the top of a page without forcing a page break.
The ability to create headers and footers is typoically done in CSS using absolute positioning (using a class or id).
span.header { position: fixed; top: 0, left: 0; }
span.footer { position: fixed; bottom: 0, left: 0; }
The footer needs testing.
This was a property of the @page pseudo element, but has been dropped in CSS2.1