I'm building a browser-only web app that uses window.print() to create PDF pages for self-publishing. The page uses a print stylesheet such as @page { size: 5.5in 8.5in; margin: 0; }, but Edge's print dialog ignores the CSS-defined dimensions and uses the paper size selected in its dropdown instead. The content itself is correct, but the resulting PDF has incorrect extra margins along the right and bottom edges. Chrome handles the custom size correctly. Is there a workaround that keeps using window.print(), or is this an Edge-specific bug?
4 Answers
A client-side HTML-to-PDF library is another possibility because it writes the page dimensions directly into the PDF instead of depending on browser print CSS. However, libraries in that category can produce very large files or PDFs that fail publishing-platform requirements, so they may not be a good fit here.
For a branded or highly consistent document, rendering the PDF with a headless browser on a server is usually the most reliable approach. It’s more infrastructure than window.print(), though, and may be unnecessary if the Edge update has already corrected the issue.
This appears to be a Chromium-based print-dialog quirk that was particularly noticeable in Edge: the dialog’s selected paper size could override the @page size. A recent Edge update may have fixed it, so updating the browser is worth trying before changing the implementation.
If you need consistent output across browsers, avoid the native print dialog and generate the PDF directly. Puppeteer or Playwright can create PDFs with explicit width, height, and margin values, which removes the operating system dialog from the process and gives you predictable dimensions.
That seems to have solved it. After the latest Edge update, the browser now honors the custom CSS page size, so the extra borders are gone.