How to: Creating an efficient print stylesheet

by Jean-Baptiste Jung. 17 Comments -

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

Comments (17) - Leave yours

  1. Eitan said:

    Nice post. The printer version doesn’t get enough attention these days.

    An extra tip that I discovered the hard way: any elements that are specified as fixed position will be printed on every page in that position (at least in the new FF3). They should probably be set as hidden in the printer friendly view so they don’t cover up any text on the page.

  3. Web 2.0 Announcer said:

    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 betw…

  4. paul said:

    I work with designers who still think they need a printable version link on every page. I’ve been a big fan of print and handheld media style sheets. Nice to see the page break properties outlined like this. What’s the low-down on the support for IE 6? Another way to get around support for IE is to use the onBeforePrint() javascript method to show and hide elements etc — it’s not fun to basically make your print stylesheet twice (once coded in JS), but it beats the alternative.

  5. jbj said:

    @paul: I didn’t know the onBeforePrint() method. It seems to be a very good way to have things done in IE6. Thanks for sharing!

  9. Hayes Potter said:

    Whoa, my idea of a print style sheet was soooo different than what you said, and now I know what screen.css is lol. I thought both style sheets were for cleaning up messy code.

  13. Добавление кнопки “Печать” в ваши посты в WordPress. | Всё для WordPress (ВордПресс). Рsaid:

    [...] Если вы не знаете как создать отличные стили для страницы печати, то вам просто необходимо прочитать эту статью. [...]

  16. Dora Crow said:

    Thank you! You’ve helped me with an issue I had with my CSS print stylesheet. (I’m a Dreamweaver student.)

    * Following you on Twitter now… :)

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!