Inside Technique : Printing Techniques : Adding Print Preview

You can add a preview mode to your document by using Dynamic HTML to change the style sheet's media property. We expanded the technique used on the first page for controlling the preview buttons. In this example, when you preview the print mode on screen, the preview buttons are displayed. This allows you to easily switch back and forth between modes. When the page is printed, the preview buttons are removed.

  <STYLE ID=print MEDIA="print">
    /* ... the print stylesheet goes here ... */
    #preview {display: none}
    #why {position: static; width: 7in}
  </STYLE>
  <STYLE MEDIA="screen">
    #preview {display: block}
  </STYLE>
  <DIV ID=preview>
    <INPUT NAME=layout 
              TYPE=radio 
              VALUE="apply" 
              ONCLICK="document.all.print.media = 'print'" 
              CHECKED> 
                Screen View<BR>
    <INPUT NAME=layout 
              TYPE=radio VALUE="apply" 
              ONCLICK="document.all.print.media = 'print, screen'">
                Print Preview  
  </DIV>

We added two new features to this preview mode (you can switch modes at the bottom of this page). First, the width of the content is now constrained to 7 inches. This causes the content on the screen to line-break in the same place as most standard printers. If you want to add a width constraint to your content, you must add it to a DIV or TABLE element. Adding a width to a paragraph has no effect.

The second features is the preview buttons are automatically hidden when the user prints the page. This is accomplished by surrounding the preview buttons in a DIV element with the id of preview. In the print style sheet, these buttons are set to be invisible, but in the screen only style sheet they are later set to turn on. For this feature, the ordering of the style sheets is very important. You must have the style sheet that displays the preview buttons after the print style sheet.

For the preview buttons to work, an ID was also added to the print style sheet. Whenever the user switches views, the media for the print style sheet is changed to include both print and screen for the preview mode, and just print for the standard viewing mode.

Next, we explore using print style sheets to completely turn off printing of a page.

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