Book Store  
  Contact Us  
  Links  
  Site Map  
CSS - Cascading stylesheets tutorial

Creating a printer friendly page using css

 

There are many solutions to creating a printer friendly version of a page such that the page is reformatted with different fonts and colours making it more appropriate for output to a printer.

A relatively simple solution, which has little processing overhead, makes use of a second cascading style sheet (css) to re-arrange the page so that menu bars, side bars etc are not displayed and that text is printed with the required fonts and colours.

To take advantage of this you really need to make sure that you design your page making full use of style sheets. This will usually mean working with layers and identifying their position within the style sheet.

You then create a second style sheet especially for printing, which either repositions the layers or does not display certain layers and re-defines fonts and colours as required.

Method

Within the body of your document you may have something like:

<div id="TopLayer">
Top layer
</div>
<div id="TitleLayer">
Title Layer
</div>
<div id="TextLayer">
Main text Layer
</div>
<div id="LeftLayer">
Left hand layer
</div>

In this example, there are four layers, their position being defined within the standard stylesheet as follows :

#TopLayer
{
position:absolute;width:100%;height:55px;z-index:1;left: 0px;top: 0px;
background-color: #808080;layer-background-color: #99c99;
border: 1px none #000000;
}

#TitleLayer
{
position:absolute;width:100%;height:45px;z-index:2;left: 0px;
top: 60px;background-color: #99cc99;layer-background-color: #99c99;
border: 1px none #000000;
}

#TextLayer
{
position:absolute;width:70%;height:150px;z-index:3;left: 200px;top: 130px;
}

#LeftLayer
{
position:absolute;width:150px;height:115px;z-index:4;
left: 0px;top: 130px;
}

You then create a second stylesheet for the printer friendly version with different attributes for the layers, for example:

#TopLayer
{
display:none;
}

#TitleLayer
{
position:absolute;width:600px;height:45px;z-index:2;left: 20px;
top: 60px;background-color: #000000;layer-background-color: #000000;
border: 1px none #000000;
}

#TextLayer
{
position:absolute;width:550;height:150px;z-index:3;left: 20px;top: 130px;
}

#LeftLayer{
display:none;
}

In this style sheet, the layers are arrange differently with some layers not being displayed. The idea is that you remove those layers which have menus in them, and shift over to the left hand side those layers you want to print.

In the head of your document, you then create two style sheet references as follows:

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

The first is the standard style sheet reference, the second is the printer style sheet reference.

When you want to print the page, just go to the File -> Print on the menu as normal and the standard dialog box appears. When you click Print, the second stylesheet will automatically re-format the document and you will have a printed version matching that style sheet.

Javascript print link

You may also want to add a Javascript link on your page to call the print routine :

<a href="Javascript:self.print()">Print this page</a>

I have created a set of simple examples to illustrate this and which can be download by clicking here. Download.

Other sites which you may want to look and which have good articles :

webdesign.about.com
meyerweb.com