A print friendly website automatically formats your website to a user-friendly format when printed. Like said before there are some guidelines for a user-friendly format.
Below I will explain the basics of making a print stylesheet for your website, product page or just a page with your contact details. Some knowhow of CSS and HTML will be nice, but don’t be affraid. It’s pretty simple, and if you do need any help, don’t be afraid to drop your question in the comments.
Ok, so first things first. The easiest and most common way is to make a new css file in which you put the formatting for your print stylesheet. You can use a simple texteditor to do this. Call the file “print.css”.
Save the file in a location on your webserver and leave it for now.
Go to your html pages or your template files and edit them. If everything is ok, you’ll see some code between the <head> </head> tags.
Put the following line of code between those tags:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Do this for every html file or template file.
Some explanation:
href=”print.css” points to the location of your new CSS file. Change that location if your CSS file is in another directory.
media=”print” tells the browser to use this stylesheet for printing the page. Nice to know: You can also use this for other media. For example a PDA. A full list of media types you can use can be found at W3.
Now the browser will know that when a visitor prints the page, it should use your new print stylesheet.
Formatting the print stylesheet
The print stylesheet overwrites your normal stylesheet. So you don’t have to put all your formatting in here. Just the difference is enough.
Hiding all unwanted images, ads and the navigation
Is your navigation in <div id=”navigation”></div>? Put the following code in print.css:
#navigation {
display: none;
}
Ads or images you don’t want to appear in the print copy? Do the same thing. For example, if you have ads in:
<div id=”ads”> </div>
use the following code:
#ads{
display: none;
}
For images it can also be handy to use a class. Use the following class in your image:
<img src=”image.jpg” alt=”alternative description” class=”noprint” />
Now put the following code in print.css:
.noprint {
display: none;
}
You can combine this to:
#navigation, #ads, .noprint {
display: none;
}
Using the full size of paper
Visitors want to use the full size of a paper when they print your page. In most cases, they use an A4 or the letter format, but this method also works for A5, A3 and other formats.
To get the content on the full size of a paper you give all elements (divs and tables) the following styling:
{
float: none;
margin: 0;
width: 100%;
}
For example:
#container, #content, #post, #comments {
width: 100%;
margin: 0;
float: none;
}
Writing out the URL of a link
Of course you can’t click a link on a paper. So if people have a print copy of your page, they want to see the full URL of the link. This is pretty simple to realize. Just put the following code in print.css:
a:after {
content: " (" attr(href) ") ";
}
Now, when you print a page, the full URL will be shown behind the link between two brackets.
Of course it is possible to give the URL some different formatting, for example another colour or a smaller, italic or bold font.
A disadvantage of this method is that when you have a lot of links in your page, it will harm the readabilty. A solution for this is using footnotes, in my opinion the best way to go.
Putting links as footnotes in the print copy
A nice method to put links on your page as a footnote in the print copy has been written by Aaron Gustafson. This method uses a little JaveScript code to collect all unique links on your page, assigns a number to them and puts them as a footnote on the bottom of the page. You can find the last version of this script here.
July 25th, 2008 at 10:54 am
A nice straightforward article Martin! Stuff like this should be standard when building a webpage, especially when user friendliness is important!