Using CSS for printable documents instead of a separate print page (website)

Mar 24, 2011   Programming   Nick Vogt   Comments
Please note that this post is over a year old and may contain outdated information.
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 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.
Share This Post

Comments (0)

Share This Post
H3XED © Nick Vogt   RSS   Policies   Twitter