Templates / Page setup & print CSS

Page setup & print CSS

A document is printed by headless Chromium with a fixed, deliberate set of options. You shape the page entirely with CSS. This page covers what those options are and the CSS that controls the result.

The fixed render settings

Every render uses the same print settings, which are the single definition of "real output":

• Backgrounds are printed. Background colors and images render (Chromium's printBackground is on), so you do not need any color-adjust hacks.
• CSS page size wins. The page dimensions come from your @page { size } rule. If you do not set one, the document falls back to A4.
• Zero page margins. The document prints edge to edge. You own all spacing with CSS, so what you write is exactly what prints.

Page size

Set the page size with the CSS @page rule. Use real print units (mm, cm, in, pt); px maps at 96dpi.

@page {
  size: A4;
}

Named sizes (A4, A5, Letter, Legal), an orientation, or explicit dimensions all work:

@page { size: Letter landscape; }   /* named + orientation */
@page { size: 105mm 148mm; }        /* A6, width then height  */
@page { size: 4in 6in; }            /* a shipping label       */

Margins and spacing

Because the page margins are zero, add whitespace with padding on your content rather than a page margin. This keeps backgrounds able to bleed to the edge while your text sits where you want it.

body {
  padding: 16mm 18mm;
}

Page breaks

Control where pages break with the standard CSS fragmentation properties:

.invoice + .invoice { break-before: page; }  /* start each invoice on a new page */
tr,
.line-item        { break-inside: avoid; }    /* never split a row across pages   */
h2                { break-after: avoid; }      /* keep a heading with its content  */

For long tables, put your column headers in a <thead>: Chromium repeats the thead at the top of every page the table spans.

Backgrounds and color

Background colors, gradients, and images all print. External background images are fetched server-side and follow the asset rules. For predictable output, prefer embedding images as data: URIs.

Page numbers and running headers

What does work: an element with position: fixed repeats on every printed page, so you can pin a running header or footer.

.running-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

If you need true per-page numbers today, lay your content out into fixed-size pages yourself (one element per page) and number them from your data.

Fonts

Custom fonts load via @font-face or a stylesheet link, subject to the asset rules. The render waits for fonts to load before printing, so text never falls back mid-render, as long as the font is reachable within the resource timeout.