Print Stylesheet Best Practices and Rules

  1. Try to write print styles to elements rather than selectors. It is more important to target as much code with as little css as possible than write more lines to address specific classes.
  2. The 'print' attribute, when used to invoke the print stylesheet, should help avoid any specificity conflicts.
    @media print {
        body {
            ...
        }
        h1 {
            ...
        }
        img {
            ...
        }
        ...
    }
                                    
    Some of the example rules may have to be repeated as necessary for any specifically styled content that might supersede it in specificity, and/or suffixed with an !important tag.
  3. Include a print styles partial within the base elements file:
    //need a better path
    @include: "print/print";
                                    
  4. Make sure all font sizes are in points (printers render that better than px, ems or %s). 12pt is the most recommended:
    @media print {
        body {
            font-size: 12pt;
        }
        ...
    }
                                    
  5. Use a serif font for easier readability on paper:
    @media print {
        body {
            font-family: Georgia, "Times New Roman", serif;
        }
        ...
    }
                                    
  6. Remove/reset background colors to white as a default, and any text as black for the printer:
    @media print {
        body {
            // or background-color: none;
            background-color: #fff;
            color: #000;
        }
        ...
    }
                                    
  7. If a margin is needed, use centimeters for printer ease:
    @media print {
        body {
            margin: 2cm;
        }
    }
                                    
  8. Remove all images –especially any background images (logo Included):
    @media print {
        img {
            display: none;
        }
        ...
    }
                                    
  9. Specify rules to avoid breaking elements in certain places:
    @media print {
        h2, h3 {
            page-break-after: avoid;
        }
        ul, ol, dl {
            page-break-inside: avoid;
        }
    }
                                    
  10. You can also specify when to start a new page for elements in certain places:
    @media print {
        //This is for a comments section 
        //that a user may want to opt out of printing...
        .comments {  
            page-break-before: always;
        }
    }
                                    

Print Stylesheet Navigation

  1. Remove the navigation – it does not help you on a printed page
  2. You can keep breadcrumbs as a reference point to the page you were on when you printed; OR This handy JS will insert the URL of the page you are on currently on the printed page:
    DomReady.ready(function () {
        var footerPrintLink = window.location.href;
        document.getElementsByClassName("printLink").append(footerPrintLink);
    });
                                    
    This also requires "class=’printLink'" on an element in the footer
  3. Enlarge the content area to fit on an 8.5 x 11 piece of paper:
    @media print {
        body {
            width: 100%;
            margin: 0;
            padding: 0;
        }
    }
                                    
  4. Add back any global styles that you would like to add in order to mirror the look of the website (font-family, size, etc)

Print Stylesheet Links

  1. Add web URL or contact info to each page (ensure that carries over from footer or somewhere)
  2. Address hyperlinks by treating the linked text a little differently (underline etc) and appending the link itself in the printout Use something like:
    * a:link:after {
        content: " (" attr(href) ") ";
        font-size: 9pt;
        text-decoration: underline;
    }
    
    a[href^="/"]:after {
        content: " (http://my.coloniallife.com" attr(href) ") ";
    }
                                    
    The first method prints out URLS behind links for the web. The second one appends relative links to the end of the URL that is within the parentheses.

Print Floats

  1. Floats that contain more than 1 page of information have a tendency to not print out after the first page. To address that issue, set the float of the target element to ‘none’. This puts the content of the float back in the normal doc flow. For example: '.example-class { float: none !important; }' Only add '!important' if necessary.
  2. Use margins for all spatial requirements. Some browsers do not handle padding well for print.