Have you ever noticed a button "Click here for a printer-friendly version" which often appeared on Web pages with fancy visual designs? I did and wandered how authors did to achieve this. This page is the result of such curiosity. As a matter of fact, I found that such button was no longer necessary as most modern browsers support medium-specific stylesheets.

Style Sheets allow the HTML author to separate presentation from content in HTML documents. HTML was designed primarily as a content based mark up language and the introduction of various text level formatting elements and attributes only served to confuse the issue.

Microsoft led the way by implementing style sheet support in Internet Explorer 3.0, support which was greatly improved in Internet Explorer 4.0. Netscape also implemented Style Sheet support with the release of Communicator and Navigator 4.0.

Even with the introduction of style sheets, the aim of Web design has remained visual with the result that many Web page designs don't print out very well. Navigation bars, ad banners, and other such things clutter up printouts and make them much harder to read. How many times have you seen a page on the Web which has, off to one side, a link which says, "Click here for a printer-friendly version".

There are certainly other media -- audio browsers and handheld devices are two such examples-- but the output medium which most concerns authors is still the printer. CSS2 offers a way to address this, giving authors the ability to create stylesheets which are medium-specific.

In this page, we will give an overview of the various medias which are considered by the CSS2, and then show how to create stylesheets which are specific to one medium: printing.

Media types

MEDIA sets the media (screen, print, etc) that the style applies to. By default (i.e. if you don't use MEDIA at all), then the style applies to all types of media. MEDIA is most handy for setting styles that apply to printing but not to the screen, and vice versa. MEDIA works the same as <LINK MEDIA="...">.

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.

Recognized media types

A CSS media type names a set of CSS properties. A user agent that claims to support a media type by name must implement all of the properties that apply to that media type.

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types, the parenthetical descriptions are not normative. They only give a sense of what device the media type is meant to refer to. The list of media types currently recognized by CSS2 are:

Media	Description
all	Suitable for all devices
aural	Intended for speech synthesizers.
braille	Intended for braille tactile feedback devices
embossed	Intended for paged braille printers
handheld	Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print	Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection	Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen	Intended primarily for color computer screens.
tty	Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
tv	Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Specifying media-dependent style sheets

There are currently two ways to specify media dependencies for style sheets:

• Specify the target medium from a style sheet with the @media or @import rules. Here, loudvoice.css will be used for the speech whereas paged.css will be used for printing and presentation.

  @import url("loudvoice.css") aural;
  @import url(paged.css) print, projection
  @media embossed
  {
  /* style sheet for braille printing goes here */
  }
  
  

• Specify the target medium within the document language. For example, in HTML 4.0 ([HTML40]), the "media" attribute on the LINK element specifies the target media of an external style sheet:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  <HTML>
    <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">;
      </HEAD>
    <BODY>
      <P>The body...</P>
    </BODY>
  </HTML>
  
  

The @media Rule

The @media rule allows different style rules for different media in the same style sheet. The styles shown in the exemple below is the one used to print this page.

/* print styles */
@media print
{
  .noprint{display: none;}
  .title{text-align: center; font-size:24 px; font-weight: bold; text-transform: uppercase; text-decoration: underline;}
  .normal{font-family: verdana, geneva, arial, helvetica, sans-serif;}
  .normal h1{text-align: center; font-family: bitstream vera sans, luxi sans, verdana, geneva, arial, helvetica, 
    sans-serif; font-size: 20px; text-transform: uppercase; font-weight: bold; text-decoration: underline;}
  .normal h2{text-transform: uppercase; text-decoration: underline; font-size: 18px;}
  .normal h3{font-size: 16px;}
  .normal h4{font-size: 14px;}
  .normal h5{font-size: 12px;}
  .normal td{font-size: 12px;}
  .normal th{font-size: 12px;}
  .delphi
  {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */}

Browser dependencies

The media-tailored stylesheet are supported by all browsers that support the CSS2 specification (e.g., IE 4+, Netscape 6+ and Opera 3.62+). However, Gecko-based browsers like Netscape 6.x or Mozilla have a problem with printing long floated elements. If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it wont be printed on the next page.

Another point that bothered me with printing had to do with pre-formattred text ( <PRE> tag). On the screen, I have used

.delphi pre
{ width: 100%; overflow: auto; /* can also be scroll */ }

a solution which provides  scroll bars when the size of the pre-formatted text exceeds that of the container. This cannot be used for printing and clipping was not considered. I found a solution and this solution is developed in the Appendix entitled "Wrapping preformatted text"

Conclusion

In this page, I have shown that one can tailor stylesheets to meet the requirements of various medias. I have shown how to do it and have given an exemple applicable to the printing of this page.

References

This page has been documented using the following references:

1. The section "Media types" of the "Cascading Style Sheets, level 2, CSS2 Specification" provides the documentation needed for the use of the media in stylesheets.
2. The article entitled "Print Different" by Erik Meyer provides exemples of how to convert stylesheets for printing of documents.
3. The article "CSS Design: Going to Print" by Erik Meyer
4. The part of the www.codestyle.org that provides "FAQ: Media dependent style sheets" is part of a collection of answers to Frequently Asked Questions (FAQs) provided through the Code Style Help & FAQ section.
5. The article entitled "Printing with Style" by Per Søderlind is a tutorial to media styling with stylesheets. Further, it proposes a way to append external links to the printed document using Javascript.