One layout file, three outputs: building printer test pages as real CMYK PDFs with Astro

Description and use

A set of printer test sheets is generated from a single millimetre‑based layout into three outputs—real CMYK PDF, SVG for browser printing, and rasterised previews—ensuring accurate size, color space, and scaling.

Problem

Printer test pages often rely on generic images that can be scaled, color‑converted, or mis‑sized, leading to inaccurate tests for alignment, color fidelity, and scale.

Outcome

The site delivers accurate, vector‑based printer test sheets in CMYK, with verified size and color fidelity, and provides QR‑linked result pages for reproducibility.

Workflow

• Define sheet geometry once in layouts.mjs (millimetres).
• Use pdf.mjs with pdf-lib to write a real PDF using DeviceCMYK operators and embed fonts.
• Use svg.mjs to produce an SVG with @page size and print-color-adjust: exact for browser printing.
• Rasterise the same SVG path from the PDF with Poppler to create preview images.
• Verify all PDFs for correct color operators and size.
• Provide QR codes on each sheet that link to a result page with a hash for reproducibility.
• Implement a pure function to calculate expected scale percentages for A4 on Letter and Letter on A4, and unit‑test it with Node’s test runner.
• Use Playwright for QA screenshots and Lighthouse for performance and accessibility checks.

Evidence

Most "printer test page" sites hand you one generic image.

Source

A test page that goes through a browser print dialog can quietly be wrong in three ways: the page is scaled, colors are converted to RGB, and Letter and A4 are different sizes.

Source

Each sheet is described once, in millimetres, in a single file (layouts.mjs). Three small renderers consume that description: pdf.mjs, svg.mjs, and rasterised preview images.

Source

Because the previews are rendered from the real PDFs, what you see on screen is what prints. Every element sets an explicit color, so a CMYK sheet never contains a stray RGB operator.

Source

Print the scale sheet, measure its 100 mm bar, type the length in. The diagnosis is a pure function with no DOM.

Source

Every sheet carries a QR code that opens a "read your result" page with permalink hashes, so someone can scan the printout and walk through what they see.

Source