This post originated from an RSS feed registered with Java Buzz
by dion.
Original Post: How to make a print friendly page, browser friendly
Feed Title: techno.blog(Dion)
Feed URL: http://feeds.feedburner.com/dion
Feed Description: blogging about life the universe and everything tech
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.
Previous Topic
