Printing webpages WYSIWYG

Lately I’ve been noticing that webpages aren’t printing out like they appear on screen, instead they seem to be accessing some secret print version of the pages with just a single column of printer friendly text. This is happening to me in Safari in OSX, but I tried Chrome and it does it there too. This wouldn’t be as much a problem for me except that it also affects the print to PDF function, because otherwise I would take a window screenshot, but that saves as an image rather than as postscript. Googling around, it seems to be related to pages having a separate CSS for printing. But I can’t seem to find a way to make that optional rather than mandatory. Any ideas?

Can you save these pages as either (in Chromium anyway) a complete webpage or an html file, and then load and print the saved page? Maybe with some editing before loading the saved page to clean it up?

This page offers a solution using the Web Developer extension. In Firefox, after installing the extension, you’d use the command Tools/Web Developer Extension/CSS/Disable Styles/Disable Print Styles. They say it’s available for Chrome too.

A properly designed web page should print differently than what you view in a browser. A printed web page has no need for presentation graphics or navigation areas; just the relevant content.

As Space Vegetable recommends, using a Firefox addon to disable the web developer’s print CSS with your own may be an option.

Well that depends on the webpage and why you are printing it. I agree that having that option is useful, although I think it is better implemented as an automatically generated “printer friendly” link rather than a non intuitive printer hijack. But it is screwing with my ability to create a text searchable PDF of the page. Plus, whoever does the CSS usually does a piss poor job anyway with the first page tending to replicate the sidebar text.

I’ll give that a try, thanks.