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:
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:
In the above HTML will print following lines when print this page from File > Print
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