Published: Wednesday, June 11, 2003
Using Stylesheets to Create a Print This Page View
By Scott Mitchell
Introduction
Web pages often contain much content in addition to the actual interesting content, such as
navigational menus, advertisements, and so on. For example, on this Web page you are likely only
reading and are only currently interested in the text of this article. You could care less about the
advertisements you see, or the navigational menus on the left. While these extraneous elements don't
hold your interest while reading the article, they provide use later on. Perhaps after reading the
article you'll use the navigation on the left, or click on an advertisement.
While the Web has moved masses of information from printed paper to the computer monitor, many people
still enjoy consuming information the old fashioned way - by reading it off of a piece of paper.
When printing an article, though, it's clear that all the user wants to see is the text of the
article. At no point will the advertisement or navigational hyperlinks be of any interest to the
reader. For this reason, many Web sites offer a "printer-friendly" version of the Web pages, one
that strips out all the superfluous material. (All 4Guys articles have a printer-friendly version;
simply click on the printer icon in the upper-right hand corner of the article!)
In this article we will briefly enumerate the variety of ways one can create printer-friendly Web pages.
We will then focus on one particular method: using cascading stylesheets (a.k.a. CSS).
Creating a Separate Web Page for the Printer-Friendly Page
One option for creating a printer-friendly Web page is to create a single page whose sole responsibility
is to display the printer-friendly version of a Web page. This is the approach used here on 4Guys.
Namely, there is a single page, /ASPScripts/PrintPage.asp. The PrintPage.asp
Web page receives through the querystring the URL of the page to render in a printer-friendly format.
This page then accesses the specified Web page using the FileSystemObject
and strips out the navigational and advertisement sections. (A more detailed description of this
script can be found at: How the "Print This Page" Script Works.)
There are some variations to this simple approach. For example, in Troy Eberhard's article,
A "Print This Page" Script Using the MS-XMLHTTP object and Regular Expressions,
a method is examined that uses the XML-HTTP
component instead of the FileSystemObject to retrieve the Web page's output. It also uses more sophisticated
techniques for delimiting the content that should, and should not, appear within the printer-friendly version.
For an article examining how to implement the "Print this Page" script in ASP.NET, read:
Print this Page - Comparing Classic ASP to ASP.NET.
Using a Stylesheet Designed for Printing
Cascading stylesheets, or CSS, are a means of specifying stylistic settings for an HTML document.
For example, using CSS you can specify that the content within paragraph tags (<p>) be
displayed in a bold Verdana font by using the following stylesheet declaration:
<style type="text/css">
p { font-family:Verdana; font-weight:bold; }
</style>
|
With CSS 2.0, you can specify a printer-friendly stylesheet for a Web page along with a "normal" stylesheet.
When a user visits the Web page through the browser, the normal stylesheet is used; however, when the user
prints the Web page, the printer-friendly stylesheet's specifications are used instead. For example,
imagine we had a Web page that had a left-hand side navigational bar, as shown in
this live demo.
For the printer-friendly version we would not
want to display the left-hand navigational section, only the content in the "main" section of the
Web page. In order to accomplish this effect using a printing stylesheet, we would want to create a
stylesheet for the printer-friendly version that declared a style class for the left-hand navigation
elements with a display: none attribute. This would cause the left-hand navigation elements
to simply not appear in the printed version. An example of this can be seen below:
<HTML>
<HEAD>
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="/webtech/code/printStyle.css">
<style type="text/css">
BODY
{
FONT-SIZE: 10pt;
COLOR: black;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: white
}
TABLE
{
FONT-SIZE: 10pt
}
</style>
</HEAD>
<BODY>
<table width="100%" border="0">
<tr><td width="200" class="navStuff" align="center">
The navigational stuff goes here. Note it is inside a <td>
element with its class attribute set to navStuff.
In the printer-friendly stylesheet, the navStuff class has
display: none set.
</td>
<td width="*" valign="top">
This content will appear in the printed version.
</td></tr>
</table>
</BODY>
</HTML>
|
[
View a Live Demo!]
Note that the printer-friendly stylesheet is imported via the following tag:
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="URL to stylesheet">
|
Of utmost importance is that you include the media="print". The content of the
printer-friendly stylesheet for this example is fairly simple. It specifies is the default
font settings for the body, that elements with the navStuff class should
be hidden, and that hyperlinks should display the value of the href attribute after the
actual link. The contents of the printer-friendly stylesheet used for this example follows:
BODY
{
FONT-SIZE: 10pt;
COLOR: black;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: white
}
.navStuff
{
DISPLAY: none
}
a:after
{
content:' [' attr(href) '] '
}
|
The a:after stylesheet attribute indicates that after <a> tags (the
HTML tags used for creating hyperlinks), that the content should be brackets with the value of the
href attribute inside. This is useful for a printer-friendly view since when viewing
a printer-friendly view the user cannot visit a hyperlink. By placing the actual URL after the hyperlink
in the printer-friendly view, the person reading the printed version at least knows the URL the
hyperlink leads to.
To see this in action, visit the live demo
and print out the page. You'll see that the printed-version contains the hyperlink's URL listed after
the hyperlink text.
live demo shows,
| Specifying a Printer-Friendly Stylesheet |
|---|
In addition to using the <link> tag there are many more ways to specify a
printer-friendly stylesheet; this article, however, does not intend to delve
into the myriad of ways to accomplish this. For more information on using printer-friendly stylesheets,
see this tutorial.
|
So far we have examined two ways to allow for a printer-friendly Web page: creating a separate page
that accesses the file and strips out certain content; and using a CSS 2.0 printer-friendly stylesheet.
There's a third technique worth discussing which, in my opinion, combines the advantages of both
approaches. We'll look at this third approach in Part 2 of
this article.
Read Part 2!
