A List Apart

Menu

Print to Preview

Issue № 226

Print to Preview

by Published in JavaScript · 32 Comments

Remember in the old days when you had to effectively run two sites or create separate templates in a CMS for “printer friendly pages”? No one liked that. Then print stylesheets came along and everything became wonderful and easy. Except that the people who use our sites didn’t think so; in fact, most got a tad confused because suddenly the “print this page” button and the subsequent full screen preview disappeared on all but the largest of sites.

What’s happening now?

Article Continues Below

Many sites have done away with the “print this page” button entirely. Most web designers expect site users to know how to print from the browser, and if they do offer a “print this page” button, clicking the button simply prints without a preview. There is, of course, a “preview” button in the print dialogue box but most people miss it, have forgotten about it, or don’t even know about it.

As Cameron Adams noted back in 2004, visitors aren’t familiar with print CSS and don’t see a print preview; they expect that when they print a web page, the design on screen will match the printed page—or at least be very similar. Readers of A List Apart know that the changes from screen stylesheets to print stylesheets can be dramatic. This is often by design, as we want to improve people’s paper-based experience by removing “unnecessary” elements such as navigation and advertising. However, these dramatic changes can make people uncertain how the printed page they have in their hands relates to the website they just visited.

Oh great—expectations

So how do we set the right expection about our print version? Why, we switch stylesheets of course! We can create an alternate stylesheet to show how the page will look when it’s printed, perhaps display a preview message explaining what this new view is about, and then automatically print the page with the print stylesheet we know, love, and trust.

The building

First we’ll swipe some of the code from an old ALA article, “Alternative Style: Working With Alternate Style Sheets”, namely this one. (Line wraps are marked ».  –  Editor)

setActiveStyleSheet(title){  // select the stylesheet
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link") »
[ i ]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = »
false;
     }
   }
}

We then drop a couple of functions into our JavaScript file. These functions simply add a “print this page” link at the page load, “print preview” which switches to the print preview and automatically prints the page, “add preview message” which displays a preview message and finally ”cancel print preview” which allows users to return to the “normal view” of the site. (Line wraps are marked ».  –  Editor)

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  /* more code to run on page load */
      if (document.getElementById){
        //     add extra functions to page tools list
        var print_page = document.getElementById('nav');                                                        

        //     create print link
        var print_function = document.createElement('p');
        // print_function.setAttribute('class', 'print');
            //IE doesn't like this
        var print_function_link = document. »
createElement('a');
            print_function_link.onclick = function() »
{ print_preview(); return false; }
            print_function_link.setAttribute('href', '#');    
        var print_function_link_text = »
document.createTextNode('Print the Page');

            print_function_link.appendChild »
(print_function_link_text);
            print_function.appendChild »
(print_function_link);            
            print_page.appendChild(print_function);            
    }
});

function print_preview() {
    // Switch the stylesheet
    setActiveStyleSheet('Print Preview');

    // Create preview message
    add_preview_message();

    // Print the page
    window.print();
}

function add_preview_message(){
var main_content = document.getElementById('content');
var main_body = main_content.parentNode;

    if (document.getElementById){

        var preview_message = document.createElement  »
('div');
        preview_message.id = 'preview-message';

        // Create Heading
        var preview_header = document.createElement('h3');
        var preview_header_text = document. »
createTextNode('This is a print preview of this page');
        preview_header.appendChild(preview_header_text);

        // Create paragraph
        var preview_para = document.createElement('p');
        var preview_para_text = document.createTextNode »
('Without this message of course. ');

        var cancel_function_link = document.  »
createElement('a');
            cancel_function_link.onclick = function() »
{ cancel_print_preview(); return false; };
            cancel_function_link.setAttribute('href',  »
 '#');    
        var cancel_function_link_text = document. »
createTextNode('Return to the existing page.');
        cancel_function_link.appendChild »
(cancel_function_link_text);
        preview_para.appendChild(preview_para_text); //
        preview_para.appendChild(cancel_function_link);

        // Put it all together
        preview_message.appendChild(preview_header); 
        preview_message.appendChild(preview_para);
        main_body.insertBefore(preview_message,  »
main_content);

    }
}

function cancel_print_preview() {
    // Destroy the preview message
    var print_preview = document.getElementById 
    ('preview-message');
    var main_body = print_preview.parentNode;
    main_body.removeChild(print_preview);

    // Switch back stylesheet
    setActiveStyleSheet('default');
}

Then we’ll add in the alternate stylesheet “Print Preview” to our HTML files.

<link rel=“alternate stylesheet” type=“text/css” href=“css/print-preview.css” media=“screen” title=“Print Preview” />

The print preview stylesheet simply imports our existing print stylesheet and sets styles for the preview message.

@import "print.css";

#preview-message {
  display:block;
  border:1px solid #666;
  background:#eaeaea;
  padding:2px 5px;
}

This message is important because it provides context for the new “view.” Without it, the new stylesheet could be quite confusing to a visitor who clicks the preview link by accident.

An improved printing experience

Here’s an example. Obviously, this is not the perfect technique for every site and you should probably do user testing and tweak the implementation on a case-by-case basis: you may find you need to display a “preparing print version” message for a few seconds before the style switch for some audiences, but not for others.

Now if we could only help people figure out which printer they’ve printed to and where that printer is…

About the Author

32 Reader Comments

Load Comments