Blank Print Preview when Printing Webpage
I wanted to sign up for an event recently and the web page asked me to sign a waiver. This looked like a document I should save so I tried to print it as a PDF. I was surprised that the PDF was a completely blank page. This reminded me of my encounter with Printer Unfriendly HTML and CSS. I inspected the computed styles of the elements on the page. Interestingly, they were all reasonably sized (e.g. the main div elements appeared to be thousands of pixels tall and wide). Even the body was tall enough to make it strange that nothing would show up in the print preview. My first AI prompt:
- the html body has the full width and height of the content. why is the print preview a completely blank page (seen both in edge and firefox)
- how to detect if there is a print stylesheet for the webpage
One of the answers to the 2nd query was to use DevTools to force print media mode! This approach is documented at Emulate CSS media features | Chrome DevTools | Chrome for Developers: Open the rendering tab and under Emulate CSS media type select print. This rendered a blank page, which confirmed that the web page was designed to behave this way (this wasn’t just accidentally bad HTML/CSS design, there was some intentionality).
Leave a Reply