Don't forget the printer

February 26th 2013 by Samuel Rossille

A lot of websites and blogs seem to forget to think about the printer when they design their stylesheets. As a result, printing them produces an unaesthetic document. You use your toner to print site navigation areas, headers, footers and ad banner, leaving the interesting content shrunk at the middle of the page.

dont-forget-the-printer

Using media queries

Configuring the stylesheet to produce a beautiful and convenient document when the page is printed is actually easy. All you have to do is:

You can find a details explanation about media queries here, but all you need to understand to get the job done is that in the CSS example below, the first rule is only applied when rendering content on screen, and the second rule only when printing the document.

@media screen {
    body {
        width: 75%;
    }
}

@media print {
    body {
        width: 100%;
    }
}

If you are perfectionist, you can also use the page-break-after CSS property to define where to insert page breaks (in addition to automatic page breaks), pretty much like when you insert a manual page break in a text document.

Real life example

So with this set of simple tools, it's very easy to make a web page printable. For example, the following lines in my stylesheet make each of the pages of this site correctly printable:

@media print {
    /* I add this class to the html elements 
    that I want only on the screen */
    .screen-only {
        display: none;
    }

    /* I add this class the elements after which 
    I want to force a page break */
    .page-break-after {
        page-break-after:always
    }

    /* The rules below override the layout 
    of my page to use the space
    previously used by the site map and the ad banner*/
    #maincontent {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    h1 {
        position: static;
        outline: none;
        border-bottom-width: 2px;
    }
}

You can see below: this page printed without the @media print rules, and the same page printed with these rules:

dont-forget-the-printer-2 dont-forget-the-printer-3

Easy, isn't it ? So please think about people who like to print what they read!

References: