Blog

Make Your Site Printer-friendly with CSS

As we found in Scott’s great post last week, printing is still a huge part of how people receive information on the Internet. And a little-known feature in CSS can help make your site look as good printed as it does on desktop or mobile browsers. That way you’ll ensure your visitors are happy printing good-looking coupons or PDFs!

printer_coupon

media=”print”

The first step to making your site look great when it’s printed is to define a print stylesheet. There are two ways to do this. First, you can create a separate stylesheet with just the rules for printing the page, and specify it using the media="print" attribute:

<link rel="stylesheet" media="print" src="my_print_stylesheet.css" />

The other way to do it would be to specify print rules directly in the stylesheet, using the @media print group:

@media print {
    /* Print CSS rules go here */
    /* Note: You need a separate @media screen group for other rules */
}

Next Improvements

Now that you can tell visitors’ browsers how to print pages on your site, here are some tips for improving your site’s printed view:

  • Remove extraneous elements––People aren’t going to be clicking ads, navigation menus, or sharing buttons on printed documents, so those will just be in the way. Use the 'display:none;' CSS declaration to hide these. You could also move them around on the page to make the printed article easier to read, such as wrapping text around interstitial ads rather than having them break up the content.
  • Accentuate the features––Many articles today have excerpts, sidebars, and infographics that get cut off or removed entirely when they’re printed. Your print stylesheet should make sure these are included in the printed version.
  • Change the font––For some types of content, like recipes, people will be reading it at a distance, so a larger, easier to read font would be helpful. There have been extensive studies that show that serif fonts like Times New Roman are easier to read on print than sans-serif fonts like Helvetica, while sans-serif is easier to read on the Internet.
  • Remove color––Printer ink is one of the most expensive liquids that exists, and while you’ve spent a lot of time figuring out your site’s color scheme, most people don’t want to print color because of the cost. Your print stylesheet can remove the color from links and headers, and, in the latest browsers, even take the color out of images. Doing this will help your visitors save money, particularly if your site is printer-heavy.

With these strategies you can make sure that the users who are printing your page will get the best results with minimal hassle! Got any other tips you’d suggest?

  • craftmanoj

    clean and nice

  • Bug report: The “print” button inside the Addthis lightbox prints the lightbox itself, not the page.

  • Bruce

    Ironic that your “print this page” button (at least on Chrome) does not produce a very print-worthy page. You might take a look at that.

  • Thanks, Bruce. We’ll look into it.

  • redpik

    “a year ago”. huhuhu.

    can you seriously fix this feature? pdfmyurl didn’t consider media print properties.
    I really need this feature.

  • please describe clearly
    i mean with example

  • John

    This cleans up MOST of the add.this garbage that gets printed on a page using add.this. I’m still trying to find the class name for the poorly placed horizontal rule that appears above .at-branding-logo all over each page.

    @media print {
    .at-win-mask, .at-expanded-menu,
    .at-branding-logo, .at-expanded-menu-fade,
    .at-expanded-menu-close { display: none !important; }
    }

  • John

    I’ve cleaned up most of that mess using !important like so:

    @media print {
    .at-win-mask, .at-expanded-menu,
    .at-branding-logo, .at-expanded-menu-fade,
    .at-expanded-menu-close { display: none !important; }
    }

  • Colton

    Agreed. I submitted a ticket a week ago or help with this issue…… For us it looks like the solution would be to add: onclick=”javascript:window.focus(); window.print();” We have used this on our actual print button and it works great, but we want to move forward with using AddThis print to track printing statistics
    ….

\n\n