« Share the Love - through Amazon.com | Main | Adding a "Posted to Category" Line »

Printer-Friendly Pages

mtbadge-small.gif Updated April 6, 2007.

Providing printer-friendly versions of your weblog entries can be useful to your weblog readers. Learning Movable Type links to printer-friendly versions at the end of each entry.

There are several ways to create printer-friendly versions. I've outlined two methods in this tutorial. The first method is a simple header tag for your templates and some some CSS that automatically generates printer-friendly pages whenever someone goes to print a page from your blog. The second method is a bit more involved, creating a printer-friendly archive template with associated stylesheet. The first method will be sufficient for most situations. The second method is useful if you are trying to create a few different print options, like different sized recipe-cards.

Method One: CSS and Header tag

1. Create a new stylesheet. Create a new stylesheet in your index templates menu. In the stylesheet template, put the following directive:

For MT 3.2 default template

#banner, #banner-inner, #beta, #beta-inner, .content-nav { display: none; }

#container-inner { border: 0px solid #FFF; }

Add whatever elements you want to NOT display on your print friendly pages. If you don't want to display any comments or trackbacks, add the #comments id and the .trackbacks class to the stylesheet as above, with display set to "none". This example is based on the Vicksburg default with the sidebar on the right. By setting the display to "none" you are telling the browser to not show any of the content that falls within those divs.

This is a print.css stylesheet for MT 3.1 and earlier default templates

#banner, #nav, #right  {
    display: none;
}

Save the stylesheet as print.css.

2. Add a link rel tag to your header. In the header section of the template for which you wish to print in a print-friendly manner (in most cases this would be your individual entry archive template) put the following tag:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Add the tag underneath your existing stylesheet link rel tag in the header section.

Save and rebuild your site. To test, go to one of your entries (if you had made adjustments to the individual entry archive template) and select "print" and then "print preview" from your browser. If you don't notice a change, empty your browser cache and try again.

Method Two: Printer-friendly Archive Template

The following method is based on an approach first put forth by Kristine Beeson. In this method you create a new individual archive just for your printer-friendly pages and also a new print-friendly stylesheet. This method will dynamically generate files for the print-friendly versions of your entries using MT's dynamic publishing feature. If you are not able to use dynamic publishing on your web server, do not check "Enable dynamic building for this template" in step 1. If you use regular publishing (versus dynamic) this method will create a separate print file for every entry that will be stored on your server. In this case, and if web server storage is an issue for you, you may consider using the CSS only method outlined above.

1. Create a printer-friendly archive template. In your Templates menu, select the list of archive templates and select Create New Archive Template.

create-new-template.gif

In the window that comes up, write "Printer Friendly Individual Archive Template" in the name field. Do select the checkbox "Enable dynamic building for this template".

PF-template-name.gif

Copy and paste the template for your Individual Archive Template into the Template Body field of your new printer-friendly template. Remove all extraneous tags. This might take some trial and error.

Here is a basic structure for a printer-friendly individual entry archive template for MT3.2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html&#59; charset=<$MTPublishCharset$>" />
   <title><$MTBlogName encode_html="1"$>&#58; <$MTEntryTitle remove_html="1"$>&#58; Print This</title>
   <link rel="stylesheet" href="<$MTBlogURL$>PF-stylesheet.css" type="text/css" />
</head>
<body>
   <div id="container">
               <h1 id="banner-header"><$MTBlogName encode_html="1"$></h1>
               <h2 id="banner-description"><$MTBlogDescription$></h2>
                     <div class="entry">
                        <h3 class="entry-header"><$MTEntryTitle$></h3>
                        <div class="entry-content">
                              <$MTEntryBody$>
                              <$MTEntryMore$>
                        </div>
                        <p class="entry-footer">
                          Posted by <$MTEntryAuthorDisplayName$> on <$MTEntryDate$>
                        </p>
                     </div>
   </div>
</body>
</html>

Save, but do not rebuild yet.

Note that for printer-friendly templates you might want to included a

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

tag in the header. This tag keeps search engines from indexing your printer friendly pages.

Also note that the template includes a stylesheet link to a printer-friendly style sheet that I've named PF-stylesheet.css.

2. Create a printer-friendly stylesheet template. In your Templates menu, select Create New Index Template. Name your new index template something that distinguishes it as your printer-friendly stylesheet. In the output file create the file name of the .css file to which you will be linking from your printer friendly archive template. In this case, I've named the file PF-stylesheet.css.

Edit-Template-PF-Stylesheet.gif

Copy and paste your existing weblog stylesheet into the Template Body window for your new stylesheet. Trim the stylesheet down to the CSS that you will need for your print-friendly pages. Adjust the CSS so that it fits the print dimensions you want. Save, and now rebuild your index and archive pages.

Here is a printer-friendly stylesheet that will work with the printer-friendly archive template outlined above for MT 3.2: Download file

3. Add the new archive method, MT version 3.2. Open the settings window for your weblog. Click on the Publishing menu link. Scroll down to Archive Mapping and click "Create New Archive Mapping". Select the Individual Archive Type and the Printer-Friendly Individual Archive Template and click "Add". A new archive template will be added to your list of Individual Archives. Click "Save Changes".

Click for larger view.

4. Configure file name for printer-friendly URLs, MT version 3.2.
How you configure your printer-friendly page URLs depends on the URL naming convention that you are using for your entry pages. For MT 3.2, the default naming convention for weblogs looks something like this:

http://www.website.com/2005/11/entry_basename.html

What I do is just add -print after the entry basename to distinguish the print-friendly files from the entry files. So a print URL would look like this:

http://www.website.com/2005/11/entry_basename-print.html

To do this, find the following section in Archive Mapping:

archive-mapping-default-nam.gif

Scroll the menu Archive File Path bar to "Custom" for the Printer Friendly Individual Archive Template.

Type in %y/%m/-print.html

Like so:

archive-mapping-name.gif

Click "Save Changes". Rebuild your site.

See http://www.sixapart.com/movabletype/docs/3.2/earchivefilepathspecifiers/ for the Archive File Path Specifiers if you have a different set up than the default.

5. Link to printer-friendly pages. The last step is to place a link to your printer-friendly pages on your main index and individual entry archive templates. I've placed this link on the "posted to" line at the bottom of the entry. Use the following code to create a link. You can place the code between the container on the Main Index Template and anywhere on the Individual Entry Archive Template.

Code for MT 3.2

<a href="<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m">/<$MTEntryBasename$>-print.php">Printer-friendly version</a>

See Movable Type Date Formats if you have a different archive file path specifier than the default.

Save and rebuild your site.

Links:

  • CSS Print Stylesheet - Eric Meyer's instructions on how to make a print-friendly page with CSS.
  • Custom Dynamic Pages - a hack to mt-view.cgi by Stepan Riha that can be used to dynamically generate print pages.

Comments (17)

I've been promoting the use of CSS stylesheets to create "print friendly" output (method #1 listed above). I've got a short write-up with some more details and examples if anyone is interested:
http://www.cantoni.org/articles/printstyle

Hi Elise, Great work you remain "the resource" for MT and now that they (Six Apart) have shattered their site into a million new un-navigatable pieces your resource is even more important.

I installed your version 2 above with the separate stylesheets etc. However i find that the basic stylesheet doesn't work in FireFox. Under FireFox it only prints the first page. I don't think I've amended it in any way, that would create this behavior. IE prints fine. You may like to check it.

josiah hincks Author Profile Page:

Using style sheets is a great way to print. Your article is very clear and useful. Thanks.

There is a persistent bug in many Mozilla browsers which prevents them parsing CSS floats correctly when printing. The result is the the user can only print the first page of a floated item. What to do about it? See ...

http://www.alistapart.com/articles/goingtoprint/

... for a way to correct the problem.

Thanks for the wonderful tutorial. Is there a way to keep the images out of the printer-friendly page so my students don't have to print images?

Hi Dana,
There is probably something you could do in the CSS. I'm not a CSS expert at all, but it's probably something like img {display: none}. You might ask over at the forums or poke around on a CSS tutorial site.

Mark:

Thank you sooooo much, I was looking everywhere for a tutorial on how to generate an XML individual entry as a "sibling" to the individual entry, and even though this tutorial is for a different use, it served perfectly.

Hey Elise. I just ran across this tutorial and wanted to weigh in in favor of using CSS for printer-friendly pages. This is precisely what CSS is great at and requires nothing more than a single line in your templates and a printer friendly style sheet.

While you know I'm a huge fan of Movable Type's multiple archive map functionality, it's fairly gratuitous in this situation and requires a lot more work for the same result.

Anyway, thanks for the great tutorial!

Hi Jay,

Thanks for your comment. I agree that the CSS/Header method is the way to go. That said, the print-friendly archive template has its place too. For example, in the cooking world, there are several ways that someone might want a recipe printed - 3x5 card, 5x7, or full sheet. The archive template method allows for several printed types at once. It isn't as efficient, clearly, but can give one more flexibility than one might have with just the CSS/header method.

Great tutorial! Just wanted to remind people as well that if you add the following line to your CSS stylesheet...

p a:after { content: " [" attr(href) "] ";}

...then in Mozilla-based browsers (Firefox, Netscape, etc) your hyperlinks will actually be spelled out, so that those reading a printout will see what you actually linked to originally. (Note that this does not work for MSIE.) The characters between the quotation marks, by the way, are what appear at the beginning and end of the spelled-out link; I have mine set up, for example, to put brackets around the spelled-out links. (You can see this at work at my site, if you're curious, at http://www.jasonpettus.com/print.html .)

You're absolutely right, Elise: Using multiple archive mappings is absolutely essential for doing transformations beyond just style (or lack thereof).

For example, if you want to serve up your content in different formats (XML, PDF, 3.x index card, morse code) it's a godsend.

I just didn't want people to get the idea that they should use a forklift to pick up around the house... :-)

First of all thank's not only for this but for many usefull tips, tricks and hints regarding MT on this site! I know this is a lot of work to maintain.

Anyway. I just wanted to let you know how I put the second method into practice. Since I do not use the default naming conventions on my blog I had to look into the MT Tags a little closer.

My Individual Archive Template does not look like:
www.website.com/year/month/entry_basename.html

but it looks like:
www.website.com/primary_category/entry_basename.html

At the link to the printer friendly page I had to replace <$MTEntryDate format="%Y/%m"> (as in the link you provided) with <$MTFileTemplate format="%C">.

I thought that might help people who use a similar naming convention.

Greetings,
Martin

Mark:

Thanks so much! This tutorial covered all the bases and it was straightforward and easy to follow!

One small error though. In step 5 change .php to .html as follows:

<a href="<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m">/<$MTEntryBasename$>-print.html"> Printer-friendly version</a>

To all, I fixed the stylesheet for the MT3.2 example here. There was a bug, detailed on A List Apart in which floated elements keep the printer-friendly pages from printing out more than one page. Weird, eh? Well, I couldn't find any floats in the stylesheet I used here, but did find a "position: absolute", so after removing that, the stylesheet seems to work fine on my test server and prints out all the pages.

Karman:

Hi Everyone,

I have a website that is using MT, but now we want to have the blogs to be printable on each page. Plus, we want a logo to be on the printable page that's a pdf. Can this be done?

Please let me know, thanks!

Karman: I'm not sure I understand the first part of your question. This article addresses in great detail how to make each of your pages (or individual entry archives) printable or at least print-friendly. As for the second part, I don't know of any browser that will let you use a .pdf as an item (such as a logo) with other elements on a page. For an alternative method that will accomplish what I think you're going for, check out A List Apart's High Resolution Image Printing article.

Ted:

Is it me, or has the combination of MT 4 and Firefox 2 renewed these problems?

Even after using the methods described in Method One here I can't seem to get articles to print beyond page one...

Well, actually they print all pages, but just page one has content.

Ted:

I contacted Six Apart and they suggested adding an overflow tag to my CSS (in addition to other tips posted here), and it now prints nicely, all pages:

overflow: visible;

Weeeeeeeeeeee!

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)