Printable Pages

I went ahead and loaded a stylesheet for printable pages and changed the designation of the default stylesheet to media=”screen”.

Here’s how I did it:

First, you need to define the two stylesheets in your document’s HEAD:

<link rel=”stylesheet” type=”text/css” href=”<$MTBlogURL$>print.css” media=”print” />
<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” media=”screen” />

Your print.css stylesheet should not contain any extraneous items, such as banners or sidebars. Your readers will probably only want to print your posts. Therefore, any element that should not be printed should be dealt with as follows:

.element-name {
display: none;
}

You must define the original stylesheet as media=”screen” and the print.css stylesheet as media=”print” so that when your page is viewed on the Web, the browser will serve up the screen-based stylesheet. But when the browser’s Print or Print Preview button is pressed, the browser will use the print.css stylesheet.

Go ahead and click your browser’s Print Preview button now to see what I mean. Notice that the sidebar and graphics are not there and the page has been reformatted to take up the whole screen?!

If you have a separate division for your copyright information, as I do, it might be a good idea to leave that in the print stylesheet as well.

There is one “gotcha” involved in printing, and it doesn’t matter whether there’s a special stylesheet for printing or not. When you are printing pages, such as MT blog pages, that have the “More” (extended text) link (like the “But wait! There’s more!” link on these pages), the text in that link is not going to print. If you want the extended text to print, you’ll need to go to the individual archive page and expand the link and then print the page(s).

Leave a Comment

GDPR Agreement