On some websites, when you try to print the web page as a PDF or to a print out, the print preview shows either a blank page or some parts of the web page do not appear.
In this article we use the Developer Tools menu in Chrome browser to improve the print result.
Understand the problem
The issue is that some websites have to CSS files to apply display styles to the web page. One called “Screen” CSS, and the other called “Print” CSS.
Usually they restrict the Print display style to what they think is more appropriate for printouts.
Using some hidden commands, you might be able to force the browser to print the webpage using the “Screen” display style instead.
To do
- Run the browser Developer Tools using one of the following methods (based on Chrome browser):
- Right-click on some empty area of the web page > then click Inspect.
- Windows OS: press F12 or: Ctrl + Shift + J.
- Mac OS: press Fn + F12 or: Cmd + Option.
- From the three-dots menu ⋮ > More tools > click Rendering.
- Find the Rendering tab on the Dev tools then: scroll on it and locate “Emulate CSS media type” > change it from “No emulation” to “Screen” emulation.
Another way to run the Emulate Screen as a command is using the Command Menu in the Dev Tools:
- Windows OS: Press Ctrl + Shift + P.
- Mac OS: Cmd + Shift + P.
Then “Emulate CSS screen media type” then hit Enter.
External articles:
Using Chrome’s Element Inspector in Print Preview Mode? – Stack overflow
