Best Practices

Avoid @media print

Press.js captures your document in print media mode, so @media print queries technically work. However, we do not recommend using them:

• The development preview runs in screen mode — any styles hidden behind @media print will be invisible during development, breaking preview-fidelity.
• Press.js’s philosophy is that your document is a web app. Maintaining separate screen and print styles defeats the purpose of building documents with web technology.
• Press.js provides its own components for pagination control (<KeepTogether>, <KeepNext>, <PageBreak>). Using CSS page-break-* or break-* properties inside @media print will conflict with Press.js’s pagination planner.

Design your document once — what you see in preview is what you get in the PDF.

Define explicit page dimensions

Always set type (e.g., "A4", "Letter") or explicit width/height on your <Page> component. This gives the pagination engine precise page boundaries and avoids unexpected page sizing.

<Page type="A4" orientation="portrait" margin="20mm">
  {/* ... */}
</Page>

Set reasonable margins

A minimum of 10mm on each side ensures content doesn’t bleed into printer non-printable areas. The default margin is 16mm, which works well for most documents.

Keep headers and footers compact

Header and footer height is deducted from the page content area. Tall headers mean less room for content. Stick to one or two lines, and use small font sizes (8–10pt).

Test with real content

The development preview is accurate, but always run the CLI render before distributing. The headless Chromium environment may differ slightly from your development browser in:

• Font availability and rendering
• System-level rendering settings

Use semantic components instead of CSS hacks

Press.js provides <KeepTogether>, <KeepNext>, and <PageBreak> for controlling pagination. Use these instead of relying on fragile CSS page-break-* or break-* properties, which behave inconsistently across rendering contexts.

Avoid deeply nested DOM structures

Deeply nested elements increase measurement cost and make the pagination planner’s job harder. Flatten your component tree where possible.