Coders! Don't forget your CSS print styles!

I rarely read long articles on the desktop instead preferring to print them out. I don't know if there are statistics out there, but I would imagine that this is a common practice.

Thankfully there is the wonderful Readability browser plugin that lets us change an article into a beautifully rendered page of text which is perfect for printing out. However, I'm amazed how many web design sites and blogs that, while look stunning, have given no thought at all to providing CSS rules for print. Surely this should come under the roof of good usability? Give your reader the choice of printing your article so that they can read it at their leisure later.

The sad thing about this is that it is so damn easy to implement as the CSS rules for print are the same for almost every web build.

Below is the print CSS I use on every site. It's based on the HTML5 Boilerplate code, but with some additions:

@media print {
    
    * {
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        background: none!important;
    }

/* below choose which page sections you want to hide for print */

    div[id=sidebar], div[role=navigation], div[id=footer] {
        display: none!important;
    }

    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font: 62.5%  Garamond,"Times New Roman", serif!important;
        line-height: 2em;
    }

    h1,h2,h3,h4,h5,h6 {
        font-family: Helvetica, Arial, sans-serif;
    }

    h1 {
        font-size: 2em;
        margin-bottom: 1em;
    }

    h2 {
        font-size: 1.9em;
        margin-bottom: 1.05263158em;
    }

    h3 {
        font-size: 1.8em;
        margin-bottom: 1.11111111em;
    }

    h4,h5,h6 {
        font-size: 1.7em;
        margin-bottom: 1.17647059em;
    }

    p, li {
        font-size: 1.6em;
        margin-bottom: 1.25em;
    }

    code, pre {
        font: 15px Courier, monospace;
	border : none!important;
    }

    blockquote {
        margin: 16px;
        padding: 1em;
    }

    img {
        display: block;
        margin: 1em 0;
    }

    a img {
        border: none;
    }

    table {
        margin: 1px;
        text-align: left;
    }

    th {
        border-bottom: 1px solid #333;
        font-weight: bold;
    }

    td {
        border-bottom: 1px solid #333;
    }

    th, td {
        padding: 4px 10px 4px 0;
    }

    caption {
        background: #fff;
        margin-bottom: 2em;
        text-align: left;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
   
}