Prince - Page Headers and Footers

Page headers and footers are created by placing content in the margin boxes at the top or bottom of the page box.

Page headers may be placed in the following margin boxes:

@top-left-corner
@top-left
@top or @top-center
@top-right
@top-right-corner

Page footers may be placed in the following margin boxes:

@bottom-left-corner
@bottom-left
@bottom or @bottom-center
@bottom-right
@bottom-right-corner

The content property determines the content of margin boxes. The default value of the content property is normal, in which case the margin box is empty. The content property may be used to place generated content or document content in the margin box.

Using generated content

Generated content in page margin boxes may contain text, page numbers or text content copied from the document.

CSS

@page { 
    @top-left {
	content: "TOP SECRET";
	color: red
    }
    @bottom-right { 
        content: counter(page);
	font-style: italic
    }
}

The @page rule specifies that the top-left margin box will contain the text "TOP SECRET" in red and the bottom-right margin box will contain the current page number in an italic font.

Copying text content from the document

Generated content in page margin boxes may also contain text content copied from the document using the string-set property:

CSS

@page { 
    @top {
	content: string(doctitle)
    }
}

h1 { string-set: doctitle content() }

The @page rule specifies that the top-center margin box will contain the text content of the document title copied from the text content of the h1 element in the document.

Taking elements from the document

Page margin box content may be taken from the document itself. Any block-level element can be removed from the normal flow and placed in a page margin box.

CSS

@page { 
    @top { content: flow(header) }
}
h1 { flow: static(header) }

The @page rule specifies that the top margin box is a new static flow named "header".

The rule for the h1 element moves it to the "header" static flow, removing it from the default normal flow.

Please note that:

All margin properties of a non-normal flow element will be ignored.
The first non-normal flow element that appears on a page will be used on the current page and carried onto following pages.

Margin box properties

Many CSS properties can be applied to margin boxes:

All of the margin, padding, border and background properties can be used to style margin boxes.
The vertical-align property can be applied to any margin box to vertically align its content.
When a margin box contains generated content, many inline style properties such as color and font can be applied to style the generated content.