Print Page Using CSS
When I am looking for some technical articles in the Internet, I would like to print them out if they are useful for me. There are many different methods used from different websites for printing their pages. Some website will not change the layout and just let you print it as same as you see. Other website, for example DevArticles, uses the JavaScript to open a new window and change the layout to be printable. But there is one method that I like and used in this website: use CSS to change the printing layout without changing any of source codes. In this article, I will show you how easy to use this technique for the printing page.
Firstly, you have to implement two different CSS, one for the screen layout (view) and one for the printing layout. Of course you have to test the CSS of printing layout as screen layout.
Secondly, use the following HTML tag to include both CSS in your HTML file:
<LINK rel=”stylesheet” href=”view_layout.css” type=”text/css” media=”screen, projection” />
<LINK rel=”stylesheet” href=”print_layout.css” type=”text/css” media=”print” />
You can find the different between two LINK tag. Yes, two media content: one if “screen, projection” and other one is “print”. After you added this tag in your HTML file, when someone wants to print or preview that page, they will get the print version and you can change the printing layout anytime without modify the source code. Still don’t understand? No worry man, try to preview this article and you will get a different layout from you see.
By Michael, written at girl-friend’s home, Sydney, Australia
