« Banner Images | Main | Adding a "Posted to Category" Line »

Printer-Friendly Pages

mtbadge-small.gif Updated December 23, 2005.

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. If you select "print" from the browser menu while looking at an LMT tutorial, and then "print preview", you'll see the result of the first method. If you click on the "printer-friendly" link at the bottom of each tutorial, you'll see the result of the second method.

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>

Here are the basics of the printer-friendly archive template I use for Learning Movable Type (note that this uses MT2.661 tags):

<!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$>" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title><$MTBlogName$>&#58; Print This</title>
<link rel="stylesheet" href="<$MTBlogURL$>PF-stylesheet.css" type="text/css" />
</head>
<body>
<div id="content">
<div id="container">
<div class="blog">
<div class="blogbody">
<h3 class="title"><$MTBlogName$>&#58;  <$MTEntryTitle$></h3><br />
<$MTEntryBody$>
<$MTEntryMore$><br/>
<span class="posted">Posted by <$MTEntryAuthor$> on <$MTEntryDate$> to <$MTBlogName$>   
<br /></span>
</div>
</div>
</div>
</body>
</html>

Save, but do not rebuild yet.

Note that for my LMT printer-friendly template I've included a

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

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

Also note that both templates 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

Here is the printer-friendly stylesheet I use for Learning Movable Type (note that this stylesheet works with MT 2.661 tags NOT MT3): 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.

3a. Add the new archive method, earlier versions of MT. Open the weblog config window for your weblog. Click on the archiving menu link. Click the add new button. Select Individual for archive type, and Printer Friendly Individual Archive Template for template type. Click add. You will see the new archiving template added to the table.

select_archive_type.gif

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.

4a. Configure file name for printer-friendly URLs, earlier MT versions.
How you configure your printer-friendly page URLs depends on the URL naming convention that you are using for your entry pages. For earlier versions of MT, the default naming convention for weblogs looks something like this: http://www.website.com/archives/000123.html. What I do is just add "print" after the number to distinguish the print-friendly files from the entry files. So a print URL would look like this: http://www.website.com/archives/000123print.html. To do this, insert the following:

<$MTEntryID pad="1"$>print.html

into the Archive File Template window for the printer-friendly archive template.

archive_type.gif

Keep selected the radio button next to the original Individual Entry Archive Template. This tells the archive links that your Individual archive, not the printer-friendly archive, is the default archive.

Save and rebuild your site.

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.

Code for MT 3.1 and earlier

<a href="<$MTBlogArchiveURL$><$MTEntryID pad="1"$>print.html">Printer-friendly version</a>

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 (12)

brian cantoni [TypeKey Profile Page]:

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 [TypeKey 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?

elise [TypeKey Profile Page]:

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!

elise [TypeKey Profile Page]:

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:
http://www.website.com/year/month/entry_basename.html

but it looks like:
http://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>

Post a comment

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