CSS: Making Your Site Printable: CSS Summit 2014 - by Adrian Roselli, Founder, Web Developer at Algonquin Studios

gistfile1.css

/* Print Styles - http://www.slideshare.net/aardrian/css-summit-2014-making-your-site-printable */

/* 
    Resize type sizes to points, set text to black
    - Points provide more consistent text size across browsers and devices
    - Not all users have color printers.

    Clear whitespace around content
    - User's print settings will handle page margins

    General
    - Write values of 'title' (or 'alt', or 'data-*', etc.)
*/

@media print {

    /* In-Page Links: display 'href' value as text after the link; */
    #content a[href]:after {
        content: " [" attr(href)"] ";
        word-wrap: break-word;
    }
    #content a[href^="#"]:after,
    #content a[href^="tel"]:after,
    #content a[href^="mailto"]:after,
    #content a[href^="javascript"]:after {
        content: "";
    }

    /* Breadcrumbs: reduce size, don't expand links */
    #bread a:link, #bread a:visited {
        text-decoration: underline;
        color: #000;
    }
    #bread {
        color: #000;
        font-size: 6pt;
    }
    #bread > a::after {
        content: "";
    }

    /* Banner: change any text to print units; consider SVG; */
    
    /* Footer: change any text to print units; */
    footer {
        border-top: 1px solid #000;
        font-size: 6pt;
        color: #000;
        background-color: transparent;
    }
    footer p {
        margin: 0;
        color: #000;
    }
    footer p a:after {
        content: attr(data-alt);
    }

    /* Page Breaks */
    /*  
        page-break-before
        page-break-after
        page-break-inside
    */
    .rule {
        page-break-before: auto; /* default, no specific behavior */
        page-break-before: avoid; /* tried to avoid page break */
        page-break-before: always; /* invokes a page break (not for page-break-inside) */
        page-break-before: left; /* Tries to place element on the start of a page on the left */
        page-break-before: right; /* Tries to place element on the start of a page on the right */
    }

    /* Widows & Orphans: use to control how many lines must be at the end of a page(orphans) or how many at the start of a page(widows); */
    p {
        orphans: 3; /* 3 consecutive lines at end of page */
        widows: 2; /* 2 lines at start of new page */
    }
    
    /* Invert Logos: For rare cases with white logo where you can't load an alternate image (Chrome & Safari only); */
    img#logo {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    /* Google Analytics 
        - Call GA tracking image, but only when the print styles get used.
        - Attach a custom event to that image
        - View custom events in GA
        - Identify which pages get printed
        - Make sure that at least those pages print well
        - Query String Parameters
            - utmac: Account String. Appears on all requests. This is your UA-#######-# ID. 
            - utmwv: Tracking code version. While my standard GA requests use 5.4.0, I opted to use 4.3 for reasons I no longer recall. 
            - utmn: Unique ID generated for each GIF request to prevent caching of the GIF image. I just concatenate the current year, month, day, hour, minute and second. 
            - utmhn: Host Name of your site, which is a URL-encoded string. 
            - utmr: Referral, complete URL. In this case I just insert a dash so it is not blank. 
            - utmp: Page request of the current page. 
            - utmt: Indicates the type of request, which is one of: 'event', 'transaction', 'item', or a custom variable. If you leave it blank, it defaults to 'page'. Because I am tracking 'events', I use event. 
            - utme: Extensible parameter. This is where you write your event. I use '5(Print*{page address})'. 
            - utmcc: Cookie values. This request parameter sends all the cookies requested from the page. It can get pretty long. It must be URL encoded. It must include '__utma' and '__utmz' values.
        
        - Check Data in GA
            - Events > Top Events (print);
    */

    header::after {
        content: url(http://www.google-analytics.com/__utm.gif ?utmac=UA-1464893-3 &utmwv=4.3 &utmn=2013326124551 &utmhn=algonquinstudios.com &utmr=- &utmp=/Engage/Careers &utmt=event &utme=5%28Print*/Engage/Careers%29 &utmcc=__utma%3D267504222.1477743002.1364314722.1364314722 .1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3 B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%2 9|utmccn%3D%28direct%29|utmcmd%3D%28none%29);
    }

    /* Page Margin Boxes */
    @page {
        @bottom-left {
            content: "Copyright me.";
        }
        @bottom-right {
            counter-increment: page;
            content: "Page " counter(page);
        }
    }
}