When I visit a “Print friendly” page on the web, I normally find that either:
- The page has a bunch of navigation and links that I don’t actually want printed, but allow me to move on after the print.
- The page has no navigation at all, so it prints nicely…. but the back button is needed to move on from there.
To get around this minor issue, you can use CSS to allow navigation info in the browser, yet ignore that info when printing.
Here is an example:
Sample Html Page
This page includes two CSS style-sheets…. for the “screen” and for “print”.
<html>
<head>
<title>Printer and Browser Friendly</title>
<link href=”printfriendly-page.css” rel=”stylesheet” type=”text/css” media=”screen” />
<link href=”printfriendly-print.css” rel=”stylesheet” type=”text/css” media=”print” />
</head><body>
<div class=”browser-ui”>
<a href=”/”><< – Click here to get back to where you were</a>
</div><h1>Main Content Title</h2>
<p>
Hi there. How are you. This is the main content of the page.
</p><p> and more and more and more </p>
</body>
</html>
Screen CSS
The screen-oriented CSS file makes the ui area pretty:
.browser-ui {
border: 1px dotted #888;
margin: 10px;
padding: 5px;
background-color: #BBB;
}.browser-ui a {
color: #000;
}
Nothing special, and here is the page viewed in a browser:
Printable CSS
The print-oriented CSS file makes the ui area disappear:
.browser-ui { display: none; }
Here is a view of the page “printed”, and not showing any navigation.
July 14th, 2007 at 5:20 pm
Hello!
Recently I have made a post where I where I show how to add the Printer friendly hack in Blogger.
So, If you are interested in this information,here you can read the post:
http://ignasitrochut.blogspot.com/2007/07/printer-friendly-in-blogger.html
Bye
June 6th, 2009 at 7:48 am
Unfortunatelly your page this don’t work well. The Opera print previous is approximately OK, but the right side contain the element with share this right of the content part, it will be good ths set display:none for this.
On FireFox the print preview is totally wrong.