Adding Print Capability to your Site with CSS

Its really nice to be able to print out a webpage you are reading using your browsers built-in print feature. Using CSS you can easily transform your site into a print-friendly site.

Today I received an email from a visitor to my site requesting that I add a way to print site articles on AskApache

Finally, you have so much great stuff that I need to print it take it offline so I can consume it. However, your theme prints just awful with huge empty spaces between paragraphs and especially with some of your example code, i.e. see "Redirect All Feeds to Feedburner’s MyBrand". Not sure if you care but it would really be great for those of us who print if you could clean it up for nicer printing to fully print your examples and to get rid of the excessive whitespace.

Go ahead and hit print preview to see how effective this simple CSS print method is! Updated! Now both the print and regular css are in the same file! Please read this.

Making AskApache Printer-Friendly

The first thing I did was to create a blank style sheet named apacheprint.css and then I added this XHTML to my <head></head>

<link href="http://s.askapache.net/css/apacheprint.css" rel="stylesheet" type="text/css" media="print" />

Amazingly, to make my site printer-friendly, all I had to do was edit the apacheprint.css file to control how browsers will print my site.

Resetting the CSS

Next I added the Yahoo Reset.css and Base.css files to my apacheprint.css file. That code looks like this.

html {color:#000; background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0; font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {font-family:inherit; font-size:inherit; font-weight:inherit;}
input,textarea,select {*font-size:100%;}
legend {color:#000;}
code {display:inline;text-indent:3px;}
h1 {font-size:138.5%;}
h2 {font-size:123.1%;}
h3 {font-size:108%;}
h1,h2,h3 {margin:1em 0;}
h1,h2,h3,h4,h5,h6,strong {font-weight:bold;}
abbr,acronym {border-bottom:1px dotted #000; cursor:help;}
em {font-style:italic;}
blockquote,ul,ol,dl {margin:1em;}
ol,ul,dl {margin-left:2em;}
ol li {list-style:decimal outside;}
ul li {list-style:disc outside;}
dl dd {margin-left:1em;}
th,td {border:1px solid #000; padding:.5em;}
th {font-weight:bold; text-align:center;}
caption {margin-bottom:.5em; text-align:center;}
p,fieldset,table,pre {margin-bottom:1em;}
input[type=text],input[type=password],textarea {width:12.25em; *width:11.9em;}

Hiding Unfriendly Content

Ok so I don't want to display the sidebar, header, footer, and several other elements on this site, so I added them to apacheprint.css with the instruction to not display them.

#HeadW,#HeadW,
#NavM,#HeadW,
#FootW,#FootW,
#simg,#simg,
#BTNfs,#BTNfs,
#sidebar,#sidebar,
#content #pagebar,#pagebar,
#content #digg,#digg,
#content #bcomme,#bcomme,
#content #comments,#comments,
#content #related1p,#related1p,
#content .rnote,
.flef,.flef,
#content #npl,#npl {display:none !important;}

#searchbox_002660089121042511758:kk7rwc2gx0i,#searchbox_002660089121042511758:kk7rwc2gx0i,
form#searchbox_002660089121042511758:kk7rwc2gx0i,form#searchbox_002660089121042511758:kk7rwc2gx0i,
#snaptalent,#snaptalent,
h2.HAC {display:none !important;}

Misc CSS Fixes

Once that was done I tested my site using the "print preview" browser feature, and found some other things I needed to fix.

#GlobalW,
#content,
#htaccess {width:auto !important; height:auto !important; overflow:visible !important; background:transparent !important; background-image:none !important; padding:0 !important; margin:0 !important; float:none !important;}

.item {width:auto !important; height:100% !important; overflow:visible !important; float:none !important;}
.post-content {width:auto !important; height:auto !important; float:none !important;}
.item .post-content {width:90% !important;padding:0 6% 0 0 !important;max-width:100% !important;margin:0 auto !important;}

.C {clear:both; padding:0; margin:0; line-height:5px; font-size:10px; border-bottom-width:0px;}
#content .post-content h2 {margin-top:1em;}
#content h1#sing {margin:0; width:100%; padding:0;}
.item {padding:0; margin:0;}
#content .commentlist li,#content .commentlist li.alt {margin:0.25em;}

Correct Page Breaks and Width

In order to print correctly, I also added the following.

html,body {background-color:#FFF; color:#000; font-size: 12pt;}
img  {max-width: 100%;}
h1,h2,h3,h4,h5,h6 {page-break-after: avoid;}
ul, ol, li {page-break-inside: avoid;}
table table,tr,td {page-break-before: avoid;page-break-after: avoid;}

Making Comments Appear on Separate Page

I created a class called .pb in my main css file

.pb { page-break-before: always; }

that creates a page break and then added that class to a hr element before my comment div.

<hr class="pb" />

Wrapping Code in PRE

I use <pre> tags to markup code in my posts, but printing doesn't show you a scrollbar like my site does, so I added this fine CSS pre hack to wrap the lines when printing.

pre {page-break-inside: avoid; font-size: 7pt !important; max-width:95% !important; overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ /* width: 99%; */ word-wrap: break-word; /* Internet Explorer 5.5+ */}

I opted not to do this because I have way to many links in my posts, but here is how I can display the links next to the link name in p and li tags. Note that it will not print relative links or anchor links or javascript links.

.item p a:link:after,
.item p a:visited:after,
.item li a:link:after,
.item li a:visited:after { content: " (" attr(href) ") ";}
.item p a[href^="/"]:after,
.item li a[href^="/"]:after,
.item p a[href^="#"]:after,
.item p a[href^="javascript"]:after,
.item li a[href^="#"]:after,
.item li a[href^="javascript"]:after,
.item p a[href^="http://www.askapache"]:after,
.item p a[href^="http://www.askapache"]:after,
.item li a[href^="http://www.askapache"]:after,
.item li a[href^="http://www.askapache"]:after {content: "";}

Learn More about CSS Printing

  1. Yahoo UI Library for Resetting CSS
  2. A List Aparts: Going To Print
  3. Wrapping Text Inside Pre Tags
  4. A List Aparts: Taking Your Design to the Small Screen
  5. Dev Operas: Making Small Devices Look Great
  6. CSS-Tricks finally gets a Print Stylesheet
  7. Advanced CSS Printing: Using Page Breaks
  8. Opera user stylesheets
  9. W3.org Paged Media

CSS Cascading Style Sheets nicer printing Style sheet

Comments