How to: Creating an efficient print stylesheet

Many Internet users tend to print web pages: Even if most of the time, it is unnecessary, printing a page can sometimes be very useful. And in these cases, what's more irritating than a page that prints bad, cut in two, or with large spaces between paragraphs?
In this tutorial, we're going to create a print stylesheet which will make us able to control what should be printed, and how.


Before starting

  • Previous versions of Internet Explorer 6 do not distinguish between a normal stylesheet normal and a print stylesheet. As a result, your website will appear on the screen as you wish to see on a paper sheet. Using a conditional comment can fix this problem.
  • If your site is full of html tables, it’s quite easy to guess that the result will probably not be as expected. The more your site is valid XHTML, the better it will render once printed.
  • By default, background images (ie, inserted through the main stylesheet) will not be printed, but images included in html (<img src…) will.
  • It is a very good idea to add a .noprint css class to HTML elements that you don’t want to print (like navigation bars, for example). It will then be easy to hide these elements in the print stylesheet by using the display css property .

Creating the stylesheet

In terms of syntax, nothing distinguishes a “print” stylesheet from a classic css. The only difference is the use of the media html attribute, which will tell the browser in which case use this css.

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

Let’s start to write our stylesheet:

html {
     width:100%
}

body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
}

a {
    color: #000;
}

img {
    border: 0;
}

Set the width to 100%: This will allow the printer to use the full length available on the sheet. Nor should we forget to specify that the background color is white: the user will save money and ink. For the text, we will print in black with a size of 12 points, thus ensuring good visibility on paper, whether at the contrast that the size of characters. Personally, I do not see the interest of applying a different colour to the links. I defined links color to be the same as the rest of the text.

Now, we’ll do the bigger part of work: hidding the useless element on a printed version.
I you followed my tip about the .noprint css class, here’s what you have to do. Easy, isn’t it?

.noprint{
    display: none;
}

Don’t forget to also hide all element which doesn’t have any interest on a paper sheet.

#nav, #footer, #sidebar {
    display:none;
}

We did the most part of it. Now, let’s see how we can enhance the print render.

Controlling display on paper with CSS

The page-break-inside, page-break-before and page-break-after css properties aren’t known by many developpers. It’s a bad thing in my opinion, because even if you’re not going to use it everyday, when you must set-up a print stylesheet they’re particullary useful.

Theses css properties controls page breaks and allows you to define where it is possible to jump to the next page.
There’s 6 diffrent values for the page-break-before and page-break-after properties, but auto and always are the most common:

  • auto: Default value. Insert a page break only if the printer is currently at the bottom of the page.
  • always: Automatically insert a page break.

Let’s talk a bit about page-break-inside. The role of this property is to specify if it’s possible or not to split an element on two diffrent pages. There’s 3 differents values availables, avoid, which avoid page-breaking inside the element, auto, and inherit.

Let’s continue to write our stylesheet: It is obvious that we do not want, for example, to have a &lth2> title at the very bottom of page and the text printed on the next page. This is where page-break-before will be very usefull.
Also,we’ll define that we don’t want any paragraph to be split and printed on two different pages. We’ll use the page page-break-inside css property:

h1, h2 {
    page-break-before: auto;
}

p {
    page-break-inside: avoid;
}

Now, we have our print stylesheet, ready to use!

html {
     width:100%
}

body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
}

a {
    color: #000;
}

img {
    border: 0;
}

.noprint{
    display: none;
}

h1, h2 {
    page-break-before: auto;
}

p {
    page-break-inside: avoid;
}
Enjoyed this article? Please consider donating: 3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK