Printed But Not Published

When someone prints your page, they expect to print what they see in their browser window. But you can print something they don't see beforehand.

As a demonstration, when you print this web page, you'll see a notice printed that I also write books. The notice is embedded in the printed article itself. You may give it a try and see how it works by printing this page.

Here is a screenshot of what will print with this article. (The screenshot may have adjusted in size to fit properly into your browser window.)

screenshot

In the above screenshot, the flowto.us URL redirects to the actual destination page. The URL of the actual page is so long that it would discourage folks from typing it into their browser. The QR code, however, goes directly to the actual page.

The QR code was generated with the QR Code Generator tool. The tool is free to use.

The author of this article also writes books.
See https://flowto.us/books
(Amish novels, Dark Western novels, a Science Fiction novel, Amish candy recipe books, a fiction book for children.)

Later in this article, I'll provide the HTML code used to create the printable notice. But now, let's describe how to implement the functionality.

Two steps implement the functionality.

1. Put this CSS into a style sheet.

   @media screen { .for-printer { display:none; } }
   

   The for-printer class name may be changed. The class may also contain additional CSS declarations. (The display:none; declaration is required.)

2. The content for the printer that doesn't show on the screen is placed in a div with the for-printer class name (or other class name if different from the above example style).

   Here is an example.

   <div class="for-printer">
   [your content for the printer]
   </div>
   

   Put your content into the div (replace [your content for the printer]) and place the div in the web page source code where you want it to print when the page is printed.

That's all there is to it.

Here is the source code of what will print when this web page is printed.

<style>
@media screen { .for-printer { display: none; } }
</style>
<div class="for-printer" style="max-width:6in;">
<div style="float:right; background-color:white;">
<img src="https://www.willmaster.com/possibilities/images/books.bontragerconnection.com.png" style="max-width:100%" alt="QR code to books.bontragerconnection.com">
</div>
<div style="border:3px solid #999; border-radius:1em; padding:1em 0 .6em 1em; font-size:1.1rem; line-height:125%; margin-right:155px;">
The author of this article also writes books.
<br>See <b>https://flowto.us/books</b>
<br>(Amish novels, Dark Western novels, a Science Fiction novel, Amish candy recipe books, a fiction book for children.) 
</div>
<div style="clear:right;"></div>
</div><!-- class="for-printer" -->

The content that is printed doesn't have to be an ad. It may be anything that's printable. As an example, information that is useful in relation to the offline printed article but that would be easily found on the web when online.

(This content first appeared in Possibilities newsletter.)

Will Bontrager