Skip to content

Creating a pure CSS ‘Print Friendly’ page accessible via a hyperlink

G20th September 2013

CNo Comments

TCSS, JavaScript

In this tutorial, I shall demonstrate how to create a ‘Print Friendly’ version of your website with pure CSS and how to employ a small piece of JavaScript to make it accessible via a single click.

Despite the proliferation of mobile devices and the lofty goals of a “paperless office”, the fact is that a large number of people still prefer to read long-form text on paper rather than the screen. If you run a data- or text-rich website, you would do well to offer your audience a “Print Friendly” version of your pages.

Traditionally, a “Print Friendly” page was created separately from the main page and prepared in a fixed-width manner with the menu items and other unnecessary embellishments removed. Today, it’s much easier to use Cascading Style Sheets to achieve this effect with your existing pages and then provide a link so that users can see how the page will appear on paper before pressing ‘Print’.

In this tutorial, I shall demonstrate how to use CSS to create a ‘Print Friendly’ version of your website and how to employ a small piece of JavaScript to make the format accessible via a single click.

Step 1: Create a “Print Friendly” Cascading Style Sheet and name it ‘print.css’

This tutorial is not going to focus on the nitty-gritty of coding your Cascading Style Sheet because there are numerous articles about the topic.

There is no standard formula for writing a print-friendly CSS but it isn’t particularly difficult with  some basic CSS coding skills and forethought. The whole point is to minimise formatting and therefore you can ignore most of the styles in your ‘normal’ CSS.

When designing your print-friendy CSS, consider:

  • Implementing a maximum image with of approximately 500 pixels
  • Removing as much colour as possible, including for links
  • Reducing the size of your site’s logo
  • Hiding navigational bars, social media “like buttons” and unnecessary side panels
  • Making all text a standard size and font

The following code is not exhaustive, but might get you started:


img {
	max-width: 500px;
	border-style: none;
	}
a {
	color: #000;
	}
#logo-top img {
	/* Be sure to preserve the dimensions of your image*/
	width: 200px; 
	height: 100px;
	}
#content {
	font-size: 1em;
	}
#nav {
	visibility: hidden;
	display: none;
	width: 0px;
	height: 0px;
	}

Whatever you do, save your new file as print.css.

Step 2: Download jQuery

These days, most websites utilise the jQuery JavaScript library. If yours doesn’t, download the latest version via the jQuery website.

Note: jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. If this poses a problem, download the latest version of jQuery 1.x instead.

Implement via:


<script type="text/javascript" src="/path/to/jquery.js"></script>

Step 3: Implement JavaScript in your header

Insert the following code into the <head>:


$(document).ready(function() { 
	$(".printfriendly a").click(function() { 
		$("link").attr("href",$(this).attr('rel'));
		return false;
	});
});

Step 4:  Insert  ‘Print Friendly’ hyperlinks

Insert the following code into your page:


<span class="printfriendly" id="style-printer">
	<a href="#" rel="/path/to/css/print.css">Print Friendly Version</a>
</span>
<span class="printfriendly" id="style-normal">
	<a href="#" rel="/path/to/css/normal.css">[Return to the Formatted Version of this document]</a>
</span>

In this example, I am assuming that your normal CSS file is called “normal.css” (adjust file name as appropriate). This code will place two links onto your page; one that points to the ‘Print Friendly’ version and one that points to the normal version. You can choose to have either of these three options for the HREF (I recommend the first):


<a href="#" rel="/path/to/css/normal.css">...</a>
<a href="" rel="/path/to/css/normal.css">...</a>
<a rel="/path/to/css/normal.css">...</a>

Since there’s no value in showing a link to a “print friendly” version of your website if that version is already being viewed (and vice versa), we’ll use some CSS formatting to hide one of the links on each version so that:

  • When the normal version is being viewed, only the ‘print friendly’ link will be visible
  • When the print-friendly version is being viewed, only the ‘normal format’ link will be visible (this will be printed).

In normal.css, insert the following:


#style-normal {
	visibility: hidden;
	display: none;
	width: 0px;
	height: 0px;
}

In print.css, insert the following code:


#style-printer {
	visibility: hidden;
	display: none;
	width: 0px;
	height: 0px;
}

This script will run in Internet Explorer (6+) and all versions of Firefox, Safari, Chrome and Opera.

   

Comments:

No comments have yet been submitted. Be the first!

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.