Designed for paper, not for a screen.

How it is designed

A document is not a small web page. It has a fixed height it cannot scroll past, it has no hover and no script, and the person reading it may never see the version on the screen. Almost none of that is true of anything else on this site, which is why this sample exists.

The preview is true A4, or it is lying

A4 at 96 dpi is 794 × 1123 CSS pixels, and the page above is drawn at exactly that. A preview at “roughly A4” is worse than no preview at all, because it puts the line breaks in different places than the printer will and you only find out after sending it.

Repeat the table header on every sheet

Add enough lines and the table crosses a page boundary. By default page two is a column of unlabelled numbers — one declaration fixes it, and almost nobody writes it:

/* the header row is repeated by the printer, not by you */
.doc-items thead { display: table-header-group; }
.doc-items tfoot { display: table-footer-group; }

Nothing important may be orphaned

A line item split across two sheets is unreadable, and a total sitting alone at the top of page two is the kind of thing that gets an invoice queried instead of paid:

/* keep each row whole, and keep the totals with the table */
.doc-items tr, .doc-foot { break-inside: avoid; }
.doc-foot                { break-before: avoid; }

Set the page box yourself

@page { size: A4; margin: 14mm 15mm } — without it the browser applies its own default margin, which differs between browsers and printers, and the layout quietly shifts on somebody else’s machine.

Backgrounds do not print

Browsers drop background colours by default, so anything carrying meaning through a fill will silently disappear. Every distinction on this document is a border, a rule or a weight — things that survive. Links get their URL printed after them too, because a reader holding paper cannot click.

The money is integers, as everywhere else

Amounts are held in minor units and only formatted at the very end, for the same reason as the till sample: a document that disagrees with the ledger by one fil is a document somebody has to reconcile by hand.

Other demos · Hire the developer