Printer friendly pages

When it comes to printing webpages, there are certain elements that are not needed to be printed such as ads, graphics, and certain navigational areas. How can you be sure that only those parts of a webpage that need to be printed are printed?

In the past, having a printer friendly page meant creating two separate pages - one that would appear on screen and another that would be printed. Nowadays, thanks to CSS, you can create just one page and specify which parts of it should be printed and how they should appear on paper.

The @media rule

The @media rule sets how content will appear on different media such as computer screens, printers, and handheld devices. Set how content will appear for printers using the @media rule followed by the print keyword.

Example:
<style type="text/css"> @media print{ body {background-color:#fff; color:#000;} #ads{display:none;} #leftSide {display:none;} #rightSide {display:none;} #footer {display:none;} #content {width: 100%;} } </style>

In the above example, we have specified that when a page is printed the text should be black on a white background (color ink is expensive!),only the content area should appear (be printed), and it should be 100% of the page's width.

NOTE: We applied the above rules (and a few more) to this page to make it printer friendly. Go to File -> Print Preview in your browser to see what it would like when printed and to better understand the concept of using the @media rule to make printer friendly pages.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information