Print artwork authored as code, exported by a browser

The artwork is a web page

Each hoarding board and each banner is a single HTML file with its own CSS. There is no InDesign document, no Illustrator file and no binary artwork to lose. A revision is a text edit, the version history is the repository, and two people can see exactly what changed between proofs.

One source, any output size

The board is laid out against its container, not against the viewport, so the screen proof and the printed hoarding are the same layout at different scales.

The technique is container-type: inline-size on the board element with container query units used throughout for type, spacing and positioning. Nothing is re-laid-out for print and there is no separate print stylesheet to fall out of sync. The two images above were rendered at 1200 and 1600 pixels wide from the identical files that produce the 6000 and 7500 pixel print exports.

Exported in tiles, with the tiles checked

A browser will not screenshot a 7500 by 3000 pixel canvas in one pass at print device pixel ratio. The export script drives Playwright, captures the page in 2000 pixel tiles and stitches them back together.

Each tile's dimensions are asserted against the expected value after rounding before it is accepted. A capture that silently comes back short fails the export instead of being composited into artwork that goes to a printer, which is the kind of error that is very cheap to catch here and very expensive to catch on a hoarding.

AI-assisted, human-accountable. AI tools contributed significantly to the implementation described here. The specification, the review of every change, the production operation and the accountability are mine.