Adding Print Capability to your Site with CSS
« Securing php.ini and php.cgi with .htaccessSEO Boost from Google 404 Plugin »
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://z.askapache.com/c/apacheprint-176.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 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. « Securing php.ini and php.cgi with .htaccess Tags: Accessibility, CSS
</code> 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.</p>
<pre>
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
.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
SEO Boost from Google 404 Plugin »Similar Reads
My Picks
- THE Mod_Rewrite Cheatsheet
- AskApache .bash_profile
- Elite Log Viewing
- THE Ultimate Htaccess
- Intense Windows Speed
- DNS: Round Robin Speed
- Fsockopen: Nuts
Related Articles
- .htaccess trick to show Alternate CSS
- 12 Lessons for Those Afraid of CSS
- Review: Posh CSS
- Online CSS Compression Tools
- mod_rewrite Fix for Caching Updated F
- Abbr and Acronym examples
- CSS Background Image Sprites
- Best CSS .Classes for CSS Toolbox
- Come On and Sprite for your Website
- PullQuotes using CSS
Newest Posts
- Update: Best Free Online Banking
- Firefox Add-ons for Web Developers
- Optimizing Servers and Processes for Speed with ionice, nice, ulimit
Random
Donate
Please consider donating to support active development of the free software and articles here.
Good Causes
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee
Reader Comments
-
Zoe ~
Nice post!
Just watch out for overlapping elements canceling each other out, e.g: in the first block of CSS, you define the li list style as none then to decimal and disc (for ol and ul, respectfully), and you’ve also defined h1-h6 as font-weight:normal, then later on as bold. But that’s just nit-picking, it works all the same. -
Mike Schinkel ~
Wow, you da man! I can’t believe you responded to my request so quickly, and in a blog post no less.
THANKS! I’ve added yours to the (small) list of blogs I’m following on my blog.
It's very simple - you read the protocol and write the code. -Bill Joy
HTML | DCMI | GRDDL | XOXO | XDMP | XFN | DOM | XML | XHTML 1.1 Strict | CSS 2.1 | W3C | TLDP | WAI | DISA | ICSI | GIAC | SANS RR | GHOST | DEFCON | NIST | DHS CYBER | NIST
↑ TOPExcept 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. HTTPD based on NCSA HTTPd
Nice tutorial and relevant links about CSS Printing. I’ve copied the source code to see if I can integrate it successfully with my site.