Web design trick: hiding content from the printer

3692738461_ff93c6605a_z[1] Here is a simple trick that I sometimes use if I need to hide certain parts of a web page when it is sent to the printer. Now, this is not rocket science. Anyone who knows their way around CSS already knows it. But this might be a useful tip for some people who don’t do web design for a living, but still do some HTML editing here and there (hey, it’s a part of life).

The trick is to use a so-called “media rule”. When setting up a style sheet for a HTML document, you can instruct the browser to apply parts of it only on certain media. And the printer is one of the available media that you can manipulate this way.

So, first we create a style that simply hides an element. Then we wrap it in a “media print” declaration and we get something like this:

<style type="text/css">	
@media print { .noprint { display: none }}
</style>
 
<p>This line will show up on the printer.</p>
 
<p class="noprint">This one will not.</p>

Nice, eh? For more information about CSS media types, you can read this article: CSS Media Types

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.