JavaScript Print
You can use JavaScript to automatically open print dialogue box so that users can print the page. Although most users know they can do something like "File > Print", a "Print this page" option can be nice, and may even encourage users to print the page. Also, this code can be triggered automatically upon loading a printer friendly version.
Creating a "Print this page"
The following code creates a hyperlink and uses the Javascript print function to print the current page:
Automatically Open the Print Dialogue Box:
You can call the JavaScript print function as soon as the page loads (i.e. if the page is a "Printer Friendly" version). This will automatically open the print dialogue box for the user as soon as the page loads.
Although this method can work well, it does require maintaining a separate "Printer Friendly Version" of your page (or whole website). See below for a more efficient option - using CSS to change the style sheets for pages that are printed.
- Copy and paste the following code in between the
<head>tags of the printer friendly version:
- Add
onload="printpage()"to your<body>tag:
Creating a "Print Version" with CSS
You can use Cascading Style Sheets to create a print version of the same web page. By this, I mean, you can make a single page appear differently, depending on whether it is viewed on a screen or printed on a printer. You can apply different styles to each HTML element - you can apply one style to the screen version and another style to the print version.
For example, you might decide that there's no point in displaying the navigation bar when the user prints the page. After all, they can't click on the buttons after it has been printed. You could be wasting the user's valuable printer ink by forcing them to print out all your navigation buttons!
To learn more about using CSS to do this, see the article on creating a CSS Print Version.