A Printer-Friendly Web Page with Non-Printing Elements
Let's suppose you have a web page with content to be printed by the site visitor. The page contains instructions and a "click to print" button that should not be printed. Maybe it also contains ads and other elements only for screen display.
Let's further suppose that creating a separate printer-friendly page is not an acceptable option.
Here, I will give you a copy 'n paste example of how to let your site visitors print certain parts of a web page and exclude certains parts from printing.
Using the CSS2 media rule, one can specify different rules for printer and screen (and other media). Because media rules are CSS2, older browsers won't know the difference and will print everything on the page.
Let's present a complete working example with CSS2 media rules. Then, we'll talk about it.
You'll learn how to display things on the screen that are not printed. And, you'll learn how to print things that aren't displayed on the screen.
<html>
<head>
<style type="text/css">
p { font-size: 90%; }
.small { font-size: 70%; }
.bold { font-weight: bold; }
.notice { color: red; background-color: yellow; }
@media print { .noprint { display: none; } }
@media screen { .noscreen { display: none; } }
</style>
</head>
<body>
<p class="bold">
This is a bold paragraph. It displays on the screen and
also prints.
</p>
<p class="bold noprint">
This is also a bold paragraph. It does not print, only
displays on the screen.
</p>
<div class="notice small noscreen">
This small red text with yellow background notice prints
but does not display on the screen. (Some printers don't
print background colors.)
</div>
<div class="noprint">
<img src="myimage.png" width="100" height="100" border="0">
<p>
Everything in this div displays on the screen but does not
print (unless class overrides the div).
<p>
</div>
<p>
This sentence displays on the screen and also prints.
<span class="noprint">This sentence of the same
paragraph, however, does not print.</span>
<span class="noscreen">This sentence does not
display on the screen, but does print.</span>
This last sentence of the paragraph both
displays on the screen and prints.
</p>
</body>
</html>
The style sheet has rules for the P paragraph tag and creates several classes. These two lines in the style sheet are key:
@media print { .noprint { display: none; } }
@media screen { .noscreen { display: none; } }
The "noprint" class applies only to content not to be printed. Content assigned to that class is invisible when the page is sent to the printer. This would likely be content such as navigation areas, subscription forms, and advertisements.
The "noscreen" class applies only to content not to be displayed on the screen. Content assigned to that class is invisible when the page is displayed. This would likely be content like "Printed at ______" statements and information of interest to those who will see your content only on a sheet of paper.
With those two classes at hand, it is easy to specify what is not to be printed and what is not to be displayed on the screen.
The first text paragraph in the example is assigned the class "bold" but neither "noprint" nor "noscreen". Thus, it both displays on the screen and prints to the printer.
The second paragraph is assigned both class "bold" and "noprint". (Notice that more than one class can be assigned by separating them with a space.) The "noprint" class prevents this paragraph from being printed.
The third paragraph is assigned three classes, "notice", "small", and "noscreen". The result is a paragraph printed with small, red text on a yellow background but that is invisible on the screen. (Some printers can be set up not to print background colors. With those, the yellow background color is ignored.)
Next is a DIV assigned to class "noprint". Everything in this DIV will display on the screen but not print — image, text, whatever is put into the DIV. (Note that styles within the content of the DIV could cause certain elements to print, in spite of the "noprint" class assigned to the DIV.)
The final paragraph demonstrates how to assign styles within a paragraph. Of the four sentences, the second does not print and the third does not display on the screen.
With what you know now, you can design web pages that are both screen-friendly and printer-friendly.
Will Bontrager
