Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(badges): update print behavior docs + Zebra test day plan

Browse Source 
- 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:
Scott Idem
2026-03-12 19:23:47 -04:00
parent cfa9e85d05
commit 90615ad5cc
4 changed files with 299 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
documentation/MODULE__AE_Events_Badge_Templates.md
View File

@@ -261,14 +261,19 @@ in DB and may be needed:
### How the print CSS works
The print page (`print/+page.svelte`) injects `<style>` blocks into `<svelte:head>` that
take effect only in `@media print`. The strategy uses `display: contents` to dissolve
intermediate layout wrappers so `body` becomes the sole centering flex container.
take effect only in `@media print`. Multiple layers of the SvelteKit layout chain must
be neutered to get a clean print surface.
**Wrappers dissolved via `display: contents`:**
**`#ae_main_content` — cannot dissolve, must passthrough:**
`#ae_main_content` has `overflow: auto` (it is the events layout scroll container). CSS
spec prohibits `display: contents` from overriding elements with overflow clipping —
Firefox enforces this strictly, Chrome is lenient. Workaround: strip all its visual/layout
effects with explicit `display: block; overflow: visible; position: static; width: 100%`.
**Wrappers dissolved via `display: contents` (safe — no overflow constraints):**
| Selector | Source | Why dissolved |
|---|---|---|
| `#ae_main_content` | `events/+layout.svelte` | `overflow-auto`, `flex-col`, `max-w-7xl`, `bg-gray-50` |
| `.main_content` | `events/+layout.svelte` | `pb-48`, `pt-20+`, `grow`, `items-center`, `justify-start` |
| `.main_content` | `events/+layout.svelte` | `pb-48`, `pt-20+`, `grow` |
| `#badge_render_area` | `print/+page.svelte` | Screen-only right-padding offset for controls panel |
**App chrome hidden via `print:hidden`:**
@@ -280,12 +285,10 @@ intermediate layout wrappers so `body` becomes the sole centering flex container
- Debug info section (edit mode only)
- Root layout: offline banner, session expired banner, hydration overlay, sys/debug menus
**Result:** `body { display: flex; align-items: center; justify-content: center }` directly
centers `section.event_badge_wrapper` with no intermediate wrappers in the way.
**`@page` size:** Matched to badge stock per layout code. `margin: 0` fills the page.
For the PVC layout the page size equals the card exactly, so centering is redundant
but harmless. For layouts where stock ≠ page, centering positions the badge correctly.
**Badge centering — `position: fixed`:**
`.event_badge_wrapper` uses `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)`.
In print, `position: fixed` anchors relative to the `@page` content area, bypassing the entire
ancestor hierarchy (no containing-block height dependency, no overflow-clip interference).
**Future per-template margins:** `print_margin_cfg` is already parsed from `cfg_json`
in `print/+page.svelte`. A dynamic `@page { margin: ... }` injection can be built from
@@ -293,6 +296,50 @@ that value when a UI for it exists.
---
### Cross-browser print behavior — IMPORTANT
Verified 2026-03-12 by comparing print-to-PDF output from both browsers across multiple
print dialog settings.
#### `@page { size }` — paper size
| Browser | Save to PDF | Physical printer |
|---|---|---|
| **Firefox** | Paper size locked — cannot change in dialog; CSS `@page { size }` used ✅ | Can select paper size in dialog |
| **Chrome/Chromium** | Paper size locked — cannot change in dialog; uses system default (letter, A4, etc.) ❌ | Can select paper size under "More settings" |
Chrome intentionally does not honor `@page { size }` for Save as PDF. It uses the system
default paper size. This is a Chrome design decision, not a bug in our code.
For actual printing to Epson/Zebra hardware: the printer driver controls paper size from
the loaded badge stock. CSS `@page { size }` is advisory only. Real badge printing is
unaffected by Chrome's behavior.
Use Firefox for accurate print-to-PDF proofing — it produces a correctly-sized PDF that
matches the badge stock dimensions exactly.
#### Margins — Chrome "Default" causes layout problems
| Chrome margin setting | Result |
|---|---|
| **Default** | ❌ Adds URL, date, and page-number headers/footers into the printable area. These eat into the space that `position: fixed; top: 50%` references, making the badge appear off-center or clipped against the footer. |
| **None** | ✅ Correct — badge centered cleanly |
| **Minimum** | ✅ Correct — small margins, badge still centered |
| **Custom (reasonable values)** | ✅ Correct |
The badge content itself is **not** distorted. Verified: Chrome "None" margins on an A4
page produces the badge perfectly horizontally centered (page center 297.5 pts, badge
content center 297.5 pts). The CSS centering logic is correct.
**Staff guidance for Chrome:**
- Set **Margins → None** (or Minimum) in Chrome's print dialog.
- Optionally set paper size to match badge stock under "More settings" when printing to PDF.
- For physical printer: select correct paper size under "More settings".
Firefox users can use "Save to PDF" directly — it just works.
---
## Related Files
| File | Role |