Tech Journal Back to Tech Journal

How can I make content on an HTML page dissapear when printed?

To make HTML stuff dissapear when it's in printed form, you can set it's CSS "media" type. There's screen and print (i.e. "paper".) If you set an item's "display" under one of these to be "none" - it will be visible on screen but invisible on the printed page, or vice versa.

Example

CSS:

@media screen {
.print_action
{
  display: none;
}

}

@media print {
.screen_action
{
  display: none;
}

HTML:

<span class="print_action">
    This text displayed only when page is printed (or Print-Previewed)
</span>

<span class="screen_action">
    This text displayed only on screen, and not when printed.
</span>

They don't have to be mutually exclusive like this example. The most usful thing to do with this is to cause interactive parts of the page (links, searches, toolbars, etc.) to disappear in printed form.

Back to Tech Journal