Skip to content
Portfolio/Capabilities

CAPABILITY 06 / 30

One source, a web page and a PDF

The HTML twin and the render check that refuses to publish a document that does not fit its page.

IN PRODUCTION

This runs in client systems today. The sample below was regenerated for a fictional company.

Every printed piece on this site came through this pipeline. One HTML source serves the screen and the sheet, a headless browser renders the print form, and a check measures the result. A document that overflows its page never reaches a person, because the build stops.

TRY IT / RUNS IN YOUR BROWSER

Use it here.

The mechanism is the production one. The company, the catalogue, and every figure are fictional.

Loading the document pipeline.

THE OUTPUT / GENERATED FOR APEX INSTRUMENTS

What comes out.

HTML
Service notice SN-2026-114Print · 2 pages · One file. Two Letter sheets in print, a single readable column on screen, split by media query rather than by making two documents.Open ↗
JSON
Render check definitionsData · The seven checks the pipeline runs before a document is published, with what each one proves and what happens when it fails.Open the file ↗
JSON
Five worked failuresData · Real classes of defect this pipeline catches, each with the check that caught it, the measurement, and the region of the page it was measured in.Open the file ↗
MJS
The render check, as codeData · Runs all seven checks against the sample and its rendered PDF and exits non-zero on a blocking failure. This is what writes data/result.json.Open the file ↗
JSON
Check result for the sampleData · The measured output of check.mjs against sample/notice.html, written by the run, not by hand.Open the file ↗

THE MECHANISM / SHOW THE SHAPE, NOT THE SOURCE

How it works.

What a skill is
  1. 01Write once

    A single source carries both forms, split by media rather than duplicated.

  2. 02Render

    A headless browser prints it at the exact page size.

  3. 03Measure

    Content height and width are measured against the sheet, not eyeballed.

  4. 04Inspect

    Orphan headings, text size, contrast, and external resources are checked too.

  5. 05Stop or ship

    A failing check ends the build with the measurement that caused it.

WHAT IT READS

  • One HTML source with a screen and a print form
  • The page geometry it claims
  • The check definitions

WHAT IT CHECKS BEFORE IT SHIPS

  • Content fits the sheet in both axes
  • Every declared page exists in the PDF
  • No external resource other than the font stylesheet
  • The same source produced both forms
In production: 1,157 HTML twins in one company system, all generated rather than maintained by hand.

The mechanism runs inside client systems. Everything on this page was regenerated for Apex Instruments, a company that does not exist. Client names, source files, and internal wording stay private.

What it producesWhat is being built next