Printing with Style

Per S

4.57/5 (25 votes)

Sep 17, 2003

249304

Make your web pages printer-friendly.

Introduction

There're a lot of techniques used on the net to create nice looking prints from web pages. Some take a copy of the pages and remove unwanted elements manually, some do it by opening a new print-friendly page using a server side script (ASP, PHP, Perl, ...). I prefer doing it with style :-)

Style

Doing it with style is simple and elegant; you create a separate style sheet with elements suited for print:

Set the background to white (background:#ffffff;)
Underline links (text-decoration:underline), and maybe color them blue for users with a color printer
Hide unwanted parts using display:none;

You attach the style sheet using:

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

media="print" (IE 4+, Netscape 6+ and Opera 3.62+) tells the browser to use this only when you print the page.

This is how I attach my print.css.

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

You can test it by printing one of my pages, if you print my Links page you'll also see how I append external links (IE 6+ only):

body { 
    color : #000000; 
    background : #ffffff; 
    font-family : verdana,arial,sans-serif;
    font-size : 12pt;  
}
h2 {
    font-size : 14pt;
}
a { 
    text-decoration : underline; 
    color : #0000ff; 
}

#logo,#head,#menu,#tail,#printicon, {
    display : none;
}

#appendedlinks {
    page-break-before: always 
}

Append external links

A nice feature is to append all external links in the webpage, to the print document. This is implemented on my pages using the following JavaScript:

// 
// IE only: attach eventhandlers.
// They trigger when a user  prints a web page; 
//     From File->Print, File->Print Preview or
//     by executing a window.print() command 
//
window.onbeforeprint=beforePrint
window.onafterprint=afterPrint

function beforePrint() {
    appendlinks(content);
}

function afterPrint() {
    removelinks(appendedlinks);
}


//
// Generic print function, called from the web page
//
function printContent() {
    if (window.print) {
           window.print();
    } else {
        alert("your browser doesn't support this function")
    }
}


// 
// When appending links to the document, do not 
// append links pointing to the following domains / sites
//

var excludedomains=["soderlind.no", "soderlind.org","localhost"]
var excludedomains=excludedomains.join("|")
rexcludedomains=new RegExp(excludedomains, "i")

//
// appendlinks(id)
// id = id of the part of the web page you want to extract links from
//      ex: document.body
//

function appendlinks(id){
    
    var strD = "<p/>";
    var num = 0;
    if (document.getElementById){
        var links=id.getElementsByTagName("A")    
        var total=links.length
        strD += "<dl id=\"appendedlinks\" border=0>"
        strD += "<dt><h2>Links extracted from the document:</h2></dt>"
        for (i=0;i<total;i++){
            if (links[i].hostname.search(rexcludedomains)==-1 
                && links[i].href.indexOf("http:")!=-1) {
                strD += '<dt>'+links[i].innerText+'</dt>'
                strD += '<dd>'+links[i]+'</dd>'
                num++;
            }
        }
        strD += "</dl>"

        if (id.insertAdjacentHTML && num>0)
            id.insertAdjacentHTML("beforeEnd",strD);
    }
}

//
// removelinks(id)
// After the print job is done, remove the appended links from the document
// id = appendedlinks
//
function removelinks(id) {
    if (document.getElementById){
        id.removeNode(true);
    }
}

Have fun coding (and printing).