Good rules for setting up print css? [closed]

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?

Solution 1:

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.

Solution 2:

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.

Solution 3:

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;
}

Solution 4:

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.