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.
The first thing I did was to create a blank style sheet named apacheprint.css and then I added this XHTML to my
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.
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;}
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;}
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;}
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;}
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.
I use 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^="https://www.askapache"]:after,
.item p a[href^="https://www.askapache"]:after,
.item li a[href^="https://www.askapache"]:after,
.item li a[href^="https://www.askapache"]:after {content: "";}