Page setup

A template’s HTML is printed onto sheets of the size and margins set here. Receipts can use a single page as tall as their content instead, headers and footers can repeat on every page, and CSS decides where pages break.

Page settings

Set the page geometry in the template’s Configuration tab, or as draft.page through the API. Page settings are published with the template.

{
  "draft": {
    "page": {
      "size": "A4",
      "orientation": "portrait",
      "unit": "mm",
      "margins": { "top": 20, "right": 20, "bottom": 20, "left": 20 },
      "print_background": true,
      "scale": 1
    }
  }
}

Field	Values
`size`	`A3`, `A4`, `A5`, `Letter`, `Legal`, `Tabloid`, `Receipt80`, `Receipt58`, or `custom`
`width`, `height`	Sheet size for `custom`, in `unit`. At most 200 inches.
`height_mode`	`fixed` (default) or `auto`. See Auto height.
`orientation`	`portrait` or `landscape`
`unit`	`mm` or `in`, for `width`, `height` and `margins`
`margins`	`top`, `right`, `bottom`, `left`
`print_background`	Whether background colours and images print. Turn it on for coloured headers, table stripes and the like.
`scale`	Zoom factor from `0.1` to `2`

Page settings or `@page`

You can also size the page in CSS:

@page {
  size: A4 landscape;
  margin: 15mm 20mm;
}

When a template has page settings, they win over any @page rule. To let CSS control the page, clear the settings by sending "page": null. Without either, documents print on A4 with Chrome’s default margins.

@page can do things the settings can’t, such as different sizes for named pages. Page settings are easier to change in the editor and keep the geometry next to the preview.

Auto height

With height_mode: "auto" (Fit to content in the editor), the document prints as a single page exactly as tall as its content. Use it for receipts, labels and anything else printed on a roll or shown on screen rather than on standard paper.

The Receipt80 and Receipt58 sizes are 80 mm and 58 mm wide rolls. They only work in auto mode and portrait orientation. A custom size in auto mode needs only a width.

{ "size": "Receipt80", "height_mode": "auto", "orientation": "portrait", "unit": "mm",
  "margins": { "top": 4, "right": 4, "bottom": 4, "left": 4 }, "print_background": false, "scale": 1 }

A template with explicit page breaks (break-before: page) still gets its separate pages in auto mode. DOCX output can’t have a continuous page, so auto-height DOCX documents paginate at A4 height (297 mm).

Headers and footers

Add header.html or footer.html to the template to print the same content at the top or bottom of every PDF page: a company name, a document number, page numbers.

<div style="width: 100%; padding: 0 20mm; font-size: 9px; color: #666; display: flex; justify-content: space-between;">
  <span>Invoice {{ .number }}</span>
  <span>Page <span class="pageNumber"></span> of <span class="totalPages"></span></span>
</div>

Headers and footers are separate documents, so the template’s CSS doesn’t apply to them. Style them with inline style attributes; classes from your CSS files and Tailwind do nothing here. Their base font size is 10px, so set sizes explicitly. They can use your data and functions, but not partials.

They print inside the page margins. Leave a top margin tall enough for the header and a bottom margin tall enough for the footer, or they’ll overlap the body or be cut off. The header spans the full sheet width, so add horizontal padding yourself.

Chrome fills in page numbers when it prints each page, in elements with these classes:

Class	Content
`pageNumber`	Current page number
`totalPages`	Total number of pages
`date`	Print date

Headers and footers are a PDF feature. DOCX output keeps only their text, without styling or page numbers, and PNG, JPEG and HTML output show the body only.

Page breaks

Control where the body breaks across pages with CSS:

/* Keep each row, card or signature block on one page */
tr, .card, .signature {
  break-inside: avoid;
}

/* Start each section on a new page */
.section {
  break-before: page;
}

A table’s <thead> repeats at the top of every page it spans.

The older page-break-inside, page-break-before and page-break-after properties work too. With Tailwind, use break-inside-avoid, break-before-page and break-after-page.