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;
}

You could also use the oxy_xpath function to extract or compute some text from a document. You can use a combination of string-set and oxy_xpath to define a kind of variable that is used across publication headers.

Suppose your document defines a creation date in a metadata section. This section may be anywhere in your document.

To use it in the header of your first page, you can extract the value, assign it to a string-set, then reference it from the page margin box from the header:

Extract the value and set it to a string-set that is associated to the root element so that it will be available on all pages:
```
:root {
   string-set: creationdate oxy_xpath("//bookmeta//created/@date[1]"); 
}
```

Use it in the header:

@page {
   @top-center {
        content: "Created: " string(creationdate);
   }
}

Multiple Lines in Headers and Footers

Sometimes you need to format the text from the header (or any page margin box) on two or more lines.

For example, suppose you want to have the following notice in the footer:

Confidential Document.
Do not distribute it without written consent!

The solution is to use \a in the static content from your CSS. This is an escape representing the line feed character in ISO-10646 (U+000A). This character represents the generic notion of "newline" in CSS.

@page {
  @bottom-center {
    content: "Confidential Document. \a Do not distribute it without written consent!";
  }
}

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.