Dreamweaver Article

The Objective

In newsgroups, often a question arises about how to print web pages in an organized fashion. Previously, developers achieved this by creating a completely separate web page containing only text and the pertinent graphics for each page on a website. CSS has changed all that. At Community MX, we've taken advantage of Cascading Style Sheets’ ability to specify a unique style sheet for print. Since Community MX has a tremendous number of tutorials, this is a great time saver. Follow along and review the methods and reasoning behind the decisions.

This article will examine how our layout displays one set of elements on the screen, yet when printed, prints a different layout using elements that do not display on screen. You'll learn about media types and how to take advantage of them and using the cascade to create lightweight, compact pages for print. Since Community MX constantly tweaks its site, some things may be slightly different if you read this article a few months from its publishing date.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver MX 2004

• Try
• Buy

Media Attributes: Screen, Print, and All

At Community MX, because the user base consists of web developers, we chose not to support Netscape 4 (NN4) and Internet Explorer 4 (IE 4) browsers on our website. You won't see an example of geriatric browser support in this article, but you'll learn how media types affect NN4 in case you need to support it. There are nine different media descriptors that give you the ability to customize the display of information in a variety of devices. If you're unfamiliar with media types and their possible uses, see Stephanie Sullivan's article at Community MX on media types.

Our website uses three different style sheets to control each of the tutorials. It links the main style sheet (cmxlayout.css) to each XHTML document with the media type set to all. This indicates that all devices use this style sheet. We then set the main print style sheet (newprint.css) to media type print. This instructs the browser to use it for both print preview and printing. In addition to what is in newprint.css, we use all the selectors in cmxlayout.css for printing because of the cascade and its media type, all. We only use newprint.css for selectors that must be hidden or changed for print.

Note: NN4 only understands CSS documents with either no media type specified or the screen media type. It does not understand the all media type. Thus, if you want NN4 to see any styling, you must use one of these methods. IE4 will read the style sheet when you have specified a media type of all. If it's necessary to support that older browser, you may need to hide the all media type CSS by importing it or using a JavaScript method. Keep in mind that when printing, a style sheet with a media type of screen will not be used in the cascade for printing. Thus, you will have to rewrite any selectors that appear in the screen style sheet into the print style sheet if you wish to use them for print.

The third style sheet we use on Community MX (pdfprint.css) creates PDF documents dynamically from each article or tutorial. Since both the PDF documents and document printing use a print style sheet, we devised a dynamic method specifying which we needed using ColdFusion. The advantages of these three style sheets is that we have global control from a single point—the XHTML document. If we need to change a tutorial, we can do so quickly and easily in the XHTML document. Then, due to the power of CSS, we can create a new PDF instantly and the CSS takes care of screen and print versions automatically.

The Order Matters

Due to the cascade, the order of style sheets, linked in the head of the X/HTML document, affects rendering in all devices. Since cmxlayout.css uses the all media type, it is placed first in the hierarchy. Any and all devices that render information should access this document. One day, when there is more CSS support for handheld devices, we will likely add a style sheet using the media descriptor handheld to reformat the information for those devices. A handheld style sheet, if used, would follow the main style sheet. Next, we placed newprint.css so that it could take advantage of the cascade and inherit styles from cmxlayout.css as well. Lastly, we placed the dynamic PDF style sheet, which you won't see here. The PDF style sheet formats the PDF with a little different style and more color than the print style sheet. It appears more as a hybrid of the screen and print versions. Below are the style sheets (in XHTML format) in their proper order:

This is the same page processed by each of the above style sheets.

Figure 1. The two different versions of the page using the different style sheets

As you can see, the two pages appear different but the information they contain is the same. The print user does not need the navigational elements, advertisements or the sidebar information since he/she is only interested in printing the content of the tutorial. With this in mind, you can remove the unrequired elements to make a lean, mean printing machine. Take a look at how we created ours below.

Hiding Elements from the Printed Style Sheet

At Community MX, the left column of the site contains information about the latest subscription, free content, and accessibility tools. This information is within in a div element with the id of #infodiv. The selector is defined in cmxlayout.css, as follows:

#infodiv{
  position: absolute;
  top: 160px;
  left: 7px;
  width: 10em;
  z-index: 1;
  background-color: #fff;
  color: #036;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
} 

#infodiv{
  display: none;
}

This is simple and fairly self-explanatory. You simply pass the display:none instruction to the browser, which removes the #infodiv from the print display. To keep newprint.css succinct and lightweight, add to this rule by combining all the selectors you want to hide while printing, separating them by commas and a space. In our case, we hid eleven different elements in cmxlayout.css, as follows.

#nav, #logo, #infodiv, #blue, #subbar, #menufooter, #tall, #ads, #sbg, #cacheit, .feedback{
  display: none;
}

Note: You may wonder why we used the declaration display:none when it would seem that visibility:hidden does the same thing. Both hide elements and prevent them from displaying, but the visibility property leaves space in the page where the element would display if it weren't hidden. The display property leaves no space, which is why it is more desirable in this case—an important note to keep in mind.

Redefining the Page Elements

When removing or redefining page elements in newprint.css, it is imperative that you use the exact same selector name in each style sheet. Though in actuality, the selectors div#articlecontent and a div with the ID of #articlecontent select the same thing, they can cause problems in a print style sheet. The div#articlecontent selector in some cases will not override the style if the original selector is #articlecontent. So when redefining an H1 element in #articlecontent div, even if the only H1 on the page is in #articlecontent div, you should still write it as #articlcontent h1—just as it is in the original style sheet. Trust us on this one; you can spend hours trying to figure out what is wrong!

Margins and Widths

Since the tutorials at Community MX are within a div with the id of #articlecontent, this is where we needed to make most of the changes in newprint.css. We wanted the content the user prints to be balanced and attractive on the page. Keep in mind that you are now wearing the hat of a print designer. Thus, you will now define units of measurement using inches and points instead of pixels for consistent results. Remember that the margins on the printed page are controlled with the margin settings on the user's printer. It is a good idea to test and test again with friends and coworkers if possible, to validate that the settings will work with most setups.

We gave #articlecontent div a width of seven inches. Our testing showed that this setting consistently worked for us. We set the margins so that the top and bottom were zero and set the side margins to auto. This way we didn't add to the printer's settings. Notice we redefined the text color, making it black. If you're unfamiliar with shorthand CSS properties as seen in most of our selectors, you will find Writing Efficient CSS by John Gallant and Holly Bergevin very helpful.

#articlecontent {
  color: #000;
  width: 7in; 
  padding: 0;
  margin: 0 auto;
}

Switching the Logo

The simpler logo used in the print version exists in the XHTML document at all times. Just as we hid elements from displaying for print, we used the display:none method in cmxlayout.css so the print logo won't display on screen. The following selector to hides the print logo.

#printlogo{
  display: none;
}

When a browser uses newprint.css, #printlogo takes its proper position at the head of the page and hides the screen logo (#logo).

#logo{
  display: none;
}

Since #printlogo is originally hidden, the normal cascade would have kept it that way, so we had to change the display declaration for that selector in newprint.css, as follows.

#printlogo{
  display: block;
}

Note: If you use absolute position divs that you must put back into the flow of the document in your print style sheet, remember to change them to position:static to override position:absolute. You may also need to give them a width:auto declaration. Remember to continually test your changes as you make them.

Redefining the Fonts

Sans-serif fonts look far better on the monitor, but what's best on the printed page? There's a good reason books aren't printed using Verdana, Lucida Grande, or Arial. Serif fonts display better for the eye in print since the serifs assist the eye in making out the letterforms. Changing your print pages to a serif font like Times New Roman will make your printed pages look far nicer and more readable than your default screen font.

I'm sure you've heard the pixels versus points debates. And you know not to use points in web documents. As mentioned before though, you're now styling print. This is the perfect time to change those font sizes to points. Change font colors also if you didn't originally use black. Testing in numerous browsers showed black as the font color of choice. Remember that many people will not print your web page in color. It's important that it's crisp in grayscale. We left the headings in the same dark blue they were on screen for contrast with the black print. With heading-size letters, even in grayscale, dark gray is quite readable.

Redefining the Special Selectors

The Community MX articles and tutorials use special classes with borders and backgrounds to make tips, warnings, and code blocks stand out. Many people set their print preferences so that backgrounds colors do not print. But not all platforms/browser combinations give you that control. Background colors can be a problem when printing in grayscale. Thus, we decided to override our screen styling with a new print-friendly style. For these styles, the backgrounds were set to white to match the page background, and the borders were given different styles. This means that a user can distinguish a code block from a tip, even in grayscale.

As an example, look at a before and after version of #articlecontent .tip selector. In cmxlayout.css, the selector displays with a medium blue background and a one-pixel border. It looks like the following:

#articlecontent .tip{
  background-color: #99B5E1;
  border: 1px solid #036;
  color: #000;
  font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
  margin-right: 0px;
  padding: 5px;
  width: auto;
} 

In newprint.css, we've changed the background color as described above, made the border wider and dashed, and indented it on both sides so that the element stands out on the page more. We gave it an 80% width and 10% side margins to center it. Without the side margins, the tip would start on the left and display 80% of the way across its containing element.

#articlecontent .tip{
  width: 80%;
  border: 2px dashed #0158A6;
  font: 0.8em "Times New Roman", Times, serif;
  background-color: #FFF;
  margin-right: 10%;
  margin-left: 10%;
} 

Notice in the above selector, the font-family is different. Color and padding are not redefined since they're inherited from cmxlayout.css through the cascade. In our print style sheet we also redefine any inline styles used for tutorials, so that inline and important code, usually indicated by a background color, displays with a dark font color and/or italic styles to help the text stand out.

We hope this exercise has been useful in helping you learn how to create print style sheets for your websites.

About the authors