This is an archived article to see the current version visit http://www.timothyfish.net/Article.asp?ID=40.
I don't know how many times I have visited a website and seen the statement "view printer friendly page" or something similar. While it is commendable that the webmasters of these sites want their readers to be able to print the web pages without all of the non-essential graphics and formatting, there is no need for a link to a separate page that shows the same data in a different format. It would be much easier for the user if he could just click the print button at the top of the page and a nicely formatted document would come from the printer without any extra elements. There is a fairly simple process by which a webmaster can make this possible.
One method that I have found to be easy to use is to use two (or more) different style sheet files. If you are following along with the book, you will find the following in the design.html template file:
<head>
<!----- Title and description go here! ----->
<!-- End Replace Section -->
<meta name="Copyright" content="Copyright (c) 2007 Timothy Fish" />
<meta name="Robots" content="index,follow" />
<b><link rel="StyleSheet" href="http://thestonechapel.timothyfish.net/style.css" type="text/css" /></b>
<script src="IEmarginFix.js" type="text/javascript"></script>
</head>In this case there is only one style.css file. This file is used for every media type that there is, but if we wanted to handle the browsers that most people use and we also wanted to have special formatting for when the user printed the document, we could replace the <link/> tag in the code above with the code below:
<link rel="StyleSheet" href="http://thestonechapel.timothyfish.net/style.css" type="text/css" media="screen"/>
<link rel="StyleSheet" href="http://thestonechapel.timothyfish.net/print.css" type="text/css" media="print"/>With this code in place, it is necessary to create a second CSS file called print.css. You need only copy the style.css file and rename it. In the design.html template file, there are a few things that we don't want to display when the user prints the document. For example, we don't want the side bar to display since it is for navigation. We don't want the spacers. All we really want is the MainText (without the spacers) and the footer. To prevent the rest from printing, for each of the elements add "display:none".
The generic spacer would go from:
.Spacer
{
font-size:20px; /* Change this number to change the division height.*/
height:1em; /* Lock height to font size */
float:left;
clear:left;
/*background-color:lime;*/
}To:
.Spacer { display:none }It is not necessary to change the individual spacers because they all use this one style definition.Any rearranging that you would like to do for the print version can be done in the print.css file. Anything that is needed in one version but not in the other can be shown by declaring the division or span in the design.html and "display:none" can be used in the CSS file for the media for which the element is not needed. Care must be taken when defining the divisions and spans so that it is possible to hide the ones we want without hiding the ones we don't, but other than that, the process is fairly simple.
Before CSS was well supported, web designers often had to use tables to position the elements in the page. At the time, it was the best we could do. Today there are many people who are still using this method. Some people use it because it is what they learned and they have not taken time to learn CSS. Some people use it because they have seen other websites us it with good results.
In many ways, tables are harder to use than CSS. With style sheets, one can position an element anywhere on the page. The element can be repositioned dynamically. With tables it is possible to position an element almost anywhere, but changing the location requires changing the table. When using tables for positioning, the rows and columns have to be carefully sized to get the desired result. Hiding an element may require hiding the table and if it doesn't there may be a visible indication that something is missing.
Tables are not evil, but they are sometimes used in ways that are bad practice. The best way to use tables is as part of the content. Their use should be avoided for extraneous formatting. Using tables for web design is similar to using a spreadsheet for typesetting. It is possible, but there are easier ways to get the job done.
Depending on the design, retrofitting a webpage to include the print.css file may be as simple as going through and adding additional division and span tags that can be used to hide the elements from the printer. This is usually the case when the webpage is mostly text mixed with very few other things.
On other cases there may be a lot of work that must be done. If graphic elements are included in a table then CSS must be used to correctly position everything. Unless the table is used to represent data then efforts should be made to remove it from the design.