drafts: css3-page/Overview.src.html@0dff950123a2 (annotated)

css3-page/Overview.src.html@0dff950123a2 (annotated)

css3-page/Overview.src.html

Thu, 21 Feb 2013 01:26:52 +0100

author: Simon Sapin <simon.sapin@exyr.org>
date: Thu, 21 Feb 2013 01:26:52 +0100
changeset 7513: 0dff950123a2
parent 7511: 5a4a03bb378c
child 7536: d88e561c0b07
permissions: -rwxr-xr-x

[css3-page] Rewrite page selector specificity for multiple pseudo-classes.

Update to Selectors 4 language, while we’re at it.

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html lang="en">
 <head>
 <title>
 CSS Paged Media Module Level 3
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link href="../default.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
 <style type="text/css">
   .keyword { font-weight:bold }
   .equation { padding: 2% }
   table.equation {text-align:center}
   td, th { vertical-align: top }
   pre { font-size: 1em; }
   #margin-values { border-collapse: collapse; }
   #margin-values td,
   #margin-values th
   {
                 padding: 0.2em;
                 border: thin solid black;
   }
   .property-list
   {
                 border: 1px solid black;
                 padding: .2em;
                 margin-top: 2em;
   }
   .property-list td
   {
                 border: 1px solid black;
                 padding: .1em;
   }
   .editorial
   {
                 display: block;
                 font-family: arial, helvetica, sans-serif;
       font-size: 80%;
       margin-left: .5in;
       margin-right: 1in ;
       padding: 0.125in;
       background: #FFFFDD ;
   }
   .editorial:after { content: "Ed."}
   .RFC2119
   {
                 text-transform: lowercase;
                 font-style: italic
   }
   em em.RFC2119
   {
                 text-transform: lowercase;
                 font-style: normal
   }
   table.page-sizes
   {
                 border: thin solid;
                 margin-top: 1.5em;
   }
   table.page-sizes td
   {
                 border: thin solid;
                 padding: .5em;
   }
   table.page-sizes th
   {
                 border: thin solid;
                 padding: .5em;
                 background: #ffffaa;
   }
 </style>
 </head>
 <body>
 <div>
 <div class="head">
 <!--logo-->
 <h1>CSS Paged Media Module Level 3</h1>
 <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>
 <dl>
   <dt>This version:</dt>    <dd><a href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
     <!-- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
   <dt>Latest version:</dt>    <dd><a href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a></dd>
   <dt>Previous version:</dt>    <dd><a href="http://www.w3.org/TR/2004/CR-css3-page-20040225/">http://www.w3.org/TR/2004/CR-css3-page-20040225/</a></dd>
   <dt>Editors:</dt>    <dd>Melinda Grant, Hewlett-Packard</dd>
     <dd>H&aring;kon Wium Lie, Opera Software</dd>
     <dd>Elika J. Etemad, Hewlett-Packard</dd>
     <dd>Simon Sapin, Kozea</dd>
 </dl>
 <!--copyright-->
 </div>
 <hr title="Separator for header">
 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 <p>This module describes the page model that partitions a flow into pages. It
 builds on the <a href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> 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.</p>
 <!-- "Status of this document" -->
 <h2 class="no-num no-toc" id="status">Status of this Document</h2>
 <!--status-->
 <p>This document contains the <abbr title="Cascading Style Sheets">CSS3</abbr>
 Paged Media Module W3C Last Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a> of [DATE]. The
 Last Call period ends on <span class="fudge">TBD</span>.</p>
 <p>Expected next revision to this document is another LCWD, due to the
 substantive changes to page-margin box sizing and other areas that are now
 specified with more precision.</p>
 <p>The <a href="lc2_issues.htm">Disposition of Comments</a>
 document contains the current issues list and responses to input received
 during this Last Call period.</p>
 <h2 class="no-num no-toc" id="contents">Table of Contents</h2><!--begin-toc-->
 <!--end-toc-->
 <!-- "Introduction" -->
 <h2 id="intro">Introduction</h2>
 <p>Paged media (e.g., paper, transparencies, photo album pages, pages
 displayed on computer screens as printed output simulations) differ from
 <a href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>
 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:</p>
 <ul>
   <li><a href="#page-breaks">page breaks</a> are created and avoided;</li>
   <li>the page properties such as size, orientation, margins, border, and
   padding are specified;</li>
   <li>headers and footers are established within the page margins;</li>
   <li>content such as page counters are placed in the headers and footers; and</li>
   <li>orphans and widows can be controlled.</li>
 </ul>
 <p>This module defines a <a href="#page-model">page model</a> that specifies how a
 document is formatted within a rectangular area, called the
 <a href="#page-box-page-rule">page box</a>, that has finite width and height.
 <p>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 <a href="#page-size">size and orientation</a>. In the general case,
 CSS3 assumes that one page box will be transferred to one surface of similar
 size.</p>
 <p>All properties defined in this specification also accept the
 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
 keyword as their value, but for readability it has not been listed explicitly.
 <h2 id="conformance">Conformance</h2>
 <p>All of the text in this specification is normative except sections
 explicitly marked as non-normative, examples, and notes. The keywords
 "<em class="RFC2119">MUST</em>", "<em class="RFC2119">SHALL</em>",
 "<em class="RFC2119">MUST NOT</em>", "<em class="RFC2119">SHALL NOT</em>",
 "<em class="RFC2119">REQUIRED</em>", "<em class="RFC2119">SHOULD</em>",
 "<em class="RFC2119">SHOULD NOT</em>", "<em class="RFC2119">RECOMMENDED</em>",
 "<em class="RFC2119">MAY</em>", and "<em class="RFC2119">OPTIONAL</em>" when
 used in this document are to be interpreted as described in <cite>RFC
 </cite> [[!RFC2119]]. However, for readability, these words do not appear
 in all uppercase letters in this specification.</p>
 <p>Examples in this specification are introduced with the words "for example"
   or are set apart from the normative text with <code>class="example"</code>,
   like this:
 <div class="example">
   <p>This is an example of an informative example.</p>
 </div>
 <p>Informative notes begin with the word "Note" and are set apart from the
   normative text with <code>class="note"</code>, like this:
 <p class="note">Note, this is an informative note.</p>
 <h2 id="page-terms">Page Terminology</h2>
 <p>The following terminology and accompanying diagrams help to describe the
 page model:</p>
 <dl>
   <dt id="page-sheet">Page sheet</dt>
   <dd><img src="PageSheet.png" style="float: right;" alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"
   height="148" width="194">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.</dd>
   <dt id="printable-area">Printable and non-printable areas</dt>
   <dd>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 <em>is</em> 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
   <em class="RFC2119">MAY</em> 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
   <a href="#renderingpages">Rendering page boxes that do not fit a page sheet</a> and
   <a href="#content-outside-box">Content outside the page box</a>.</dd>
   <dt id="page-orientation">Page Orientation</dt>
   <dd>The page orientation is defined by comparing the length of the edges of a
   <a href="#page-box">page box</a>. 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'.</dd>
   <dt id="portrait">Portrait Orientation</dt>
   <dd>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.</dd>
   <dt id="landscape">Landscape Orientation</dt>
   <dd>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.
   <span class="note">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.</span>
   </dd>
   <dt id="duplex-printing">Duplex Printing</dt>
   <dd>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.</dd>
   <dt id="binding-edge">Binding Edge</dt>
   <dd>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.</dd>
   <dt id="facing-pages">Facing Pages</dt>
   <dd>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.</dd>
   <dt id="left-page">Left Page</dt>
   <dd>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 <span class="css">':left'</span> page
   selector.</dd>
   <dt id="right-page">Right Page</dt>
   <dd>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 <span class="css">':right'</span>
   page selector.</dd>
 </dl>
 <h2 id="page-box-page-rule">The Page Model</h2>
 <p>In the paged media formatting model, the document is transferred into one
 or more page boxes. The <dfn id="page-box">page box</dfn> 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 <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
 <img src="PageBox.png" style="float: right;" alt="" height="266" width="267">
 <p>As with other CSS <a href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box
 consists of margin, border, padding, and content areas. The content and
 margin areas of a page box have special functions:</p>
 <ul>
   <li>The content area of a page box is called the <dfn id="page-area">page
   area</dfn>. 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 <a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing block</a>
   of the document.</li>
   <li>The margin area of a page box is divided into
 <dfn>page-margin boxes</dfn>.
   Each page-margin box has its own margin, border, padding and content areas.
   Page-margin boxes are typically used to display running headers and footers.</li>
 </ul>
 <p>The properties of a <i>page box</i> are determined by properties
 <a href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a> within the
 <i>page context</i>, which is the
 <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration block</a> of the
 <code>@page</code> rule. Similarly the properties of a <i>page-margin box</i>
 are determined by properties declared within its <i>margin context</i>.
 Declarations in the page context can affect the page box and/or inherit
 to the page-margin boxes, but they do not apply to or inherit into the
 document's root element or other content.</p>
 <p>The <i>containing block</i> of the page box is specified using the 'size'
 property in the <i>page context</i>. The width and horizontal margins
 of the page box are then calculated exactly as for a
 <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
 block element in normal flow</a>. [[!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.
 <h3 id="painting">
 Page Backgrounds and Painting Order</h3>
   <p>When drawing a page of content, the page layers are painted in the
   following painting order (bottommost first):
   <ol>
     <li>page background
     <li>document canvas
     <li>page borders
     <li>document contents
     <li>page-margin boxes
   </ol>
   <p>In the page model, the page background behaves similar to the root background:
   its <a href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background painting area</i></a>
   is the entire page box, including its margins (regardless of 'background-clip').
   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 <a href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background positioning area</i></a>,
   like the <i>background painting area</i>, is the page's margin box).
   <p>The document canvas background is drawn as the page box's background:
   by default its <i>background painting area</i> 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.
   <p>The UA may support the <code>z-index</code> property for page-margin boxes.
   With respect to the page-margin boxes,
   the document canvas, page borders, and all of the document contents
   are treated as a single element with a <code>z-index</code> value of '0':
   the page-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 <code>position</code> property does not apply to page-margin boxes,
   <code>z-index</code> always affects page-margin boxes
   as if they were positioned elements
   regardless of the <code>position</code> property's value.
   <p>The default painting order,
   or <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree order",
   of page-margin boxes with respect to each other is not specified.
   However, the page-margin boxes are defined to come
   after the page box and its contents.
   <span class="issue">Suggestions here are welcome.</span>
 <h3 id="content-outside-box">Content outside the page box</h3>
 <p>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. </p>
 <p>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:</p>
 <ul>
   <li><p>Content should be allowed slightly beyond the page box to allow pages
   to "bleed".
   <li><p>User agents <em class="RFC2119">SHOULD</em> 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 <dfn id="content-empty">Content-empty page</dfn> 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 page-margin box content <em>is</em> a
   content-empty page.
   <p class="note">Note, however, that generating a small number of empty page
   boxes is sometimes necessary to honor the <span class="css">'left'</span> and
   <span class="css">'right'</span> values for <span class="property">'break-before'</span>
   and <span class="property">'break-after'</span>.</li>
   <li><p>Authors <em class="RFC2119">SHOULD NOT</em> position elements in
   inconvenient locations just to avoid rendering them. Instead:
   <ul>
     <li>To suppress box generation entirely, set the <span class="property">'display'</span> property to <span class="css">'none'</span>.</li>
     <li>To make a box invisible, set the <span class="property">'visibility'</span>
     property.</li>
     </ul></li>
     <li><p>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.</li>
 </ul>
 <h3 id="progression">Page Progression</h3>
 <p>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 <a href="#left-right-first"><code>:left</code> and <code>:right</code>
 pseudo-classes</a>.
 <p>Whether the first page of a document is a left page or a right page
 depends on the page progression of the document. The <dfn>page progression</dfn>
 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.</p>
 <p>The page progression direction is determined as follows:</p>
 <ul>
   <li>If text is laid out in horizontal lines, the page progression is the
   same as the inline progression.</li>
   <li>If text is laid out in vertical lines, the page progression is the
   same as the block progression.</li>
 </ul>
 <p>If the UA supports the 'direction' and 'writing-mode' properties
 from the CSS 3 Writing Modes Module [[CSS3-WRITING-MODES]], it must
 <a href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
 whether the first page is a left or right page from the values of those
 properties on the root element.</p>
 <p>
   To explicitly force a document to begin printing on a left or right page,
   authors can specify a <a href="http://www.w3.org/TR/css3-break/#break-before">'break-before'</a> value
   that that propagates a page break to the root. [[!CSS3-BREAK]]
   The UA must suppress the first (empty) page(s) in this case
   (and the <code>:first</code> selector applies to the first printed page).
 <div class="example">
 <pre>
 html { break-before: always }
 </pre>
 <p>
   For an HTML document with a left-to-right page progression,
   the above style rule will cause the first page of the document
   to print on a ':left' page
 </p>
 <pre>
 html { break-before: left }
 </pre>
 <p>
   For an HTML document,
   the above style rule will cause the first page of the document
   to print on a ':left' page,
   regardless of the page progression.
 </p>
 </div>
 <h2 id="page-selector-and-context">Page Selectors and the Page Context</h2>
 <h3 id="at-page-rule">The @page Rule</h3>
 <p>Authors can specify various aspects of a page box, such as its dimensions,
 orientation, and margins, within an <span class="css">@page</span> rule.
 ''@page'' rules are allowed at the top-level of a stylesheet,
 as well as wherever
 <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a>
 are allowed.
 An <span class="css">@page</span> rule consists of
 the keyword <span class="css">'@page'</span>,
 an <em class="RFC2119">OPTIONAL</em> comma-separated list of
 <i title="page selector">page selectors</i>
 and a block of declarations
 (said to be in the <dfn id="page-context">page context</dfn>).
 An ''@page'' rule can also contain other at-rules,
 interleaved between declarations.
 The current level of this specification
 only allows <a href="#margin-at-rules">margin at-rules</a> inside ''@page''.
 <p>A <dfn id="page-selector">page selector</dfn> is either
 one or more page pseudo-classes,
 or a page name followed by zero or more page pseudo-classes.
 No whitespace is allowed between a page name and a page pseudo-class,
 or between two pseudo-classes.
 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
 <a href="#using-named-pages">pages with specific names</a>.
 <p>If a <i>page selector</i> has multiple pseudo-classes,
 only pages that match all of the pseudo-classes match the selector.
 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.
 If no page selector is given, then the ''@page'' rule applies to all pages.</p>
 <p>Properties declared within the page context apply to the page box.</p>
 <p>If an error is encountered during the processing of a declaration block within
 a page or a margin context, the <a href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for handling parsing errors</a>
 apply; that is, valid declarations within the block are applied.</p>
 <h3 id="pseudo-classes">
   <a id="left-right-first"></a>
   Page pseudo-classes: :left, :right, :first, and :blank
 </h3>
 <p>
   When printing double-sided documents,
   left and right pages are often formatted differently.
   This can be expressed through CSS pseudo-classes defined
   in the <a href="#page-context">page context</a>.
 </p>
 <p>
   All pages are automatically classified by user agents
   as either left pages or right pages,
   based on <a href="#progression">page progression</a>.
   The <span class="css">':left'</span> and <span class="css">':right'</span>
   page pseudo-classes can be used to selectively apply rules
   to only the left or right pages, respectively.
 </p>
 <div class="example">
 The following example creates left and right binding edges using these pseudo-classes:
 <pre>
 @page :left {
 margin-left: 3cm;
 margin-right: 4cm;
 }
 @page :right {
 margin-left: 4cm;
 margin-right: 3cm;
 }
 </pre>
 </div>
 <p>If different declarations have been given for left and right pages, the user
 agent <em class="RFC2119">MUST</em> 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).</p>
 <div class="note">
 <p>
   <em><strong>Note.</strong>
   Adding declarations to the <span class="css">':left'</span> or
   <span class="css">':right'</span> pseudo-class
   does not necessarily influence whether the document
   comes out of the printer double- or single-sided
   (which is outside the scope of this specification).</em>
 </p>
 </div>
 <p>Authors can also specify style for the first page of a document with the
 <span class="css">':first'</span> pseudo-class. Such style rules are applied only
 to the first printed page of a document.</p>
 <div class="example">
 <pre>
 @page { margin: 2cm } /* All margins set to 2cm */
 @page :first {
 margin-top: 10cm /* Top margin on first page 10cm */
 }
 </pre>
 </div>
 <p>
   <i title="content-empty page">Content-empty pages</i>
   that appear as a result of
   <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced page breaks</a>
   can be styled with the <code>:blank</code> pseudo-class.
 <div class="note">
   <p>Only the ''left'', ''right'', ''recto'' and ''verso'' values
     of the 'break-before' and 'break-after' properties
     can generate pages that match '':blank''.
 </div>
 <div class="example">
 <p>In this example, forced page break may occur before <code>h1</code> elements.
 <pre>
 h1 { break-before: left }
 @page :blank {
   @top-center { content: "This page is intentionally left blank" }
 }
 </pre>
 </div>
 <p>
   A page matched by <code>:blank</code> can also be matched
   by other page pseudo-classes.
 <div class="example">
 <p>If headers have been specified on all right pages, a blank right
 page will be matched by both <code>:blank</code>
 and <code>:right</code>. Therefore, margin boxes set on right pages
 will have to be removed unless they are wanted on blank pages. Here is
 an example where the top center header is removed from blank pages,
 while the page number remains:
 <pre>
 h1 { break-before: left }
 @page :blank {
   @top-center { content: none }
 }
 @page :right {
   @top-center { content: "Preliminary edition" }
   @bottom-center { content: counter(page) }
 }
 </pre>
 <p>Due to the higher specificity of <code>:blank</code>
 over <code>:right</code>, the top center header is removed even
 if <code>content: none</code> comes before <code>content: "Preliminary
 edition"</code>.
 </div>
 <div class="note">
 <p><em><strong>Note.</strong> Future versions of CSS may include other page
 pseudo-classes.</em></p>
 </div>
 <h3 id="syntax-page-selector">@page rule grammar</h3>
 <p>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 <em class="RFC2119">MUST</em> adhere
 to the following grammar:</p>
 <p>See [[!CSS21]], Section 4.1.1 and Appendix G for the expansion of missing
 productions:</p>
 <p id="specializatons-of-ATKEYWORD">
 All new lexical tokens are specializations of the ATKEYWORD lexical token:</p>
 <pre class="lexical">
 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"
 <span id="syntax-prod-media">media</span> :
      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
      ;
 <span id="syntax-prod-page" title="">page</span> :
      PAGE_SYM S* [ page_selector S* [ ',' page_selector S* ]* ]?
      '{' S* page_body '}' S*
      ;
 <span id="syntax-prod-page-body">page_body</span> :  /* Can be empty */
      declaration? [ ';' S* page_body ]? |
      page_margin_box page_body
      ;
 <span id="syntax-prod-page-selector">page_selector</span> :
      pseudo_page+ | IDENT pseudo_page*
      ;
 <span id="syntax-prod-pseudo-page">pseudo_page</span> :
      ':' [ "left" | "right" | "first" | "blank" ]
      ;
 <span id="syntax-prod-margin">page_margin_box</span> :
      margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
      ;
 <span id="syntax-prod-margin-sym">margin_sym</span> :
      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
      ;
 </pre>
 <p id="page-selector-syntax-restrict">
 The value 'auto' is not a valid page name and must be treated as matching
 nothing.
 <div class="example">
 <p>The following are examples of page selectors (declaration block intentionally
 left blank)</p>
 <pre>
 @page { ... }
 @page :left { ... }
 @page :right { ... }
 @page LandscapeTable { ... }
 @page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
 @page:first { ... };
 </pre>
 <p>The following are examples of page-margin boxes
 where the declaration blocks are intentionally left blank.</p>
 <pre>
 @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 */ } }
 </pre>
 </div>
 <h3 id="cascading-and-page-context">Cascading in the page context</h3>
 <p>Declarations in page and margin contexts <a href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like declarations in <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.</p>
 <p>The specificity of page selectors is computed in a manner analogous to the
 computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
 module:</p>
 <p>Each comma-separated selectors in the same ''@page'' rule
   match pages with its own specificity.
   ''@page'' rules without selectors are considered to have a single,
   empty selector (whose specificity is zero.)
 <ul>
   <li>Count the number of page names (= <var>f</var>)
     <p class="note">This is 0 or 1.
   <li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)
   <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
 </ul>
 <p>
  Specificities are compared by comparing the three components in order:
  the specificity with <var>f</var> larger a value is more specific;
  if the two <var>f</var> values are tied,
  then the specificity with a larger <var>g</var> value is more specific;
  if the two <var>g</var> values are also tied,
  then the specificity with a larger <var>h</var> value is more specific;
  if all the values are tied, the two specifities are equal.
 <p>
   Due to storage limitations,
   implementations may have limitations on
   the size of <var>f</var>, <var>g</var>, or <var>h</var>.
   If so, values higher than the limit must be clamped to that limit,
   and not overflow.
 <p class="note">
 Note: Repeated occurrances of the same pseudo-classes are allowed
   and do increase specificity.
 <div class="example">
 <p>Some page specificity calculation examples follow:</p>
 <pre>
 @page { } /* specificity = (0,0,0) */
 @page :left { } /* specificity = (0,0,1) */
 @page :first { } /* specificity = (0,1,0) */
 @page artsy { } /* specificity = (1,0,0) */
 @page artsy:left { } /* specificity = (1,0,1) */
 @page artsy:first { } /* specificity = (1,1,0) */
 </pre>
 </div>
 <div class="example">
 <p>Consider the following usage example:</p>
 <pre>
 @page {
   margin-left: 3cm;
 }
 @page :left {
   margin-left: 4cm;
 }
 </pre>
 <p>Due to the higher specificity of the pseudo-class selector,
 the left margin on left pages will be 4cm and all other pages
 (the right-facing pages) will have a left margin of 3cm.
 </div>
 <div class="example">
 <p>In this example, the higher specificity of the green rules wins over the red
 rule.
 Therefore the first page will have blue text in the top-left page-margin box
 and green text in the top-right page-margin box,
 while subsequent pages will have red text in the page-margin boxes.</p>
 <pre>
 @page :first {
   color: green;
   @top-left {
     content: "foo";
     color: blue;
   }
   @top-right {
     content: "bar";
   }
 }
 @page { color: red;
   @top-center {
     content: "Page " counter(page);
   }
 }
 </pre>
 </div>
 <div class="example">
 <p>Page contexts cascade, so the following stylesheet would style pages with 25
 millimeter margins and 14 point type in the page-margin boxes:</p>
 <pre>
 @page { margin: 25mm;}
 @page { font-size: 14pt;}
 </pre>
 </div>
 <h2 id="margin-boxes">Page-Margin Boxes</h2>
   <p>Page-margin boxes are boxes within the page margin that,
   like pseudo-elements, can contain generated content.
   <p>Page-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.
   <div class="example">
     <p>Typically, a <dfn>page header</dfn> is located at the top of the page
     in documents with a predominately horizontal writing direction
     and on the side opposite the <a href="#binding-edge">binding edge</a>
     for documents with a predominately vertical writing direction.
     One possible design of page headers for horizontally written documents uses the
     ''@top-left-corner'', ''@top-left'', ''@top-center'', ''@top-right'' and ''@top-right-corner''
     page-margin boxes.
     Another design, for vertically written documents, could use the
     ''@right-top'', ''@right-middle'', and ''@right-bottom'' page-margin boxes
     for <a href="#right-page">right facing pages</a> and
     ''@left-top'', ''@left-middle'', and ''@left-bottom''
     for <a href="#left-page">left facing pages</a>.
     <p>The <dfn>page footer</dfn> is typically at
     the opposite end of the page from the page header.
     For example, the design of a horizontally written document with a page header
     at the top of the page could use the
     ''@bottom-left-corner'', ''@bottom-left'', ''@bottom-center'', ''@bottom-right'' and ''@bottom-right-corner''
     page-margin boxes as the page footer.
     The design of a vertically written document could use
     the page-margin boxes of the binding edge of the page for the page footer.
   </div>
   <p>Page-margin boxes are positioned with respect to the page area
   and are independent of page orientation,
   for example the top page-margin boxes are above the page area
   in both portrait and landscape orientation.
   The various page-margin boxes are defined
   and illustrated in the diagram below:
   <table id="margin-box-def" class="data" summary="defintion of each of the page-margin boxes">
     <caption>Table 1 Page-Margin Box Definitions</caption>
     <thead>
       <tr>
         <th>Box</th>
         <th>Description</th>
         <th>Placement</th>
       </tr>
     </thead>
     <tbody>
       <tr id="top-margin-boxes-def">
         <th id="top-left-corner-box-def">top-left-corner</th>
         <td>a fixed-size box defined by the intersection of the top and left margins of the
         page box</td>
         <td><img src="TopLeftCornerBox.png" alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
         height="47" width="181"></td>
       </tr>
       <tr id="top-left-box-def">
         <th>top-left</th>
         <td>a variable-width box filling the top page margin between the top-left-corner
         and top-center page-margin boxes</td>
         <td><img src="TopLeftMarginBox.png" alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"
         height="47" width="181"></td>
       </tr>
       <tr id="top-center-box-def">
         <th>top-center</th>
         <td>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
         page-margin boxes</td>
         <td><img src="TopCenterMarginBox.png" alt="the top center box with margin, border, and padding, centered within the page's top margin"
         height="47" width="181"></td>
       </tr>
       <tr id="top-right-box-def">
         <th>top-right</th>
         <td>a variable-width box filling the top page margin between the top-center and
         top-right-corner page-margin boxes</td>
         <td><img src="TopRightMarginBox.png" alt="the top right box with margin, border, and padding, nested within the page's top margin"
         height="47" width="181"></td>
       </tr>
       <tr>
         <th id="top-right-corner-box-def">top-right-corner</th>
         <td>a fixed-size box defined by the intersection of the top and right margins of
         the page box</td>
         <td><img src="TopRightCornerMarginBox.png" alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
         height="47" width="181"></td>
       </tr>
       <tr id="left-margin-boxes-def">
         <th id="left-top-box-def">left-top</th>
         <td>a variable-height box filling the left page margin between the top-left-corner
         and left-middle page-margin boxes</td>
         <td rowspan="3"><img src="LeftMarginBoxes.png" alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"
         height="226" width="181"></td>
       </tr>
       <tr id="left-middle-box-def">
         <th>left-middle</th>
         <td>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 page-margin boxes</td>
       </tr>
       <tr id="left-bottom-box-def">
         <th>left-bottom</th>
         <td>a variable-height box filling the left page margin between the left-middle and
         bottom-left-corner page-margin boxes</td>
       </tr>
       <tr id="right-margin-boxes-def">
         <th id="right-top-box-def">right-top</th>
         <td>a variable-height box filling the right page margin between the
         top-right-corner and right-middle page-margin boxes</td>
         <td rowspan="3"><img src="RightMarginBoxes.png" alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"
         height="226" width="181"></td>
       </tr>
       <tr id="right-middle-box-def">
         <th>right-middle</th>
         <td>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 page-margin boxes</td>
       </tr>
       <tr id="right-bottom-box-def">
         <th>right-bottom</th>
         <td>a variable-height box filling the right page margin between the right-middle
         and bottom-right-corner page-margin boxes</td>
       </tr>
       <tr id="bottom-margin-boxes-def">
         <th id="bottom-left-corner-box-def">bottom-left-corner</th>
         <td>a fixed-size box defined by the intersection of the bottom and left margins of
         the page box</td>
         <td><img src="BottomLeftCornerBox.png" alt="bottom left corner box with margin, border, and padding, nested within the page margin at the intersection of the left and bottom page margins"
         height="48" width="181"></td>
       </tr>
       <tr id="bottom-left-box-def">
         <th>bottom-left</th>
         <td>a variable-width box filling the bottom page margin between the
         bottom-left-corner and bottom-center page-margin boxes</td>
         <td><img src="BottomLeftMarginBox.png" alt="bottom left page-margin box with margin, border, and padding, nested within the page's bottom margin next to the bottom-left-corner box"
         height="48" width="181"></td>
       </tr>
       <tr id="bottom-center-box-def">
         <th>bottom-center</th>
         <td>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 page-margin boxes</td>
         <td style="vertical-align: middle;"><img src="BottomCenterMarginBox.png" alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
         height="48" width="181"></td>
       </tr>
       <tr id="bottom-right-box-def">
         <th>bottom-right</th>
         <td>a variable-width box filling the bottom page margin between the bottom-center
         and bottom-right-corner page-margin boxes</td>
         <td><img src="BottomRightMarginBox.png" alt="bottom right page-margin box with margin, border, and padding, nested within the page's bottom margin and next to the bottom-right-corner box"
         height="48" width="181"></td>
       </tr>
       <tr id="bottom-right-corner-box-def">
         <th>bottom-right-corner</th>
         <td>a fixed-size box defined by the intersection of the bottom and right margins of
         the page box</td>
         <td><img src="BottomRightCornerBox.png" alt="bottom right corner box with margin, border, and padding, nested within the page margin at the intersection of the right and bottom page margins"
         height="48" width="181"></td>
       </tr>
     </tbody>
   </table>
 <h3 id="margin-at-rules">At-rules for page-margin boxes</h3>
 <p>Page-margin boxes are created by
 <a href="#margin-at-rules">margin at-rules</a>
 inside the <a href="#page-context">page context</a>.
 These rules should come after any declarations in the page context as legacy
 clients may not handle declarations after margin at-rules correctly.</p>
 <p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an
 <a href="#specializatons-of-ATKEYWORD">ATKEYWORD</a>
 that identifies the page-margin box
 (e.g. <span class="css">'@top-left'</span>) and a block of declarations (said
 to be in the <dfn id="margin-context">margin context</dfn>).</p>
 <div class="example">
 <p>The following style sheet establishes a page header containing the title
 ("Hamlet") on the left side and the page number, preceded by "Page ", on the
 right side:</p>
 <pre>
 @page {
   size: 8.5in 11in;
   margin: 10%;
   @top-left {
     content: "Hamlet";
   }
   @top-right {
     content: "Page " counter(page);
   }
 }
 </pre>
 </div>
 <h3 id="populating-margin-boxes">Populating page-margin boxes</h3>
 <p>As with the '':before'' and '':after'' pseudo-elements,
 a specified 'content' of ''normal'' on a page-margin box computes to ''none'',
 and the page-margin box is <dfn>generated</dfn>
 if and only if the computed value
 of its 'content' property is not 'none'.
 Otherwise it behaves as if it had ''display: none''.
 <div class="example">
 <p>The following style sheet creates a green box in each corner of the page
 except the bottom-left corner.</p>
 <pre>
   @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; }
   }
 </pre>
 </div>
 <h3 id="margin-dimension">Computing Page-margin Box Dimensions</h3>
 <p>The width and height of each page-margin box is determined by the rules
 below. These rules define the equivalent of CSS2.1 Sections 10.3 and
 .6 for page-margin boxes.</p>
 <p>The rules for applying 'min-height', 'max-height', 'min-width', and
 'max-width' [[!CSS21]] do apply to page-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.
 <h4 id="margin-box-terms"><a id="max-margin-dimension"></a>Page-Margin Box Layout Terminology</h4>
   <p>In addition to the box model definitions in CSS2.1 [[!CSS21]],
   and the sizing terms in CSS Intrinsic Sizing [[!CSS3-SIZING]],
   the following terms are defined for use
   in the subsequent page-margin box calculations:
   <dl>
     <dt><dfn>available width</dfn></dt>
     <dd>The sum of the page’s
       left border width, left padding, <a href="#page-box">page area</a> width,
       right padding, and right border width.
       In other words, it is the distance between
       the <a href="#page-box">page box</a>’s left right border edges.
       This quantity is used  when calculating dimensions
       of the top and bottom page-margin boxes.
     <dt><dfn>available height</dfn></dt>
     <dd>The sum of the page’s
       top border width, top padding, <a href="#page-box">page area</a> height,
       bottom padding, and bottom border width.
       In other words, it is the distance between
       the <a href="#page-box">page box</a>’s top bottom border edges.
       This quantity is used when calculating dimensions
       of the left and right page-margin boxes.
     <dt><dfn>outer width</dfn></dt>
     <dd>The width of the
       <a href="http://www.w3.org/TR/CSS21/box.html#outer-edge">outer edge</a>,
       as defined in [[!CSS21]].
     <dt><dfn>outer min width</dfn></dt>
     <dd>Like the <i>outer width</i>, except that
     <a href="http://www.w3.org/TR/css3-sizing/#min-content">''min-content''</a>
     is used when the width is ''auto''.
     <dt><dfn>outer max width</dfn></dt>
     <dd>Like the <i>outer width</i>, except that
     <a href="http://www.w3.org/TR/css3-sizing/#max-content">''max-content''</a>
     is used when 'width' is ''auto''.
   </dl>
   <p>The <dfn>containing block</dfn> for a corner page-margin box is
   the rectangle defined by the intersection of the two page margins meeting at that corner.
   <p>For all other page-margin boxes,
   the <dfn>containing block</dfn> is the rectangle
   formed by the encapsulating page margin minus the containing blocks of the
   adjacent corners' page-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 <i>available width</i>
   (for top and bottom page-margin boxes) or
   <i>available height</i>
   (for left and right page-margin boxes).</p>
 <h4 id="variable-sizing">
 Page-Margin Box Variable Dimension Computation Rules</h4>
 <p>The following rules apply to 'top-left', 'top-center' and 'top-right'
 page-margin boxes,
 which are referred to as A, B, and C, respectively, in this section.</p>
 <h5 id="variable-auto-margins">Margins</h5>
 <p>If the 'margin-left' or 'margin-right' property of any of the three boxes
 computes to ''auto'', the used value is zero.</p>
 <h5 id="variable-auto-sizing">Resolving ''auto'' widths</h5>
 <p>The following algorithm determines the used width of each box.
 For this purpose, boxes that are not <i>generated</i>
 are assumed to have a 'width' and an <i>outer width</i> of zero.
 </p>
 <p class="note">
 Note: The high-level goals are (in order of priority) to center the middle
 box (B) if it is generated, to minimize overflow and overlap, and to
 distribute space proportionally to the amount of content.</p>
   <p>If the middle box (B) is not <i>generated</i>,
   distribute the <i>available width</i> to A and C as follows:
   <ul>
     <li>
       If only one box has 'width: auto',
       its used width is resolved so that
       the sum of the <i>outer width</i>s equals <i>available width</i>.
     </li>
     <li id="flex-fit">
       If A and C both have 'width: auto', distribute the space to each box as follows:
       <ol>
         <li>If the sum of the outer <i>max-content widths</i> is less than the <i>available width</i>,
             call that difference the <i>flex space</i>.
             Calculate each box's <i>flex factor</i> as proportional to
             its outer <i>max-content width</i>,
             and set its used outer width to:
               <pre><i>max-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
         <li>Otherwise if the sum of the outer <i>min-content widths</i> is less than the <i>available width</i>,
             call that difference the <i>flex space</i>
             calculate each box's <i>flex factor</i> as proportional to
             its <i>max-content</i> minus <i>min-content</i>,
             and set its used outer width to:
               <pre><i>min-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
         <li>Otherwise,
             calculate its outer size as in the previous case,
             but set each box's <i>flex factor</i> as proportional to
             its outer <i>min-content width</i>.
       </ol>
       In each case, both <i>flex factors</i> are assumed to be ''1'' if their sum is equal to zero.
     </li>
   </ul>
   <p>If the middle box (B) is <i>generated</i>,
   determine the ''auto'' widths of A, B, and C as follows:
   <ol>
     <li>
       First, resolve any ''auto'' width of the middle box (B):
       Assume there are two boxes, B and AC,
       where each of AC's dimensions is double the maximum of A and C.
       (This preserves B's centering.)
       Distribute the space to these two boxes (B and the imaginary AC)
       as described for A and C <a href="#fit2">above</a>.
     <li>
       Then, resolve any ''auto'' widths of the side boxes (A and C)
       by setting that box's outer width to
       <pre>(<i>available width</i> &minus; <i>used outer size of B</i>) ÷ 2<pre>
     </li>
   </ol>
 <h5 id="variable-minmax">Handling 'min-width' and 'max-width'</h5>
 <p>
   The 'min-width' and 'max-width' properties [[CSS21]] apply to page-margin
   boxes in the variable dimension like on normal elements, except that the
   three boxes on the same side are considered together.
 </p>
 <p>
   More precisely:
 </p>
 <ol>
   <li>
     The tentative used widths are calculated
     (without 'min-width' and 'max-width') following the rules under
     <a href="#marginbox-variabledim-with">Resolving ''auto'' widths</a>
     above.
   </li>
   <li>
     If the tentative used width of any of the three boxes
     is greater than 'max-width', the rules above are applied again,
     but this time using the computed value of 'max-width'
     as the computed value for 'width'.
   </li>
   <li>
     If the resulting width of any of the three boxes
     is smaller than 'min-width', the rules above are applied again,
     but this time using the value of 'min-width'
     as the computed value for 'width'.
   </li>
 </ol>
 <h5 id="variable-position">Positioning</h5>
 <p>
   Once the dimensions of the boxes are determined,
   they are positioned as follows:
 </p>
 <ul>
   <li>The left outer edge of A is flush with the left edge of the
       containing block</li>
   <li>The outer area of B is centered in the containing block.</li>
   <li>The right outer edge of C is flush with the right edge of the
       containing block.</li>
 </ul>
 <h5 id="variable-mapping">Boxes on other sides</h5>
 <p>The used values for 'bottom-left', 'bottom-center' and 'bottom-right'
 page-margin boxes are established by the same rules as
 for 'top-left', 'top-center', and 'top-right', respectively.</p>
 <p>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".</p>
 <p>The used values for 'right-top', 'right-middle' and 'right-bottom'
 page-margin boxes
 are established by the same rules as for 'left-top', 'left-middle' and
 'left-bottom', respectively.</p>
 <h4 id="fixed-sizing">Page-Margin Box Fixed Dimension Computation Rules</h4>
 <p>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' page-margin box's 'height', 'margin-top', and 'margin-bottom'
 properties:</p>
 <ol>
   <li>The following constraint must hold among the used values of the margin
   box's properties:
   <p>'margin-top' + 'border-top-width' + 'padding-top' + 'height' +
   'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = top page margin
   <li>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.
   <li>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'.
   <li>If there is now exactly one value specified as 'auto', its used value
   follows from the equality.
   <li>If 'height' is set to 'auto', any other 'auto' values become '0' and
   'height' follows from the resulting equality
   <li>If both 'margin-top' and 'margin-bottom' are 'auto',
   their used values are equal.
   This vertically centers the page-margin box content
   within the top page margin.
 </ol>
 <p>The same rules apply to the bottom page-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'.</p>
 <p>Analogous rules govern the properties for the left and right
 page-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) page-margin boxes,
 the specified value of 'margin-left' ('margin-right') is ignored.</p>
 <h3 id="margin-box-ex">Page-margin box examples</h3>
 <p>The following is a collection of examples of page-margin box usage.</p>
 <div class="example">
 <p>Here is an example of a page with only a top-left header:</p>
 <pre>
 @page {
 @top-left { content: "Header in Left Cell (top-left)" }
 }
 </pre>
 <p>Because there are no contents defined for the top-center or the top-right
 page-margin boxes, the extent of the top-left page-margin box
 is allowed to cross the center of the page box.</p>
 <p><img alt="Header Example 1" src="header-ex-1.png" height="177" width="737"></p>
 </div>
 <div class="example">
 <p>The following is an example of a page with a centered header:</p>
 <pre>
 @page {
 @top-center { content: "Header in Center Cell (top-center)" }
 }
 </pre>
 <p><img alt="Header Example 2" src="header-ex-2.png" height="177" width="737"></p>
 </div>
 <div class="example">
 <p>The following is an example of a page with a single header in the top-right
 page-margin box:</p>
 <pre>
 @page {
 @top-right { content: "Header in Right Cell (top-right)" }
 }
 </pre>
 <p>Because the content of the center cell is empty, the extent of the top-right
 page-margin box is allowed to cross the center of the page box.</p>
 <p><img alt="Header Example 3" src="header-ex-3.png" height="177" width="737"></p>
 </div>
 <div class="example">
 <p>The following is an example of a page with a top-center and a top-left header:</p>
 <pre>
 @page {
 @top-left { content: "Left Cell (top-left)" }
 @top-center { content: "Header in Center Cell (top-center)" }
 }
 </pre>
 <p><img alt="Header Example 4" src="header-ex-4.png" height="177" width="737"></p>
 </div>
 <div class="example">
 <p>The following is an example of a page with a top-center and a top-right header:</p>
 <pre>
 @page {
 @top-center { content: "Header in Center Cell (top-center)" }
 @top-right { content: "Right Cell (top-right)" }
 }
 </pre>
 <p><img alt="Header Example 5" src="header-ex-5.png" height="177" width="737"></p>
 </div>
 <div class="example">
 <p>The following is an example of a page with top-left and top-right headers:</p>
 <pre>
 @page {
 @top-left { content: "Header in top-left with approx. "
                    "twice as many words as right cell." }
 @top-right { content: "Right cell (top-right)" }
 }
 </pre>
 <p>Because there are no center cell contents, the extent of the top-left is
 allowed to cross the center of the page box.</p>
 <p><img alt="Header Example 6" src="header-ex-6.png" height="177" width="737"></p>
 </div>
 <h2 id="page-properties">Page Properties</h2>
 <div>
 <p>The following properties, when used in the <a href="#page-context">page
 context</a>, apply to the page box:</p>
 <ul>
   <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>
   <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
   <li><a href="#page-size">size</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a></li>
 </ul>
 <p>The following properties, when used in a <a href="#margin-at-rule">margin
 context</a>, apply to page-margin boxes and their content:</p>
 <ul>
   <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
   <li><a href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
   <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
   <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
   <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
   <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
   <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
   <li><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
 </ul>
 <p>A detailed list of properties that <em class="RFC2119">MUST</em> be supported
 within page and margin contexts by a conforming implementation can be found in
 <a href="#properties-list">Appendix A</a>.</p>
 <p>Other properties defined by [[!CSS21]] do not apply in these contexts. Behavior
 for properties not included in CSS 2.1 and not listed here or in Appendix A is
 undefined.</p>
 <p class="note">
 Note: The intent of leaving other properties undefined is to allow the gradual
 addition of appropriate CSS3 properties as they emerge, without having to
 update this specification with each addition.</p>
 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
 elements in the document</a>, both the page context and the margin context
 have a computed value for every property, even if that property does not
 apply to the page or page-margin box.</p>
 <p>The normal rules for CSS properties apply with the following exceptions:</p>
 <ul>
   <li>page-margin boxes inherit from the page context.
   The page context inherits from the root element.
   However, since the previous revision of CSS Paged
   Media Level 3 did not specify this point, an implementation that sets
   inherited properties in the page context to their initial values (as for the
   root element) is also conformant to CSS Paged Media Level 3. Note that this
   exception will be removed in Level 4.
   <li>Values in units of ''em'' and ''ex'' are interpreted relative to the font
   associated with their context. When used on the 'font-size' property in the
   margin context, they are relative to the font of the page context. When used
   on the 'font-size' property in the page context, they are relative to the
   'font-size' of the root element. However, since a previous revision of CSS
   Paged Media Level 3 was ambiguous on this point, an implementation that
   treats ''em'' and ''ex'' on 'font-size' as relative to the initial value is
   also conformant to CSS Paged Media Level 3. Note that this exception will
   be removed in Level 4.
   <li>Percentage values on the margin and padding properties are relative to the
   dimensions of the containing block. For right and left values, percentages are
   relative to the width of the containing block; for top and bottom values,
   percentages are relative to the height of the containing block.</li>
   <li>The used values of 'width' and 'height' have special computation rules
   for page boxes and page-margin boxes; see <a href="#page-size">Page Size</a>
   and <a href="#margin-box-dimensions">Computing Page-Margin Box Dimensions</a>.
   <li>The page background is positioned and painted
     <a href="#painting">as described above</a>.
   <li>The rules for counter scoping are modified <a href="page-based-counters">as
   described below</a>.</li>
   <li>
     As on the '::before' and '::after' pseudo-elements,
     the ''normal'' value of the 'content' property computes to ''none''
     on page-margin boxes.
   </li>
   <li>On page-margin boxes, the 'vertical-align' property behaves
   <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as specified for table cells</a>.
   It <em>always</em> performs alignment in the vertical dimension,
   regardless of writing mode.
 </ul>
 <p>It is <em class="RFC2119">recommended</em> that user agents establish a default
 page margin via the user agent stylesheet that includes any non-printable area.
 It is further <em class="RFC2119">recommended</em> that authors assume that the
 default page area will not include unprintable regions.</p>
 <h3 id="page-based-counters">Page-based counters</h3>
 <p>Counters can be defined and controlled within an <span class="css">'@page'</span>
 rule, and used as content in page-margin boxes.
 This is useful for maintaining a page count.</p>
 <p>A 'counter-increment' within either a page or margin context causes the counter
 to increment with the generation of each page box.</p>
 <p>If a counter is reset or incremented within the page context, it is in scope
 for all page-margin boxes and obscures all counters of the same name within the
 document.</p>
 <p>If a counter is reset or incremented within a margin context, it is in scope
 for that page-margin box and obscures any counters of the same name
 in both the page context and the document.</p>
 <p>If a counter that has not been reset or incremented within the margin context
 or the page context is used by counter() or counters() in the margin context,
 then the resultant value is exactly
 as if the page-margin box were an element within
 the document at the start of the page, inside the deepest element in the normal
 flow that spans the page break. Use of the counter in this way does not affect
 the calculation of the counter's value.</p>
 <p>
   A counter named ''page'' is automatically created
   and incremented by 1 on every page of the document,
   unless the 'counter-increment' property in the <i>page context</i>
   explicitly specifies a different increment for the ''page'' counter.
   The implied ''page'' counter is a real counter,
   and can be directly affected using the 'counter-increment' and 'counter-reset' properties
   when named explicitly in those properties.
   It can also be used in the 'counter()' and 'counters()' function forms.
 </p>
 <div class="example">
 <p>The following rules result in the placement of the current page number in the
 middle of the outside margin of each page.</p>
 <pre>
 @page {
   margin: 10%;
   @top-center {
     font-family: sans-serif;
     font-weight: bold;
     font-size: 2em;
     content: counter(page);
   }
 }
 </pre>
 <p>Adding the following rule will make all pages even-numbered.</p>
 <pre>
 @page {
   counter-increment: page 2;
 }
 </pre>
 </div>
 <p>Additionally, a counter named ''pages'' is automatically created by the UA.
 Its value is always the total number of pages in the document. (In continuous
 media this is always 1.) The value of ''pages'' cannot be manipulated: while
 'counter-reset' and 'counter-increment' statements that set it are valid, they
 have no effect.
 <p>In all other respects, page-associated counters behave as described in
 [[!CSS21]], <a href="TR/CSS21/generate.html#scope">Nested Counters and
 Scope</a> and <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.</p>
 <h3 id="margin-text-alignment">Page-margin boxes and default values</h3>
 <p>Properties used within page or margin contexts take their initial values from
 their respective property definitions; however, user agents must behave as
 though the values in the following table were established by rules in the UA
 default style sheet.</p>
 <table id="margin-values" class="data" summary="definition of page-margin box default properties">
   <caption>Table 2. Default values for Page-Margin Boxes</caption>
   <thead>
     <tr>
       <th>Page-margin box</th>
       <th><span class="property">'text-align'</span></th>
       <th><span class="property">'vertical-align'</span></th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><a href="#top-left-corner-box-def">top-left-corner</a></td>
       <td>right</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#top-left-box-def">top-left</a></td>
       <td>left</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#top-center-box-def">top-center</a></td>
       <td>center</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#top-right-box-def">top-right</a></td>
       <td>right</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#top-right-corner-box-def">top-right-corner</a></td>
       <td>left</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#left-top-box-def">left-top</a></td>
       <td>center</td>
       <td>top</td>
       </tr>
     <tr>
       <td><a href="#left-middle-box-def">left-middle</a></td>
       <td>center</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#left-bottom-box-def">left-bottom</a></td>
       <td>center</td>
       <td>bottom</td>
       </tr>
     <tr>
       <td><a href="#right-top-box-def">right-top</a></td>
       <td>center</td>
       <td>top</td>
       </tr>
     <tr>
       <td><a href="#right-middle-box-def">right-middle</a></td>
       <td>center</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#right-bottom-box-def">right-bottom</a></td>
       <td>center</td>
       <td>bottom</td>
       </tr>
     <tr>
       <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a></td>
       <td>right</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#bottom-left-box-def">bottom-left</a></td>
       <td>left</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#bottom-center-box-def">bottom-center</a></td>
       <td>center</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#bottom-right-box-def">bottom-right</a></td>
       <td>right</td>
       <td>middle</td>
       </tr>
     <tr>
       <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a></td>
       <td>left</td>
       <td>middle</td>
     </tr>
   </tbody>
 </table>
 <div class="example">
 <p>This example style sheet could be used to create a centered header with the
 current chapter name:</p>
 <pre>body {counter-reset: chapter;}
 div.chapter {counter-increment: chapter;}
 @page {
 margin: 10%;
 @top-center { content: "Chapter" counter(chapter) }
 }
 </pre>
 </div>
 <h2 id="page-size">Page Size</h2>
 <p>People around the world use many different paper sizes. It is a goal of this
 specification that web content should be adaptable to a range of different
 sizes without having to write a specific style sheet for each paper size.</p>
 <p>However, in some situations it is important that a certain page size achieves a
 certain style. One way to achieve this goal is to utilize the 'size' property,
 which indicates that the document should preferentially be displayed on a
 surface of a certain size; another method is to use Media Queries [[MEDIAQ]]
 which allow different style sheets to be applied to different page sizes.</p>
 <h3 id="page-size-prop">Page size: the 'size' property</h3>
 <table class="propdef" summary="definition of the size property">
   <tr>
     <th>Name:
     <td><dfn id="size">size</dfn>
   <tr>
     <th>Value:
     <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]
   <tr>
     <th>Initial:
     <td>auto
   <tr>
     <td><em>Applies to:</em>
     <td>page context
   <tr>
     <th>Inherited:
     <td>N/A
   <tr>
     <th>Percentages:
     <td>N/A
   <tr>
     <th>Media:
     <td>paged
   <tr>
     <td><em>Computed value:</em>
     <td>specified value
 </table>
 <p>This property specifies the target size and orientation of the
 <a href="#page-box">page box</a>’s containing block.
 In the general case, where one page box is rendered onto one <a href="#page-sheet">page sheet</a>,
 the 'size' property also indicates the size of the destination page sheet.
 <p>The size of a page box can either be "absolute" (fixed size) or "scalable"
 (i.e., fitting available sheet sizes).
 The first three values in the table below can be used to create scalable page
 boxes.
 Other values define a fixed-size page box, and thereby indicate the preferred
 output media size. When possible, output should be rendered on the media size
 indicated.
 If the specified size is not available, the rules for
 <a href="#renderingpages">transposing a page box to a different size</a>
 apply.</p>
 <p>If a <code>size</code> property declaration is qualified by a ''width'',
 ''height'', ''device-width'', ''device-height'', ''aspect-ratio'',
 ''device-aspect-ratio'' or ''orientation''
 media query [[!MEDIAQ]] (or other conditional on the size of the paper), then
 the declaration must be
 <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
 queries do not honor 'size': they assume the paper size that would be chosen
 if no @page rules were specified.</p>
 <p class=issue>It would be useful if media queries could respond at least
 to sizes specified on an unqualified @page.
 <div class="example">
   <p>In the following example
   <pre>
   @page {
     size: 4in 6in;
   }
   @media (max-width: 6in) {
     @page {
       size: letter;
     }
   }
   </pre>
   <p>The second <code>size</code> declaration is ignored, i.e. the specified value
   of the <code>size</code> property is <code>4in 6in</code>.
 </div>
 <table class="page-sizes">
 <tr>
 <th>Value</th>
 <th>Description</th>
 </tr>
 <tr>
 <td>auto</td>
 <td>The page box will be set to a size and orientation chosen by the UA. In the
 usual case, the page box size and orientation is chosen to match the target
 media sheet.</td>
 </tr>
 <tr>
 <td>landscape</td>
 <td>Specifies that the page's content be printed in landscape orientation. The
 longer sides of the page box are horizontal. If a <span class="css">'&lt;page-size&gt;'</span> is not specified, the size of the page sheet
 is chosen by the UA.</td>
 </tr>
 <tr>
 <td>portrait</td>
 <td>Specifies that the page's content be printed in portrait orientation. The
 shorter sides of the page box are horizontal. If a <span class="css">'&lt;page-size&gt;'</span> is not specified, the size of the page sheet
 is chosen by the UA.</td>
 </tr>
 <tr>
 <td>&lt;length&gt;</td>
 <td>The page box will be set to the given absolute dimension(s). If only one length
 value is specified, it sets both the width and height of the page box (i.e.,
 the box is a square). If two length values are specified, the first establishes
 the page box width, and the second the page box height. Values in units of
 <span class="css">'em'</span> and <span class="css">'ex'</span> refer to the
 page context's font. Negative lengths are illegal.</td>
 </tr>
 <tr>
 <td>&lt;page-size&gt;</td>
 <td>A page size can be specified using one of the following media names. This is
 the equivalent of specifying the <span class="css">'&lt;page-size&gt;'</span>
 using length values. The definition of the the media names comes from
 <cite>Media Standardized Names</cite> [[!PWGMSN]].
 <dl>
 <dt>A5</dt>
 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>
 <dt>A4</dt>
 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.</dd>
 <dt>A3</dt>
 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>
 <dt>B5</dt>
 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>
 <dt>B4</dt>
 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>
 <dt>letter</dt>
 <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11
 inches high</dd>
 <dt>legal</dt>
 <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches
 high.</dd>
 <dt>ledger</dt>
 <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches
 high.</dd>
 </dl></td>
 </tr>
 </table>
 <p>The '&lt;page-size&gt;' names can be used in conjunction with 'landscape' or
 'portrait' to indicate both size and orientation.</p>
 <h4>Some examples:</h4>
 <div class="example">
 <pre>
 @page {
 size: A4 landscape;
 }
 </pre>
 <p>The above example sets the width of the page box to be 297mm and the height to
 be 210mm. The page box in this example should be rendered on a page sheet size
 of 210 mm by 297 mm.</p>
 </div>
 <div class="example">
 <p>In the following example, the outer edges of the page box will align with the
 page. The percentage value on the <span class="property">'margin'</span>
 property is relative to the page size so if the page sheet dimensions are 210mm
 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page
 borders or padding set in the UA default style sheet, the resulting page area
 is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>
 <pre>
 @page {
 size: auto;/* auto is the initial value */
 margin: 10%;
 }
 </pre>
 </div>
 <div class="example">
 <pre>
 @page {
 size: 8.5in 11in;/* width height */
 }
 </pre>
 <p>The above example sets the width of the page box to be 8.5 inches and the
 height to be 11 inches. This indicates that the page sheet size should be
 .5"x11" and the orientation 'portrait'.</p>
 </div>
 <h4 id="page-size-media-query">Media Queries</h4>
 <p>This section is informative.</p>
 <p>By using Media Queries [[MEDIAQ]], one style sheet can express different
 stylistic preferences for different page sizes. Consider this example:</p>
 <div class="example" style="font-size: 10pt;">
 <pre>
  /* 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;
     }
  }
 </pre>
 </div>
 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
 sheets are given a "1in" page margin.</p>
 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>
 <p>If a page box does not match the target page sheet dimensions, the user agent
 should do one of the following (in order of preference):</p>
 <ol>
   <li>Render the page box at the indicated size on a larger page sheet.</li>
   <li>Rotate the page box 90° if this will make the page box fit the page sheet.</li>
   <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box
   <em class="RFC2119">should</em> be preserved.)</li>
   <li>Reformat the page contents, including 'spilling' onto other page sheets.</li>
   <li>Clip overflowed content (least preferred).</li>
 </ol>
 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before
 performing these operations.</p>
 <h3 id="positioning-page-box">Positioning the page box on the sheet</h3>
 <p>When the page box is smaller than the page size, the user agent <em class="RFC2119">SHOULD</em> either:</p>
 <ul>
   <li>center the page box 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; or</li>
   <li>position the page box in the upper left corner of the page sheet, as this
   may minimize media consumption.</li>
 </ul>
 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this
 regard.</p><!-- "Page selector and page context" -->
 <h2 id="page-breaks">
     <a id="pg-br-before-after"></a>
     <a id="page-break-before"></a>
     <a id="page-break-after"></a>
     <a id="page-break-inside"></a>
     <a id="breaks-inside"></a>
     <a id="orphans"></a>
     <a id="widows"></a>
     <a id="allowed-pg-brk"></a>
     <a id="brk-btw-blocks"></a>
     <a id="brk-btw-lines"></a>
     <a id="brk-end-block"></a>
     <a id="forced-pg-brk"></a>
     <a id="best-pg-brk"></a>
     Page Breaks
 </h2>
 <p>
   The CSS Fragmentation Module [[!CSS3-BREAK]] module
   defines how and where CSS boxes
   can be <i>fragmented</i>, including across page breaks.
   It defines a few properties that indicate where the user agent
   <em class="RFC2119">MAY</em> or <em class="RFC2119">MUST</em> break pages,
   and on what page (left or right) the subsequent content resumes.
   Each page break ends layout in the current <a href="#page-box">page box</a>
   and causes remaining pieces of the document tree to be laid out
   in a new page box.
 </p>
 <h3 id="using-named-pages">Using named pages: 'page'</h3>
 <table class="propdef" summary="property definition">
   <tr>
     <th>Name:
     <td><dfn id="page">page</dfn>
   <tr>
     <th>Value:
     <td>auto | &lt;identifier&gt;
   <tr>
     <th>Initial:
     <td>auto
   <tr>
     <th>Applies to:
     <td>boxes that create <a href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break points
   <tr>
     <th>Inherited:
     <td>no (but see prose)
   <tr>
     <th>Percentages:
     <td>N/A
   <tr>
     <th>Media:
     <td>paged
   <tr>
     <th>Computed value:
     <td>specified value
 </table>
 <p>
   The 'page' property is used to specify a particular type of page (called a <dfn>named page</dfn>)
   on which an element <em class="RFC2119">MUST</em> be displayed.
   If necessary, a <i>forced page break</i> is introduced
   and a new page generated of the specified type.
 <p>
   Page names are case-sensitive identifiers.
   However the ''auto'' value, being a CSS keyword, is
   <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>.
 <div class="example">
 <p>This example will put all tables on a right-hand side landscape page (named
 "rotated"):</p>
 <pre>
 @page rotated { size: landscape }
 table { page: rotated; break-before: right }
 </pre>
 </div>
 <p>
   The 'page' property works as follows:
 <ol>
   <li>
     First, any ''auto'' values are resolved against non-''auto'' ancestors
     (as specified below).
   <li>
     Next,
     a <dfn>preceding 'page' value</dfn> and <dfn>succeeding 'page' value</dfn>
     is determined for each box
     as the value (if any) propagated from its last or first child (respectively),
     else the used value on the box itself.
     A child propagates its own <i title="preceding page value">preceding</i> or <i>succeeding 'page' value</i>
     if and only if the 'page' property applies to it.
   <li>
     If for any two boxes meeting at a <a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break point,
     the <i>preceding 'page' value</i> and <i>succeeding 'page' value</i> do not match,
     then a page break is forced between the two boxes,
     and content after the break resumes on a page box of the named type.
 </ol>
 <p>
   Essentially, the two 'page' values compared are those from the deepest boxes
   meeting at the class 1 break point,
   ignoring any subtrees rooted by boxes to which the 'page' property does not apply.
 <p>
   The 'page' property does not inherit.
   However, if the 'page' value on an element is ''auto'',
   then its used value is the value specified on its nearest ancestor with a non-auto value.
   When specified on the root element, the effective name is the empty string.
   <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
 <p>
   Because a previous version of this specification indicated that the 'page' property is inherited,
   an implementation that inherits the 'page' property
   and treats ''auto'' as always naming the empty string
   remains conformant to CSS3 Paged Media.
   Therefore authors should not explicitly specify the ''auto'' value
   on a descendant of an element with a non-''auto'' value,
   as the resulting behavior will be unpredictable.
 <p>See [[!CSS3-BREAK]] for additional details on page breaks.
 <div class="example">
 <p>In this example, the two tables are rendered on landscape pages (indeed, on the
 same page, if they fit). The page type "narrow" is used for the &lt;p&gt; after
 the second table, as the page properties for the table element are no longer in
 effect:</p>
 <pre>
 @page narrow { size: 9cm 18cm }
 @page rotated { size: landscape }
 div { page: narrow }
 table { page: rotated }
 </pre>with this document:
 <pre>
 &lt;div&gt;
 &lt;table&gt;...&lt;/table&gt;
 &lt;table&gt;...&lt;/table&gt;
 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;
 &lt;/div&gt;
 </pre>
 </div>
 <div class="example">
   <p>In Japanese documents, sometimes different parts of a single document
   will have different <i lang="ja-Latn">kihon hanmen</i>. [[JLREQ]]
   The 'page' property, together with ''@page'' rules specifying different page widths,
   can accomodate this type of layout:
   <pre>
 &lt;!DOCTYPE html>
 &lt;html lang="ja">
   &lt;style>
     html   { writing-mode: vertical-rl;
              line-height: 1.6; }
     .main  { page: main;
              columns: 2; column-gap: 1rem; }
     .index { page: index;
              columns: 3; column-gap: 1rem; }
     @page       { margin: auto;    /* center kihon hanmen on page */
                   width:  40rem; } /* 1.6 &times; 25 lines        */
     @page main  { height: 61rem; } /* 2 &times; 30 chars + 1 &times; gap */
     @page index { height: 62rem; } /* 3 &times; 20 chars + 2 &times; gap */
   &lt;/style>
   &lt;section class="main"> ... &lt;/section>
   &lt;section class="index"> ... &lt;/section>
 &lt;/html>
 </pre>
 </div>
 <h2 id="image-properties">Image Properties</h2>
 <p class="note">This section has been moved to [[CSS3-IMAGES]].</p>
 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>
 <h3 class="no-num">Properties that apply within the page context</h3>
 <p>The following CSS 2.1 [[!CSS21]] properties apply to the page box.
 If a conforming user agent supports any of these properties on block
 boxes, then it must also support that property for the page box.</p>
 <table class="property-list">
   <tbody>
     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
         <td>direction
   <tbody>
     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
         <td>background-color
     <tr><td>background-image
     <tr><td>background-repeat
     <tr><td>background-attachment
     <tr><td>background-position
     <tr><td>background
   <tbody>
     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
         <td>border-top-width
     <tr><td>border-right-width
     <tr><td>border-bottom-width
     <tr><td>border-left-width
     <tr><td>border-width
     <tr><td>border-top-color
     <tr><td>border-right-color
     <tr><td>border-bottom-color
     <tr><td>border-left-color
     <tr><td>border-color
     <tr><td>border-top-style
     <tr><td>border-right-style
     <tr><td>border-bottom-style
     <tr><td>border-left-style
     <tr><td>border-short-style
     <tr><td>border-top
     <tr><td>border-right
     <tr><td>border-bottom
     <tr><td>border-left
     <tr><td>border
   <tbody>
     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
         <td>counter-reset
     <tr><td>counter-increment
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
   <tbody>
     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
         <td>font-family
     <tr><td>font-size
     <tr><td>font-style
     <tr><td>font-variant
     <tr><td>font-weight
     <tr><td>font
   <tbody>
     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
         <td>height
     <tr><td>min-height
     <tr><td>max-height
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
   <tbody>
     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
         <td>margin-top
     <tr><td>margin-right
     <tr><td>margin-bottom
     <tr><td>margin-left
     <tr><td>margin
   <tbody>
     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
         <td>outline-width
     <tr><td>outline-style
     <tr><td>outline-color
     <tr><td>outline
   <tbody>
     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
         <td>padding-top
     <tr><td>padding-right
     <tr><td>padding-bottom
     <tr><td>padding-left
     <tr><td>padding
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
   <tbody>
     <tr><td rowspan="8"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
         <td>direction
     <tr><td>letter-spacing
     <tr><td>text-align
     <tr><td>text-decoration
     <tr><td>text-indent
     <tr><td>text-transform
     <tr><td>white-space
     <tr><td>word-spacing
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
   <tbody>
     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
         <td>width
     <tr><td>min-width
     <tr><td>max-width
 </table>
 <p>Properties that apply to the page-margin boxes can also be set within
 the page context: if inheritable or explicitly inherited (with the
 <code>inherit</code> keyword in the margin context), they will inherit
 to the page-margin boxes.</p>
 <h3 class="no-num">Properties that apply within the margin contexts</h3>
 <p>The following CSS 2.1 [[!CSS21]] properties apply to page-margin boxes.
 If a conforming user agents supports any of these properties on block
 boxes, then it must also support that property for page-margin boxes (except
 for <code>z-index</code>, which is optional for page-margin boxes).</p>
 <table class="property-list">
   <tbody>
     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
         <td>direction
     <tr><td>unicode-bidi
   <tbody>
     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
         <td>background-color
     <tr><td>background-image
     <tr><td>background-repeat
     <tr><td>background-attachment
     <tr><td>background-position
     <tr><td>background
   <tbody>
     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
         <td>border-top-width
     <tr><td>border-right-width
     <tr><td>border-bottom-width
     <tr><td>border-left-width
     <tr><td>border-width
     <tr><td>border-top-color
     <tr><td>border-right-color
     <tr><td>border-bottom-color
     <tr><td>border-left-color
     <tr><td>border-color
     <tr><td>border-top-style
     <tr><td>border-right-style
     <tr><td>border-bottom-style
     <tr><td>border-left-style
     <tr><td>border-short-style
     <tr><td>border-top
     <tr><td>border-right
     <tr><td>border-bottom
     <tr><td>border-left
     <tr><td>border
   <tbody>
     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
         <td>counter-reset
     <tr><td>counter-increment
   <tbody>
     <tr><td colspan="2"><a href="">content</a>
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
   <tbody>
     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
         <td>font-family
     <tr><td>font-size
     <tr><td>font-style
     <tr><td>font-variant
     <tr><td>font-weight
     <tr><td>font
   <tbody>
     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
         <td>height
     <tr><td>min-height
     <tr><td>max-height
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
   <tbody>
     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
         <td>margin-top
     <tr><td>margin-right
     <tr><td>margin-bottom
     <tr><td>margin-left
     <tr><td>margin
   <tbody>
     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
         <td>outline-width
     <tr><td>outline-style
     <tr><td>outline-color
     <tr><td>outline
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
   <tbody>
     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
         <td>padding-top
     <tr><td>padding-right
     <tr><td>padding-bottom
     <tr><td>padding-left
     <tr><td>padding
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
   <tbody>
     <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
         <td>letter-spacing
     <tr><td>text-align
     <tr><td>text-decoration
     <tr><td>text-indent
     <tr><td>text-transform
     <tr><td>white-space
     <tr><td>word-spacing
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
   <tbody>
     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
         <td>width
     <tr><td>min-width
     <tr><td>max-width
   <tbody>
     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
 </table>
 <h2 class="no-num" id="transfer-possibilities">Appendix B: Transfer Possibilities</h2>
 <p>Often, but not always, the page box has a one-to-one correspondence to the
 physical surface onto which the document is ultimately rendered. The CSS3 page
 model specifies formatting within the page box, but it is the user agent's
 responsibility to transfer the page box to the sheet. Some user agent transfer
 possibilities that are not addressed by CSS3 include:</p>
 <ul id="complex-usecases">
   <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>
   <li>Transferring two page boxes to the front and back surfaces of the same
   sheet (e.g. double-sided printing);</li>
   <li>Transferring N (small) page boxes to one sheet (called "N-up");</li>
   <li>Transferring one (large) page box to N x M sheets (called "tiling");</li>
   <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on
   a sheet, which, when folded and trimmed like a book, appear in their proper
   sequence;</li>
   <li>Printing one document to multiple output trays;</li>
   <li>Generating files containing print instructions.</li>
 </ul>
 <h2 class="no-num" id="changes">Changes</h2>
 <p>
   Changes since the <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006 Working Draft</a> are:
 </p>
 <ul>
   <li>The '':blank'' <a href="#pseudo-classes">pseudo-class</a> was imported
     from the <a href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged Media</a> module.
   <li>''@page'' rules can now take multiple comma separated selectors,
     each selector can have multiple pseudo-classes.
     <div class="example">
       <pre>@page :first, :blank { @bottom-center { content: none } }</pre>
       <pre>@page :first:left { @bottom-left { content: none } }</pre>
     </div>
   <li>Margin boxes are renamed <a href="#margin-boxes">page-margin boxes</a>,
     to avoid confusion with the margin area of each box.
   <li>The <a href="#variable-sizing">Variable Dimension</a>
     layout rules for page-margin boxes have been much simplified
     to not require quadratic optimization.
   <li>The relative <a href="#painting">painting order</a>
     of page-margin boxes and page content has changed.
   <li>The description of page breaks and definition of related properties
     (except for the 'page' property)
     have been moved to the CSS Fragmentation Module. [[!CSS3-BREAK]]
   <li>The 'fit' and 'fit-position' properties
     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.
     [[CSS3-IMAGES]]
   <li>Many miscellaneous clarifications
     and editorial improvements have been incorporated.
 </ul>
 <h2 class="no-num" id="references">References</h2>
 <h3 class="no-num" id="normative-references">Normative References</h3><!--normative-->
 <h3 class="no-num" id="informative-references">Informative References</h3><!--informative-->
 </div>
 </div>
 </body>
 </html>

Mercurial > drafts / annotate

css3-page/Overview.src.html@0dff950123a2 (annotated)

css3-page/Overview.src.html