How to create a Printer Friendly Page
Unless a page prints well without any alterations, include a
printable version of it. This does not mean that you must maintain
two versions of the page; use CSS to define a separate print
stylesheet for your documents.
Some examples of useful code for the print stylesheet are:
a:link:after, a:visited:after, { /* Prints the URL after linked text
*/
font-size: 85%;
content: " (" attr(href) ")";
text-decoration: none;
}
img { /* Prevents all images from appearing */
display: none;
}
or
<style type="text/css">
@media print{
body{ background-color:#FFFFFF; background-image:none; color:#000000
}
#ad{ display:none;}
#leftbar{ display:none;}
#contentarea{ width:100%;}
}
</style>
There are two methods of using a print stylesheet.
Media Attributes
Include a second stylesheet and specify the media attribute:
<link href="default.css" rel="stylesheet" type="text/css"
media="screen" />
<link href="print2.css" rel="stylesheet" type="text/css"
media="print" />
After you have create the two CSS, you just upload them on to
your host server. User will see the normal web page on the screen
but when they hit the print button or click on print preview
they will be able to see the print
version of it.
What you see is not what you print . Another method is to create
a link "Printer friendly version" somewhere on the document.
Again there are many methods and using various java scripts. or PHP
scripts. However some servers does not allow or support PHP scripts
and so I use Java scripts instead.
Insert the following java script in between the <head> and </head>
section of your html web page. This script will write the documents
cookies when your page is downloaded.
<script>
var StyleFile =
"print" + document.cookie.charAt(6) + ".css";
document.writeln('<link
rel="stylesheet" type="text/css" href="' + StyleFile + '">');
</script>
Next create a link
somewhere inside the body content of your document the
following link script. You can either create a text link or using a
button to archive this.
Method 1 (using text link)
<a href="javascript:
document.cookie='print='; window.location.reload();">Normal View</a>
|
<a href="javascript:%20document.cookie='print=3';window.location.reload();">Print
User Friendly View
</a>
Method 2 (using a button and new
window)
Any of the below scripts may be used
<input type=button
value="Printer Friendy"
onClick="window.open(''+self.location,'print',
document.cookie='print=3');
" style="float: right">
or
<input type=button
value="Printer Friendy version"
onClick="window.open(window.location,'print',
document.cookie='print=3');
" style="float: right">
Method 3 ( using a src image-printer friendly.jpg)
<input type=image src="printer
friendly1.jpg"
onClick="window.open(window.location,'print',
document.cookie='print=3');
" style="float: right">
<br>
<br>
<a href="javascript: document.cookie='print=';
window.location.reload();">
Normal View</a>
The parameters are URL, name, features.
URL String specifying the location of the Web page to be displayed
in the new window. If you do not want to specify the location,
leave it as an empty space as the URL (this may be the case when you
are going to write some script-generated content to your new window
as in this case document.cookies='print=3').
NAME
specifying the name of the new window.
FEATURES An optional item specifying the features of the new
window. The features may contain one or more feature,
separated by commas.