When Visitors Print – About That Print Stylesheet

Grab yourself a beverage, hit print and read about the simple things that make a big difference when visitors print. But its not all about paper, inspired by Safari Reader we take a look at a modern day take on the once dreaded print preview.

Isn’t it funny, no matter how much effort you put into designing a new site for a client, one of their first instincts is to print it off!
Then come the visitors who rather than spending time admiring the hours you have lovingly poured into creating a design go and print off content to enjoy elsewhere.

You’re right, that’s such a dramatization, not everybody comes to your site and hits the print button but when they do have you them covered?

Why Do Visitors Print?

Before we continue, lets take a look at why someone may print your site in today’s world. Lets take myself as an example. I am a consultant for Australia’s largest open source ECMS vendor. I read, research, experiment with and talk about the web all day every day. Most of that, in front of a screen or on one of the several tech gadgets I own. So why do I print?

  • I can scribble on paper to my heart’s content.
  • I can escape from my desk onto a sunny balcony with fresh air and a good read in hand.
  • I am able to spot content issues more easily on paper than on a screen (I review a lot of content)
  • Call me wasteful but after spending all day on a computer the feel of paper and the smell of freshly printed ink is irresistible.
  • I often hand colleagues and clients reports, articles and so on.
  • I print heaps of articles to read on the tram/train ride to and from work.

Sure I am a unique case but visitors, just like me, print content from sites on a regular basis to paper and PDF. Reviews, maps/directions, spreadsheets in applications like Google Docs, to-do lists from applications like Basecamp, eCommerce transaction confirmation screens and so on are at the top of the list.

Read on to walk through the creation of a quick print stylesheet that will make visitors happier when they walk over to the printer.
For something different, we will also take a look at a modern day print preview with inspiration from Safari Reader.

Creating a Print Stylesheet in a Flash

Start With a Clean Slate

I find that the best approach to creating a print stylesheet is starting with a clean slate by dividing all screen styles from print styles like so:

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

- A file for screen and a file for print

Note: If you do decide to inherit screen styles into your print stylesheet by using media=”all” on the above screen stylesheet link element, be sure to override any background image replacement and nullify any absolute positioning. The reason for this is that many browsers disable all background properties (images and colors) and run into problems with positioning of elements.

Remove Clutter and Save the Environment

When visitors print off a web page they do so for the content. Do them and the environment a favor and remove any elements that won’t be read: navigation, photo gallery, carousel controls, social media links, search forms, widgets and so on all turn into clutter on a piece of paper.

Think of everything that is irrelevant once on paper and remove it with a single swipe:

``/* -- Hide screen specific elements -- */
nav,
footer .footer-links,
feature a.prev,
feature a.next {
display: none;
}``

Make Reading a Pleasure

It’s often cited that while Sans Serif type is great for reading on screen and the better option for print is a Serif type.
It doesn’t have to be Times New Roman and yet more Times New Roman, here’s an example that uses simple spacing, Georgia and some CSS3 flair to spice up the page:

``/* -- Typography -- */
body {
    background: #FFF;
    color: #000;
    font-family: Georgia, serif;
    line-height: 1.2;
}</p>

p, table, ul, ol, dl, blockquote, pre, code, form {
    margin: 0 0 1em;
}

    h1,h2,h3,h4,h5 {
    font-weight: normal;
    margin: 2em 0 0.5em;
    text-shadow: rgba(0, 0, 0, 0.44) 1px 1px 2px;
}

h1 { font-size: 2em; margin: 2em 0 0.25em; }
h2 { font-size:1.7em; }
h3 { font-size:1.5em; }
h4 { font-size:1.2em; }
h5 { font-size:1em; }``
Example of serif type in a print stylesheet

The above code in action

Branding

If you would like to add a little touch of branding to your site when its printed why not bring in a print friendly version of your logo.
The key here is remembering that all today’s browsers will strip background images meaning that no image replacement can be used.

ABC News (Australian Broadcasting Authority News) has a great example of this where they have included a print version of their logo that is waiting to be picked up when somebody prints:

A print friendly version of the ABC logo waiting for the right moment:

<a href="/news/" id="news-logo">
    <img class="print" src="/news/assets/v5/images/common/header-logo-print.png" width="800" height="100" alt="ABC News" title="ABC News">
    <img class="noprint" src="/news/assets/v5/images/common/logo-news.png" width="288" height="80" alt="ABC News" title="ABC News">
</a>

An excerpt of ABC screen stylesheet hiding the print friendly logo:

.print {
    position: absolute;
    top: -32768px;
    left: -32768px;
}

ABC logos, screen and print versions

Screen and print versions of the ABC news logo (abc.net.au/news) pictured top and bottom respectively

Alternatively, you can always keep things simple and make your header a little bigger and bolder like so:

#header strong {
    color: #000;
    display: block;
    font-weight: normal;
    font-size: 3em;
    margin: 0 0 1em;
    padding: 0;
    text-shadow: rgba(0, 0, 0, 0.44) 1px 1px 2px;
}

Keeping the header simple with a touch of flair

You Can’t Click on a Piece of Paper

At some point, you have probably found yourself reading a printed article when you get to an engrossing section that includes a link for more information. A link that sits there teasing you with its blue underline. Without a mouse or Apple’s latest interfacing doo-hicky you have no chance of finding out where that link goes unless you return to the original article on screen.

The solution to unclickable links is an easy one to deploy. Use some CSS to print out the location of the link that would otherwise be hidden:

<p>``#content a:link:after,</p>

content a:visited:after {

  content: " (" attr(href) ") ";
  font-size: 80%;
  text-decoration: none;
}``

A solution to unclickable links, first mentioned back in 2002 by Eric Meyer and still as popular as ever.
Notice that the above CSS limits itself to all links in the content. So things like a link around logos don’t show up.

Bring Those Visitors Back to Your Site

Print message

An example of a message that only shows on print

When you’re targeting visitors on screen, encouraging them to click through other pages or subscribing through RSS, email or newsletter is quite simple. But what about those who print?
With a little additional CSS its easy to add a helpful message that also acts as an opportunity to help bring them back to a site.

#content:before {
    content: "Thank you for printing this page. Do come back to foo.tld, we are constantly adding new and interesting articles and tutorials. Note: To help the environment we have automatically removed navigation and other unnecessary elements from the page.";
    display: block;
    border: 1px solid #ccc;
    font-style: italic;
    margin: 0 0 1em;
    padding: 8px 10px;
}

- The CSS above prints a message at the top of the page with a border and some padding. This message can be changed to anything suitable depending the site’s audience.

Note: The above CSS also adds a note to remind visitors and clients that you have removed unnecessary clutter such as navigation, helping reduce confusion in the transition from screen to paper.

Accommodating for Interactive Elements

So what about all those fancy JavaScript driven elements that make their way into content such as photo galleries and tabs? These elements often add inline styles to cycle through content, it may be a simple

display: none;

declaration to hide whats not being shown.

Part of the benefit of dividing styles between screen and print mentioned earlier in this article is that conquering thEse elements comes down to identifying what inline CSS is being added by JS controlling interactive/animated elements.

Lets take a photo gallery as an example. Head on over to the jQuery Tools site for a demo of their scrollable image gallery in action. If you open up Firebug or your favorite equivalent and target the containing element of the photos you will see that the jQuery Tools Scrollable plugin is adding an inline ‘left’ declaration that pulls and pushes the gallery left and right.

``<div class="scrollable"> <br />
   <!-- root element for the items -->

<div class="items">
      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg">
         Y
      </div>
      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg">
         Y
      </div>
      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg">
         Y
      </div>
   </div>

</div>``

Now for printing this in a suitable fashion, lets start with a declaration with an important statement that overrides this inline styling:

.scrollable .items {
    left: auto !important;
}

With this in place the photos will print one below the other. Lets bring that back to more of a photo gallery layout by floating them side by side:

.scrollable .items {
    left: auto !important;
    overflow: hidden;
}
.scrollable .items div {
    float: left;
    margin: 0 10px 0 0;
}

Print Preview With Style

Ever since I first saw Safari’s Reader, I have wondered how it would be like for a visitor to click on a print link and see an A4 piece of paper sliding up the screen including a preview of what they are about to print. Then I started to think about the merits of a jQuery plugin that is simple to roll out on any site that had a print stylesheet. Something that showed visitors what they were going to print before they printed without needing a ‘print version’ of the site.

So that’s exactly what I wrote. Introducing a jQuery plugin called Print Preview that does exactly what it says on the can with a demo to boot.
Click on the print preview button on the top right, or for an added bonus simply hit the ‘P’ key on your keyboard.

Get Set-up in Three Steps:

  1. Setting up a print stylesheet
  2. Including the jQuery plugin and a little CSS (packaged) to style the sliding lightbox/modal window.
  3. Adding a print preview link and initializing the plugin

For full usage instructions, head on over to the jQuery Print Preview Plugin Github page.

What are you waiting for?

And that is all you need to produce a robust print stylesheet that will bring readability and focus to content for anyone who prints off a page.
If you are they type of going the extra mile, here there are some further ideas:

  • Style additional elements such as tables. For some ideas read Jonathan Snook’s article titled Terrific Tales with CSS over on Sitepoint.
  • If applying a print stylesheet to a site with comments why not look into “page-break-before: always;” to push all comments to new page – offering the option for visitors to drop off the last pages when printing
  • Accommodate for JS by overriding any JS driven styles like opacity. See the above demo for some ideas.

All of the ideas in this article can be seen in this demo.

What else have you done with print stylesheets?
What crazy things have you seen people print from the web?
Do you think the art of scribbling on paper will be a lost art in the years to come?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://lewiswebdesign.com Joshua Lewis

    Thanks for the article. Just yesterday I spoke with a client about creating print specific styles for their site and now you go and answer my questions about it before I start asking them.

  • http://www.facebook.com/thomasstock Thomas Stock

    Page 8 to 14 of the print preview of this article are filled with add banners and other clutter. Just sayin’

    • Anonymous

      I hate pages like this that print out all the comments and waste my paper.

      But also, half of the first page is navigation, search box and social sharing crap. And the headline is the same size as all the other text, just bold, making it difficult to figure out what I just printed.

      Looks like someone needs to read through this article again and put some of it into practice.

      • Tim Connell

        Completely agree. It takes  a moment to put together a simple print stylesheet and a moment more to make it shine.

        I’m sure the folks at Sitepoint appreciate the feedback. Hoping to see this site and other Sitepoint sites serve an amazing print stylesheet very soon.

  • http://twitter.com/mattischrome Matthew Dorey

    Pedantic I know but the first word of the third paragraph should be “You’re” or “You are”.

    Meanwhile, I enjoyed this article and I will certainly think a bit more about what happens when posts from my blog are printed off. My posts tend to be quite long and involved so it would probably be good for me to think about this.

    • Tim Connell

      Thank you for the feedback – not at all pedantic.

  • Anonymous

    By the way, I just paíd $21.87 for an íPad 2-64GB and my boyfriend loves his Panasoníc Lumíx GF 1 Camera that we got for $38.76 there arriving tomorrow by UPS.I will never pay such expensive retail prices in stores again. Especially when I also sold a 40 inch LED TV to my boss for $657 which only cost me $62.81 to buy.
    Here is the website we use to get it all from, http://bit.ly/Bid1st

    NOW 100% WORKING

  • Mrhappystein

    i added a print stylesheet to my website which is just my resume…what i do is when that stylesheet loads, i append my qr code to the bottom of it using the before:: attribute — or whatever its called…just in case they cant spell or dont know how to type…they can always get back to my website

  • Nobody

    I stopped reading at “Your right”

  • Nobody

    I lied.  I kept reading.  Then I really stopped reading at “When your targeting”.

  • Anonymous

    Just found this article — thanks! Coincidentally, I also (10 minutes later) was browsing for Peach Cookies, and found a site (foodnetwork DOT com) that not only styles printing, but offers 3 sizes — 8.5 x 11, 4×5, or 3.5×5 inch recipe cards. Just pick a recipe, select print, and then pick the size desired.

    A follow up article on implementing the code needed to accomplish what they’ve done would be helpful for me — relative newbie.

  • http://www.tyssendesign.com.au John Faulds

    Cool plugin. :)

  • http://twitter.com/Nico3333fr Nicolas Hoffmann

    I would recommend to use
    @media print{} in the same CSS : it is quite easy to produce a print version, and it is better for webperformances. In less than 20-30 lines, you can already have a nice print version.

  • Anonymous

    Hi Tim,

    Points you have discussed above are just fine. 
    What is more important is, lets write about CSS support in different conditions, what works in what browsers, how to handle large data, changing print pages.

    I have been working in print styles since last a year and above are the major issues I have faced so far frustrating to fix.

    Also something about debugging and testing print styles.

  • http://pulse.yahoo.com/_HK7H55KUZ777B6U52TUGFY4ZUI Nobody Special

    “… but when they do have you them covered?”

    Gee, I don’t know.

    Care to fix that?

  • http://pulse.yahoo.com/_6GG7CEFACSCBVP2LFIJ23KVSYQ Emma Pope

    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you.
    go here, pluscent.com

  • sayah

    please help me by telling me how i can set page layouts in html as  A4 size so that when visitor visits my site and order print the form, it will give data acurately on A4 size paper in pdf prinitng. ?

  • Anonymous

    I am attempting to use the jQuery plugin you wrote.  The plugin does not seem to work with IE7.