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?

Follow-up: can you have things be printed that are not rendered on the page? (i.e., hidden from currently being rendered)?

Answer 1

Yes, you can apply a printer css. There is a good article about it here.

Answer 2

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.

Answer 3

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

Answer 4

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" />

Answer 5

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.

Answer 6

There are several options available to you:

• You can open a new window with slightly different data to be printed.
• There are also CSS styles which you can use to alter the page layout.
• Finally you can specify completly different style sheets for screen, printed media, Braille readers etc.

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

See also CSS2 Print Reference

Answer 7

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.

Answer 8

The easiest way is to use CSS media types. For each CSS file you include, you can specify where it ought to be used: on-screen, when printing, for handhelds, for screen-readers, or various combinations of these.

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

This has been a standard since CSS2, and most browsers support it now. More information is available here: http://www.w3.org/TR/CSS2/media.html

Answer 9

CSS allows you to create stylesheets for particular types of media, meaning that you can have a stylesheet that only applies when you're printing a page, allowing you to cause it to be formatted differently.

Just include a media="print" attribute on your stylesheet link for that stylesheet.

This A List Apart article seems to be quite good on the subject.

Answer 10

I tried using different style sheets based on the media, but I ran into trouble getting all the options I needed in. Since then I usually redirect to a different entrance of our (Fusebox) framework (i.e. print.php in stead of index.php) which in essence is the same file except it sets an extra flag/constant.

In the XSL file associated with the page I then do additional work based on that flag/constant like leaving out the menu, columns of a table etc.

i.e. (Page shows a link that the user has to click to display the password on the screen. The print version has the password printed.)

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

Answer 11

You can define css rules that are specific to a media type. The following is a css example (copied from http://www.w3.org/TR/CSS2/media.html, section 7.2.1) that specifies different font sizes what gets displayed on a web page and what gets printed.

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Alternatively, you can specify what media a stylesheet should be applied to when including it in a page:

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

Answer 12

Yet another option is to have a hidden IFRAME that you call iframe.contentWindow.print() on. That will allow you to create an invisible layout that prints exactly as you want it to.

Of course, an even better solution is to export the file to a PDF and let the user print it out that way. PDFs produce the highest quality output, period. However, it is one more hoop for the user to jump through, so the rule of thumb is:

• PDFs for when the print layout matters
• HTML for when the pure text is more important than the layout

Answer 13

Anything you can do with CSS you can do in a print stylesheet. This means you can hide content in the print version which is shown in the screen version or hide content in the screen version which you want to show up when printing.All you do is apply display:none to the appropriate sections in the appropriate stylesheet.

Also it is a good idea to size your text in points for the print version (which is a bad idea for the screen version - stick to pixels, ems or percentages here). There is universal agreement as to what printed point sizes are where as mappings of pixels to points will vary with different resolution devices.

Answer 14

Here's another link from A List Apart regarding printing css called Printing a Book with CSS: Boom! http://www.alistapart.com/articles/boom/

Answer 15

nsayer mentions having a print button change the layout of your screen and then kicking off a window.print()

This is a solution that will probably have been overlooked by a lot of people and should be considered when you think your users want a little more of a WYSIWYG. It should probably be a "printer friendly" link though that changes the media type of your sheet sheets rather than "print this".

Using jquery, you could do something like this (not checked):

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});