Thursday, May 3, 2012

Using CSS to Make Your HTML Page Printer Friendly

Besides for styling for regular media (such as screen / pc monitor), css can also be used to make the web layout suitable for printing.
Perhaps you have a web page which has logo, menu, navigation, videos, and other things on it. Also there is a table or other information which you actually need. You would not want those irrelevant elements cluttering all over when you print it, right?

To solve it, simple use specific stylesheet for printing purpose and define it for "print" media. Here is an example of using external stylesheet for "print" media:


Next step is to eliminate those unnecessary elements using display: none. Here's an example:
div#menu {
display: none;
}

Now, as a bonus, I found out a way to make the default printing orientation as landscape. Here's it is:

@page {
size: landscape;
}

Another interesting thing that I found during my work is that !important rule defined in other css for any other media other than "print" will also effects the "print" media layout. I did not expect that, since I assume that !important rules defined for "screen" media, for example, would only effect that particular media. So, make sure you override the !important rule in the "print" css.