ORIGINAL REDDIT POST
Bug: No way to use a custom @page size with the Edge print dialog. Any solution?
Any other app developers encounter this Edge bug: When generating a PDF from a web app using window.print()with a custom page size set via CSS , for example: @ page { size: 5.5in 8.5in; margin: 0; }, the Edge print dialog ignores the custom size and uses…
Any other app developers encounter this Edge bug: When generating a PDF from a web app using window.print()with a custom page size set via CSS , for example: @ page { size: 5.5in 8.5in; margin: 0; }, the Edge print dialog ignores the custom size and uses whatever page size is set in the dialog's size dropdown, often creating extra margins on the right and bottom PDF page edges. And there's no fix for this that I can find other than to always use Chrome.
Collected discussion
Thanks for the suggestion although it sounds a little more complicated than I was looking for. The app I have is just running in the browser with no backend and what it does is fairly simple but it has to create PDF pages with custom page sizes for self-publishing via KDP and others. Edge is creating the pages with the correct content but completely ignoring the CSS page rule that should tell it what the page size is so i get bottom and right page borders that are completely wrong. However, chrome does this correctly but I'd like to get this working in Edge. Not least because I'd like to offer this very useful and free app through the Microsoft store and this bug is preventing that.
Edge is such a great browser with so many great features for web developers I was really surprised that Microsoft didn't get this right. Being able to have the page size set in CSS doesn't seem like a big ask.
Thanks for that suggestion! I looked at that library early on and found there were a lot of aspects that made it unsuitable such as huge file sizes and rejection by Amazon KDP. window.print() is ideal for my app, it's just frustrating that Edge has this issue.
Well Microsoft moves in strange ways. I was silently upgraded from Edge 150.0.4078.99 to 150.0.4078.105 and guess what happened? The problem disappeared and I can now apparently set the page size through CSS. Case closed. Thanks for all the responses!
Thanks for the reply! I've never had any issues in Chrome and the very latest Edge update released in the last couple of days seems to have fixed the issue in Edge. But thanks again anyway.
It might not be worth it for your use case, but years ago we had a project where users needed to save all the information on a page as a strongly branded brochure. At the time, the best approach was a print stylesheet for the page (we were already doing some canvas-based image modifications). Consistency was critical, though, and the web was far more fragmented than it is today. We ultimately decided to offer the brochure as a PDF download, generated when the page was published by running Puppeteer and using Chrome’s print-to-PDF functionality. Nowadays, something like Gotenberg.dev handles that entire pipeline for you.
That's frustrating. It seems like Edge just ignores some print settings no matter what you pass in
Have you thought about replacing window.print() with a client-side JavaScript PDF library? The exact canvas dimensions are baked into the PDF document structure rather than relying on browser CSS media parsing. https://github.com/eKoopmans/html2pdf.js You can generate the PDF on the server as well.
That's a known Chromium print-dialog quirk, worse on Edge, where the @page CSS size loses to whatever paper size is picked in the native dialog dropdown. If you can move off window.print() entirely, generate the PDF server-side with Puppeteer or Playwright's page.pdf() passing width/height directly. No OS dialog in the loop so it always honors your CSS size, and margins stay exact too.