html - How can you make a web page send to the printer something different than what's in the browser window?

Question

Google Maps used to do this bit where when you hit the "Print" link, what would be sent to the printer wasn't exactly what you had on the screen, but rather a differently-formatted version of mostly the same information.

It appears that they've largely moved away from this concept (I guess people didn't understand it) and most websites have a "print version" of things like articles and so forth.

But if you wanted to make a webpage such that a "printer friendly" version of the page is what gets sent to the printer without having to make a separate page for it, how would you do that?

Answer 1

You can achieve this effect by creating a css stylesheet which is targeted directly to printing, and another targeted directly for the screen.

Use the link tag:

<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

to embed your stylesheet into your document.

To hide is easy, just set your block style to hidden in whatever stylesheet you want and it wont be displayed. For example:

.newStyle1 {
    display: none;
}

Then anything set to the style of newStyle1 will not be displayed.