W3C WD-print-970625


CSS Printing Extensions

W3C Working Draft 26-June-97

Latest version:
http://www.w3.org/pub/WWW/TR/WD-print
This version:
http://www.w3.org/pub/WWW/TR/WD-print-970626
Editor:
Håkon Wium Lie (howcome@w3.org)
Authors:
Robert Stevahn (rstevahn@boi.hp.com) et al, Hewlett-Packard Co.
Stephen Waters (swaters@microsoft.com) et al, Microsoft Corp.

Status of this document

This document is a W3C Working Draft produced by the Working Group on Cascading Style Sheets and Formatting Properties as a part of the W3C Style Sheets Activity. It is published for review by W3C members and other interested parties. Comments from non-members should be sent to www-style@w3.org.

There is general consensus in the Working Group that the functionality described in this specification improves printing from the Web and is feasible to implement in Web User Agents. No significant changes to this draft are are currently being discussed in the Working Group and it is expected that the functionality described will be incorporated into a W3C Proposed Recommendation this year. Note, however, that this is a draft document and may be updated, replaced or obsoleted by other documents at any time. When referenced, W3C Working Drafts should be cited as "work in progress". A list of current W3C technical reports can be found at http://www.w3.org/pub/WWW/TR.

Abstract

This specification describes a set of extensions to Cascading Style Sheets (CSS) to better support printing from the Web. These extensions let style sheets express page breaks, page boxes, and media dependencies. Also, a way to point to an alternate print document is described. This is a first pass at a rather formidable problem, but one which can yield good results in the near term.

Background

We have taken a very specific approach to our goal of improving Internet Printing. To understand this path, and why the current lamentable state of printing on the Web is becoming increasingly unsatisfactory, it is necessary to reflect on current trends, the objectives of Web publishers, and the desires of users. This has been discussed at length in other documents, so only a brief summary will be presented here.

This document is intended to be a first pass at solving the Web printing problems discussed above. The described CSS extensions will enhance printing from the Web, but will not make HTML/CSS into a page description language. We believe, however, that this specification is extensible and a good base from which to proceed.

Scope and Terminology

This specification describes a set of extensions to Cascading Style Sheets (CSS) [1]. These extensions let style sheets express:

In this specification, the term page refers to a rectangular area into which the formatting process flows the content of a document. The scope of this specification is to extend style sheets to aid User Agents (UAs) when formatting documents into pages. Thereafter, the UA must transfer the formatted pages onto sheets of paper, but that transformation is outside the scope of this specification. For example, this specification does not address:

Often, information about the sheet size is not available to the UA. For example, a document may be "printed" to a file, or the user may perform "n-up" operations outside the UA. Still, the UA will need to target a certain size and orientation when printing, and this is known as the target. The user will typically set set the target size and orientation in the Print dialogue box of the UA. There will often, but not always, be a correlation between the target size and the sheet size. The figure below shows how information flows between the HTML document, the page and the sheet.

This specification is based on the CSS1 syntax, formatting model and terminology. It is possible for other languages, e.g. scripts, to access the described functionality if a mapping to the full CSS1 syntax has been defined.

Page breaks

Two new properties indicate where the UA should break pages, and on what page (left or right) the subsequent content should resume. Page breaks can only occur between lines as formatted on the canvas. These new properties have been designed to support the PRINT medium, but can also be applied to other paged media, for example PROJECTOR.

'page-break-before'

Value: auto | always | left | right
Initial: auto
Applies to: block-level elements outside of tables
Inherited: no
Percentage values: N/A

The values are:

auto
do a page break before the element only if necessary (e.g. if there is no remaining space on the current page)
always
always do a page break before the element
left
do one or two page breaks before the element until a blank left page is reached
right
do one or two page breaks before the element until a blank right page is reached

As an example, a page break may be inserted in the document before all H1 elements:

  <STYLE>
    H1 { page-break-before: always }
  </STYLE>
  ...
  <H1 CLASS=chapter>
  ...

If there are conflicts between this property and the 'page-break-after' value on the next element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Note: a way to suppress page breaks before an element is under discussion, but the syntax is not yet defined.

'page-break-after'

Value: auto | always | left | right
Initial: auto
Applies to: block-level elements outside of tables
Inherited: no
Percentage values: N/A

The values are:

auto
do a page break after the element only if necessary (e.g. if there is no remaining space on the current page)
always
always do a page break after the element
left
do one or two page breaks after the element until a blank left page is reached
right
do one or two page breaks after the element until a blank right page is reached

As an example, a hard page break may be inserted in the document with the BR tag as follows:

  <STYLE>
    BR.page { page-break-after: always }
  </STYLE>
  ...
  <BR CLASS=page>
  ...

If there are conflicts between this property and the 'page-break-before' value on the previous element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Note: a way to suppress page breaks after an element is under discussion, but the syntax is not yet defined.

Page boxes

Normally, CSS declarations are attached to elements. For example, to set the font size of a paragraph, a 'font-size' declaration can be attached to a 'P' element. HTML has no element that corresponds to a page -- in fact, HTML has no notion of a page. The at-rule extension mechanism of CSS1 is therefore used to select the page:

   @page { margin: 2cm }

Declarations inside the curly braces of the at-rule apply to the pages of a document. These declarations are said to be in the page context, and they describe a page box into which the elements of the document are flowed. The page box is similar to the boxes that surround each HTML element (see the formatting model of CSS1 for more information) and some of the same properties apply:

In addition, the page context allows the 'size' property to set the size of the page box and the 'marks' property to set crop and cross marks. These two properties are described below.

The diagram below shows the relationships between the sheet, page box and margin properties.

   ____________________________
  |                            |<- sheet
  |   ______________________   |
  |  |    A                 |  |
  |  |    ______________    |<-+-- page box
  |  |   |              |   |  |
  |  | D |              | B |  |
  |  |   |              |   |  |
  |  |   |              |<--+--+-- page box minus margins
  |  |   |              |   |  |
  |  |   |              |   |  |
  |  |   |              |   |  |
  |  |   |______________|   |  |   A: margin-top
  |  |    C                 |  |   B: margin-right
  |  |______________________|  |   C: margin-bottom
  |                            |   D: margin-left
  |____________________________|

Note that while the margins are outside the boxes surrounding elements, they are inside the page boxes. In the future, the border and padding properties may also be supported.

The CSS1 rules for collapsing vertical margins apply to page margins as well. For example, the margin of the upper element on a page will be collapsed with the page margin.

The page context has no notion of fonts so 'em' and 'ex' units are not allowed. Percentage values on the margin properties are relative to the page box. All other units associated with the respective CSS1 properties are allowed.

Due to negative margin values (either on the page box or on elements) or absolute positioning [3] content may end up outside the page box, but this content may be cut -- by the UA, by the printer or ultimately by the paper cutter.

New properties in the page context

size

Value: <length>{1,2} | auto | portrait | landscape
Initial: auto
Applies to: page context
Inherited: N/A
Percentage values: N/A

This property describes the size and orientation of a page box. Page boxes can be either absolute or relative. Typically, relative page boxes are used for scalable presentations that make optimal use of the target size, while absolute page boxes are used only when it is important to achieve very accurate formatting.

For most printouts, document scalability (i.e. fitting available sheet sizes) is more important than achieving exact dimensions and relative page boxes allow style sheet designers to easily achieve this. Three keyword values describe relative page boxes:

auto
the page box will be set to the target's size and orientatation. This is the initial value of the property.
  @page {
    size: auto;
    margin: 10%;
  }

In the above example, the outer edges of the page box will align with the target. (Since 'auto' is the initial value on 'size', it is normally not necessary to set this value.) The percentage value on the 'margin' property is relative to the target size so if the target is 21.0cm x 29.7cm (a.k.a. A4), the margins are 2.10cm and 2.97cm.

landscape
the page box will have the same size as the target, and the normal direction of print occurs across the largest dimension of the target. Thus, the target orientation will be ignored.
portrait
the page box will have the same size as the target, and the normal direction of print occurs across the shortest dimension of the target. Thus, the target orientation will be ignored.

Absolute page boxes are described with one or two length values:

  @page {
    size: 8.5in 11in;  /* width height */
  }

The above example set the width of the page box to be 8.5in and the height to be 11in. If only one length value is specified, it sets both the width and height of the page box. Since the page box has no "parent" percentage values are not allowed on the 'size' property.

The page box in the above example will need a target size of 8.5"x11" or bigger to be printed. If the page box does not fit the target, the UA may choose to:

The UA should consult the user before performing these operations.

When the page box is smaller than the target size, the UA is free to place the page box anywhere on the sheet. However, it is recommended that the page box is centered on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet.

Typically, 8.5"x11" sheet size will be available in North America, while printers in other parts of the world are more likely to have the A4 sheet size available.

marks

Value: crop || cross | none
Initial: none
Applies to: page context
Inherited: N/A
Percentage values: N/A

In high-quality printing, various marks are often added outside the page box. Crop marks indicate where the page should be cut and cross marks (also known as register marks or registration marks) are used to align sheets. This property describes what marks should be printed on the page outside the outer edges of the page box.

Marks are only visible on absolute page boxes. In relative page boxes the page box will be aligned with the target and the marks will be outside the printable area.

The size, style and position of cross marks is UA dependent.

Pseudo-class page boxes

When printing double-sided documents, the page box on left and right pages should be different. This can be expressed through the pseudo-class mechanism from CSS1:

  @page :left {
    margin-left: 4cm;
    margin-right: 3cm;
  }

  @page :right {
    margin-left: 3cm;
    margin-right: 4cm;
  }

All pages are automatically classified into either 'left' or 'right' pseudo-class. Whether the first page is 'left' or 'right' is outside the scope of this document. But note that you can use a page break before e.g. the 'HTML' element to force a left or right page.

More named paged (e.g. first) could be added in the future.

Adding declarations to the left or right pseudo-class does not influence whether the document comes out of the printer double- or single-sided (which is outside the scope of this specification). If different declarations have been given for left and right pages, these declarations will be honored even if the printer only prints single-sided. Thereafter, the intended design can be achieved by e.g. copying the single-sided sheets onto double-side sheets.

Cascading in the page context

Declarations in the page context cascade just like normal CSS1 declarations:

  @page {
    margin-left: 3cm;
  }

  @page :left {
    margin-left: 4cm;
  }

Due to the higher specificity of the pseudo-class selector, the left margin on left pages will be '4cm' and all other pages (i.e. the right pages) will have a left margin of '3cm'.

Media Dependent Style Sheets

Different output media can often take advantage of the same properties. For example, the 'font-size' property is useful both for SCREEN and PRINT media. However, the two media types are different enough to require different values on the common property; a document will typically need a larger font on a computer screen than on paper. For this reason, it's necessary to express that a style sheet -- or a section of a style sheet -- applies to certain media types.

There are two ways to do this:

Due to the same media type value, the two examples above are semantically equivalent.

In addition, the '@media' construct allows style sheet rules for various media in the same style sheet:

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Any valid MEDIA attribute value is valid on '@media'.

Alternate print document

The author of a document may want to specify an alternate method of rendering the document when the Print function is selected in the UA. A new value ALTERNATE is proposed for the REL attribute of the LINK element. This extension allows the author to prepare a separate print version of the document and to make it easily available to the user in a consistent manner.

Consider this example:

<HEAD>
<TITLE>Print me!</TITLE>
<LINK REL=ALTERNATE MEDIA=PRINT HREF="doc.ps" TYPE="application/postscript">
</HEAD>

In the above example, an alternate document that has been specifically designed for printing is made available through the LINK element. This document is automatically printed when the user selects the Print function in the UA. A further dialog may be presented to the user, but it is not required and is UA-dependent. If this document is automatically printed as a part of a greater collection or in a situation where the screen version is not rendered, then the first LINK statement containing an alternate document for the right MEDIA type in a known format will be used.

As the example above shows: the alternate document does not have to be in HTML. If the UA understands other MIME types, these may be specified. In such cases, an application or a reader may be invoked, the alternate document printed, and the user returned to the UA context to continue browsing.

Future extensions

The following is a short list of where we expect to see additional work. Some of the challenges that we have discussed are briefly outlined.

Acknowledgments

This document is a result of the efforts of the W3C's Working Group on CSS&FP. The following people have contributed to this document: Bert Bos, Sylvan Butler, Steve Byrne, Brad Chase, Dan Connolly, Todd Fahrner, Daniel Glazman, Scott Isaacs, Phil Karlton, Chris Lilley, Roberta MacMillan, Murray Maloney, Lou Montulli, Jean Paoli, Steven Pemberton, Dave Raggett, Todd Roshak, David Singer, Mandira Virmani, Mike Wexler, Chris Wilson and Stephen Zilles.

References

[1] Cascading Style Sheets, level 1, W3C Recommendation, http://www.w3.org/pub/WWW/TR/REC-CSS1

[2] WD-style, http://www.w3.org/pub/WWW/TR/WD-style

[3] WD-positioning, http://www.w3.org/pub/WWW/TR/WD-positioning

Copyright  ©  1997 W3C (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.