Hide text on page but show it on window.print

Question

Anyone have idea how can I hide text, date or something on page, but when I click button for window.print() show it there? I'm using:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

@media print {
  .hide-from-printer{  display:none; }
}

<a href="#" onClick="window.print()" class="btn btn-success hide-from-printer">Print</a>

So like this button class="hide-from-printer", it shows on page but hide from printing page. I want to do vice versa (on the contrary). Any suggestion?

Possible duplicate of [How to hide a CSS media query from print? "not" logical operator does not work](http://stackoverflow.com/questions/10591273/how-to-hide-a-css-media-query-from-print-not-logical-operator-does-not-work) — Vadim Ovchinnikov, Jan 14 '17 at 07:53

S.Serpooshan · Answer 1 · 2017-01-14T07:55:13.500

3

Use this way:

.hide-from-page { display:none; } /* hide at normal page view */

@media print {
  .hide-from-page { display:inline; } /* make it visible during print */
}

Note: its obvious to rename the class to mean correctly (instead of hide-from-printer, it must be something like as hide-from-page or show-only-at-print)

edited Jan 14 '17 at 07:55

answered Jan 14 '17 at 07:52

S.Serpooshan

6,918
3
31
58

score 1 · Accepted Answer · answered Jan 14 '17 at 07:56

you can use ´screen´ for regular screens so all you would have to do is

@media screen {
    .hide-from-screen {
        display: none;
    }
}

@media print {
     .hide-from-printer {
          display: none;
      }
 }

and use those classes accordingly.

Hide text on page but show it on window.print

2 Answers2