Print specific area of the site with CSS

Ever need to print only a specific area of the site? So, How to delimit this print area? CSS is the solution!

Problem

Scenario: Was there any site on the screen, and right in the middle of it a kind of report (tabulated data). How to print just the area I was interested?

Solution

How do we know, @media print is a CSS feature that allows us to control the style of what will be printed. Let's analyse two situations.

“Not Print”

1Case – Print all, but delete one or more printing areas
When you have an area that you want to delete the print is easy, simply create 1 1 class in “@media print” obscuring visibility and assign it to the element (html tag) you don't want to print. In the case below, It was created the class .notprint and assigned to a DIV that should not be printed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<HTML>
<head>
  <title>Not Print</title>
  <style type="text/css">
      @Media print { 
          .notprint { visibility:hidden; } 
      }
  </style>
</head>
<body>
  <strong>This will be printed!</strong>
  <div class="notprint">
      This, will not be printed!
  </div> 
  Here will also be printed!             
</body>
</HTML>

“Yes Print”

2Case – Include a single in print area, and delete other
But when the opposite, IE, What if I want to print only a specific area, as a DIV, for example, and do not want the rest of the site appear in print. This is the reason of this Post! Of course, also we will use the @media print, just thinking differently. In this case, concealed the visibility of all (*) the elements of the site and, then, give visibility only to the element we want to print, duly designated by an ID that I called #yesprint. Like this, We can, for example, print only contents of a specific DIV.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<HTML>
<head>
  <title>Yes Print</title>
  <style type="text/css">
    @Media print {
      * {
        visibility:hidden;
      }
 
      #yesprint {
        visibility:visible;
        position: absolute;
        top:0;
        left:0;                                     
      }                                  
    }
  </style>
</head>
<body>
  <strong>This will not be printed!</strong>  
  <div id="yesprint">
      This and, just this, will be printed!
  </div> 
  Here also not coming out in print!            
</body>
</HTML>

If not the desired effect, Maybe it's due to your template be getting residual style of some CSS above (father). Try using !important or adjust the code to force the expected result. See also if there is any tag broken, without opening or closing.

I tested this solution in Internet Explorer 9, Firefox 14.0.1 and Chrome 21.0.1180.8. All seemed to work correctly… Remember too, What if you want to print colors and background images, This must be configured directly on each browser. For example, in Internet Explorer, go to the file menu > page setup, and enable the option “Print colors and background images“, as the figure below. In this same window, You can make other printing settings.

See also: Making DIV invisible to print | CSS differently for printing.

That's it… use at your own risk!

Total hits: 14080

4 comments on “Print specific area of the site with CSS

  1. Luan da Costa said:

    Thank you very much for your help man, but when trying to print my div is not loading the css,I've even created printable css . Have any tips?

    • Copy the code exactly as it appears in the example of the Post to your server and test to see if it works. Try to also put the CSS embedded directly in the page (and no external call), just for testing purposes. Sometimes, If you are using third-party CSS code (as plugins), some Tag is defined as important!. Use Firefox with Firebug and try to correctly identify the CSS ids or classes that you want to modify. Use the pointer of Firebug for this! And so on…

Leave a reply

The your email address will not be published. Required fields are marked with *