Print cards at true size and edge to edge

[tpskowski]

The size problem

Cards are drawn at 63 × 88 mm — the finished size of a Magic: the Gathering card — and that part was already right. But the sheet always declared @page { size: A4 }. Printing an A4 sheet on US Letter makes the browser scale it to fit the shorter paper:

scale = min(215.9/210, 279.4/297) = 0.9407
63 × 88 mm  →  59.3 × 82.8 mm

That 6% shrink is why the cards came out smaller than an MTG card. "Fit to page" scaling in the print dialog does the same thing.

Fix: a paper picker in the print toolbar (A4 / US Letter) that emits the matching @page rule, so the sheet is never scaled. It is guessed from the browser locale on first use and remembered afterwards. The toolbar also now states the card size and that the sheet needs 100% scale.

Measured from a generated Letter PDF: MediaBox 612 × 792 pt (215.9 × 279.4 mm), card drawn at 238 × 333 px = 62.97 × 88.11 mm.

Cutting

Cards now abut by default, with square corners, so one straight cut separates two of them rather than leaving a strip of waste between them.

That also shrinks the 3 × 3 block from 197 × 268 mm to 189 × 264 mm, which is what makes three 88 mm rows fit Letter's 279.4 mm sheet at all — hence Letter's tighter 6 mm margins. A printer whose unprintable border exceeds ~7.7 mm cannot fit 3 × 3 at full size on Letter; that is a physical limit of the paper, not of the layout.

Card gap

A Card gap field in the toolbar opens a gutter for anyone who would rather give each card its own edge than share a cut line. It is clamped to what the chosen paper can still fit 3 × 3 cards in — A4 allows up to 4.5 mm, Letter only 1.5 mm — and switching paper re-clamps the stored value, so carrying an A4 gutter over to Letter can never push a row onto a fourth page.

Test plan

• npm test — 267 passed, including new unit tests for the gutter maximum and clamping.
• npx playwright test — 8 passed, including three new tests:
  • the 3 × 3 grid is 189 × 264 mm with 0 mm gutters, cards still exactly 63 × 88 mm;
  • each paper size yields its own PDF MediaBox (A4 and Letter, checked against 210 × 297 / 215.9 × 279.4 mm) with no extra sheets, so the rows never spill;
  • the card gap opens a real gutter, clamps to 1.5 mm when the paper changes to Letter, cannot be typed past its maximum, and adds no sheets at either paper's maximum.
• The existing overlap test now allows a 0.5 px touch, since abutting is the intent; a real overlap still fails it.
• npm run build clean.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying warmuster with    Cloudflare Pages

Latest commit:	c4f1e53
Status:	✅  Deploy successful!
Preview URL:	https://7987a1ae.warmuster.pages.dev
Branch Preview URL:	https://codex-card-print-size.warmuster.pages.dev

View logs

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 189630b6-700a-4cf4-9476-a6f0e3f8e861

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}