Good rules for setting up print css?

Question

I'm looking for any suggestion/rules/guides on making a decent print css for when a webpage is printed. Do you have any to offer?

Answer 1

Watch out for background images and colors. I think IE's default behavior is not to printout background images or colors.

Answer 2

it is a problem. In IE (and I believe in firefox as well)the user can define the margins of the page and a few more things (like the if to show the url, page numbers etc') You don't have full control.

I created a web page that print into a labels page and it was very hard.

Answer 3

You have this old but still relevant article from Eric Meyer on a List apart.

The main point is to start afresh, explicitly setting borders and marging / padding to 0, white background, and "display none" to any non-essential elements for printing (like certain menus)

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

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

And go from there.

Answer 4

Here are some general print styles to use to get better print outs:

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

The top one prevents page breaks inside of a table row

The thead style makes any rows in the thead tag repeat for each page that the table spans across.

NoPrint is a class I use to show something on the screen, but not in print.

And, I like to turn off link colors.

Answer 5

First read this article from A List Apart (http://www.alistapart.com/articles/goingtoprint/). They cover a lot of the basics you're looking for (expanded links, whitewashing, etc).

Don't rely on print preview, make sure to go through the entire process when testing a print layout. To save paper install SnagIt or use the Microsoft XPS document writer. You can print directly to an image and not waste any paper.

Also for long articles, consider changing your font to serif. Articles on the web are easiest to read in sans-serif (Arial, Verdana) but in print try Times New Roman or Georgia.

Answer 6

When you are defining the style of printing, you have to think on a paper and in physical units.

• Set the margins in centimetres (inches) and the font sizes in points (just like in OpenOffice).
• Create a class like 'screen' or 'noprint' to be able to easily remove unwanted material.
• Forget about fancy coloured text. Black text on white background.
• Think about removing superfluous images -- they might not look that good in black and white
• Remove underlining from links, and make links have sane text. It looks silly to read "check this page", where "this" is underlined. Or if you put the href of the link after underlined text, then it can be more useful but doesn't look so nice IMHO.

Answer 7

One thing that I make sure to put in my print style sheet is:

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

This writes the actual link next to link text so people who print the document will know were the link is suppose to go.

I also set my body text to be a little more readable for print:

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}