FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » CSS » Adding Print Capability to your Site with CSS

by 4 comments

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+ */}

Displaying links for print

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

Tags

Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman


It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | htaccess.io | htaccess.guru

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain