Why do my webpages not print what I see in my browser?
The reason some of your web pages are printing differently is because they have a print stylesheet.
What is a Print Stylesheet?
A print stylesheet formats a web page so when printed, it
automatically prints in a user-friendly format. Print stylesheets have
been around for a number of years and have been written about a lot.
Yet so few websites implement them, meaning we're left with web pages
that frustratingly don't properly print on to paper.
It's remarkable that so few websites use print stylesheets as:
- Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
- They're phenomenally quick and easy to set up
Some websites do offer a link to a print-friendly version of the page,
but this of course needs to be set up and maintained. It also requires
that users notice this link on the screen, and then use it ahead of
the regular way they print pages (e.g. by selecting the print button
at the top of the screen). Print-friendly versions are however useful
when printing a number of web pages at the same time such as an
article that spans on to several web pages.
Source Disable Print Stylesheets (CSS) When Printing a Website
How Do I Disable a Print Stylesheet?
I recently needed to get a snapshot of a website exactly as it is
shown on my screen. That is, I wanted the background color, I wanted
the ads, I wanted the full layout.
One option is to take sequential screenshots as you scroll down the
page, then piece them back together in Photoshop. This is time
consuming and leaves you with a low-resolution (72dpi) image.
Another way to do this is to Print the page, then "save as" a PDF
instead of actually printing. This works quite well for pages that do
not define a different layout for printing a page versus viewing the
page.
Unfortunately for me, it has become increasingly popular to include a
"print" stylesheet on a website, which defines new page styles when a
user tries to print the website. This is defined in the header and
looks something like this:
I have found only one option that truly addresses my needs: The "Web
Developer" add-on / extension developed by Chris Pederick.
With this plugin you can very easily disable ALL styles, Default
styles, inline styles, embedded styles, and, you guessed it, print
styles!
It is currently available for Firefox and Chrome. I truly hope a
Safari extension will come some day, as I primarily use Safari. The
only option I have found for Safari is to disable ALL styles - a
feature that comes by default with the newest version (5.0.3) of the
browser. This is useful during development to see how your site will
be viewed on a text-only browser but without the ability to select
which styles you're disabling it has limited utility.
Here is an example of disabling print styles with the above extension in Firefox:
Source Print stylesheet - the definitive guide
