image
Morshed Alam

How to print a hidden block of an HTML page?

Css, Html
One of my previous blog I have written “How to prevent printing a block of an HTML page?” then some of my blog readers wanted to know how he/she can print a hidden block? That’s why I have written this one. Anyone can do it by using simple css which is described below:

First, Have to write a css class by which you can hide a block from an Html page.
Second, Override that one in your ‘print block css’ to show it during printing.

Let’s have a look at the css example:


  <style type="text/css">
    .print_this{display:none;}

    @media print {
     .noprint{display: none;}
     .print_this {
       display: block;
     }
    }
  </style>

In the above css,
2nd line is used to hide a block from Html page which is overriden in 6th, 7th and 8th line.
5th line is used to prevent printing of a block which class name is noprint.

Now let’s take an Html source example:


<html>
 <head>
  <title>Print controll of an Html page</title>
  <style type="text/css">
    .print_this{display:none;}

    @media print {
     .noprint{display: none;}
     .print_this {
       display: block;
     }
    }
  </style>
 </head>
 <body>
  <div>
   <div class="noprint">Sample text block which will not print...</div>
   <div><h3>Sample text block which will print normally</div>
   <div class="noprint">Another text block which will not print...</div>
   <div class="print_this">Hidden text block to print</div>
  </div>
 </body>
</html>

In the above HTML will print following lines when print this page from File > Print


Sample text block which will print normally
Hidden text block to print

2 Comments

Leave a Comment