docs(badges): update print behavior docs + Zebra test day plan
- MODULE__AE_Events_Badge_Templates: rewrite Print Layout Architecture section with accurate cross-browser behavior table and Chrome margin guidance - PROJECT__AE_Events_Badges_Review_Print: add TASK 4.1 print CSS centering history; correct Chrome squish root cause explanation - PROJECT__AE_Events_Zebra_Hardware_Test_Day: new — comprehensive pre-test and day-of checklists for ZC10L hardware test ~2026-03-16 - TODO__Agents: add [Badges] Zebra ZC10L Hardware Testing section
This commit is contained in:
@@ -129,6 +129,28 @@ should be the reference. See Design Intent section above.
|
||||
Pronouns field is now an attendee-level field (was trusted-only). Staff section labelled.
|
||||
- Debug JSON blocks in v2 badge render hidden behind global edit_mode flag.
|
||||
|
||||
**Print page CSS centering work (also 2026-03-12) — ⚠️ Chromium PDF issue pending:**
|
||||
Multiple iterations to center the badge on the printed page, working around SvelteKit layout
|
||||
hierarchy issues. Current approach: `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)`
|
||||
on `.event_badge_wrapper`. Key findings:
|
||||
|
||||
- `#ae_main_content` has `overflow: auto` — Firefox (spec-compliant) won't let `display: contents`
|
||||
dissolve it. Workaround: explicit passthrough block (`display: block; overflow: visible; width: 100%`).
|
||||
- `app.css` global `overflow: hidden` on `html, body` creates a BFC that collapses body to badge-width.
|
||||
Override with `overflow: visible !important` in print CSS.
|
||||
- **Chrome ignores `@page { size }` for Save as PDF** — verified 2026-03-12. Firefox honors it.
|
||||
Chrome uses the system default paper size; Firefox locks to the CSS `@page { size }` value.
|
||||
Neither browser lets you change paper size in "Save to PDF" mode — only when printing to a
|
||||
physical printer. For actual Epson/Zebra printing, the driver controls paper size; unaffected.
|
||||
- **Chrome "Default" margins cause the "squish"** — Chrome's Default margin setting inserts
|
||||
URL/date/page-number headers and footers into the printable area. These eat into the space
|
||||
that `position: fixed; top: 50%` references, making the badge off-center or clipped. Fix:
|
||||
set **Margins → None** (or Minimum) in Chrome's print dialog. Content centering verified
|
||||
correct: Chrome A4 + None margins produces badge center = 297.5 pts on a 297.5 pt wide page.
|
||||
Use Firefox for accurate PDF proofing.
|
||||
- See `documentation/MODULE__AE_Events_Badge_Templates.md` → "Print Layout Architecture" for full
|
||||
technical details.
|
||||
|
||||
### ✅ TASK 3: Badge Print Controls Panel — COMPLETE (2026-03-02)
|
||||
|
||||
**Files created/modified:**
|
||||
|
||||
Reference in New Issue
Block a user