Inside Technique : Printing Techniques
By Scott Isaacs

Most web-pages are optimized for on-screen viewing. Printing web-pages usually is not an author's design goal and when it is, an alternative page is usually provided. With media-dependent style sheets and a HTML 4.0 compliant browser, this no longer is an issue.

HTML 4.0 defines the media attribute for defining a print specific style sheet for your page. This attribute is currently only supported by Internet Explorer 4.0. As a demonstration, we created print style sheets for each page in this article. You can experience this demonstration by either printing this document or previewing the printed layout. No matter which mode you are viewing, printing the document always applies the print style sheet. Selecting from the two views below automatically redisplays the document (When you switch views, this text will move): ^IE4

When switching views, rather than load a new page, the style sheet is being dynamically changed. Using this new style sheet, the style of the page is significantly changed for printing: ^IE4

1. We hide the advertisement and the navigation bar,
2. all color is removed: article name, formatted code, and the copyright at the end of the page is changed to black,
3. all positioning information is removed,
4. the width is removed from the content allowing the complete sheet of paper to be used,
5. and an informational header is added to the top of the page.

The informational header is already in the document. The screen style sheet hides the header, while the print style sheet displays it.

Creating a Print Style Sheet

A print style sheet is authored the same as a standard on-screen style sheet. You only need to add the media attribute to the global or linked style sheet. The print style sheet for this page is defined as follows:

  <STYLE MEDIA="print">
    /* turn off navigation and ad bar */
    #header, .menu, .header, #idFinder,#navmenu, #adbar, DIV#jumpbar, #navbar {display: none}
    /* remove position of contents */
    #why {position: static; width: auto}
    /* cleanup all the colors */
    #why H3, PRE, FONT {color: black}
    /* cleanup the copyright */
    DIV#why P.copyright {color: black; font: 10pt verdana}
    /* display the print header */
    #printMessage {display: block}
  </STYLE>

You can also define a print style sheet in an external file. This allows you to share the style sheet across your entire web-site:

  <LINK REL=stylesheet 
           MEDIA=print 
           TYPE=text/css 
           HREF=print.css>

By default, any style sheet you define that does not contain the media attribute is applied to all views of the document, whether viewed on screen or printed. Just as you can define a print-only style sheet you can define a screen-only style sheet by assigning screen to the media attribute.

As more devices support CSS, you will see the number of defined media types grow. To allow you to associated one style sheet with multiple media types, you can also assign a comma-delimited list of media types to the media attribute:

  <STYLE MEDIA="print, screen, transparency">
    /* apply this style sheet to print, 
       screen, and transparency film */
  </STYLE>

Using print style sheets and dynamic html, you can allow the user to preview the printed version of the page. You have already seen this if you switched views in our earlier demonstration. Next, we teach you how to add a print preview mode to your web page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.