Design Guidelines: Print Stylesheet
One of the most elegant techniques in web design is the use of a print stylesheet to control the style of a webpage on a hardcopy. Being so easy and cheap it is by far the most undervalued technique out there.
Often overseen bonuses are
- adding copyright statements or thank you notes,
- controlling which elements should not be seen (remove menu, commercials,…) and
- in general ensure that the printed page is legible (contrast especially for links, fonts, …).
Results of applying a print stylesheet to the page
Design Guideline for a Print Stylesheet
- Make page legible
- Use serif font family (e.g. Georgia)
- Use points (e.g. 12pt)
- Ensure good contrast (e.g. color: #000; background: #FFF)
- Maximize paper use (e.g. width: 100%)
- Hide elements not relevant to print (e.g. display: none)
- Add content relevant to print (e.g. spell out links, thank you note)
- Use correct markup to reduce amount of styling (e.g. h1, h2,…)
How it works
Embed an extra stylesheet designed for print media into the page.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This stylesheet takes effect when a user invokes the print function of the browser and overrules style elements in other stylesheets on the page.
Then either provide a button or link that triggers a javascript function to print the page or have the user go through the browser’s menu, even print preview would show you the expected layout already.
<a href="#" onclick="window.print();return false;">Print page</a>
I know, evil javascript, but hey, if turned on it works cross-browser (except IE6 with multiple IE versions installed).
Code sample
I recognize that many samples can be found on the web but I also found them incomplete in many cases. I don’t claim to be compete myself, but I really like with what I came up with and most of all would like to hear your comments and feedback or even better references or links where you applied it to.
index.htm
<html>
<head>
<style type="text/css" media="all">
@import "main.css";
</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="wrapper">
<div id="statement">Legal statement and thank you note.</div>
<div id="header">Header</div>
<div id="content">Content plus <a href="http://link.com/">Link</a></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
main.css
/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
#wrapper {
background: #FFFFFF none repeat scroll 0%;
margin: 0pt auto;
width: 600px;
}
#header {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
#content {
border: 1px solid #CCC;
background: #EEE;
margin: 5px;
padding: 5px;
height: 200px;
}
#footer {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
a:link, a:visited {
border-bottom:1px dotted;
color:#AE4F0C;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#333333;
}
a:hover, a:focus {
border-bottom-style:solid;
color:#D03900;
}
a:focus {
/*background:#FFFFCC none repeat scroll 0%;*/
}
#statement {
display: none;
}
print.css
body {
font-family: Georgia, serif;
background: #FFF;
color: #000;
font-size: 12pt;
}
#wrapper, #content {
width: auto;
height: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: #000;
background: transparent none;
}
#content {
margin: 10px;
}
#header, #menu, #sidebar, #footer, .noprint {
display: none;
}
#statement {
display: block;
border: 1px solid #666;
padding: 10px;
}
a:link, a:visited {
color: #781351;
background: transparent;
text-decoration: underline;
}
a:link:after, a:visited:after {
content: " [" attr(href) "] ";
}
References:
- Coyier, C. (2008, 3 3). CSS-Tricks Finally Gets A Print Stylesheet. Retrieved 9 1, 2009, from CSS Tricks: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
- Meyer, E. (2002, 5 10). CSS Design: Going to Print. Retrieved 9 1, 2009, from A List Apart: http://www.alistapart.com/articles/goingtoprint/
- Walsh, D. (2008, 2 27). Optimize Your Links For Print Using CSS — Show The URL. Retrieved 9 1, 2009, from david walsh blog: http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
- webcredible. (2007, 9). Print stylesheet – the definitive guide. Retrieved 9 1, 2009, from webcredible: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
