Include Special Message When Web Page Is Printed
Some people print web pages they like for off-line study, perhaps to save in an idea file for future reference. They may send the "printed" page to a PDF instead of a paper printer.
A special message can be printed that isn't published on the web page displayed in the browser.
Perhaps it is as simple as a
This page was printed from https://example.com/thispage.php
message. Or, the message might be an ad for printing supplies — or something else a person who prints your page is likely to be interested in.
(See Keep Specific Web Page Items From Printing for the reverse effect, publish something on a web page that is not printed.)
To cause certain items to be printed when a web page is sent to a printer, but not visible on the web page in the browser, this CSS does the trick.
@media screen { .only-printer { display: none; } }
To tell the browser to print something that is invisible on the web page, assign class="only-printer" to the item.
As a demonstration, the next paragraph in the source code of this web page has class="only-printer" assigned to it. But you can't see it in the browser. The page has to be printed to see it.
If you print the web page, this paragraph will print — whether you send it to your printer or print to a PDF. In the browser, however, this paragraph is invisible. (In an email reader or a web page for reading email, the CSS to prevent publishing this paragraph might not be functional or have been stripped out by the email provider.)
The class name may be something other than only-printer, if you wish — "printable" or "for-printing" are examples. Specify the different class name in the CSS declaration and use it with the items you want to make only-printer.
Example Implementation of the Publish-Me-Only-When-Printed Feature
Here is the source code of a simple web page with three paragraphs. Only the first and last paragraphs are visible when the web page is viewed in a browser. When the web page is printed, however, the middle paragraph is included in the printed page.
<!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>Non-print/Print Test</title>
<style>
@media screen { .only-printer { display: none; } }
</style>
</head>
<body>
<p>
The first paragraph on the page.
</p>
<p class="only-printer">
The second paragraph on the page (printable, but not viewable in browser window).
</p>
<p>
The third paragraph on the page.
</p>
</body>
</html>
It can be a simple implementation:
-
Put the CSS declaration into the
styletag. -
Use the class name to specify only-printer items.
Give it a test. It works well.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
