Tricks for Coding Pages to be Printing Friendly

One day @work, I was asked to make a printOut page version to allow the user to print a Report out of a page filled with lots of data, placed in different sections and tables.. I had to find a way to make the page as much user friendly with its search area and other query controls and to look as a properly designed and arranged report.  

Designing suchpage is actually a joyless task with lots of obstacles, but I must fight to keep my face straight with my managers..

So, I goggled a lot to find a way.. Till I finally got everything in place :D with the help of the powerful CSS Rules and Classes..

Most people don't really appreciate CSS powers.. Web authors, Developers, Designers, …etc. often use CSS to make their sites look impressive on the screen, but forget to design it on other media like printing.

Printed media is one of the types which really shouldn’t be overlooked, because people print anything they like on the web, and it’s in your best interests to make the printout attractive and readable.

This post hopefully will help you get your site looking good on paper. I will call it Tricks here for it was to me to accomplish my goal.

Trick 1: Repeat HTML Table Headers When Printing

When there are tables in your page.. You cant be sure where it is going to be printed.. The whole table -with its content- might be printed in one page.. Or it might be printed on multiple pages, especially when you pull the table content according to a database query that may differs from one user need to another. And when it is printed, tables usually have headings on the first page, and then NO heading on subsequent ones, forcing the user to flip back and forward to see which column is what?

So, to make most browsers repeat table headings on each printed page use the following:

1. Make sure to explicitly define the table head and table body.<table>    <thead>
         <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>row 1 col 1</td>
            <td>row 1 col 2</td>
            <td>row 1 col 3</td>
         </tr>
    
         . . .
    
         <tr>
            <td>row X col 1</td>
            <td>row X col 2</td>
            <td>row X col 3</td>
         </tr>
      </tbody>
   </table>
2. Next, you just need a single line of CSS to get things going:
   @media print {
      thead {display: table-header-group;}
   } 

And that will force most browsers to repeat the contents of thead node on every printed page ;P

Trick 2: Remove or Add Content When Printing 

You can remove any content you don’t want it to appear in the printed version by setting its display property to “none”.

    @media print

{

.hideInPrint {     display: none;     }

}

@media screen

{  

    .hideInPrint {     display: block;    }

}

Or you can do the opposite.. To add content in the printed page that doesn’t appear on screen..

@media print

{

.hideOnScreen {    display: block;    }

}

@media screen

{  

.hideOnScreen {    display: none;     }

}

Note that this is different from setting the visibility to “hidden”, because hidden elements still take up space on the page.

Trick 3: Page Breaks
CSS provides three useful properties for specifying page break behaviour—“page-break-before”, “page-break-after”, and “page-break-inside”. Although browser support for these properties isn’t great (Opera being the exception), it is still a good idea to make use of them.
So, to force each section of the report to start printing at the beginning of the page.. Add a class to the first block with the below definition:   
@media print
   {
      .forcePageBreak  {   page-break-before: always;    }
   }

Or to print figures, images, tables, specific content, ...etc. in separate pages, Add a class to its surrounding block with the below definition:  
@media print
   {
      .pintNSeparatePage
      {
         page-break-before: always;
         page-break-after: always;
      }
   }

Or to avoid page breaks straight after a heading,    
@media print
   {
      h1, h2, h3, h4, h5, h6
      {
        page-break-after: avoid;
      }
   }
Or to avoid page breaks inside paragraphs, blockquotes, lists, … etc. Avoiding page breaks inside elements is very useful for preventing block elements from breaking over a page. If an element is too long to fit on a page, it will be moved to the next page.   
@media print
   {
      p, blockquote, ul, ol, dl, pre
      {
         page-break-inside: avoid;
      }
   }

Remember to be thoughtful when setting a page break property to “always”, because you don’t want to waste your visitors’ paper by printing lots of pages with very few lines of text on them!

I mostly used the above "Tricks" to make that printout page fixed.. Hope my post was helpful ^_^

I will be glad to get your feed back and answer your questions and comments  :)