Michael Gaigg: Über UI/UX Design

8Sep118

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

Results of applying a print stylesheet to the page

Design Guideline for a Print Stylesheet

  1. Make page legible
    • Use serif font family (e.g. Georgia)
    • Use points (e.g. 12pt)
    • Ensure good contrast (e.g. color: #000; background: #FFF)
  2. Maximize paper use (e.g. width: 100%)
  3. Hide elements not relevant to print (e.g. display: none)
  4. Add content relevant to print (e.g. spell out links, thank you note)
  5. 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.

Download sample code

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:

Similar Posts:

Posted by Michael Gaigg

Comments (118) Trackbacks (0)
  1. Eine zweite Frage ist, ob ein Rauchverzicht auch hilft, den Blutdruck zu

    senken und mit weniger blutdrucksenkenden Medikamenten auszukommen.

  2. In beiden Patientengruppen sank der Blutdruck erheblich, ein deutlicher Unterschied
    zwischen den Gruppen war aber nicht zu messen.

  3. Denke daran, dass du dich insgesamt auf dem Weg nach oben befindest, und dass es definitiv etwas ist, worauf du
    stolz sein kannst.

  4. In Sachen Gesundheit sollte die Krankenkasse nicht nur ein Lebensabschnittsgefährte sein.

  5. Roberto Fogari von der Universität Padua untersuchte 210 Menschen, deren Blutdruck bei 140 bis 160
    zu 90 bis 100 (normal ist 120/80) lag.

  6. Der Extrakt von Stevia wird aus der Pflanze Stevia rebaudiana gewonnen, die ebenfalls den Blutdruck senken kann.

  7. Mild Blutdruck senkend sind Heilpflanzen wie Mistel, Weißdorn, Baldrian und Melisse.

  8. Aber wenn 77% vor dem Fernseher essen und nur 15% es als akzeptabel ansehen, dann heißt das aber auch dass vielleicht doch was
    damit nicht in Ordnung ist.

  9. Lassen Sie mich daher im Folgenden einmal versuchen, so gut

    wie möglich zu beschreiben, wie sich der luzide Traumzustand anfühlt.

  10. Im Zusammenhang mit Baufinanzierungen tritt die Volkswagenbank als Vermittler auf.

  11. Ein gesunder Lifestyle ist anstrengend: Gesundes Essen , regelmässig Sport ,
    ausreichend Schlaf und vieles mehr.

  12. Das ist eine schmackhafte Pflanze, die zu vielen Gerichten passt,
    und ebenfalls beim Senken des Blutdrucks helfen kann.

  13. In allen drei Fällen ist es für den Kunden möglich,
    sich genau beraten zu lassen, wenn noch Fragen offen sein sollten.

  14. Daher sind die Rezepte nicht nur reich an entzündunghemmenden Fischölen, sondern auch reich an Vitaminen.

  15. Und diese Rückkoppelung nach dem Motto „Meine Herde ist noch da könnte lebensrettend sein.

  16. Es werden m. E. viel zu wenig die Ursachen erforscht, die dann mit Medikamenten evtl.

  17. Etwas abweichend stehe ich im ganzen Buch nur zu drei ganz kleinen nebensächlichen Hinweisen.

  18. Im Gegenteil: Fett gehört zu einer gesunden und ausgewogenen Ernährung – es muss nur
    das richtige sein!


Leave a comment

No trackbacks yet.