Keep Specific Web Page Items From Printing
People print web pages from their browsers from time to time. The printing may be to paper or as a PDF.
If there is something on your web page that you do not want printed, a bit of CSS can allow the item to be seen in the browser but prevented from being printed.
Examples of items a person might not want printed with the rest of their web page are sale prices, ads, and other items that are seasonal or frequently updated. If you use a "tap to print" button, you may want the button itself absent from the printed page.
(See Include Special Message When Web Page Is Printed for the reverse effect, printing something that is not published on a web page.)
To keep certain items from being printed, this CSS does the trick.
@media print { .non-printable { display: none; } }
To tell the browser to hold back something when the web page is printed, assign class="non-printable" to the item.
As a demonstration, the next paragraph has class="non-printable" assigned to it.
If you print the web page, this paragraph should not print — whether you send it to your printer or print to a PDF. However, if this paragraph is in an email reader, even in a web page for reading email, the CSS to prevent printing might not be functional or have been stripped out by the email provider.
The class name may be something other than non-printable, if you wish — "noprint" or "printless" are examples. Specify the different class name in the CSS declaration and use it with the items you want to make non-printable.
Example Implementation of the Do-Not-Print-Me Feature
Here is the source code of a simple web page with three paragraphs. The middle paragraph does not print when a browser's "print" function is used to send the web page to the printer or to a PDF that may be printed later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print/Non-print Test</title>
<style>
@media print { .non-printable { display: none; } }
</style>
</head>
<body>
<p>
The first paragraph on the page.
</p>
<p class="non-printable">
The second paragraph on the page (is not printable).
</p>
<p>
The third paragraph on the page.
</p>
</body>
</html>
When you get right down to it, it can be a simple implementation:
-
Put the CSS declaration into the
styletag. -
Use the class name to specify non-printable items.
Give it a test. You'll find it easy to implement.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
