Archive
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
Using CSS for printable documents instead of a separate print page (website)
Mar 24, 2011ProgrammingComments (0)
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 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.