Hide from Print

Posted on Tuesday, July 24, 2007 10:33 AM by K. Latham
Here's one trick you should know if you're building your pages to be printable. How to hide things.

I find this trick very useful when designing reports. Its great for hiding things like input forms or images. Oh and as a bonus this trick works with PDFCreator. A handy tool for creating PDFs out of those reports.

To make things disappear, just add a few lines of CSS:

Add this to your header (or create a separate print style sheet)
<style media="print" type="text/css">
.noprint {display:none;}
</style>
Just use this class where you want to hide things when printing. Example:
<DIV CLASS=noprint>Hide this from the printer</DIV>
Since this style is defined as "print" media it will show up in your browser, but not when you print.

Related: Update: Here's how to do the opposite. Example:
@media screen
{
.printonly {display:none;}
}

@media print
{
.printonly {display:block;}
}
Anything using this class will not show on your screen, but will show up when you print. I think this could be very handy for watermarks or copyright notices.