Using CSS for printable documents instead of a separate print page (website)
Posted March 24, 2011 by Nick Vogt in Programming
Many websites have a print link that opens up documents in a separate window with special formatting for print. This works, but often times you can achieve the same result using CSS and the media="print" attribute. What I generally do is specify two external stylesheets, one for media="all" and one for media="print". For example:
Link tags should be between the head tags in your html.
The style_print.css document would contain tweaks that eliminate the website's layout and adjust dimensions to make the printed document look good. The end result is a cleanly printed document without requiring a separate page or forcing users to open up a new window/tab to print from.
There are other ways to implement a media declaration if you want to have inline css or all of it on a single css document. See W3Schools CSS Media Types for more information.
<link media="all" rel="stylesheet" type="text/css" href="style.css">
<link media="print" rel="stylesheet" type="text/css" href="style_print.css">
<link media="print" rel="stylesheet" type="text/css" href="style_print.css">
Link tags should be between the head tags in your html.
The style_print.css document would contain tweaks that eliminate the website's layout and adjust dimensions to make the printed document look good. The end result is a cleanly printed document without requiring a separate page or forcing users to open up a new window/tab to print from.
There are other ways to implement a media declaration if you want to have inline css or all of it on a single css document. See W3Schools CSS Media Types for more information.
| Tags | css html |
|---|