Printer Friendly Web Pages

August 12, 2007

I was recently asked by a client to make their web pages “printer” friendly.   The majority of the sites for which I try to print from result in un-readable printouts either the text is truncated or the styles make it unreadable.  I have been to many sites where you can click a link to see a printer friendly version of a page.  This extremely convienient when printing for offline reading. 

So given my past experience browing web pages I assumed the following were all the options available to me:

  1. Convert the exisiting web pages to be printer friendly.  The downside of this approach is that you are modifying the styles of your pages simply for printing purposes resulting in less then desirable appearance.  Also requires a lot of rework of existing pages which were not designed for this requirement in mind.  The major benefit of this approach is the user does not have to explictly click a Printer Friendly link to access the Printer Friendly page.  This link could be easily over-looked if not prominatly displayed
  2. Make copies of all the pages and create a link to the printer friendly page.  The downside is dual maintance as well as still requiring the user to click a printer friendly link.  Everytime the text of a page changes the modification must be made in two places.
  3. Being from a ASP.Net background another option would be to create a seperate Master.Page encapsulating all the layout for printing nicely.   This approach still requires clicking a Printer-Friendly link but removes the dual mainance and modification of exisiting pages for printing. 

Given those three options and considering I was developing in a ASP.Net environment I assumed I would create a printer friendly Master.Page which once the use clicked the printer friendly link would render a page absent of images, background styles, etc.  Given this assumption, I Googled printer friendly web pages and after sorting through a few articles I encountered an amazing concept that blew away the three options I was aware of.  Basically Links to CSS pages allows you to specify media for example a typical CSS link may look like this:

<link href=”/css/MyStyle.css” rel=”stylesheet” type=”text/css” media=”screen” />The Key attribute being media where you can specify the following values:

  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

Basically you keep your pages as is, thus enabling the best user experience from a browsing perspective but create a seperate stylesheet for printing.  When the user clicks the print button the browser is smart enough to pull the stylesheet related to printing. The link for the print CSS would be as follows.

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

 So give this solution I basically created a copy of my exisitng stylesheet and appended _Print to the end of the name and referenced that from all my pages.  My first modification was to remove all images from the print-out.  This is simply done by adding the following to the Printer-Friendly Css file.  Given this defintion no images will show up when printing.

img{display:none;}

Once I removed images the client determined there were a few images in the content which they would like to be included in the print-out.  Given this I create a new style defined as  .PrintImage{display:block} which I applied to all the specific image instances which they wanted to be included in printing.

Another example would be if you site has a background image or color associated to the pages.  In the printer friendly CSS you would want to remove the image or set the background color to white.  Also, according to some people certian fonts are better for screen viewing and others for print.

A basic understanding of CSS will enable you to manipulate the printer friendly page definiton to your hearts content.  You can include or exclude entire DIVs as long as you apply a style to class attribute of DIV. 

An excellent site for beginners learning CSS is as follows:  http://www.w3schools.com/css/default.asp

Posted by christopherpond
Filed in Uncategorized
No Comments »