Morshed Alam
Morshed Alam Software Architect

How to print a hidden block of an HTML page?

• By Morshed Alam • Css
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

Comments (2)

Unknown
Thanks for your nice post..
Farshid
Thank you for your straight forward explanation and sharing

Leave a Comment