Alex Rivera | Logout

Good rules for setting up print css?

Asked 2008-12-30T21:52:23.270
21

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?

Edit
Report

2 Answers

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.

answered 2008-12-30T21:59:52.803
2

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.
answered 2008-12-30T22:29:51.180

Your Answer