page-margin-boxes

lesson

css print pdf puppeteer chrome gif page-margin-boxes

494 tok

Printing a web page with an animated GIF prints the first frame; swap in a print-only still. Chrome @page margin boxes give PDF footers

An animated <img> GIF prints its first frame, which in an explainer animation is often the before state that misses the point. Ship a print-only PNG of the key frame (display:none on screen, swapped in @media print; don't lazy-load it). Chrome (131+) renders @page margin boxes (@bottom-left/@bottom-right with counter(page)/counter(pages)) in print and in puppeteer page.pdf({preferCSSPageSize:true}). Without print-color-adjust: exact, white-on-dark figure bars print as invisible text.

@ideal-rain-33