fix(print): use CSS named pages + break-before for reliable Firefox pagination
Build pitch-deck / build-push-deploy (push) Successful in 1m30s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 32s
CI / test-python-voice (push) Successful in 33s
CI / test-bqas (push) Successful in 30s

page: slide-page on each block wrapper forces Firefox to allocate a new
physical page per slide — the spec-correct approach. break-before: page
is belt-and-suspenders. Switched from break-after to break-before via
adjacent sibling selector to avoid a blank trailing page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-05-12 18:55:35 +02:00
parent 7f4b7da098
commit 583e54fabc
+23 -10
View File
@@ -1,3 +1,9 @@
/* Named page rule — must be outside @media print */
@page slide-page {
size: A4 landscape;
margin: 0;
}
@media screen { @media screen {
body { background: #d1d5db; } body { background: #d1d5db; }
} }
@@ -31,23 +37,30 @@
display: block !important; display: block !important;
} }
/* Block wrapper handles page breaks — flex containers break unreliably in Chrome */ /*
.print-page-break { * Block wrapper owns the page break.
* - `page: slide-page` assigns each wrapper its own named page type,
* which forces Firefox/Chrome to start a new physical page per element.
* - break-before/page-break-before are belt-and-suspenders for older engines.
* - We use break-before (not break-after) to avoid a blank trailing page.
*/
.print-page-break + .print-page-break {
page: slide-page;
display: block !important; display: block !important;
page-break-after: always !important; break-before: page !important;
break-after: page !important; page-break-before: always !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.print-page-break:last-child { .print-page-break:first-child {
page-break-after: auto !important; page: slide-page;
break-after: auto !important; display: block !important;
margin: 0 !important;
padding: 0 !important;
} }
/* Flex container for internal layout only — no break properties here */ /* Flex layout inside each slide — no break properties here */
.print-page { .print-page {
width: 297mm !important; width: 297mm !important;
height: 210mm !important; height: 210mm !important;