It’s a common need to capture a web page as it looks on your screen, complete with backgrounds, advertisements, and the intended layout. While seemingly straightforward, printing web pages can sometimes be tricky, especially when you aim for an exact visual replica.
One initial thought might be to use screenshots. You could take scrolling screenshots and stitch them together using image editing software like Photoshop. However, this method is often cumbersome, time-consuming, and results in low-resolution images, typically at 72dpi.
Another approach is to utilize the “Print” function of your browser and then select “Save as PDF” instead of physically printing. This can work reasonably well if the website displays the same layout for both screen viewing and printing.
Unfortunately, many modern websites employ “print stylesheets.” These stylesheets are designed to alter the page’s appearance specifically for printing, often simplifying layouts, removing ads, or changing styles. Websites implement this by including code in the header like this:
This practice means the “Save as PDF” method might not capture the web page as you see it on your screen, but rather a simplified, print-optimized version.
So, How Do You Print Web Pages accurately, capturing the on-screen appearance, even with print stylesheets in place? The most effective solution lies in using a browser extension like the “Web Developer” extension by Chris Pederick.
This invaluable plugin gives you granular control over website styles. With it, you can disable various style types, including default styles, inline styles, embedded styles, and crucially, print styles. By disabling print styles, you force the browser to print the page using the on-screen display styles.
The “Web Developer” extension is readily available for both Firefox and Chrome. While a dedicated Safari extension would be welcomed by Safari users, currently, Safari’s built-in “Disable Styles” feature offers a more basic solution. This default Safari feature, found in newer versions (like 5.0.3), disables all styles, which can be useful for development purposes or for viewing a text-only version of a site. However, it lacks the selective style disabling capabilities of the Web Developer extension, making the extension a superior choice for accurately printing web pages as they appear online.
In conclusion, while browser print-to-PDF functions and screenshots have limitations, leveraging the “Web Developer” extension to disable print stylesheets provides a robust and effective way to print web pages exactly as you see them in your browser. This ensures you capture the complete visual representation of the webpage, overcoming the challenges posed by print-specific styling.
