Printer-Only and Browser-Only Content

When someone prints your page, would you like the printed version to be different than the web page displayed in the browser?

It can be. Even quite different.

Some things can be omitted. Extra things can be printed.

You decide.

To tell the browser

• what is only for publishing in the browser, and
• what is only for printing

requires two CSS class names and the @media tag.

The CSS rules for the two classes determine if certain content is only for the browser or only for the printer. (If neither of the classes is applied, then the content is for both the browser and printer.)

Here are the classes.

<style type="text/css">
.only-for-browser { display:block; }
.only-for-printer { display:none; }
@media print {
   .only-for-browser { display:none; }
   .only-for-printer { display:block; }
   }
</style>

(Colorizing is for clarity.) The two class names are only-for-browser and only-for-printer. The @media tag is @media print

The only-for-browser class rule display:block; is applied to the page. As is the rule display:none; associated with the only-for-printer class.

Except when the page is being printed.

When the page is being printed, the @media print tag kicks in. At that point, the values are switched.

The only-for-browser class rule is switched to display:none; and the rule for the only-for-printer class is switched to display:block;.

An Example

In a moment, I'll show you how to use the classes. But first, an example, which requires you to print this page. If your printer lets you preview the page, that should be sufficient; so long as you can see what is and what is not to be printed.

When you print the web page, this paragraph will not be printed. Other content will be printed in its stead, content not published in the browser.

This paragraph is included when the page is printed, but not published on the web page in the browser window. (If you're so inclined, it's a way to hide an easter egg to let only people who print the page find it.)

Using the Classes

Specify class name only-for-browser for content that is not to be printed, only published on the web page in the browser window.

The class can be specified for a div that contains lots of content — images, tables, paragraphs, any HTML content. It can be specified for a paragraph, as in the example. And it can be specified for small individual elements, like for a span tag.

Specify class name only-for-printer for content that is only to be printed, never to be published in the web page displayed in the browser window. The class can also be applied to any HTML elements — div, p, img, span, any HTML tag.

The following can be used to replicate the example. Color coding is for clarity. Insert the printer-only content of your choice.

<style type="text/css">
.only-for-browser { display:block; }
.only-for-printer { display:none; }
@media print {
   .only-for-browser { display:none; }
   .only-for-printer { display:block; }
   }
</style>

<p class="only-for-browser"><!-- Publishes in brower, doesn't print. -->
When you print the web page, this paragraph will not be printed. Other content will be printed in its stead, content not published in the browser.
</p>

<p class="only-for-printer"><!-- Prints, doesn't publish in brower. -->
[Printer-only content goes here]
</p>

Between those two classes, the web page that's printed can be subtly different or quite dramatically different than the page visible in the browser window.

Ads don't have to print, or different ads can be printed. Instructions can be included or omitted. Images can be switched. Colors can be changed.

You decide what you want printed and what you don't want printed.

(This article first appeared in Possibilities ezine.)

Will Bontrager