Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Web Pages for Printing
The Concept
Sometimes you need a web page that can easily be printed by a user. Maybe you want to encourage them to print out a table of answers for a form they have filled in or a list of the products they have ordered from your online store.
Using a few simple ideas I will demonstrate how to make a web page that is easy to print with a single click and introduce the CSS to remove the page elements that you don't want printed
Removing Parts of the Web Page You Don't Want to Print
What do your CSS stylesheet links look like in your web pages? I'll wager that they look something like this;
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" >
The 'link' and 'type' parts you are probably already familiar with but have you ever thought about what 'media="screen"' is all about? This tells the browser that it should take these styles into account when displaying your web page on a screen. So, what if we want to dedicate a stylesheet to printing? Well, that is easy. We use 'media="print"' instead. A print specific stylesheet will sit quite happily alongside a screen stylesheet and do nothing until the viewer chooses a method for printing the page. An example link to a print only stylesheet might look like this;
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" >
Once you know this it is fairly simple to use some cunning CSS styles to hide all of the parts of the page that you don't want included in the printed page. For example; imagine that I want to provide this page for viewers so that it can be printed out without the header, navigation, sponsors and all the other stuff that goes to make up my page structure.
First I will create a CSS class called 'noprint'. I use a class so that I can have multiple instances of this throughout my page. The properties of the class are;
.noprint {visibility: hidden;}
Because this class only applies to printed media it can be added to all of the HTML elements that I don't want printed. For example;
<div id="header" class="noprint">Header Information</div>
There is also a second approach to this and it may well save time in going through the page HTML and adding the 'noprint' CSS class. We can take the ID and class names from your normal stylesheet and use the 'visibility hidden' property in this way;
#header, #nav, #sidebar, #footer {visibility: hidden;}
Either way is fine and you need to decide which way suits you best and will be quickest for your project. Time is money after all!
Easy 'Print This Page' Link
Now I have the print stylesheet set I can go about creating a way of encouraging users to print the content from your page. For this I will employ a piece of javascript. To create a link that will print a page I can use the following;
<a href="javascript:window.print()">Print This Page</a>
Now, when the user clicks the link, it will open the printer dialogue box and print the whole page. But, of course, I have used a print stylesheet so the user will only get the content I want them to see.
You will now get people saying 'but what if javascript is disabled'? Well, I'd point them towards the 'print' button at the top of their browser. You can't win 'em all and javascript remains enabled in a large percentage of browsers.
Hopefully this will come in handy for many different uses whilst designing and building your web pages. Printable web pages are useful to viewers and are really simple to achieve following the steps laid out above.
