HTML Support for PDF Landing Pages
Page Rules
As PDF documents are inherently page based (as a representation of real world paper pages), there are several rules that deal with various pagination issues that you may not be very familiar with from normal HTML pages.
Page rules are defined in a style sheet (usually in the <head> of the document)
inside of the @page at-rule, like this:
<style>
@page {
/* rules for all pages go here */
}
</style>
A rule like the above matches all pages. But if necessary, you can also specifically match only the first page, or all left or right pages (by convention, the first page is a right page, so the left pages are the even numbered ones and the right pages the odd numbered ones).
<style>
@page:first {
/* rules here apply only to the first page */
}
@page:left {
/* rules here apply only to the left (even numbered) pages */
}
@page:right {
/* rules here apply only to the right (odd numbered) pages */
}
</style>
Or, if necessary, you can define a page rule that affects only a certain page (or subset of pages). In such a situation, you can specify a rule using a suitable identifier as the page name. (Can be any valid CSS identifier; the example below uses "my-page")
<style>
@page my-page {
/* Rule content goes here. */
}
</style>
Then in the document, you assign the same page name to the page style property of a suitable element.
<div style="page:my-page"> <!-- Page content goes here. --> </div>
The effect of this is, that there is a page break generated before and another page break after this element,
so any content inside of the element is on a separate page, to which the @page rule is
applied.
Note, that if the element has more nested content than can be fit on a single page, or has nested content that
in turn defines additional page breaks, then there are actually several pages to which the
@page rule is applied. In other words, there will be a page break before the element,
then one or more pages with the content of the element (with the @page rule applied to all of them),
and then one final page break after the element.
It is possible to have multiple elements with the same page name. In this case, each of them generates its
own separate page, with a page break before and after, and each of them has the same @page rule
applied.