Making Web Pages Printable Using CSS
Killersites Newsletter Archive November 3, 2003
One of the classic problems with how web pages are designed, is that
they are horrible to print. Horrible in the sense that page elements
(text, images, etc.) don't line up and unwanted images and navigation links
get printed.
I am as guilty as anyone of creating pages like that, but I am aiming to fix it for your websites and mine. While most other web designers will create separate 'printable' pages (big waste of time), we will only be making some simple additions to our pages to make them 'print friendly'.
WARNING: This article requires some fundamental understanding of HTML and CSS. If you don't have it, go to www.killersites.com and read the starter articles and then do the CSS tutorial, it is well worth it.
Basic ideas:
- People will print your pages typically to be able to read the content, not to see pictures. You need to hide all images from the printer and this is done in the print style sheet. I will explain what the print style sheet is in a moment.
- Navigational elements are not needed in the printed document as well, so all navigational elements should be removed from the printed page.
- Let's say you designed your pages with a black background with white text. You don't want peoples printers printing all that black, they won't be too happy with the price of ink these days! To solve this problem, in our print style sheet we will set the page color to 'white' and the text color to 'black'.
The 'print style sheet':
I've mentioned the 'print style sheet' a few times with no explanation; let's take care of that now. CSS today allows you to link to more than one style sheet in your web page.
The simple reason you would want to do this is so that you could have the HTML page 'change' its appearance automatically when someone visits your page with a particular type of device. These types of devices can include a typical desktop computer, a PDA (Windows CE device, Palm Pilot, etc.) and a printer among other devices!
It works like this; when you link a style sheet to your HTML page, there is an attribute that you can specify in the CSS link tag that tells the device reading your page if it should use the style sheet specified in the link.
So the wise men and women that came up with the CSS specification, came up with a few ideas for device types that could be specified in the CSS link. For the sake of this short article we are concerned with only two of them:
1: 'print'
2. 'screen'
Here's a sample pair of CSS links that point to different style sheets, one for the printer to use and the other for a normal PC monitor to use:
<link href="CSS/webdesignersHanbook_Print.css" rel="stylesheet" type="text/css" media="print">
<link href="CSS/webdesignersHanbook_1.css" rel="stylesheet" type="text/css" media="screen">
You can see that these CSS links are actually taken from the Handbook on Killersites.com. What you're looking for in the link is this text:
media="print"
and
media="screen"
The first ('media="print"') points to the style sheet that has been set up for printing while the other (media="screen") is set up for normal PC monitors. Nowadays most browsers know that if someone tries to print the page the style marked with: 'media="print"' should be used.
So now we know how to tell the browser which style sheet to use when printing the HTML page, so what is different in the print style sheet that makes this work?
There are all kinds on things you can do, but the easiest is just to wrap HTML and images you don't want printed with <div> tags and give all those <div> tags an ID of a style that is set to:
'display: none'
What?!
Ok, the best way to understand is to see it work. Use the template for the CSS article on Killersites.com and create a new style sheet called something like 'print.css'. In that style sheet you ad this:
.noPrint {
display: none;
}
Now in your HTML pages just wrap DIVs around elements you don't want printed:
<div class='noPrint'>
<p>Text that I don't want printed.</p>
</div>
(Don't forget to include your CSS links in the <head> of your HTML page!)
Those elements inside the DIVs with the class 'noPrint' won't print.
Another thing you should do is make all you text black and your pages white:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}
If you used font tags or set your font color on other tags (with CSS) in your HTML page you will have to change those as well, for example:
H1 {
color: #000000;
}
The above CSS sets all the H1 tags text to black.
If you used font tags you're going to have to manually remove them and use CSS to style your fonts! That can be time consuming, but once you fix a site with crappy font tags, you will never use them again!
One last tip - create a print button on your page with this code:
<a href="#" onClick=" window.print(); return false">Print
this page</a>
It's just a link tag with a little bit of Javascript:
onClick=" window.print();
return false"
If you have trouble with this article, then you don't know CSS and perhaps even HTML. If that's the case, you need to go to killersites.com and read the beginners articles and then the CSS tutorial to get you up to speed.
In the next newsletter I will be teaching basic web design and very basic HTML. There too many websites and even most books that teach dated methods of building websites.
As such, I will be concentrating on modern methods of web design because these methods allow you to build pages much faster and much more easily.
If you liked the article and you want to see more let me know!
Stefan Mischook.