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?

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

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 3

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

Solution 5

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.

View more solutions

Comments

[nickf]

good tip with the fonts - that's something I've always overlooked!

[Jitendra Vyas]

+1 helpful answer for me also

[Ben Hull]

.NoPrint might be convenient, but it's mixing presentation into your HTML, which isn't ideal. It's better to have a 'no print' block in your print CSS file, and use a grouped selector to add elements to it by their existing classes, element names and ID's.

[Admin]

Probably it is better to use ` a[href^="http"]` so https and http hrefs be printed. Anyways thanks for the tip!