Printing a web page
By glazou on Monday 18 June 2012, 11:09 - Standards - Permalink
I hit a problem printing two well-known (in my personal environment) web pages this morning. I needed to print the W3C's FAQ and the home page of ERCIM, the european foot of the W3C. Because both have @media print stylesheets, you can see in the following screenshots a comparison between the screen rendering of the web pages and the corresponding print results:
Oops, I really needed the logo and a better presentation but the print stylesheet hides it (I checked the print option to have it printed)
Wow, that's a bit of a minimal print stylesheet 
So I needed a print of the web pages "as on the screen". But the print dialog of my browsers (I tested Firefox, Safari and Chromium on my Mac) has no such option:
Yeah, yeah, I know, I can still make a screenshot of the pages, open them in my browser and ask the browser to print the screenshot. But if *I* can do it, that's overkill for the average non-geeky user. The web page could also have alternate print stylesheets but we hit a similar problem: there's no way to select them and such a UI would be certainly too complex to many users... A "Print as on screen" option is clearly missing here and I wish Microsoft, Apple and Linux distros could add it to their respective system print dialog browser vendors could add such a new menu entry living next to the existing "Print" menu item.
Comments
Basically, the UI where you select the print settings is still part of the browser, so it should live there. What the OS receives is just what the browser made of it.
Apart from that I agree, that such an option would be a good idea. From my own (professional) experience I know, that print stylesheets are neglected on both sides, the authors and vendors. So in some cases a "print what I see, dammit" button would fit just right. I once tried to mimic TeX output with HTML+CSS and presented the result at the SVG Open 2010 (http://www.svgopen.org/2010/papers/...). It was a rather depressive talk.
I'd like a "see what I would print" (at least for developpers) option as well. Maybe the option is somewhere to be found (?).
Perso, quand l'aperçu impression m'indique que certaine parties de ma page web seront imprimées en dehors de ma feuille A4 (ça arrive qque soit le navigateur), je sauvegarde ma page web, j'enlève toutes les refs aux feuilles de styles, et les éléments de style les plus influents, je re-ouvre ma page, et j'imprime.
Donc, IMHO, je pense qu'il serait aussi intéressant d'avoir (comme mode de secours) un mode d'impression sans feuille de style, voire sans élément de style tout court.
@Manuel Strehl: you're absolutely correct, I updated my prose accordingly. Thanks.
@Yep - That's already in there. It's called "Print Preview".
@Olly Hodgson : not on Mac... And the system dalog's button/menu "Preview" can't help here as explained by Manuel above. Have you tried the URL I mention in my article?
Well...it's a real hack, but when I've been in a similar situation, I use Firebug (or Chrome's Developer Tools) to remove the Print stylesheet from the HTML, causing the printout to become WYSIWYG again.
WYSIWYP bookmarklet: http://hackademix.net/2012/06/19/wy...
The Web Developer extension has a set of options for disabling individual style sheets.
http://chrispederick.com/work/web-d...
Similarly, you can use FX's new built-in Style Editor to disable print style sheets.
@James Napolitano: yes, but that's faaaaar too complex for the average user.
True, I only meant it as an easier alternative to taking screenshots, or even as a source of code to build another solution with. But your new add-on solves the problem perfectly, so it's a moot point ;).