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

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!