Headers and Footers

Most printed publications use page headers and footers for almost all of their pages. To define them, you will use the page margin boxes.

@page :first {
  @top-center {
    content: "How to Grow Flowers";
    font-size: smaller;
    color: gray;
  }
}

You can set content and style to multiple page margin boxes. You should place them in the same parent @page rule. In the above example, the text is displayed only in the top-center of the first page, due to the :first page selector.

Extracting Text from Document

To display the title of the publication or the title of the current chapter, you will need to extract some content from the document and use it in one or more page margin boxes. This is possible by using a string-set. It is similar to a variable that is initialized to a content each time a specific element is matched.

In the following example, the text content of the H1 element is extracted and used as a publication title and the H2 element defines the chapter title:

h1 {
  string-set: publication_title content();
}

h2 {
  string-set: chapter_title content();
}

The next example uses the collected strings in the top margins of the pages. It joins the publication title and the chapter title by a "/" character, then places them in the outer side of the pages (to the left for the left side pages, to the right for the right side pages).

@page :left {
  @top-left { 
    content : string(publication_title) " / " string(chapter_title);
  }
}

@page :right {
  @top-right {
    content: string(publication_title) " / " string(chapter_title);
  }
}

A string set may contain static text, content from the document, attributes from the element, or counters. This is a more complex example, where a chapter number is added to the chapter_title string set:

h1 {
  counter-reset: chapter;
}

h2 {
  string-set: chapter_title "Chapter (" counter(chapter) ")" content();
  counter-increment: chapter;
}

The Page Counter

Besides the CSS counters that can be set on elements (for numbering sections, lists, tables, etc.), the CSS paged media module defines two more counters:

page
This counter returns the number of the current page.
pages
The number of total pages from the publication.

These counters are automatically updated by the publishing processor and can be used from the page margin boxes.

@page {
    @bottom-center {
      content: "Page: " counter(page);
    }
}

Or if you need to obtain "Page 4 of 100", you simply use:

  content: "Page: " counter(page) " of " counter(pages);

You can format the page counter with styles such as decimal, roman, lower-roman:

 @page table-of-contents {
        @top-right {
            content: "Contents | " counter(page, lower-roman);
        }
 }
Note: Using different counter styles under the same page name (for instance, using lower-roman for the left page and decimal on the right page) is not supported.