Creating a Print-Friendly Page with CSS & JavaScript: The McVicar Method
Download & unzip SwitchStyles.zip. You should find 5 files in the directory:
- print.css (for demo purposes only)
- print-preview.css (for demo purposes only)
- standard-style.css (for demo purposes only)
- print.js
- print-test.htm (for demo purposes only)
Download the sample webpage, unzip it, and open legal.htm in your text editor. You want to add a print-friendly link on the page in a place you find appropriate. Let's walk through the steps to do so.
Add the print-friendly link
First, you need to add a print-friendly link on your web page in an appropriate place. You can do it in two ways.
1. Text
Add the following somewhere on your page:
<a href="#" onclick="print_preview(); return false;">Print this page</a>
2. Image
Add the following somewhere on your page:
<a href="#" onclick="print_preview(); return false;"><img src="http://www.granneman.com/files/8313/3079/2922/printFriendly.gif" height="23" width="22" alt="Print-friendly"></a>
Fix your screen CSS
Now let's fix your CSS. The web page already has a link to a CSS file somewhere in the <head>. Find it, and change it so that it only applies to the media of screen. In other words, the initial CSS link will look something like this (don't expect it to look exactly like the example; I want you to have to hunt for it on the webpage):
<link rel="stylesheet" type="text/css" href="yourcss.css" />
You need to change it so that it now looks something like this (in other words, simply add media="screen":
<link rel="stylesheet" type="text/css" href="yourcss.css" media="screen" />
Add the print-friendly CSS
Now you need to add a link in your web page to your print-friendly CSS:
<link rel="stylesheet" type="text/css" href="yourprintcss.css" media="print" />
Create your print-friendly CSS page, changing & removing things as you like. Test your changes by going to File > Print Preview.
Add the print-friendly preview CSS
When you're happy with your print-friendly CSS, & you've made sure that the page will print the way you want it, add the following link to your web page:
<link rel="alternate stylesheet" type="text/css" href="yourprintcss-preview.css" media="screen" title="Print Preview" />
Create a new CSS file named "yourprintcss-preview.css". This is yet another CSS page that the JavaScript will use to give users a preview of the print-friendly CSS. It should contain the following code:
@import "yourprintcss.css";
#preview-message {
display: block;
border: 1px solid #666;
background: #FF6;
padding: 2px 5px;
}
Add the JavaScript
Add the following link to your web page, in the <head>:
<script type="text/javascript" src="print.js"></script>
Finished
You should now be able to click your print-friendly link and see your print-friendly preview in the browser.
