Print CSS for clean invoice PDFs: margins, tables, and page breaks

Design a document, not a screenshot of your application

A dashboard can look great on a wide monitor and still make an awkward invoice. Give your invoice a dedicated HTML template with a clear document title, seller and customer sections, line items, and totals. Keep navigation, sticky toolbars, and interactive controls out of the printed version.

Use our fictional public invoice to experiment without exposing customer data. The sample includes a screen-only notice and a print stylesheet, so switching between screen and print media gives you a visible comparison. In the home-page demo, open Advanced options and choose Print under Media before generating the PDF.

Start with a small, predictable print stylesheet

The @media print rules apply only when print media is selected. The @page rule specifies a Letter page with half-inch margins, suitable for many US document workflows. Choose A4 instead when your recipients expect it. Start with normal document flow and avoid absolute positioning for content that can grow.

Keep table headers in a thead and use real table markup for line items. Ask the browser to avoid splitting short rows and the totals block across pages, but do not apply break-inside: avoid to the entire invoice: a long invoice must be allowed to span pages.

@page {
  size: Letter;
  margin: 0.5in;
}

body {
  font-family: Arial, sans-serif;
  color: #152238;
  line-height: 1.5;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid #dde3eb; }
th { text-align: left; }
.amount { text-align: right; white-space: nowrap; }
thead { display: table-header-group; }
tr, .totals { break-inside: avoid; }
h2, h3 { break-after: avoid; }
img { max-width: 100%; }

@media print {
  .screen-only, nav, button { display: none !important; }
  body { margin: 0; background: white; }
  .invoice { width: auto; box-shadow: none; border: 0; padding: 0; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

Select the matching RenderLark options

Send these options with the asynchronous /api/v1/renders endpoint. printBackground preserves background graphics; it does not switch the page to print media on its own. media: print is the separate switch for your print stylesheet.

preferCSSPageSize: true lets your @page size take priority. Set it to false if you want the API format to win instead. If you submit raw HTML, include the stylesheet directly in that HTML or reference public absolute asset URLs. Raw HTML rendering is available on paid plans.

{
  "url": "https://renderlark.com/samples/invoice.html",
  "options": {
    "format": "Letter",
    "media": "print",
    "printBackground": true,
    "preferCSSPageSize": true
  }
}

Test the awkward cases before sending invoices

One short example is not enough to validate a document template. Test realistic long names, multi-line addresses, different currencies, empty optional fields, and enough rows to cross a page boundary. Inspect the original page and resulting PDF side by side, especially totals and the first row on each new page.

Use fonts you can legally serve and that load without authentication. Keep contrast high enough for monochrome printers, and do not encode payment status using color alone. The goal is a readable document even when a background image is unavailable.

• Check both Letter and A4 if your customers use both.
• Confirm table columns and totals remain aligned on multi-page invoices.
• Verify logos and fonts load from the rendering server, not only your laptop.
• Keep a known-good sample PDF for visual regression checks when changing CSS.