Hiding Elements During Printing

I work in an environment where my collegues surrounding me strongly believe there is no difference between “Microsoft Excel” and the web. One of the arguments I almost always hear: “…why can’t you do it? it can be done in excel – see!”.

So that’s how it all started; Excel apparently has a feature that allows a user to hide certain elements from the spreadsheet during print-out; I am not sure how exactly it’s done, I am not an Excel expert.

Obviously I had to come up with a way to handle this issue for the web. As it turns, it isn’t difficult to do. What you do is the following:

  1. I strongly suggest you work on the print features (such as this) at the end of the life-cycle of the application. This will save you lot of double working (such as oh I changed this, so I have to change it there…)
  2. In the rest of the document when I refer to style-sheet I am referring to either your global style sheet or the style sheet you are using in the page that you want to include this feature.
  3. Add an element in the style sheet like this:
.hide-for-print {
    display:block;
}
.hide-text-for-print {
    display:inline;
}
  1. Now enclose the complete style-sheet between the following class:
@media screen {
    /* include everything here */
}
  1. Now make a copy of the style sheet, call it: print-<something>.css (change to something)
  2. Open the print-<something>.css file
  3. Change the @media screen line to: @media print
  4. Also find the .hide-for-print and .hide-text-for-print elements in this print-<something>.css file
  5. Change it to:
.hide-for-print {
    display:none;
}
.hide-text-for-print {
    display:none;
}
  1. Save all the files
  2. I am assuming you have something like this in your HTML file:
<link rel="stylesheet" href="/styles/something.css" />

Change it to the following

<link rel="stylesheet" media="screen" href="/styles/something.css" />
<link rel="stylesheet" media="print" href="/styles/print-something.css" />
  1. Now surround all the elements you want to hide with:
<div class="hide-for-print">
<!-- elements you want to hide here ... -->
</div>

If you want texts to be hidden during print you should do:

<span class="hide-text-for-print">.... text to be hidden during print ...</span>

Comments