Posted by femrich on February 28, 2007 at 9:45am
I'm wondering if anyone has a favorite solution (drupal 5.x) for creating printer-friendly pages? I found the Printable module, in development release only (http://drupal.org/project/printable). Has anyone used this? Or can you suggest other alternatives?
Thanks.
Comments
Why create 'em? Style 'em!
I still believe the easiest and best way to do printing is to link in a print-friendly CSS file. Here's a great tutorial:
http://alistapart.com/articles/goingtoprint/
Then instead of having Drupal or any other system generate a separate printer-friendly document, simply create a "Send to Printer" link that uses JavaScript to open the print dialog.
I wrote about this method a long time ago, including a way to hide the link from (rare) non-JavaScript browsers:
http://smallinitiatives.com/2003/09/04/javascript-flash/
-- Jay Small
http://smallinitiatives.com/contact-jay-small/
-- Jay Small
http://smallinitiatives.com/contact-jay-small/
Of course!
That sticky "smack" sound you just heard was my palm slapping my forehead. i believe I read the ALA article you mentioned a while back. What better way to try to build my CSS knowledge then to play around with that? I'll put it on my "to do" list and see what I can come up with.
Thanks!
Then why...
Then why doesn't drupal just make the "Printer-friendly version" link at the bottom of each book page do this ? Because what gets generated now is pretty useless. I find that just printing the normal page comes out looking better.
ALA print.css
Jay's pointer to http://alistapart.com/articles/goingtoprint/ includes an embedded bonus: ALA's own printer-friendly markup implementation, which you can study from the article source itself. The important HTML bits are the following two lines, which specify files for global and printer specific CSS rules:
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<link rel="stylesheet" href="/css/article.css" type="text/css" media="all" />
Also, because the tag specifies media="print", the print.css stylesheet will be used automatically, only when the browser prints the document - i.e. no need for a "print this document" link to a print-specific page unless desirable for navigation reasons. Having a look at print.css, you can see right at the top how they supress display of regions extraneous the article content:
#masthead, #navbar, #sidebar, #metastuff b, #metastuff .discuss, div.discuss {display: none !important;
}
-- Chip
pushbutton theme
The ALA article is great. Drupal doesn't always cooperate, however.
Just try doing a Pushbutton theme print-friendly css sheet for the calendar view... what a pain! Some themes are better for this than others.
Tip: Build hidden divs into your page.tpl.php file(s)
We use the print.css method described in the ALA article jaysmall mentioned. However, as gobbo has noted, this doesn't always do the trick, as it's not always as easy as hiding a bunch of divs.
If you want to fine-tune your printed style, try adding divs that are hidden by the web version and made visible by the print stylesheet. In other words, your print.css file doesn't need to simply hide stuff -- it can show stuff, too.
Here's a rough example:
<div class="header">This is my web-visible header.</div>
<div class="print-header">This header is visible only when I print the document.</div>
<div class="content-wrapper">
<div class="content">Content goes here.</div>
<div class="sidebar">This is the sidebar.</div>
</div>
<div class="footer">This is my web-visible footer.</div>
<div class="print-footer">This footer is visible only when I print the document.</div>
Your style.css file would hide the print-friendly divs:
div.print-header, div.print-footer {display: none;
}
And your print.css file would display the print divs while hiding the stuff you don't want to print:
div.print-header, div.print-footer {display: block;
}
div.header, div.footer, div.sidebar {
display: none;
}
If you want to see a more sophisticated version of this technique in action, try printing an article from That Other Paper as a PDF file. Here's a sample article. Note how the header is replaced with a grayscale graphic and the source URL is displayed at the top and bottom of the document for future reference. (Browsers that print the source URL in the top or bottom margin usually cut it off at a few dozen characters, which makes it useless.)
Todd Ross Nienkerk
Co-founder, Four Kitchens
Todd Ross Nienkerk
Digital Strategist and Partner
Four Kitchens: Big ideas for the web
IRC: toddross