PDF headers, footers and page numbers with CSS

pdfrender's engine (WeasyPrint) implements the CSS Paged Media spec, so repeating headers and footers are plain CSS — no separate header-HTML parameter, no post-processing:

<style>
  @page {
    margin: 25mm 20mm;
    @top-center {
      content: "ACME Ltd — Monthly report";
      font-size: 9pt; color: #666;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 9pt; color: #666;
    }
  }
</style>
<h1>Report</h1>
<p>Body content flows across pages; the margin boxes repeat on every page.</p>

POST that document to /v1/render as-is (see the curl guide) and every page carries the header and the Page X of Y footer.

Variations

There are sixteen margin boxes per page (@top-left, @bottom-center, corners, …). Different first page? Use the :first pseudo-class:

@page :first {
  @top-center { content: none; }  /* no header on the cover page */
}

counter(page) and counter(pages) are standard CSS counters — you can reset page per chapter with counter-reset on a page break.

Try it free

Paste the example into the free browser tool to see it paginate, or try the API free — 100 renders a month, no card.