Headers & Footers

Every page in a EuroPDF document has sixteen named slots for headers, footers, and margin content — defined entirely in CSS. You can put logos, chapter titles, document metadata, or images in any of them, and each slot can change between first pages, left pages, right pages, and named chapter pages.

For automatic page numbering specifically, see Page Numbers — this page focuses on the slot system, dynamic content, and per-page variation.

A complete example

<style>
  @page {
    size: A4;
    margin: 2.5cm 2cm;

    @top-left {
      content: string(doc-title);
      font-size: 9pt;
      color: #888;
    }
    @top-right {
      content: "Quarterly Report 2026";
      font-size: 9pt;
      color: #888;
    }
  }

  /* Cover page: clean — no slot content at all */
  @page :first {
    @top-left  { content: none; }
    @top-right { content: none; }
  }

  /* Chapter pages pull the chapter title into the running header */
  @page chapter {
    @top-right {
      content: string(chapter-title);
      font-weight: bold;
      color: #130048;
    }
  }

  body {
    string-set: doc-title "EuroPDF GmbH";
  }
  h1.chapter {
    page: chapter;
    string-set: chapter-title content();
  }
</style>

The header on every chapter page now reads whatever the current <h1 class="chapter"> says — automatically, even across page breaks.

More examples

Different headers on left and right pages

@page :left  { @top-left  { content: string(book-title); } }
@page :right { @top-right { content: string(chapter-title); } }

The classic book layout: book title on the left, current chapter on the right.

Hide the header on the first page only

@page :first {
  @top-left  { content: none; }
  @top-right { content: none; }
}

Works for cover pages and chapter openers via named pages too.

Logo in the top-left corner of every page

@page {
  @top-left {
    content: "";
    width: 110px;
    height: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 32'><text x='0' y='23' font-family='Helvetica,Arial,sans-serif' font-size='22' font-weight='700' fill='%23130048'>EuroPDF</text></svg>");
    background-repeat: no-repeat;
    background-size: contain;
  }
}

Margin boxes are CSS boxes — give one a width, height, and background-image and you have a logo on every page. The example uses an inline SVG so it runs as-is; in production you point at your own image URL.

Different header per chapter, automatically

h1.chapter { string-set: chapter-title content(); }
@page { @top-center { content: string(chapter-title); } }

string-set captures the text of any element; the named string updates as the engine moves through the document.

Mix multiple page sizes in one document

@page toc {
  size: A5;
  @top-center { content: "Contents"; }
}
@page body {
  size: A4;
  @top-center { content: string(chapter-title); }
}
@page wide {
  size: A3 landscape;
  @top-center { content: "Appendix – Diagrams"; }
}

nav.toc  { page: toc; }
article  { page: body; }
.foldout { page: wide; }

Every @page rule can define its own size, margins, and margin-box content. Assign elements to a named page via the page property, and Prince switches page size automatically at the boundary — the Playground example walks through an A5 TOC, an A4 body, and an A3-landscape fold-out in a single document.

Style a slot like any other CSS box

@page {
  @top-right {
    content: "Quarterly Report — 2026";
    font-family: Georgia, serif;
    font-size: 9pt;
    font-style: italic;
    color: #555;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4pt;
  }
}

Margin boxes take the same declarations as normal CSS boxes — font, color, border, padding, background. Each of the sixteen slots can be styled independently.

Page numbers in any slot

The page-counter system (counter(page), Roman numerals, per-chapter resets, TOC references) composes with every pattern above. The full toolkit lives on Page Numbers.

EuroPDF wraps PrinceXML unchanged, so the full Paged Media toolkit is available: all sixteen margin boxes, page selectors (:first, :left/:right, :recto/:verso, :blank, named pages), running headers via string-set or position: running(), forced breaks to recto/verso, and the complete counter() system. The full specification lives in the Prince user guide.