Good rules for setting up print css? [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this 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

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

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

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

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

Answer 6

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