CSS Paged Media Module Level 3

Abstract

This module describes the page model that partitions a flow into pages. It builds on the Box model module and introduces and defines the page model and paged media. It adds functionality for pagination, page margins, page size and orientation, headers and footers, widows and orphans, and image orientation. Finally it extends generated content to enable page numbering and running headers / footers.

Status of this Document

This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-page” in the subject, preferably like this: “[css3-page] …summary of comment…”

This document was produced by the CSS Working Group (part of the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document contains the CSS3 Paged Media Module W3C Last Call Working Draft of 22 June 2012. The Last Call period ends on TBD.

Relative to the previous Last Call Working Draft, this version has dropped the formerly named ‘fit’ and ‘fit-position’ properties; they are renamed to ‘object-fit’ and ‘object-position’, redefined to enable additional use cases, and moved to the CSS3 Image Values and Replaced Content module. The margin-box sizing algorithm has been reworded to be a bit simpler, and many miscellaneous clarifications and editorial improvements have been incorporated.

Features at-risk (may be removed if they lack implementor interest):

• comma-separated page selectors

Expected next revision to this document is another LCWD, due to the substantive changes to margin box sizing and other areas that are now specified with more precision.

The Disposition of Comments document contains the current issues list and responses to input received during this Last Call period.

Table of Contents

• 1. Introduction
• 2. Conformance
• 3. Page Terminology
• 4. The Page Model
  • 4.1. Page Backgrounds and Painting Order
  • 4.2. Content outside the page box
  • 4.3. Page Progression
• 5. Page Selectors and the Page Context
  • 5.1. The @page Rule
  • 5.2. Page pseudo-classes: :left, :right, and :first
  • 5.3. @page rule grammar
  • 5.4. Cascading in the page context
• 6. Margin Boxes
  • 6.1. At-rules for margin boxes
  • 6.2. Populating margin boxes
  • 6.3. Computing Margin Box Dimensions
    • 6.3.1. Margin Box Layout Terminology
    • 6.3.2. Margin Box Variable Dimension Computation Rules
    • 6.3.3. Margin Box Fixed Dimension Computation Rules
  • 6.4. Margin box examples
• 7. Page Properties
  • 7.1. Page-based counters
  • 7.2. Margin boxes and default values
• 8. Page Size
  • 8.1. Page size: the ‘size’ property
    • 8.1.1. Some examples:
    • 8.1.2. Media Queries
  • 8.2. Rendering page boxes that do not fit a page sheet
  • 8.3. Positioning the page box on the sheet
• 9. Page Breaks
  • 9.1. Break before/after elements: ‘page-break-before’, ‘page-break-after’, ‘page-break-inside’
  • 9.2. Using named pages: ‘page’
  • 9.3. Breaks inside elements: ‘orphans’, ‘widows’
  • 9.4. Allowed page breaks
  • 9.5. Forced page breaks
  • 9.6. "Best" page breaks
• 10. Image Properties
• Appendix A: Applicable CSS2.1 Properties
  • Properties that apply within the page context
  • Properties that apply within the margin contexts
• Appendix B: Transfer Possibilities
• References
  • Normative References
  • Informative References

1. Introduction

Paged media (e.g., paper, transparencies, photo album pages, pages displayed on computer screens as printed output simulations) differ from continuous media in that the content of the document is split into one or more discrete static display surfaces. To handle pages, CSS3 Paged Media describes how:

• page breaks are created and avoided;
• the page properties such as size, orientation, margins, border, and padding are specified;
• headers and footers are established within the page margins;
• content such as page counters are placed in the headers and footers; and
• orphans and widows can be controlled.

This module defines a page model that specifies how a document is formatted within a rectangular area, called the page box, that has finite width and height.

Although CSS3 does not specify how user agents transfer page boxes to sheets, it does include certain mechanisms for telling user agents about the intended page sheet size and orientation. In the general case, CSS3 assumes that one page box will be transferred to one surface of similar size.

All properties defined in this specification also accept the inherit keyword as their value, but for readability it has not been listed explicitly.

2. Conformance

All of the text in this specification is normative except sections explicitly marked as non-normative, examples, and notes. The keywords "MUST", "SHALL", "MUST NOT", "SHALL NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" when used in this document are to be interpreted as described in RFC 2119 [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.

Examples in this specification are introduced with the words "for example" or are set apart from the normative text with class="example", like this:

Informative notes begin with the word "Note" and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

3. Page Terminology

The following terminology and accompanying diagrams help to describe the page model:

Page sheet

The page sheet is one surface of the physical medium. The illustration to the right shows a representation of the upper-left corner of a page sheet.

Printable and non-printable areas

The non-printable area is the area of a page sheet that a physical device such as a printer is not capable of marking reliably, usually due to the printer's paper handling mechanism. This value is printer dependent and is usually a small region along each edge of the page sheet. The printable area is the area of page sheet that a printer is capable of marking reliably. The size of the printable area is the size of the page sheet reduced by the size of the non-printable area. A user agent may not know the dimensions of this area for a particular printing device; but when its dimensions are known, user agents MAY adjust the formatting of the document so that content falls within the printable area. How this adjustment is accomplished is device dependent within the constraints expressed in the sections Rendering page boxes that do not fit a page sheet and Content outside the page box.

Page Orientation

The page orientation is defined by comparing the length of the edges of a page box. The page box is a rectangle with two perpendicular edges called the long edge and the short edge. The length of the long edge is always greater than or equal to the length of the short edge. When the page box is square, the two edges are of the same length and either can be used as the long edge with the other being the short edge. This specification defines page orientations of ‘portrait’ and ‘landscape’.

Portrait Orientation

A portrait page's height is greater than or equal to its width. Horizontal elements are parallel to the short edge and vertical elements to the long edge.

Landscape Orientation

A landscape page's width is greater than or equal to its height. Horizontal elements are parallel to the long edge and vertical elements to the short edge. Note that CSS3 makes no distinction between landscape and reverse-landscape orientations. However, future versions of CSS may do so. UAs should consider, when formatting for duplexed printing, the binding edge, page progression, and ease of reading when choosing between landscape and reverse-landscape renderings.

Duplex Printing

Duplex printing prints one page box per side of a page sheet and uses both sides of the page sheet. This module provides no ability to specify whether a document is duplex printed, but the concept of left and right pages is based on the assumption that the document is duplex printed, regardless of whether or not it actually is.

Binding Edge

The binding edge is the edge of the page box that is toward the binding if the material is bound. The binding edge often has a larger margin than the opposite edge to provide for the space used by the binding. The binding edge can be any of the four edges. However, page sheets are customarily bound so that the binding edge of page boxes with portrait orientation is vertical. This module provides no method to specify the binding edge. In duplex printing, the binding edge is on opposite sides of the page box for the left and right pages.

Facing Pages

Facing pages are two sequential pages such that when the document is duplex printed they are on separate sheets of paper. Typically, the earlier page will be the back side of one sheet and the later page will be the front side of another. They are usually laid out so that the binding edges of facing pages are vertical and adjacent when the pages are placed in their normal reading orientation.

Left Page

A page that would be on the left if it is part of a pair of facing pages as typically laid out. Page layouts for documents using a left-to-right page progression have the earlier of the facing pages on the left. Rules specific to the left page can be specified using the ‘:left’ page selector.

Right Page

A page that would be on the right if it is part of a pair of facing pages as typically laid out. Page layouts for documents using a right-to-left page progression have the earlier of the facing pages on the right. Rules specific to the right page can be specified using the ‘:right’ page selector.

4. The Page Model

In the paged media formatting model, the document is transferred into one or more page boxes. The page box is a specialized CSS box that maps to a rectangular print media surface, such as a page of paper. It is roughly analogous to the viewport.

As with other CSS boxes, a page box consists of margin, border, padding, and content areas. The content and margin areas of a page box have special functions:

• The content area of a page box is called the page area. The content of the document is flowed into one or more page boxes. The page area acts as a container for all the boxes generated by the root element and its descendants that are laid out within a given page box. The edges of the page area on the first page establish the rectangle that is the initial containing block of the document.
• The margin area of a page box is divided into 16 margin boxes. Each margin box has its own margin, border, padding and content areas. Margin boxes are typically used to display running headers and footers.

The properties of a page box are determined by properties declared within the page context, which is the declaration block of the @page rule. Similarly the properties of a margin box are determined by properties declared within its margin context. Declarations in the page context can affect the page box and/or inherit to the margin boxes, but they do not apply to or inherit into the document's root element or other content.

The containing block of the page box is specified using the ‘size’ property in the page context. The width and horizontal margins of the page box are then calculated exactly as for a non-replaced block element in normal flow. [CSS21] The height and vertical margins of the page box are calculated analogously (instead of using the block height formulas). In both cases if the values are over-constrained, instead of ignoring any margins, the containing block is resized to coincide with the margin edges of the page box.

4.1. Page Backgrounds and Painting Order

When drawing a page of content, the page layers are painted in the following painting order (bottommost first):

1. page background
2. document canvas
3. page borders
4. document contents
5. margin boxes

In the page model, the page background behaves similar to the root background: its background painting area is the entire page box, including its margins. Page backgrounds are anchored within the page box's padding area by default (and honor ‘background-origin’ if the UA supports [CSS3BG]). However if ‘background-attachment’ is ‘fixed’ then the image is positioned relative to the page box including its margins (i.e. the background positioning area, like the background painting area, is the page's margin box).

The document canvas background is drawn as the page box's background: by default its background painting area covers the page box's border box, and for UAs that support [CSS3BG], follows the ‘background-clip’ value specified on the root element. It remains, however, positioned with respect to the root element or page area as usual.

The UA may support the z-index property for margin boxes. With respect to the margin boxes, the document canvas, page borders, and all of the document contents are treated as a single element with a z-index value of ‘0’: the margin boxes never interleave with parts of the document content or between the content and the canvas. They may only paint in front of the document content or behind the document canvas. The page background is always painted underneath everything else. Since the position property does not apply to margin boxes, z-index always affects margin boxes as if they were positioned elements regardless of the position property's value.

The default painting order, or CSS2.1 Appendix E "tree order", of margin boxes with respect to each other is not specified. However, the margin boxes are defined to come after the page box and its contents. Suggestions here are welcome.

4.2. Content outside the page box

When formatting content in the page model, some content may end up outside the page box. For example, an element whose ‘white-space’ property has the value ‘pre’ can generate a box that is wider than the page box. As another example, when boxes are positioned absolutely or relatively, they may end up in "inconvenient" locations. For example, images may be placed on the edge of the page box or 100,000 meters below the page box.

A specification for the exact formatting of such elements lies outside the scope of this document. However, it is recommended that authors and user agents observe the following general principles concerning content outside the page box:

• Content should be allowed slightly beyond the page box to allow pages to "bleed".

• User agents SHOULD avoid generating a large number of content-empty pages to honor the positioning of elements (e.g., printing 100 blank pages is probably neither the author's nor the user's intent). A Content-empty page is a page box whose page area contains no printable content other than backgrounds and/or borders. A page box whose page area contains generated content, or content whose visibility is ‘hidden’, or invisible content such as a zero-width space is not a content-empty page. On the other hand, a page containing only a background and/or borders and/or margin-box content is a content-empty page.

  Note, however, that generating a small number of empty page boxes is sometimes necessary to honor the ‘left’ and ‘right’ values for ‘page-break-before’ and ‘page-break-after’.

• Authors SHOULD NOT position elements in inconvenient locations just to avoid rendering them. Instead:

  • To suppress box generation entirely, set the ‘display’ property to ‘none’.
  • To make a box invisible, set the ‘visibility’ property.

• This specification does not define how boxes positioned outside the page box are handled. Possibilities include discarding them or creating page boxes for them at the end of the document.

4.3. Page Progression

CSS distinguishes between left pages and right pages on all documents, whether they are printed duplex or not. Each left page is followed by a right page and vice versa. Left and right pages can be styled differently with the :left and :right pseudo-classes.

Whether the first page of a document is a left page or a right page depends on the page progression of the document. The page progression is the direction in which the printed pages of a document would be sequenced when laid out side-to-side. For example, English and horizontally-set Japanese typically progress from left to right, whereas Arabic and vertically-set Japanese pages typically progress from right to left. In documents with a left-to-right page progression the first page of the document is a right page, and vice versa.

The page progression direction is determined as follows:

• If text is laid out in horizontal lines, the page progression is the same as the inline progression.
• If text is laid out in vertical lines, the page progression is the same as the block progression.

If the UA supports the ‘direction’ and ‘writing-mode’ properties from the CSS 3 Writing Modes Module [CSS3-WRITING-MODES], it must determine whether the first page is a left or right page from the values of those properties on the root element.

To explicitly force a document to begin printing on a left or right page, authors can insert a page break before the first generated box. The UA must suppress the first (empty) page(s) in this case (and the :first selector applies to the first printed page).

5. Page Selectors and the Page Context

5.1. The @page Rule

Authors can specify various aspects of a page box, such as its dimensions, orientation, and margins, within an @page rule. An @page rule consists of the keyword ‘@page’, an OPTIONAL page name followed with no intervening space by an OPTIONAL page pseudo-class, and a block of declarations (said to be in the page context). Margin at-rules may be interleaved with the declarations in the page context.

The OPTIONAL page name and OPTIONAL page pseudo-class constitute the page selector. The page selector specifies for which pages the declarations apply. In CSS3, page selectors can designate the first page of a document, all left pages, all right pages, or pages with specific names. Multiple selectors may be combined with a comma (which may be preceded and/or followed by white space); in this case the ‘@page’ rule applies to pages that match any of the page selectors. (Note: this feature is at-risk.) If no page selector is given, then the ‘@page’ rule applies to all pages.

Properties declared within the page context apply to the page box.

If an error is encountered during the processing of a declaration block within a page or a margin context, the Rules for handling parsing errors apply; that is, valid declarations within the block are applied.

5.2. Page pseudo-classes: :left, :right, and :first

When printing double-sided documents, left and right pages are often formatted differently. This can be expressed through CSS pseudo-classes defined in the page context.

All pages are automatically classified by user agents as either left pages or right pages. The ‘:left’ and ‘:right’ page pseudo-classes can be used to selectively apply rules to only the left or right pages, respectively.

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

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

If different declarations have been given for left and right pages, the user agent MUST honor these declarations even if the user agent does not transfer the page boxes to left and right sheets (i.e., a printer that only prints on one side of the medium must nevertheless produce correctly formatted output).

Authors can also specify style for the first page of a document with the ‘:first’ pseudo-class. Such style rules are applied only to the first printed page of a document.

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}

html {page-break-before: always;}

5.3. @page rule grammar

The syntax for the @page rule is a specialization of the generic at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules nested inside @media rules. User agents MUST adhere to the following grammar:

See [CSS21], Section 4.1.1 and Appendix G for the expansion of missing productions:

All new lexical tokens are specializations of the ATKEYWORD lexical token:

PAGE_SYM              ::= "@page"
TOPLEFTCORNER_SYM     ::= "@top-left-corner"
TOPLEFT_SYM           ::= "@top-left"
TOPCENTER_SYM         ::= "@top-center"
TOPRIGHT_SYM          ::= "@top-right"
TOPRIGHTCORNER_SYM    ::= "@top-right-corner"
BOTTOMLEFTCORNER_SYM  ::= "@bottom-left-corner" 
BOTTOMLEFT_SYM        ::= "@bottom-left"
BOTTOMCENTER_SYM      ::= "@bottom-center"
BOTTOMRIGHT_SYM       ::= "@bottom-right"
BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
LEFTTOP_SYM           ::= "@left-top"
LEFTMIDDLE_SYM        ::= "@left-middle"
LEFTBOTTOM_SYM        ::= "@left-bottom"
RIGHTTOP_SYM          ::= "@right-top"
RIGHTMIDDLE_SYM       ::= "@right-middle"
RIGHTBOTTOM_SYM       ::= "@right-bottom"

media : 
     MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
     ;

page :
     PAGE_SYM S* IDENT? S* pseudo_page? S* 
     '{' S* [ [ declaration? ';' S* ] | margin_box ]* [ declaration ]? '}'  S*
     ;
Space should not be allowed between name and pseudo.
pseudo_page :
     ':' [ "left" | "right" | "first" ]
     ;

margin_box :
     margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
     ;

margin_sym :
     TOPLEFTCORNER_SYM | 
     TOPLEFT_SYM | 
     TOPCENTER_SYM | 
     TOPRIGHT_SYM | 
     TOPRIGHTCORNER_SYM |
     BOTTOMLEFTCORNER_SYM | 
     BOTTOMLEFT_SYM | 
     BOTTOMCENTER_SYM | 
     BOTTOMRIGHT_SYM |
     BOTTOMRIGHTCORNER_SYM |
     LEFTTOP_SYM |
     LEFTMIDDLE_SYM |
     LEFTBOTTOM_SYM |
     RIGHTTOP_SYM |
     RIGHTMIDDLE_SYM |
     RIGHTBOTTOM_SYM 
     ;

The value ‘auto’ is not a valid page name and must be treated as matching nothing.

@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
@page:first { ... };

@page {
 @top-left { ... /* document name */ }
 @bottom-center { ... /* page number */}
}
@page :left { @left-middle { ... /* page number in left margin */ }}
@page :right{ @right-middle { ... /* page number in right margins of right pages */}}

@page :left { @bottom-left-corner { ... /* left page numbers */ }}
@page :right { @bottom-right-corner { ... /* right page numbers */ }}
@page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
             @bottom-right-corner { ... /* empty footer */ } }

5.4. Cascading in the page context

Declarations in page and margin contexts cascade just like declarations in rule sets.

The specificity of page selectors is computed in a manner analogous to the computations defined in the Selectors module:

• if the page selector has a named page, f=1; else f=0
• if the page selector has a ‘:first’ pseudo-class, g=1; else g=0
• if the page selector has a ‘:left’ or ‘:right’ pseudo-class, h=1; else h=0

Concatenating the three numbers f-g-h gives the specificity.

      @page { } /* f=0 g=0 h=0 -> specificity = 000 */
      @page :left { } /* f=0 g=0 h=1 -> specificity = 001 */
      @page :first { } /* f=0 g=1 h=0 -> specificity = 010 */
      @page artsy { } /* f=1 g=0 h=0 -> specificity = 100 */
      @page artsy:left { } /* f=1 g=0 h=1 -> specificity = 101 */
      @page artsy:first { } /* f=1 g=1 h=0 -> specificity = 110 */ 

@page {
margin-left: 3cm;
}

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

@page :first {
color: green;

@top-left {
  content: "foo";
  color: blue;
}
@top-right {
  content: "bar";
}
}

@page { color: red;
@top-center {
  content: "Page " counter(page);
  }
}

@page { margin: 25mm;}
@page { font-size: 14pt;}

6. Margin Boxes

Margin boxes are boxes within the page margin that, like pseudo-elements, can contain generated content.

Margin boxes can be used to create page headers and footers, which are portions of the page set aside for supplementary information such as the page number or document title.

Margin boxes are positioned with respect to the page area and are independent of page orientation, for example the top margin boxes are above the page area in both portrait and landscape orientation. The various margin boxes are defined and illustrated in the diagram below:

Table 1 Margin Box Definitions

Box	Description	Placement
top-left-corner	a fixed-size box defined by the intersection of the top and left margins of the page box
top-left	a variable-width box filling the top page margin between the top-left-corner and top-center margin boxes
top-center	a variable-width box centered horizontally between the page's left and right border edges and filling the page top margin between the top-left and top-right margin boxes
top-right	a variable-width box filling the top page margin between the top-center and top-right-corner margin boxes
top-right-corner	a fixed-size box defined by the intersection of the top and right margins of the page box
left-top	a variable-height box filling the left page margin between the top-left-corner and left-middle margin boxes
left-middle	a variable-height box centered vertically between the page's top and bottom border edges and filling the left page margin between the left-top and left-bottom margin boxes
left-bottom	a variable-height box filling the left page margin between the left-middle and bottom-left-corner margin boxes
right-top	a variable-height box filling the right page margin between the top-right-corner and right-middle margin boxes
right-middle	a variable-height box centered vertically between the page's top and bottom border edges and filling the right page margin between the right-top and right-bottom margin boxes
right-bottom	a variable-height box filling the right page margin between the right-middle and bottom-right-corner margin boxes
bottom-left-corner	a fixed-size box defined by the intersection of the bottom and left margins of the page box
bottom-left	a variable-width box filling the bottom page margin between the bottom-left-corner and bottom-center margin boxes
bottom-center	a variable-width box centered horizontally between the page's left and right border edges and filling the bottom page margin between the bottom-left and bottom-right margin boxes
bottom-right	a variable-width box filling the bottom page margin between the bottom-center and bottom-right-corner margin boxes
bottom-right-corner	a fixed-size box defined by the intersection of the bottom and right margins of the page box

6.1. At-rules for margin boxes

Margin boxes are created by margin at-rules inside the page context. These rules should come after any declarations in the page context as legacy clients may not handle declarations after margin at-rules correctly.

A margin at-rule consists of an ATKEYWORD that identifies the margin box (e.g. ‘@top-left’) and a block of declarations (said to be in the margin context).

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

6.2. Populating margin boxes

As with the ‘:before’ and ‘:after’ pseudo-elements, a specified ‘content’ of ‘normal’ on a margin box computes to ‘none’, and the margin box is generated if and only if the computed value of its ‘content’ property is not ‘none’. Otherwise it behaves as if it had ‘display: none’.

  @page {
    @top-left-corner { content: " "; border: solid green; }
    @top-right-corner { content: url(foo.png); border: solid green; }
    @bottom-right-corner { content: counter(page); border: solid green; }
    @bottom-left-corner { content: normal; border: solid green; }
  }

6.3. Computing Margin Box Dimensions

The width and height of each margin box is determined by the rules below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6 for margin boxes.

The rules for applying ‘min-height’, ‘max-height’, ‘min-width’, and ‘max-width’ [CSS21] do apply to margin boxes and may imply a recalculation of the width, height, and/or margins if the dimensions resulting from the specified ‘width’ or ‘height’ violate their constraints. If the UA does not support the ‘min-height’ or ‘min-width’ properties then it must behave as if ‘min-height’ and ‘min-width’ were always zero.

6.3.1. Margin Box Layout Terminology

In addition to the box model definitions in CSS2.1 [CSS21], the following terms are defined for use in the subsequent margin box calculations:

max box width

the sum of the page's left border width, left padding, page area width, right padding, and right border width. In other words, it is the distance between the page box‘s left border edge and right border edge. This quantity is used when calculating dimensions of the top and bottom margin boxes.

max box height

the sum of the page’s top border width, top padding, page area height, bottom padding, and bottom border width. In other words, it is the distance between the page box‘s top border edge and bottom border edge. This quantity is used when calculating dimensions of the left and right margin boxes.

outer width

the sum of a margin box’s left and right margins, left and right border widths, left and right padding, and content-box width.

outer height

the sum of a margin box's top and bottom margins, top and bottom border widths, top and bottom padding, and content-box height.

The containing block for a corner margin box is the rectangle defined by the intersection of the two page margins meeting at that corner.

For all other margin boxes, the containing block is the rectangle formed by the encapsulating page margin minus the containing blocks of the adjacent corners' margin boxes. This means that the size of this containing block is given in one dimension by the used page margin and in the other dimension by the max box width (for top and bottom margin boxes) or max box height (for left and right margin boxes).

6.3.2. Margin Box Variable Dimension Computation Rules

The following rules apply to ‘top-left’, ‘top-center’ and ‘top-right’ margin boxes, which are referred to as A, B, and C, respectively, in the expression below.

• The UA chooses used values for each box's width, left and right margin, left and right border thickness, and left and right padding. It chooses them in such a way that the sum of the squares of the boxes' left and right margins, i.e. the value of:
  margin-left_A² + margin-left_B² + margin-left_C² + margin-right_A² + margin-right_B² + margin-right_C²
  is as small as possible under the constraints below.
  1. The sum of the outer widths of the three boxes is equal to max box width. (Margin box margins do not collapse.)
  2. If the center box exists, then the outer widths of the other two boxes are equal to each other (i.e., the center box is centered in that case).
  3. If a margin box is not generated, then the used values of its width, left and right padding, and left and right border width in these formulas are all 0.
  4. The used values of the margin boxes' left and right margins are their respective computed values, unless the respective computed value is ‘auto’.
  5. If a box's computed width is ‘auto’, then its used width must be greater than or equal to its preferred minimum width.
  6. If a box's computed width is ‘auto’, then its used width must also be less than or equal to its preferred width.
• If the above constraints are contradictory ("over-constrained"), then drop rule 6 above. If they are still contradictory, then the right margin of the left box and the left margin of the right box are treated as if their computed values were ‘auto’.

Note: By their definitions, margins can be negative, but widths cannot.

The used values for ‘bottom-left’, ‘bottom-center’ and ‘bottom-right’ margin boxes are established by the same rules as for ‘top-left’, ‘top-center’, and ‘top-right’, respectively.

The used values for ‘left-top’, ‘left-middle’ and ‘left-bottom’ boxes are established by the same rules, with "width" replaced by "height", "left" by "top", "right" by "bottom" and "center" by "middle".

The used values for ‘right-top’, ‘right-middle’ and ‘right-bottom’ margin boxes are established by the same rules as for ‘left-top’, ‘left-middle’ and ‘left-bottom’, respectively.

6.3.3. Margin Box Fixed Dimension Computation Rules

The rules below are used to calculate the used values of each ‘top-left-corner’, ‘top-left’, ‘top-center’, ‘top-right’, and ‘top-right-corner’ margin box's ‘height’, ‘margin-top’, and ‘margin-bottom’ properties:

1. The following constraint must hold among the used values of the margin box's properties:

   ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ = top page margin

2. If ‘border-top-width’ + ‘padding-top’ + ‘height’ (if it is not ‘auto’) + ‘padding-bottom’ + ‘border-bottom-width’, plus ‘margin-top’ and/or ‘margin-bottom’ if not ‘auto’, is larger than the height of the top page margin, then any ‘auto’ values for ‘margin-top’ or ‘margin-bottom’ are, for the following rules, treated as zero.
3. If at this point all of ‘height’, ‘margin-top’, and ‘margin-bottom’ have a computed value other than ‘auto’, the values are said to be "over-constrained". In this case, the specified value of ‘margin-top’ is treated as ‘auto’.
4. If there is now exactly one value specified as ‘auto’, its used value follows from the equality.
5. If ‘height’ is set to ‘auto’, any other ‘auto’ values become ‘0’ and ‘height’ follows from the resulting equality
6. If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, their used values are equal. This vertically centers the margin-box content within the top page margin.

The same rules apply to the bottom margin boxes (bottom-left-corner, bottom-left, bottom-center, bottom-right, and bottom-right-corner), except that in the overconstrained case, the ‘margin-bottom’ is ignored rather than the ‘margin-top’.

Analogous rules govern the properties for the left and right margin boxes with respect to ‘width’ (top-left-corner, left-top, left-middle, left-bottom, and bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom, bottom-right-corner), with ‘top’ replaced by ‘left’, ‘bottom’ replaced by ‘right’, and ‘height’ replaced by ‘width’. In the overconstrained case for left (right) margin boxes, the specified value of ‘margin-left’ (‘margin-right’) is ignored.

6.4. Margin box examples

The following is a collection of examples of margin box usage.

@page {
@top-left { content: "Header in Left Cell (top-left)" }
}

@page {
@top-center { content: "Header in Center Cell (top-center)" }
}

@page {
@top-right { content: "Header in Right Cell (top-right)" }
}

@page {
@top-left { content: "Left Cell (top-left)" }
@top-center { content: "Header in Center Cell (top-center)" }
}

@page {
@top-center { content: "Header in Center Cell (top-center)" }
@top-right { content: "Right Cell (top-right)" }
}

@page {
@top-left { content: "Header in top-left with approx. "
                   "twice as many words as right cell." }
@top-right { content: "Right cell (top-right)" }
}

7. Page Properties

@page {
margin: 10%;
counter-increment: page;

@top-center {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2em;
  content: counter(page);
}
}

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
margin: 10%;
@top-center { content: "Chapter" counter(chapter) }
}

  @page {
    size: 4in 6in;
  }
  
  @media (max-width: 6in) {
    @page {
      size: letter;
    }
  }
  

@page {
size: A4 landscape;
}

@page {
size: auto;/* auto is the initial value */
margin: 10%;
}

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

 /* style sheet for "A4" printing */ 
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }
 
 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

@page rotated { size: landscape }
table { page: rotated; page-break-before: right }

@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }

<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>