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?

Solution 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.

Solution 2

The @media rule in CSS can be used to define alternate rules for print.This is often used to hide navigation and change the style to fit print better:

@media print {
  .sidebar { display: none; }
}

You can also link a seperate stylesheet for print:

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

Solution 3

You can do this with the css when you specify media as print.

Solution 4

Another way, if desired, is to have the 'print' button on the page change the page in some way that you decide, then perform a javascript 'window.print();' to bring up the browser's print dialog.

Solution 5

Use a print stylesheet.

Edit: Regarding the followup, you can't, in general, add things to a page with CSS.

One option is to include your print-only content in the page, and hide it for screen stylesheets. You should make sure that the page still makes sense without CSS though.

Another option is to use generated content, but this isn't supported by Internet Explorer 7 and below, and can be quite limited.

If the print-only content is an image, you can swap that out using one of the popular image replacement techniques.

View more solutions

Comments

[Twan]

Above example is somewhat simplified. In reality you'd want to wrap the example SPAN into a check for the boolean, to avoid double code in the form of an if/else statement. In the end, common sense avoids more issues here than the methodology.