10 Minutes to Printer Friendly Page

Providing separate stylesheets for printing a web page was good idea in theory, but in practice it all falls down. Let’s see if we can do something about it. If we could involve server-side script (there’s solution for both–PHP and ASP based systems *wink, wink*) which will reload that particular page, but replace regular CSS file with stylesheet specially suitable for printing an article, entry, post or whatever-you-wanna-call-it, this would make a hudge step forward towards better usability of our web site. Oh, and yes, Google will just love it!

One page, two stylesheets

Okay, you probably have a page with some content and you probably have styled it with some CSS. If you already have print stylesheet for your page, just skip ahead to the next part.

To make stylesheet for printing, decide what parts of your layout are not likely to be printed (like various banners, navigation etc.). The simplest way to hide them is to define them as display: none;. If you are not familiar with stylesheets for print read more about it. Anyway, keep it simple–black text on the white background, with a font-size: 12pt; is a good start. When you’re done with it, continue reading.

The query

Now that we have all client-side ingredients in place, we can put it all together. First, we have to add a link somewhere around the article, for example:

<h1>Title of the article</h1>
<p>Lorem ipsum...</p>
<a href="?q=printme">printer friendly version</a>

It literally means we are requesting this same page, but with a query q=printme. To make our page recognizes what we are asking it, we have to add somewhere in the <head> section some logic, something like:

“If i’m asked to ‘printme’–i’ll load my printing stylesheet, and if i’m not asked anything–i’ll load my default CSS file.”

Depending of your preferences there are two scripts–PHP and ASP. Backup your HTML file and replace the part where you called your CSS file with one of the following examples.

PHP print script

<?php if ($_GET['q'] == "printme") { ?>
<link rel="stylesheet" type="text/css" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="default.css" />
<?php } ?>

ASP print script

<% If Request.QueryString("q") = "printme" Then %>
<link rel="stylesheet" type="text/css" href="print.css" />
<% Else %>
<link rel="stylesheet" type="text/css" href="default.css" />
<% End if %>

Happy printing

Your visitors will love this, as they can decide whether they want to print your page for its’ graphics or just the plain text (see printer friendly version of this entry). As a benefit, Google will index two versions of the same article which should also help boosting your page rank.

Suggestions and re-workings are welcome as usual. Have a fun and please contact me when you make yours. I’d really like to see how you solved it!


Almost one year later, Roger Johansson pulls out the subject for reconsideration – Print-friendly CSS and usability.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?