Blogger Hacks, Categories, Tips & Tricks

Tuesday, April 11, 2006
Print Preview in Blogger?
A reader mails to ask what I know about setting up a "print view" in blogger, so that posts can print without a sidebar or header (or blogger nav-bar?). The answer, of course, is notalot, but hey, let's flip some pancakes and see if any of them stick to the ceiling.
  • CSS? Phillip at You've Been Haacked has a pretty cool "print" link on each post page of his blog that would seem to do the trick, by creating a new page & only pulling certain elements from the original. This works by opening a print dialog box, & having the box refer to a print preview page stylesheet. Would this work with blogger if the print-only stylesheet went in the template head?
<a href="javascript:void(0);"
onClick="openindex()">Print</a><SCRIPT
LANGUAGE="JavaScript">

function openindex()
{ var blogbody = <$BlogItemBody$>;
OpenWindow=window.open("", "newwin", "height=800,
width=1000,toolbar=yes,scrollbars="+scroll+",menubar=yes");
OpenWindow.document.write("<TITLE>Print Me</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#333>")
OpenWindow.document.write(blogbody)
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")

OpenWindow.document.close()
self.name="main"
}
</SCRIPT>
All thoughts / ideas / plans / pre-formed notions for turning these into functioning blogger hacks are, as usual, most welcome.

Update: See Ben's CSS code to make this work. Great hack, Ben!

Update 4/12: Aditya offers another CSS method to make this work, using external stylesheets. If you've ever envied the Instapundit's stylesheet switcher (for various font sizes etc), Aditya points out that this hack could easily be extended to allow the application of multiple stylesheets to blogger content... So go ahead, give your Gran that 16 point font she's always wanted!

Filed in: , , , ,
Posted at 4:14 PM by John.
10 Comments:
<    >
Blogger Benjamin said...
some clearer instructions for this are at this page. I've implemented this on one of my pages and used #b-navbar { height:0px; visibility:hidden; display:none } to get rid of the nav bar only in the printout.

The header, navbar, and sidebar are gone, but the text still doesn't take up the full screen (I set width to 100%; for main and content)

<    >
Blogger Pete said...
The previous commenter has it right. Another good resource is this article from A List Apart.

For Blog*Spot blogs that can't host an external print.css file, you can use ether a media="print" on your <style> tag, or wrap the rules you want to be for print in a @media print {} block.

<    >
Blogger Aditya said...
For the ones getting a little jumpy, I cooked up a little remedy! :) Take a look?

<    >
Blogger Benjamin said...
aditya, your page doesn't load in my firefox, just says loading with a ghosted background. did you solve the problem of not only making the other divs blank, but also gone, space-wise?

<    >
Blogger Benjamin said...
I've found another source that makes the sidebar disappear on ie, but not on my firefox (though I have an old version)
#content {
margin-left:0;
float:none;
width:auto;
}

<    >
Blogger Aditya said...
"did you solve the problem of not only making the other divs blank, but also gone, space-wise?"

err... what...? :P

<    >
Blogger Benjamin said...
well, perhaps there's something wrong with my version of firefox, but i fixed it. Instead of using external stylesheets, I embedded them in my template as <style type="text/css" media="screen">
@media screen {}</style> <style type="text/css" media="print">
@media print {}</style> And it works great, now.

<    >
Blogger Aditya said...
@Benjamin: I'd like you to test this little CSS change in IE too. I don't know if IE's CSS handling will allow this, since Fx's handling is inherently the best of the pack of browsers, and IE's is the worst.

<    >
Blogger Benjamin said...
In any case, I got it all working, yay! Test here

I just used <style type="text/css" media="all"> also media="screen" and media="print" (skip the strudel @)

Sorry for the many posts. The only other thing I did so futher customize it, was add the following to my print style (use span class=noprintout on the bottom of your post, for example):



/* http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/media_1.asp */
h1, h2, h3, h4, h5, h6 { page-break-after: avoid;
page-break-inside: avoid }
img { page-break-inside: avoid;
page-break-after: avoid; }
blockquote, table, pre { page-break-inside: avoid }
ul, ol, dl { page-break-before: avoid }
div#sidebar {
display: none;
}
DIV.adbanner {display: none;}
.noprintout
{
DISPLAY: none;
}
#b-navbar { height: 0px; visibility: hidden; display: none; }

<    >
Blogger Benjamin said...

Links to this post:

Create a Link


eXTReMe Tracker