css3-page/Overview.src.html

Mon, 11 Feb 2013 14:15:36 -0800

author
Simon Sapin <simon.sapin@exyr.org>
date
Mon, 11 Feb 2013 14:15:36 -0800
changeset 7435
2fa0f76c392e
parent 7434
bdbe85bfb65b
child 7436
6ded58aacc4c
permissions
-rwxr-xr-x

[css3-page][css3-gcpm] Move :blank to css3-page, per WG resolution

CSSWG resolution:
http://lists.w3.org/Archives/Public/www-style/2012Nov/0250.html

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     2 <html lang="en">
     3 <head>
     4 <title>
     5 CSS Paged Media Module Level 3
     6 </title>
     7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     8 <link href="../default.css" rel="stylesheet" type="text/css">
     9 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
    10 <style type="text/css">
    11   .keyword { font-weight:bold }
    12   .equation { padding: 2% }
    13   table.equation {text-align:center}
    14   td, th { vertical-align: top }
    15   pre { font-size: 1em; }
    17   #margin-values { border-collapse: collapse; }
    18   #margin-values td,
    19   #margin-values th
    20   {
    21                 padding: 0.2em;
    22                 border: thin solid black;
    23   }
    25   .property-list
    26   {
    27                 border: 1px solid black;
    28                 padding: .2em;
    29                 margin-top: 2em;
    30   }
    32   .property-list td
    33   {
    34                 border: 1px solid black;
    35                 padding: .1em;
    36   }
    38   .editorial
    39   {
    40                 display: block;
    41                 font-family: arial, helvetica, sans-serif;
    42       font-size: 80%;
    43       margin-left: .5in;
    44       margin-right: 1in ;
    45       padding: 0.125in;
    46       background: #FFFFDD ;
    47   }
    49   .editorial:after { content: "Ed."}
    50   .RFC2119
    51   {
    52                 text-transform: lowercase;
    53                 font-style: italic
    54   }
    56   em em.RFC2119
    57   {
    58                 text-transform: lowercase;
    59                 font-style: normal
    60   }
    62   table.page-sizes
    63   {
    64                 border: thin solid;
    65                 margin-top: 1.5em;
    66   }
    67   table.page-sizes td
    68   {
    69                 border: thin solid;
    70                 padding: .5em;
    71   }
    72   table.page-sizes th
    73   {
    74                 border: thin solid;
    75                 padding: .5em;
    76                 background: #ffffaa;
    77   }
    79 </style>
    80 </head>
    81 <body>
    82 <div>
    83 <div class="head">
    84 <!--logo-->
    85 <h1>CSS Paged Media Module Level 3</h1>
    86 <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>
    87 <dl>
    88   <dt>This version:</dt>    <dd><a href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
    89     <!-- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
    90   <dt>Latest version:</dt>    <dd><a href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a></dd>
    91   <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>
    92   <dt>Editors:</dt>    <dd>Melinda Grant, Hewlett-Packard</dd>
    93     <dd>H&aring;kon Wium Lie, Opera Software</dd>
    94     <dd>Elika J. Etemad, Hewlett-Packard</dd>
    95     <dd>Simon Sapin, Kozea</dd>
    96 </dl>
    98 <!--copyright-->
   100 </div>
   101 <hr title="Separator for header">
   103 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
   105 <p>This module describes the page model that partitions a flow into pages. It
   106 builds on the <a href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> and introduces
   107 and defines the page model and paged media. It adds functionality for
   108 pagination, page margins, page size and orientation, headers and footers,
   109 widows and orphans, and image orientation. Finally it extends generated content
   110 to enable page numbering and running headers / footers.</p>
   112 <!-- "Status of this document" -->
   114 <h2 class="no-num no-toc" id="status">Status of this Document</h2>
   116 <!--status-->
   118 <p>This document contains the <abbr title="Cascading Style Sheets">CSS3</abbr>
   119 Paged Media Module W3C Last Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a> of [DATE]. The
   120 Last Call period ends on <span class="fudge">TBD</span>.</p>
   122 <p>Relative to the previous Last Call Working Draft, this version has dropped
   123 the formerly named 'fit' and 'fit-position' properties; they are
   124 renamed to 'object-fit' and 'object-position', redefined to enable additional
   125 use cases, and moved to the
   126   <a href="http://www.w3.org/TR/css3-images/">CSS3 Image Values and Replaced Content module</a>.
   127 The page-page-margin box sizing algorithm has been reworded to be a bit simpler,
   128 and many miscellaneous clarifications and editorial improvements have
   129 been incorporated.</p>
   131 <p>Features at-risk (may be removed if they lack implementor interest):</p>
   132 <ul>
   133   <li>comma-separated page selectors
   134 </ul>
   136 <p>Expected next revision to this document is another LCWD, due to the
   137 substantive changes to page-margin box sizing and other areas that are now
   138 specified with more precision.</p>
   140 <p>The <a href="lc2_issues.htm">Disposition of Comments</a>
   141 document contains the current issues list and responses to input received
   142 during this Last Call period.</p>
   144 <h2 class="no-num no-toc" id="contents">Table of Contents</h2><!--begin-toc-->
   145 <!--end-toc-->
   146 <!-- "Introduction" -->
   147 <h2 id="intro">Introduction</h2>
   149 <p>Paged media (e.g., paper, transparencies, photo album pages, pages
   150 displayed on computer screens as printed output simulations) differ from
   151 <a href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>
   152 in that the content of the document is split into one or more discrete
   153 static display surfaces. To handle pages, CSS3 Paged Media describes how:</p>
   155 <ul>
   156   <li><a href="#page-breaks">page breaks</a> are created and avoided;</li>
   157   <li>the page properties such as size, orientation, margins, border, and
   158   padding are specified;</li>
   159   <li>headers and footers are established within the page margins;</li>
   160   <li>content such as page counters are placed in the headers and footers; and</li>
   161   <li>orphans and widows can be controlled.</li>
   162 </ul>
   164 <p>This module defines a <a href="#page-model">page model</a> that specifies how a
   165 document is formatted within a rectangular area, called the
   166 <a href="#page-box-page-rule">page box</a>, that has finite width and height.
   168 <p>Although CSS3 does not specify how user agents transfer page boxes to sheets,
   169 it does include certain mechanisms for telling user agents about the intended
   170 page sheet <a href="#page-size">size and orientation</a>. In the general case,
   171 CSS3 assumes that one page box will be transferred to one surface of similar
   172 size.</p>
   174 <p>All properties defined in this specification also accept the
   175 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   176 keyword as their value, but for readability it has not been listed explicitly.
   178 <h2 id="conformance">Conformance</h2>
   180 <p>All of the text in this specification is normative except sections
   181 explicitly marked as non-normative, examples, and notes. The keywords
   182 "<em class="RFC2119">MUST</em>", "<em class="RFC2119">SHALL</em>",
   183 "<em class="RFC2119">MUST NOT</em>", "<em class="RFC2119">SHALL NOT</em>",
   184 "<em class="RFC2119">REQUIRED</em>", "<em class="RFC2119">SHOULD</em>",
   185 "<em class="RFC2119">SHOULD NOT</em>", "<em class="RFC2119">RECOMMENDED</em>",
   186 "<em class="RFC2119">MAY</em>", and "<em class="RFC2119">OPTIONAL</em>" when
   187 used in this document are to be interpreted as described in <cite>RFC
   188 2119</cite> [[!RFC2119]]. However, for readability, these words do not appear
   189 in all uppercase letters in this specification.</p>
   191 <p>Examples in this specification are introduced with the words "for example"
   192   or are set apart from the normative text with <code>class="example"</code>,
   193   like this:
   195 <div class="example">
   196   <p>This is an example of an informative example.</p>
   197 </div>
   199 <p>Informative notes begin with the word "Note" and are set apart from the
   200   normative text with <code>class="note"</code>, like this:
   202 <p class="note">Note, this is an informative note.</p>
   204 <h2 id="page-terms">Page Terminology</h2>
   206 <p>The following terminology and accompanying diagrams help to describe the
   207 page model:</p>
   209 <dl>
   210   <dt id="page-sheet">Page sheet</dt>
   211   <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"
   212   height="148" width="194">The page sheet is one surface of the physical
   213   medium. The illustration to the right shows a representation of the upper-left
   214   corner of a page sheet.</dd>
   216   <dt id="printable-area">Printable and non-printable areas</dt>
   217   <dd>The non-printable area is the area of a page sheet that a physical device such
   218   as a printer is not capable of marking reliably, usually due to the printer's
   219   paper handling mechanism. This value is printer dependent and is usually a
   220   small region along each edge of the page sheet. The printable area is the area
   221   of page sheet that a printer <em>is</em> capable of marking reliably. The size
   222   of the printable area is the size of the page sheet reduced by the size of the
   223   non-printable area. A user agent may not know the dimensions of this area for a
   224   particular printing device; but when its dimensions are known, user agents
   225   <em class="RFC2119">MAY</em> adjust the formatting of the document so that
   226   content falls within the printable area. How this adjustment is accomplished is
   227   device dependent within the constraints expressed in the sections
   228   <a href="#renderingpages">Rendering page boxes that do not fit a page sheet</a> and
   229   <a href="#content-outside-box">Content outside the page box</a>.</dd>
   231   <dt id="page-orientation">Page Orientation</dt>
   232   <dd>The page orientation is defined by comparing the length of the edges of a
   233   <a href="#page-box">page box</a>. The page box is a rectangle with two
   234   perpendicular edges called the long edge and the short edge. The length of the
   235   long edge is always greater than or equal to the length of the short edge. When
   236   the page box is square, the two edges are of the same length and either can be
   237   used as the long edge with the other being the short edge. This specification
   238   defines page orientations of 'portrait' and 'landscape'.</dd>
   240   <dt id="portrait">Portrait Orientation</dt>
   241   <dd>A portrait page's height is greater than or equal to its width. Horizontal
   242   elements are parallel to the short edge and vertical elements to the long edge.</dd>
   244   <dt id="landscape">Landscape Orientation</dt>
   245   <dd>A landscape page's width is greater than or equal to its height. Horizontal
   246   elements are parallel to the long edge and vertical elements to the short edge.
   247   <span class="note">Note that CSS3 makes no distinction between landscape and
   248   reverse-landscape orientations. However, future versions of CSS may do so.
   249   UAs should consider, when formatting for duplexed printing, the binding edge,
   250   page progression, and ease of reading when choosing between landscape and
   251   reverse-landscape renderings.</span>
   252   </dd>
   254   <dt id="duplex-printing">Duplex Printing</dt>
   255   <dd>Duplex printing prints one page box per side of a page sheet and uses both
   256   sides of the page sheet. This module provides no ability to specify whether a
   257   document is duplex printed, but the concept of left and right pages is based on
   258   the assumption that the document is duplex printed, regardless of whether or
   259   not it actually is.</dd>
   261   <dt id="binding-edge">Binding Edge</dt>
   262   <dd>The binding edge is the edge of the page box that is toward the binding if the
   263   material is bound. The binding edge often has a larger margin than the opposite
   264   edge to provide for the space used by the binding. The binding edge can be any
   265   of the four edges. However, page sheets are customarily bound so that the
   266   binding edge of page boxes with portrait orientation is vertical. This module
   267   provides no method to specify the binding edge. In duplex printing, the binding
   268   edge is on opposite sides of the page box for the left and right pages.</dd>
   270   <dt id="facing-pages">Facing Pages</dt>
   271   <dd>Facing pages are two sequential pages such that when the document is duplex
   272   printed they are on separate sheets of paper. Typically, the earlier page will
   273   be the back side of one sheet and the later page will be the front side of
   274   another. They are usually laid out so that the binding edges of facing pages
   275   are vertical and adjacent when the pages are placed in their normal reading
   276   orientation.</dd>
   278   <dt id="left-page">Left Page</dt>
   279   <dd>A page that would be on the left if it is part of a pair of facing pages as
   280   typically laid out. Page layouts for documents using a left-to-right page
   281   progression have the earlier of the facing pages on the left. Rules specific to
   282   the left page can be specified using the <span class="css">':left'</span> page
   283   selector.</dd>
   285   <dt id="right-page">Right Page</dt>
   286   <dd>A page that would be on the right if it is part of a pair of facing pages as
   287   typically laid out. Page layouts for documents using a right-to-left page
   288   progression have the earlier of the facing pages on the right. Rules specific
   289   to the right page can be specified using the <span class="css">':right'</span>
   290   page selector.</dd>
   291 </dl>
   294 <h2 id="page-box-page-rule">The Page Model</h2>
   296 <p>In the paged media formatting model, the document is transferred into one
   297 or more page boxes. The <dfn id="page-box">page box</dfn> is a specialized CSS
   298 box that maps to a rectangular print media surface, such as a page of paper.
   299 It is roughly analogous to the <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
   300 <img src="PageBox.png" style="float: right;" alt="" height="266" width="267">
   302 <p>As with other CSS <a href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box
   303 consists of margin, border, padding, and content areas. The content and
   304 margin areas of a page box have special functions:</p>
   306 <ul>
   307   <li>The content area of a page box is called the <dfn id="page-area">page
   308   area</dfn>. The content of the document is flowed into one or more page boxes.
   309   The page area acts as a container for all the boxes generated by the root
   310   element and its descendants that are laid out within a given page box. The
   311   edges of the page area on the first page establish the rectangle that is the
   312   initial <a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing block</a>
   313   of the document.</li>
   314   <li>The margin area of a page box is divided into
   315   16 <dfn>page-margin boxes</dfn>.
   316   Each page-margin box has its own margin, border, padding and content areas.
   317   Page-margin boxes are typically used to display running headers and footers.</li>
   318 </ul>
   320 <p>The properties of a <i>page box</i> are determined by properties
   321 <a href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a> within the
   322 <i>page context</i>, which is the
   323 <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration block</a> of the
   324 <code>@page</code> rule. Similarly the properties of a <i>page-margin box</i>
   325 are determined by properties declared within its <i>margin context</i>.
   326 Declarations in the page context can affect the page box and/or inherit
   327 to the page-margin boxes, but they do not apply to or inherit into the
   328 document's root element or other content.</p>
   330 <p>The <i>containing block</i> of the page box is specified using the 'size'
   331 property in the <i>page context</i>. The width and horizontal margins
   332 of the page box are then calculated exactly as for a
   333 <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
   334 block element in normal flow</a>. [[!CSS21]] The height and vertical margins
   335 of the page box are calculated analogously (instead of using the block height
   336 formulas). In both cases if the values are over-constrained, instead of
   337 ignoring any margins, the containing block is resized to coincide with the
   338 margin edges of the page box.
   340 <h3 id="painting">
   341 Page Backgrounds and Painting Order</h3>
   343   <p>When drawing a page of content, the page layers are painted in the
   344   following painting order (bottommost first):
   346   <ol>
   347     <li>page background
   348     <li>document canvas
   349     <li>page borders
   350     <li>document contents
   351     <li>page-margin boxes
   352   </ol>
   354   <p>In the page model, the page background behaves similar to the root background:
   355   its <a href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background painting area</i></a>
   356   is the entire page box, including its margins.
   357   Page backgrounds are anchored within the page box's padding area by default
   358   (and honor 'background-origin' if the UA supports [[!CSS3BG]]).
   359   However if 'background-attachment' is ''fixed''
   360   then the image is positioned relative to the page box including its margins
   361   (i.e. the <a href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background positioning area</i></a>,
   362   like the <i>background painting area</i>, is the page's margin box).
   364   <p>The document canvas background is drawn as the page box's background:
   365   by default its <i>background painting area</i> covers the page box's border box,
   366   and for UAs that support [[!CSS3BG]], follows the 'background-clip' value specified on the root element.
   367   It remains, however, positioned with respect to the root element
   368   or page area as usual.
   370   <p>The UA may support the <code>z-index</code> property for page-margin boxes.
   371   With respect to the page-margin boxes,
   372   the document canvas, page borders, and all of the document contents
   373   are treated as a single element with a <code>z-index</code> value of '0':
   374   the page-margin boxes never interleave with parts of the document content
   375   or between the content and the canvas.
   376   They may only paint in front of the document content or behind the document canvas.
   377   The page background is always painted underneath everything else.
   378   Since the <code>position</code> property does not apply to page-margin boxes,
   379   <code>z-index</code> always affects page-margin boxes
   380   as if they were positioned elements
   381   regardless of the <code>position</code> property's value.
   383   <p>The default painting order,
   384   or <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree order",
   385   of page-margin boxes with respect to each other is not specified.
   386   However, the page-margin boxes are defined to come
   387   after the page box and its contents.
   388   <span class="issue">Suggestions here are welcome.</span>
   390 <h3 id="content-outside-box">Content outside the page box</h3>
   392 <p>When formatting content in the page model, some content may end up outside the
   393 page box. For example, an element whose 'white-space' property has the value
   394 'pre' can generate a box that is wider than the page box. As another example,
   395 when boxes are positioned absolutely or relatively, they may end up in
   396 "inconvenient" locations. For example, images may be placed on the edge of
   397 the page box or 100,000 meters below the page box. </p>
   399 <p>A specification for the exact formatting of such elements lies outside the
   400 scope of this document. However, it is recommended that authors and user agents
   401 observe the following general principles concerning content outside the page
   402 box:</p>
   404 <ul>
   405   <li><p>Content should be allowed slightly beyond the page box to allow pages
   406   to "bleed".
   407   <li><p>User agents <em class="RFC2119">SHOULD</em> avoid generating a large
   408   number of content-empty pages to honor the positioning of elements (e.g.,
   409   printing 100 blank pages is probably neither the author's nor the user's
   410   intent).
   411   A <dfn id="content-empty">Content-empty page</dfn> is a page box whose page
   412   area contains no printable content other than backgrounds and/or borders. A
   413   page box whose page area contains generated content, or content whose
   414   visibility is 'hidden', or invisible content such as a zero-width space is
   415   not a content-empty page. On the other hand, a page containing only a
   416   background and/or borders and/or page-margin box content <em>is</em> a
   417   content-empty page.
   418   <p class="note">Note, however, that generating a small number of empty page
   419   boxes is sometimes necessary to honor the <span class="css">'left'</span> and
   420   <span class="css">'right'</span> values for <span class="property">'page-break-before'</span>
   421   and <span class="property">'page-break-after'</span>.</li>
   423   <li><p>Authors <em class="RFC2119">SHOULD NOT</em> position elements in
   424   inconvenient locations just to avoid rendering them. Instead:
   425   <ul>
   426     <li>To suppress box generation entirely, set the <span class="property">'display'</span> property to <span class="css">'none'</span>.</li>
   427     <li>To make a box invisible, set the <span class="property">'visibility'</span>
   428     property.</li>
   429     </ul></li>
   430     <li><p>This specification does not define how boxes positioned outside the page
   431     box are handled. Possibilities include discarding them or creating page boxes
   432     for them at the end of the document.</li>
   433 </ul>
   435 <h3 id="progression">Page Progression</h3>
   437 <p>CSS distinguishes between left pages and right pages on all documents,
   438 whether they are printed duplex or not. Each left page is followed by a
   439 right page and vice versa. Left and right pages can be styled differently
   440 with the <a href="#left-right-first"><code>:left</code> and <code>:right</code>
   441 pseudo-classes</a>.
   443 <p>Whether the first page of a document is a left page or a right page
   444 depends on the page progression of the document. The <dfn>page progression</dfn>
   445 is the direction in which the printed pages of a document would be sequenced
   446 when laid out side-to-side. For example, English and horizontally-set Japanese
   447 typically progress from left to right, whereas Arabic and vertically-set
   448 Japanese pages typically progress from right to left. In documents with
   449 a left-to-right page progression the first page of the document is a right
   450 page, and vice versa.</p>
   452 <p>The page progression direction is determined as follows:</p>
   454 <ul>
   455   <li>If text is laid out in horizontal lines, the page progression is the
   456   same as the inline progression.</li>
   457   <li>If text is laid out in vertical lines, the page progression is the
   458   same as the block progression.</li>
   459 </ul>
   461 <p>If the UA supports the 'direction' and 'writing-mode' properties
   462 from the CSS 3 Writing Modes Module [[CSS3-WRITING-MODES]], it must
   463 <a href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
   464 whether the first page is a left or right page from the values of those
   465 properties on the root element.</p>
   467 <p>To explicitly force a document to begin printing on a left or right page,
   468 authors can <a href="#page-break-before">insert a page break before</a> the
   469 first generated box. The UA must suppress the first (empty) page(s) in this
   470 case (and the <code>:first</code> selector applies to the first printed
   471 page).</p>
   473 <div class="example">
   474 <pre>
   475 html { page-break-before: always }
   476 </pre>
   478 <p>
   479   For an HTML document with a left-to-right page progression,
   480   the above style rule will cause the first page of the document
   481   to print on a ':left' page
   482 </p>
   484 <pre>
   485 html { page-break-before: left }
   486 </pre>
   488 <p>
   489   For an HTML document,
   490   the above style rule will cause the first page of the document
   491   to print on a ':left' page,
   492   regardless of the page progression.
   493 </p>
   494 </div>
   496 <h2 id="page-selector-and-context">Page Selectors and the Page Context</h2>
   498 <h3 id="at-page-rule">The @page Rule</h3>
   500 <p>Authors can specify various aspects of a page box, such as its dimensions,
   501 orientation, and margins, within an <span class="css">@page</span> rule.
   502 An <span class="css">@page</span> rule consists of
   503 the keyword <span class="css">'@page'</span>,
   504 an <em class="RFC2119">OPTIONAL</em> comma-separated list of
   505 <i title="page selector">page selectors</i>
   506 and a block of declarations
   507 (said to be in the <dfn id="page-context">page context</dfn>).
   508 <a href="#margin-at-rules">Margin at-rules</a> may be interleaved with the
   509 declarations in the page context.
   511 <p>A <dfn id="page-selector">page selector</dfn> is either
   512 a page pseudo-class, or
   513 a page name followed with no intervening whitespace
   514 by an <em class="RFC2119">OPTIONAL</em> page pseudo-class.
   515 The page selector specifies for which pages the declarations apply.
   516 In CSS3, page selectors can designate the first page of a document,
   517 all left pages, all right pages, or
   518 <a href="#using-named-pages">pages with specific names</a>.
   519 Multiple selectors may be combined with a comma (which may be preceded and/or
   520 followed by white space); in this case the ''@page'' rule applies to pages
   521 that match any of the page selectors. (Note: this feature is at-risk.)
   522 If no page selector is given, then the ''@page'' rule applies to all pages.</p>
   524 <p>Properties declared within the page context apply to the page box.</p>
   526 <p>If an error is encountered during the processing of a declaration block within
   527 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>
   528 apply; that is, valid declarations within the block are applied.</p>
   530 <h3 id="pseudo-classes">
   531   <a id="left-right-first"></a>
   532   Page pseudo-classes: :left, :right, :first, and :blank
   533 </h3>
   535 <p>
   536   When printing double-sided documents,
   537   left and right pages are often formatted differently.
   538   This can be expressed through CSS pseudo-classes defined
   539   in the <a href="#page-context">page context</a>.
   540 </p>
   542 <p>
   543   All pages are automatically classified by user agents
   544   as either left pages or right pages,
   545   based on <a href="#progression">page progression</a>.
   546   The <span class="css">':left'</span> and <span class="css">':right'</span>
   547   page pseudo-classes can be used to selectively apply rules
   548   to only the left or right pages, respectively.
   549 </p>
   551 <div class="example">
   552 The following example creates left and right binding edges using these pseudo-classes:
   553 <pre>
   554 @page :left {
   555 margin-left: 3cm;
   556 margin-right: 4cm;
   557 }
   559 @page :right {
   560 margin-left: 4cm;
   561 margin-right: 3cm;
   562 }
   563 </pre>
   564 </div>
   566 <p>If different declarations have been given for left and right pages, the user
   567 agent <em class="RFC2119">MUST</em> honor these declarations even if the user
   568 agent does not transfer the page boxes to left and right sheets (i.e., a
   569 printer that only prints on one side of the medium must nevertheless produce
   570 correctly formatted output).</p>
   572 <div class="note">
   573 <p>
   574   <em><strong>Note.</strong>
   575   Adding declarations to the <span class="css">':left'</span> or
   576   <span class="css">':right'</span> pseudo-class
   577   does not necessarily influence whether the document
   578   comes out of the printer double- or single-sided
   579   (which is outside the scope of this specification).</em>
   580 </p>
   581 </div>
   583 <p>Authors can also specify style for the first page of a document with the
   584 <span class="css">':first'</span> pseudo-class. Such style rules are applied only
   585 to the first printed page of a document.</p>
   587 <div class="example">
   588 <pre>
   589 @page { margin: 2cm } /* All margins set to 2cm */
   591 @page :first {
   592 margin-top: 10cm /* Top margin on first page 10cm */
   593 }
   594 </pre>
   595 </div>
   597 <p>
   598   Blank pages that appear as a result of
   599   <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced page breaks</a>
   600   can be styled with the <code>:blank</code> pseudo-class.
   602 <div class="example">
   603 <p>In this example, forced page break may occur before <code>h1</code> elements.
   604 <pre>
   605 h1 { page-break-before: left }
   607 @page :blank {
   608   @top-center { content: "This page is intentionally left blank" }
   609 }
   610 </pre>
   611 </div>
   613 <p>
   614   A page matched by <code>:blank</code> can also be matched
   615   by other page pseudo-classes.
   617 <div class="example">
   619 <p>If headers have been specified on all right pages, a blank right
   620 page will be matched by both <code>:blank</code>
   621 and <code>:right</code>. Therefore, margin boxes set on right pages
   622 will have to be removed unless they are wanted on blank pages. Here is
   623 an example where the top center header is removed from blank pages,
   624 while the page number remains:
   626 <pre>
   627 h1 { page-break-before: left }
   629 @page :blank {
   630   @top-center { content: none }
   631 }
   633 @page :right {
   634   @top-center { content: "Preliminary edition" }
   635   @bottom-center { content: counter(page) }
   636 }
   637 </pre>
   639 <p>Due to the higher specificity of <code>:blank</code>
   640 over <code>:right</code>, the top center header is removed even
   641 if <code>content: none</code> comes before <code>content: "Preliminary
   642 edition"</code>.
   644 </div>
   646 <div class="note">
   647 <p><em><strong>Note.</strong> Future versions of CSS may include other page
   648 pseudo-classes.</em></p>
   649 </div>
   651 <h3 id="syntax-page-selector">@page rule grammar</h3>
   653 <p>The syntax for the @page rule is a specialization of the generic at-rule
   654 defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules
   655 nested inside @media rules. User agents <em class="RFC2119">MUST</em> adhere
   656 to the following grammar:</p>
   658 <p>See [[!CSS21]], Section 4.1.1 and Appendix G for the expansion of missing
   659 productions:</p>
   660 <p id="specializatons-of-ATKEYWORD">
   661 All new lexical tokens are specializations of the ATKEYWORD lexical token:</p>
   662 <pre class="lexical">
   663 PAGE_SYM              ::= "@page"
   664 TOPLEFTCORNER_SYM     ::= "@top-left-corner"
   665 TOPLEFT_SYM           ::= "@top-left"
   666 TOPCENTER_SYM         ::= "@top-center"
   667 TOPRIGHT_SYM          ::= "@top-right"
   668 TOPRIGHTCORNER_SYM    ::= "@top-right-corner"
   669 BOTTOMLEFTCORNER_SYM  ::= "@bottom-left-corner"
   670 BOTTOMLEFT_SYM        ::= "@bottom-left"
   671 BOTTOMCENTER_SYM      ::= "@bottom-center"
   672 BOTTOMRIGHT_SYM       ::= "@bottom-right"
   673 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
   674 LEFTTOP_SYM           ::= "@left-top"
   675 LEFTMIDDLE_SYM        ::= "@left-middle"
   676 LEFTBOTTOM_SYM        ::= "@left-bottom"
   677 RIGHTTOP_SYM          ::= "@right-top"
   678 RIGHTMIDDLE_SYM       ::= "@right-middle"
   679 RIGHTBOTTOM_SYM       ::= "@right-bottom"
   681 <span id="syntax-prod-media">media</span> :
   682      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
   683      ;
   685 <span id="syntax-prod-page">page</span> :
   686      PAGE_SYM S* [ page_selector S* [ ',' page_selector S* ]* ]?
   687      '{' S* [ [ declaration? ';' S* ] | page_margin_box ]* [ declaration ]? '}'  S*
   688      ;
   689 <span id="syntax-prod-page-selector">page_selector</span> :
   690      pseudo_page | IDENT pseudo_page?
   691      ;
   692 <span id="syntax-prod-pseudo-page">pseudo_page</span> :
   693      ':' [ "left" | "right" | "first" | "blank" ]
   694      ;
   696 <span id="syntax-prod-margin">page_margin_box</span> :
   697      margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
   698      ;
   700 <span id="syntax-prod-margin-sym">margin_sym</span> :
   701      TOPLEFTCORNER_SYM |
   702      TOPLEFT_SYM |
   703      TOPCENTER_SYM |
   704      TOPRIGHT_SYM |
   705      TOPRIGHTCORNER_SYM |
   706      BOTTOMLEFTCORNER_SYM |
   707      BOTTOMLEFT_SYM |
   708      BOTTOMCENTER_SYM |
   709      BOTTOMRIGHT_SYM |
   710      BOTTOMRIGHTCORNER_SYM |
   711      LEFTTOP_SYM |
   712      LEFTMIDDLE_SYM |
   713      LEFTBOTTOM_SYM |
   714      RIGHTTOP_SYM |
   715      RIGHTMIDDLE_SYM |
   716      RIGHTBOTTOM_SYM
   717      ;
   718 </pre>
   720 <p id="page-selector-syntax-restrict">
   721 The value 'auto' is not a valid page name and must be treated as matching
   722 nothing.
   724 <div class="example">
   726 <p>The following are examples of page selectors (declaration block intentionally
   727 left blank)</p>
   728 <pre>
   729 @page { ... }
   730 @page :left { ... }
   731 @page :right { ... }
   732 @page LandscapeTable { ... }
   733 @page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
   734 @page:first { ... };
   735 </pre>
   737 <p>The following are examples of page-margin boxes
   738 where the declaration blocks are intentionally left blank.</p>
   739 <pre>
   740 @page {
   741  @top-left { ... /* document name */ }
   742  @bottom-center { ... /* page number */}
   743 }
   744 @page :left { @left-middle { ... /* page number in left margin */ }}
   745 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
   747 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
   748 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
   749 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
   750              @bottom-right-corner { ... /* empty footer */ } }
   751 </pre>
   752 </div>
   754 <h3 id="cascading-and-page-context">Cascading in the page context</h3>
   756 <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>
   758 <p>The specificity of page selectors is computed in a manner analogous to the
   759 computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
   760 module:</p>
   762 <ul>
   763   <li>if the page selector has a named page, f=1; else f=0</li>
   764   <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>
   765   <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
   766 </ul>
   768 <p>Concatenating the three numbers f-g-h gives the specificity.</p>
   770 <div class="example">
   772 <p>Some page specificity calculation examples follow:</p>
   773 <pre>
   774       @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
   775       @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
   776       @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
   777       @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
   778       @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
   779       @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
   780 </pre>
   781 </div>
   783 <div class="example">
   785 <p>Consider the following usage example:</p>
   786 <pre>
   787 @page {
   788 margin-left: 3cm;
   789 }
   791 @page :left {
   792 margin-left: 4cm;
   793 }
   794 </pre>
   796 <p>Due to the higher specificity of the pseudo-class selector, the left margin on
   797 left pages will be 4cm and all other pages
   798 (the right-facing pages) will have a left margin of 3cm.</p>
   799 </div>
   801 <div class="example">
   803 <p>In this example, the higher specificity of the green rules wins over the red
   804 rule.
   805 Therefore the first page will have blue text in the top-left page-margin box
   806 and green text in the top-right page-margin box,
   807 while subsequent pages will have red text in the page-margin boxes.</p>
   808 <pre>
   809 @page :first {
   810 color: green;
   812 @top-left {
   813   content: "foo";
   814   color: blue;
   815 }
   816 @top-right {
   817   content: "bar";
   818 }
   819 }
   821 @page { color: red;
   822 @top-center {
   823   content: "Page " counter(page);
   824   }
   825 }
   826 </pre>
   827 </div>
   829 <div class="example">
   831 <p>Page contexts cascade, so the following stylesheet would style pages with 25
   832 millimeter margins and 14 point type in the page-margin boxes:</p>
   833 <pre>
   834 @page { margin: 25mm;}
   835 @page { font-size: 14pt;}
   836 </pre>
   837 </div>
   839 <h2 id="margin-boxes">Page-Margin Boxes</h2>
   841 <p>Page-margin boxes are boxes within the page margin that,
   842 like pseudo-elements, can contain generated content.</p>
   844 <p>Page-margin boxes can be used to create page headers and footers,
   845 which are portions of the page set aside for supplementary
   846 information such as the page number or document title.</p>
   848 <div class="example">
   849 <p>Typically, a <dfn>page header</dfn> is located at the top of the page in
   850 documents with a predominately horizontal writing direction and on the side
   851 opposite the <a href="#binding-edge">binding edge</a> for documents with a
   852 predominately vertical writing direction. One possible design of page headers
   853 for horizontally written documents uses the
   854 <span class="css">'top-left-corner'</span>, <span class="css">'top-left'</span>,
   855 <span class="css">'top-center'</span>, <span class="css">'top-right'</span> and
   856 <span class="css">'top-right-corner'</span> page-margin boxes.
   857 Another design, for vertically written documents, could use the
   858 <span class="css">'right-top'</span>, <span class="css">'right-middle'</span>,
   859 and <span class="css">'right-bottom'</span> page-margin boxes for
   860 <a href="#right-page">right facing pages</a> and
   861 <span class="css">'left-top'</span>,
   862 <span class="css">'left-middle'</span>, and <span class="css">'left-bottom'</span> for <a href="#left-page">left facing pages</a>.</p>
   864 <p>The <dfn>page footer</dfn> is typically at the opposite end of the page from
   865 the page header. For example, the design of a horizontally written document with
   866 a page header at the top of the page could use the <span class="css">'bottom-left-corner'</span>, <span class="css">'bottom-left'</span>,
   867 <span class="css">'bottom-center'</span>,
   868 <span class="css">'bottom-right'</span> and
   869 <span class="css">'bottom-right-corner'</span>
   870 page-margin boxes as the page footer.
   871 The design of a vertically written document could use the page-margin boxes
   872 of the binding edge of the page for the page footer.</p>
   873 </div>
   875 <p>Page-margin boxes are positioned with respect to the page area
   876 and are independent of page orientation,
   877 for example the top page-margin boxes are above the page area
   878 in both portrait and landscape orientation.
   879 The various page-margin boxes are defined
   880 and illustrated in the diagram below:
   882   <table id="margin-box-def" class="data" summary="defintion of each of the page-margin boxes">
   883     <caption>Table 1 Page-Margin Box Definitions</caption>
   884     <thead>
   885       <tr>
   886         <th>Box</th>
   887         <th>Description</th>
   888         <th>Placement</th>
   889       </tr>
   890     </thead>
   891     <tbody>
   892       <tr id="top-margin-boxes-def">
   893         <th id="top-left-corner-box-def">top-left-corner</th>
   894         <td>a fixed-size box defined by the intersection of the top and left margins of the
   895         page box</td>
   896         <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"
   897         height="47" width="181"></td>
   898       </tr>
   899       <tr id="top-left-box-def">
   900         <th>top-left</th>
   901         <td>a variable-width box filling the top page margin between the top-left-corner
   902         and top-center page-margin boxes</td>
   903         <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"
   904         height="47" width="181"></td>
   905       </tr>
   906       <tr id="top-center-box-def">
   907         <th>top-center</th>
   908         <td>a variable-width box centered horizontally between the page's left and right
   909         border edges and filling the page top margin between the top-left and top-right
   910         page-margin boxes</td>
   911         <td><img src="TopCenterMarginBox.png" alt="the top center box with margin, border, and padding, centered within the page's top margin"
   912         height="47" width="181"></td>
   913       </tr>
   914       <tr id="top-right-box-def">
   915         <th>top-right</th>
   916         <td>a variable-width box filling the top page margin between the top-center and
   917         top-right-corner page-margin boxes</td>
   918         <td><img src="TopRightMarginBox.png" alt="the top right box with margin, border, and padding, nested within the page's top margin"
   919         height="47" width="181"></td>
   920       </tr>
   921       <tr>
   922         <th id="top-right-corner-box-def">top-right-corner</th>
   923         <td>a fixed-size box defined by the intersection of the top and right margins of
   924         the page box</td>
   925         <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"
   926         height="47" width="181"></td>
   927       </tr>
   928       <tr id="left-margin-boxes-def">
   929         <th id="left-top-box-def">left-top</th>
   930         <td>a variable-height box filling the left page margin between the top-left-corner
   931         and left-middle page-margin boxes</td>
   932         <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"
   933         height="226" width="181"></td>
   934       </tr>
   935       <tr id="left-middle-box-def">
   936         <th>left-middle</th>
   937         <td>a variable-height box centered vertically between the page's top and bottom
   938         border edges and filling the left page margin between the left-top and
   939         left-bottom page-margin boxes</td>
   940       </tr>
   941       <tr id="left-bottom-box-def">
   942         <th>left-bottom</th>
   943         <td>a variable-height box filling the left page margin between the left-middle and
   944         bottom-left-corner page-margin boxes</td>
   945       </tr>
   946       <tr id="right-margin-boxes-def">
   947         <th id="right-top-box-def">right-top</th>
   948         <td>a variable-height box filling the right page margin between the
   949         top-right-corner and right-middle page-margin boxes</td>
   950         <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"
   951         height="226" width="181"></td>
   952       </tr>
   953       <tr id="right-middle-box-def">
   954         <th>right-middle</th>
   955         <td>a variable-height box centered vertically between the page's top and bottom
   956         border edges and filling the right page margin between the right-top and
   957         right-bottom page-margin boxes</td>
   958       </tr>
   959       <tr id="right-bottom-box-def">
   960         <th>right-bottom</th>
   961         <td>a variable-height box filling the right page margin between the right-middle
   962         and bottom-right-corner page-margin boxes</td>
   963       </tr>
   964       <tr id="bottom-margin-boxes-def">
   965         <th id="bottom-left-corner-box-def">bottom-left-corner</th>
   966         <td>a fixed-size box defined by the intersection of the bottom and left margins of
   967         the page box</td>
   968         <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"
   969         height="48" width="181"></td>
   970       </tr>
   971       <tr id="bottom-left-box-def">
   972         <th>bottom-left</th>
   973         <td>a variable-width box filling the bottom page margin between the
   974         bottom-left-corner and bottom-center page-margin boxes</td>
   975         <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"
   976         height="48" width="181"></td>
   977       </tr>
   978       <tr id="bottom-center-box-def">
   979         <th>bottom-center</th>
   980         <td>a variable-width box centered horizontally between the page's left and right
   981         border edges and filling the bottom page margin between the bottom-left and
   982         bottom-right page-margin boxes</td>
   983         <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"
   984         height="48" width="181"></td>
   985       </tr>
   986       <tr id="bottom-right-box-def">
   987         <th>bottom-right</th>
   988         <td>a variable-width box filling the bottom page margin between the bottom-center
   989         and bottom-right-corner page-margin boxes</td>
   990         <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"
   991         height="48" width="181"></td>
   992       </tr>
   993       <tr id="bottom-right-corner-box-def">
   994         <th>bottom-right-corner</th>
   995         <td>a fixed-size box defined by the intersection of the bottom and right margins of
   996         the page box</td>
   997         <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"
   998         height="48" width="181"></td>
   999       </tr>
  1000     </tbody>
  1001   </table>
  1003 <h3 id="margin-at-rules">At-rules for page-margin boxes</h3>
  1005 <p>Page-margin boxes are created by
  1006 <a href="#margin-at-rules">margin at-rules</a>
  1007 inside the <a href="#page-context">page context</a>.
  1008 These rules should come after any declarations in the page context as legacy
  1009 clients may not handle declarations after margin at-rules correctly.</p>
  1011 <p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an
  1012 <a href="#specializatons-of-ATKEYWORD">ATKEYWORD</a>
  1013 that identifies the page-margin box
  1014 (e.g. <span class="css">'@top-left'</span>) and a block of declarations (said
  1015 to be in the <dfn id="margin-context">margin context</dfn>).</p>
  1017 <div class="example">
  1019 <p>The following style sheet establishes a page header containing the title
  1020 ("Hamlet") on the left side and the page number, preceded by "Page ", on the
  1021 right side:</p>
  1022 <pre>
  1023 @page {
  1024   size: 8.5in 11in;
  1025   margin: 10%;
  1027   @top-left {
  1028     content: "Hamlet";
  1030   @top-right {
  1031     content: "Page " counter(page);
  1034 </pre>
  1035 </div>
  1038 <h3 id="populating-margin-boxes">Populating page-margin boxes</h3>
  1040 <p>As with the '':before'' and '':after'' pseudo-elements,
  1041 a specified 'content' of ''normal'' on a page-margin box computes to ''none'',
  1042 and the page-margin box is <dfn>generated</dfn>
  1043 if and only if the computed value
  1044 of its 'content' property is not 'none'.
  1045 Otherwise it behaves as if it had ''display: none''.
  1047 <div class="example">
  1048 <p>The following style sheet creates a green box in each corner of the page
  1049 except the bottom-left corner.</p>
  1050 <pre>
  1051   @page {
  1052     @top-left-corner { content: " "; border: solid green; }
  1053     @top-right-corner { content: url(foo.png); border: solid green; }
  1054     @bottom-right-corner { content: counter(page); border: solid green; }
  1055     @bottom-left-corner { content: normal; border: solid green; }
  1057 </pre>
  1058 </div>
  1060 <h3 id="margin-box-dimensions">Computing Page-margin Box Dimensions</h3>
  1062 <p>The width and height of each page-margin box is determined by the rules
  1063 below. These rules define the equivalent of CSS2.1 Sections 10.3 and
  1064 10.6 for page-margin boxes.</p>
  1066 <p>The rules for applying 'min-height', 'max-height', 'min-width', and
  1067 'max-width' [[!CSS21]] do apply to page-margin boxes and may imply
  1068 a recalculation of the width, height, and/or margins
  1069 if the dimensions resulting from the specified 'width' or 'height'
  1070 violate their constraints.
  1071 If the UA does not support the 'min-height' or 'min-width' properties
  1072 then it must behave as if 'min-height' and 'min-width' were always zero.
  1074 <h4 id="max-margin-dimension">Page-Margin Box Layout Terminology</h4>
  1076 <p>In addition to the box model definitions in CSS2.1 [[!CSS21]], the following
  1077 terms are defined for use in the subsequent page-margin box calculations:</p>
  1079 <dl>
  1081 <dt id="MaxBoxWidth"><dfn>max box width</dfn></dt>
  1082 <dd>the sum of the page’s left border width, left padding,
  1083 <a href="#page-box">page area</a> width, right padding, and right border width.
  1084 In other words, it is the distance between the <a href="#page-box">page
  1085 box</a>’s left border edge and right border edge</a>. This quantity is used
  1086 when calculating dimensions of the top and bottom page-margin boxes.</dd>
  1088 <dt id="MaxBoxHeight"><dfn>max box height</dfn></dt>
  1089 <dd>the sum of the page’s top border width, top padding,
  1090 <a href="#page-box">page area</a> height, bottom padding, and bottom border
  1091 width. In other words, it is the distance between the <a href="#page-box">page
  1092 box</a>’s top border edge and bottom border edge. This quantity is used when
  1093 calculating dimensions of the left and right page-margin boxes.</dd>
  1095 <dt><dfn>outer width</dfn></dt>
  1096 <dd>the sum of a page-margin box's left and right margins, left and right border
  1097 widths, left and right padding, and content-box width.</dd>
  1099 <dt><dfn>outer height</dfn></dt>
  1100 <dd>the sum of a page-margin box's top and bottom margins, top and bottom border
  1101 widths, top and bottom padding, and content-box height.</dd>
  1102 </dl>
  1104 <dt><dfn>outer min-content</dfn> width</dt>
  1105 <dd>Like the <i>outer width</i>, except that
  1106 <a href="http://www.w3.org/TR/css3-sizing/#min-content">''min-content''</a>
  1107 is used when 'width' is ''auto''.</dd>
  1109 <dt><dfn>outer max-content</dfn> width</dt>
  1110 <dd>Like the <i>outer width</i>, except that
  1111 <a href="http://www.w3.org/TR/css3-sizing/#max-content">''max-content''</a>
  1112 is used when 'width' is ''auto''.</dd>
  1114 <p>The <dfn>containing block</dfn> for a corner page-margin box is the rectangle
  1115 defined by the intersection of the two page margins meeting at that corner.</p>
  1117 <p>For all other page-margin boxes,
  1118 the <dfn>containing block</dfn> is the rectangle
  1119 formed by the encapsulating page margin minus the containing blocks of the
  1120 adjacent corners' page-margin boxes.
  1121 This means that the size of this containing block is given
  1122 in one dimension by the used page margin and in the other dimension
  1123 by the <a href="#MaxBoxWidth">max box width</a>
  1124 (for top and bottom page-margin boxes) or
  1125 <a href="#MaxBoxHeight">max box height</a>
  1126 (for left and right page-margin boxes).</p>
  1128 <h4 id="margin-dimension">Page-Margin Box Variable Dimension Computation Rules</h4>
  1130 <p>The following rules apply to 'top-left', 'top-center' and 'top-right'
  1131 page-margin boxes,
  1132 which are referred to as A, B, and C, respectively, in this section.</p>
  1134 <h5 id="marginbox-variabledim-margins">Margins</h5>
  1136 <p>If the 'margin-left' or 'margin-right' property of any of the three boxes
  1137 computes to ''auto'', the used value is zero.</p>
  1139 <h5 id="marginbox-variabledim-with">Resolving ''auto'' widths</h5>
  1141 <p>The following algorithm determines the used width of each box.
  1142 For this purpose, boxes that are not <i>generated</i>
  1143 are assumed to have a 'width' and an <i>outer width</i> of zero.
  1144 </p>
  1146 <p class="note">
  1147 Note: The high-level goals are (in order of priority) to center the middle
  1148 box (B) if it is generated, to minimize overflow and overlap, and to
  1149 distribute space proportionally to the amount of content.</p>
  1151 <ol>
  1152   <li>
  1153     If B is not <i>generated</i>:
  1154     <ol>
  1155       <li>
  1156         If only box has 'width: auto', its used width is resolved so that
  1157         the sum of the <i>outer width</i>s equals <i>max box width</i>.
  1158       </li>
  1160       <li>
  1161         If A and C both have 'width: auto':
  1162         <ol>
  1163           <li>
  1164             Let <i>free space</i> be <i>max box width</i> minus
  1165             A’s and C’s <i>outer min-content width</i>.
  1166           </li>
  1168           <li>
  1169             If <i>free space</i> is positive,
  1170             let the respective <i>weight</i> for A and C be
  1171             <i>max-content</i> minus <i>min-content</i>.
  1172             If it is negative or zero, let the weights be <i>min-content</i>.
  1173             In either case if both weights are zero, let them be '1px' instead.
  1174             <span class="note">
  1175               The '1px' value is arbitrary as long as the weights are equal.
  1176             </span>
  1177           </li>
  1179           <li>
  1180             The respective used width is
  1181             <i>min-content</i> + <i>free space</i> × <i>weight</i>
  1182             ÷ sum of both weights
  1183           </li>
  1184         </ol>
  1185       </li>
  1186     </ol>
  1187   </li>
  1189   <li>
  1190     If B is <i>generated</i>:
  1191     <ol>
  1192       <li>
  1193         If B has 'width: auto':
  1194         <ol>
  1195           <li>
  1196             Let <i>free space</i> be <i>max box width</i>
  1197             - 2 × max(<i>min<sub>A</sub></i>, <i>min<sub>C</sub></i>)
  1198             - <i>min<sub>B</sub></i>,
  1199             where <i>min</i> is a box’s <i>outer min-content width</i>
  1200             if 'width' is ''auto'', zero otherwise.
  1201           </li>
  1202           <li>
  1203             Let <i>upper limit</i> be <i>max box width</i>
  1204             - 2 × max(<i>fixed<sub>A</sub></i>, <i>fixed<sub>C</sub></i>),
  1205             where <i>fixed</i> is a box’s <i>outer width</i>
  1206             if 'width' is not ''auto'', zero otherwise.
  1207           </li>
  1208           <li>
  1209             If <i>free space</i> is positive,
  1210             let the <i>weight</i> of a box be
  1211             <i>max-content</i> minus <i>min-content</i>.
  1212             If it is negative or zero, let the weights be <i>min-content</i>.
  1213           </li>
  1214           <li>
  1215             Let <i>weight<sub>AC</sub></i> be
  1216             max(<i>weight<sub>A</sub></i>, <i>weight<sub>C</sub></i>)
  1217           </li>
  1218           <li>
  1219             If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>
  1220             are zero, let them be '1px' instead.
  1221           </li>
  1222           <li>
  1223             B’s used width is
  1224             min(<i>upper limit</i>,
  1225                 <i>min-content</i> +
  1226                   <i>free space</i> × <i>weight<sub>B</sub></i>
  1227                   ÷ (<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))
  1228           </li>
  1229         </ol>
  1230       </li>
  1231       <li>
  1232         Then, if A or C has 'width: auto',
  1233         the respective used widths are resolved so that <i>outer width</i>
  1234         equals (<i>max box width</i> - B’s <i>outer width</i>) ÷ 2
  1235       </li>
  1236     </ol>
  1237   </li>
  1238 </ol>
  1240 <h5 id="marginbox-variabledim-minmax">Handling 'min-width' and 'max-width'</h5>
  1242 <p>
  1243   The 'min-width' and 'max-width' properties [[CSS21]] apply to page-margin
  1244   boxes in the variable dimension like on normal elements, except that the
  1245   three boxes on the same side are considered together.
  1246 </p>
  1248 <p>
  1249   More precisely:
  1250 </p>
  1252 <ol>
  1253   <li>
  1254     The tentative used widths are calculated
  1255     (without 'min-width' and 'max-width') following the rules under
  1256     <a href="#marginbox-variabledim-with">Resolving ''auto'' widths</a>
  1257     above.
  1258   </li>
  1259   <li>
  1260     If the tentative used width of any of the three boxes
  1261     is greater than 'max-width', the rules above are applied again,
  1262     but this time using the computed value of 'max-width'
  1263     as the computed value for 'width'.
  1264   </li>
  1265   <li>
  1266     If the resulting width of any of the three boxes
  1267     is smaller than 'min-width', the rules above are applied again,
  1268     but this time using the value of 'min-width'
  1269     as the computed value for 'width'.
  1270   </li>
  1271 </ol>
  1273 <h5 id="marginbox-variabledim-positioning">Positioning</h5>
  1275 <p>
  1276   Once the dimensions of the boxes are determined,
  1277   they are positioned as follows:
  1278 </p>
  1280 <ul>
  1281   <li>The left outer edge of A is flush with the left edge of the
  1282       containing block</li>
  1283   <li>The outer area of B is centered in the containing block.</li>
  1284   <li>The right outer edge of C is flush with the right edge of the
  1285       containing block.</li>
  1286 </ul>
  1288 <h5 id="marginbox-variabledim-others">Boxes on other sides</h5>
  1290 <p>The used values for 'bottom-left', 'bottom-center' and 'bottom-right'
  1291 page-margin boxes are established by the same rules as
  1292 for 'top-left', 'top-center', and 'top-right', respectively.</p>
  1294 <p>The used values for 'left-top', 'left-middle' and 'left-bottom' boxes are
  1295 established by the same rules, with "width" replaced by "height", "left" by
  1296 "top", "right" by "bottom" and "center" by "middle".</p>
  1298 <p>The used values for 'right-top', 'right-middle' and 'right-bottom'
  1299 page-margin boxes
  1300 are established by the same rules as for 'left-top', 'left-middle' and
  1301 'left-bottom', respectively.</p>
  1303 <h4 id="margin-constraints">Page-Margin Box Fixed Dimension Computation Rules</h4>
  1305 <p>The rules below are used to calculate the used values of each
  1306 'top-left-corner', 'top-left', 'top-center', 'top-right', and
  1307 'top-right-corner' page-margin box's 'height', 'margin-top', and 'margin-bottom'
  1308 properties:</p>
  1310 <ol>
  1311   <li>The following constraint must hold among the used values of the margin
  1312   box's properties:
  1313   <p>'margin-top' + 'border-top-width' + 'padding-top' + 'height' +
  1314   'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = top page margin
  1316   <li>If 'border-top-width' + 'padding-top' + 'height' (if it is not ''auto'')
  1317   + 'padding-bottom' + 'border-bottom-width', plus 'margin-top' and/or
  1318   'margin-bottom' if not ''auto'', is larger than the height of the top page
  1319   margin, then any ''auto'' values for 'margin-top' or 'margin-bottom' are, for
  1320   the following rules, treated as zero.
  1322   <li>If at this point all of 'height', 'margin-top', and 'margin-bottom'
  1323   have a computed value other than ''auto'', the values are said to be
  1324   "over-constrained". In this case, the specified value of 'margin-top' is
  1325   treated as 'auto'.
  1327   <li>If there is now exactly one value specified as 'auto', its used value
  1328   follows from the equality.
  1330   <li>If 'height' is set to 'auto', any other 'auto' values become '0' and
  1331   'height' follows from the resulting equality
  1333   <li>If both 'margin-top' and 'margin-bottom' are 'auto',
  1334   their used values are equal.
  1335   This vertically centers the page-margin box content
  1336   within the top page margin.
  1337 </ol>
  1339 <p>The same rules apply to the bottom page-margin boxes (bottom-left-corner,
  1340 bottom-left, bottom-center, bottom-right, and bottom-right-corner), except that
  1341 in the overconstrained case, the 'margin-bottom' is ignored rather than the
  1342 'margin-top'.</p>
  1344 <p>Analogous rules govern the properties for the left and right
  1345 page-margin boxes with respect to 'width'
  1346 (top-left-corner, left-top, left-middle, left-bottom, and
  1347 bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom,
  1348 bottom-right-corner), with 'top' replaced by 'left', 'bottom' replaced by
  1349 'right', and 'height' replaced by 'width'.
  1350 In the overconstrained case for left (right) page-margin boxes,
  1351 the specified value of 'margin-left' ('margin-right') is ignored.</p>
  1353 <h3 id="margin-box-ex">Page-margin box examples</h3>
  1355 <p>The following is a collection of examples of page-margin box usage.</p>
  1357 <div class="example">
  1359 <p>Here is an example of a page with only a top-left header:</p>
  1360 <pre>
  1361 @page {
  1362 @top-left { content: "Header in Left Cell (top-left)" }
  1364 </pre>
  1366 <p>Because there are no contents defined for the top-center or the top-right
  1367 page-margin boxes, the extent of the top-left page-margin box
  1368 is allowed to cross the center of the page box.</p>
  1370 <p><img alt="Header Example 1" src="header-ex-1.png" height="177" width="737"></p>
  1371 </div>
  1373 <div class="example">
  1375 <p>The following is an example of a page with a centered header:</p>
  1376 <pre>
  1377 @page {
  1378 @top-center { content: "Header in Center Cell (top-center)" }
  1380 </pre>
  1382 <p><img alt="Header Example 2" src="header-ex-2.png" height="177" width="737"></p>
  1383 </div>
  1385 <div class="example">
  1387 <p>The following is an example of a page with a single header in the top-right
  1388 page-margin box:</p>
  1389 <pre>
  1390 @page {
  1391 @top-right { content: "Header in Right Cell (top-right)" }
  1393 </pre>
  1395 <p>Because the content of the center cell is empty, the extent of the top-right
  1396 page-margin box is allowed to cross the center of the page box.</p>
  1398 <p><img alt="Header Example 3" src="header-ex-3.png" height="177" width="737"></p>
  1399 </div>
  1401 <div class="example">
  1403 <p>The following is an example of a page with a top-center and a top-left header:</p>
  1404 <pre>
  1405 @page {
  1406 @top-left { content: "Left Cell (top-left)" }
  1407 @top-center { content: "Header in Center Cell (top-center)" }
  1409 </pre>
  1411 <p><img alt="Header Example 4" src="header-ex-4.png" height="177" width="737"></p>
  1412 </div>
  1414 <div class="example">
  1416 <p>The following is an example of a page with a top-center and a top-right header:</p>
  1417 <pre>
  1418 @page {
  1419 @top-center { content: "Header in Center Cell (top-center)" }
  1420 @top-right { content: "Right Cell (top-right)" }
  1422 </pre>
  1424 <p><img alt="Header Example 5" src="header-ex-5.png" height="177" width="737"></p>
  1425 </div>
  1427 <div class="example">
  1429 <p>The following is an example of a page with top-left and top-right headers:</p>
  1430 <pre>
  1431 @page {
  1432 @top-left { content: "Header in top-left with approx. "
  1433                    "twice as many words as right cell." }
  1434 @top-right { content: "Right cell (top-right)" }
  1436 </pre>
  1438 <p>Because there are no center cell contents, the extent of the top-left is
  1439 allowed to cross the center of the page box.</p>
  1441 <p><img alt="Header Example 6" src="header-ex-6.png" height="177" width="737"></p>
  1442 </div>
  1444 <h2 id="page-properties">Page Properties</h2>
  1445 <div>
  1447 <p>The following properties, when used in the <a href="#page-context">page
  1448 context</a>, apply to the page box:</p>
  1450 <ul>
  1451   <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a></li>
  1452   <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a></li>
  1453   <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a></li>
  1454   <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
  1455   <li><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>
  1456   <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a></li>
  1457   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a></li>
  1458   <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a></li>
  1459   <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
  1460   <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a></li>
  1461   <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
  1462   <li><a href="#page-size">size</a></li>
  1463   <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
  1464   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a></li>
  1465 </ul>
  1467 <p>The following properties, when used in a <a href="#margin-at-rule">margin
  1468 context</a>, apply to page-margin boxes and their content:</p>
  1470 <ul>
  1471   <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
  1472   <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
  1473   <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
  1474   <li><a href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
  1475   <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
  1476   <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
  1477   <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>
  1478   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
  1479   <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
  1480   <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
  1481   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
  1482   <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
  1483   <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
  1484   <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
  1485   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
  1486   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
  1487   <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>
  1488   <li><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
  1489 </ul>
  1491 <p>A detailed list of properties that <em class="RFC2119">MUST</em> be supported
  1492 within page and margin contexts by a conforming implementation can be found in
  1493 <a href="#properties-list">Appendix A</a>.</p>
  1495 <p>Other properties defined by [[!CSS21]] do not apply in these contexts. Behavior
  1496 for properties not included in CSS 2.1 and not listed here or in Appendix A is
  1497 undefined.</p>
  1499 <p class="note">
  1500 Note: The intent of leaving other properties undefined is to allow the gradual
  1501 addition of appropriate CSS3 properties as they emerge, without having to
  1502 update this specification with each addition.</p>
  1504 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
  1505 elements in the document</a>, both the page context and the margin context
  1506 have a computed value for every property, even if that property does not
  1507 apply to the page or page-margin box.</p>
  1509 <p>The normal rules for CSS properties apply with the following exceptions:</p>
  1511 <ul>
  1512   <li>page-margin boxes inherit from the page context.
  1513   The page context inherits from the root element.
  1514   However, since the previous revision of CSS Paged
  1515   Media Level 3 did not specify this point, an implementation that sets
  1516   inherited properties in the page context to their initial values (as for the
  1517   root element) is also conformant to CSS Paged Media Level 3. Note that this
  1518   exception will be removed in Level 4.
  1519   <li>Values in units of ''em'' and ''ex'' are interpreted relative to the font
  1520   associated with their context. When used on the 'font-size' property in the
  1521   margin context, they are relative to the font of the page context. When used
  1522   on the 'font-size' property in the page context, they are relative to the
  1523   'font-size' of the root element. However, since a previous revision of CSS
  1524   Paged Media Level 3 was ambiguous on this point, an implementation that
  1525   treats ''em'' and ''ex'' on 'font-size' as relative to the initial value is
  1526   also conformant to CSS Paged Media Level 3. Note that this exception will
  1527   be removed in Level 4.
  1528   <li>Percentage values on the margin and padding properties are relative to the
  1529   dimensions of the containing block. For right and left values, percentages are
  1530   relative to the width of the containing block; for top and bottom values,
  1531   percentages are relative to the height of the containing block.</li>
  1532   <li>The used values of 'width' and 'height' have special computation rules
  1533   for page boxes and page-margin boxes; see <a href="#page-size">Page Size</a>
  1534   and <a href="#margin-box-dimensions">Computing Page-Margin Box Dimensions</a>.
  1535   <li>The page background is positioned and painted
  1536     <a href="#painting">as described above</a>.
  1537   <li>The rules for counter scoping are modified <a href="page-based-counters">as
  1538   described below</a>.</li>
  1539   <li>
  1540     As on the '::before' and '::after' pseudo-elements,
  1541     the ''normal'' value of the 'content' property computes to ''none''
  1542     on page-margin boxes.
  1543   </li>
  1544   <li>On page-margin boxes, the 'vertical-align' property behaves
  1545   <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as specified for table cells</a>.
  1546   It <em>always</em> performs alignment in the vertical dimension,
  1547   regardless of writing mode.
  1548 </ul>
  1550 <p>It is <em class="RFC2119">recommended</em> that user agents establish a default
  1551 page margin via the user agent stylesheet that includes any non-printable area.
  1552 It is further <em class="RFC2119">recommended</em> that authors assume that the
  1553 default page area will not include unprintable regions.</p>
  1555 <h3 id="page-based-counters">Page-based counters</h3>
  1557 <p>Counters can be defined and controlled within an <span class="css">'@page'</span>
  1558 rule, and used as content in page-margin boxes.
  1559 This is useful for maintaining a page count.</p>
  1561 <div class="example">
  1563 <p>The following rules result in the placement of the current page number in the
  1564 middle of the outside margin of each page.</p>
  1565 <pre>
  1566 @page {
  1567 margin: 10%;
  1568 counter-increment: page;
  1570 @top-center {
  1571   font-family: sans-serif;
  1572   font-weight: bold;
  1573   font-size: 2em;
  1574   content: counter(page);
  1577 </pre>
  1578 </div>
  1580 <p>A 'counter-increment' within either a page or margin context causes the counter
  1581 to increment with the generation of each page box.</p>
  1583 <p>If a counter is reset or incremented within the page context, it is in scope
  1584 for all page-margin boxes and obscures all counters of the same name within the
  1585 document.</p>
  1587 <p>If a counter is reset or incremented within a margin context, it is in scope
  1588 for that page-margin box and obscures any counters of the same name
  1589 in both the page context and the document.</p>
  1591 <p>If a counter that has not been reset or incremented within the margin context
  1592 or the page context is used by counter() or counters() in the margin context,
  1593 then the resultant value is exactly
  1594 as if the page-margin box were an element within
  1595 the document at the start of the page, inside the deepest element in the normal
  1596 flow that spans the page break. Use of the counter in this way does not affect
  1597 the calculation of the counter's value.</p>
  1599 <p>A counter named ''page'' is automatically created and incremented on every
  1600 page of the document. Specifically, the UA must automatically create and
  1601 increment such a counter as if ''@page { counter-increment: page; }'' were
  1602 specified. The implied ''page'' counter is a real counter, and can be directly
  1603 affected using the 'counter-increment' and 'counter-reset' properties when
  1604 named explicitly in those properties. It can also be used in the 'counter()'
  1605 and 'counters()' function forms.</p>
  1607 <p>Additionally, a counter named ''pages'' is automatically created by the UA.
  1608 Its value is always the total number of pages in the document. (In continuous
  1609 media this is always 1.) The value of ''pages'' cannot be manipulated: while
  1610 'counter-reset' and 'counter-increment' statements that set it are valid, they
  1611 have no effect.
  1613 <p>In all other respects, page-associated counters behave as described in
  1614 [[!CSS21]], <a href="TR/CSS21/generate.html#scope">Nested Counters and
  1615 Scope</a> and <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.</p>
  1617 <h3 id="margin-text-alignment">Page-margin boxes and default values</h3>
  1619 <p>Properties used within page or margin contexts take their initial values from
  1620 their respective property definitions; however, user agents must behave as
  1621 though the values in the following table were established by rules in the UA
  1622 default style sheet.</p>
  1623 <table id="margin-values" class="data" summary="definition of page-margin box default properties">
  1624   <caption>Table 2. Default values for Page-Margin Boxes</caption>
  1625   <thead>
  1626     <tr>
  1627       <th>Page-margin box</th>
  1628       <th><span class="property">'text-align'</span></th>
  1629       <th><span class="property">'vertical-align'</span></th>
  1630     </tr>
  1631   </thead>
  1632   <tbody>
  1633     <tr>
  1634       <td><a href="#top-left-corner-box-def">top-left-corner</a></td>
  1635       <td>right</td>
  1636       <td>middle</td>
  1637       </tr>
  1638     <tr>
  1639       <td><a href="#top-left-box-def">top-left</a></td>
  1640       <td>left</td>
  1641       <td>middle</td>
  1642       </tr>
  1643     <tr>
  1644       <td><a href="#top-center-box-def">top-center</a></td>
  1645       <td>center</td>
  1646       <td>middle</td>
  1647       </tr>
  1648     <tr>
  1649       <td><a href="#top-right-box-def">top-right</a></td>
  1650       <td>right</td>
  1651       <td>middle</td>
  1652       </tr>
  1653     <tr>
  1654       <td><a href="#top-right-corner-box-def">top-right-corner</a></td>
  1655       <td>left</td>
  1656       <td>middle</td>
  1657       </tr>
  1658     <tr>
  1659       <td><a href="#left-top-box-def">left-top</a></td>
  1660       <td>center</td>
  1661       <td>top</td>
  1662       </tr>
  1663     <tr>
  1664       <td><a href="#left-middle-box-def">left-middle</a></td>
  1665       <td>center</td>
  1666       <td>middle</td>
  1667       </tr>
  1668     <tr>
  1669       <td><a href="#left-bottom-box-def">left-bottom</a></td>
  1670       <td>center</td>
  1671       <td>bottom</td>
  1672       </tr>
  1673     <tr>
  1674       <td><a href="#right-top-box-def">right-top</a></td>
  1675       <td>center</td>
  1676       <td>top</td>
  1677       </tr>
  1678     <tr>
  1679       <td><a href="#right-middle-box-def">right-middle</a></td>
  1680       <td>center</td>
  1681       <td>middle</td>
  1682       </tr>
  1683     <tr>
  1684       <td><a href="#right-bottom-box-def">right-bottom</a></td>
  1685       <td>center</td>
  1686       <td>bottom</td>
  1687       </tr>
  1688     <tr>
  1689       <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a></td>
  1690       <td>right</td>
  1691       <td>middle</td>
  1692       </tr>
  1693     <tr>
  1694       <td><a href="#bottom-left-box-def">bottom-left</a></td>
  1695       <td>left</td>
  1696       <td>middle</td>
  1697       </tr>
  1698     <tr>
  1699       <td><a href="#bottom-center-box-def">bottom-center</a></td>
  1700       <td>center</td>
  1701       <td>middle</td>
  1702       </tr>
  1703     <tr>
  1704       <td><a href="#bottom-right-box-def">bottom-right</a></td>
  1705       <td>right</td>
  1706       <td>middle</td>
  1707       </tr>
  1708     <tr>
  1709       <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a></td>
  1710       <td>left</td>
  1711       <td>middle</td>
  1712     </tr>
  1713   </tbody>
  1714 </table>
  1716 <div class="example">
  1718 <p>This example style sheet could be used to create a centered header with the
  1719 current chapter name:</p>
  1720 <pre>body {counter-reset: chapter;}
  1721 div.chapter {counter-increment: chapter;}
  1722 @page {
  1723 margin: 10%;
  1724 @top-center { content: "Chapter" counter(chapter) }
  1726 </pre>
  1727 </div>
  1729 <h2 id="page-size">Page Size</h2>
  1731 <p>People around the world use many different paper sizes. It is a goal of this
  1732 specification that web content should be adaptable to a range of different
  1733 sizes without having to write a specific style sheet for each paper size.</p>
  1735 <p>However, in some situations it is important that a certain page size achieves a
  1736 certain style. One way to achieve this goal is to utilize the 'size' property,
  1737 which indicates that the document should preferentially be displayed on a
  1738 surface of a certain size; another method is to use Media Queries [[MEDIAQ]]
  1739 which allow different style sheets to be applied to different page sizes.</p>
  1741 <h3 id="page-size-prop">Page size: the 'size' property</h3>
  1743 <table class="propdef" summary="definition of the size property">
  1744   <tr>
  1745     <th>Name:
  1746     <td><dfn id="size">size</dfn>
  1747   <tr>
  1748     <th>Value:
  1749     <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]
  1750   <tr>
  1751     <th>Initial:
  1752     <td>auto
  1753   <tr>
  1754     <td><em>Applies to:</em>
  1755     <td>page context
  1756   <tr>
  1757     <th>Inherited:
  1758     <td>N/A
  1759   <tr>
  1760     <th>Percentages:
  1761     <td>N/A
  1762   <tr>
  1763     <th>Media:
  1764     <td>paged
  1765   <tr>
  1766     <td><em>Computed value:</em>
  1767     <td>specified value
  1768 </table>
  1770 <p>This property specifies the target size and orientation of the
  1771 <a href="#page-box">page box</a>'s containing block.
  1772 In the general case, where one page box is rendered onto one <a href="#page-sheet">page sheet</a>,
  1773 the 'size' property also indicates the size of the destination page sheet.
  1775 <p>The size of a page box can either be "absolute" (fixed size) or "scalable"
  1776 (i.e., fitting available sheet sizes).
  1777 The first three values in the table below can be used to create scalable page
  1778 boxes.
  1779 Other values define a fixed-size page box, and thereby indicate the preferred
  1780 output media size. When possible, output should be rendered on the media size
  1781 indicated.
  1782 If the specified size is not available, the rules for
  1783 <a href="#renderingpages">transposing a page box to a different size</a>
  1784 apply.</p>
  1786 <p>If a <code>size</code> property declaration is qualified by a ''width'',
  1787 ''height'', ''device-width'', ''device-height'', ''aspect-ratio'',
  1788 ''device-aspect-ratio'' or ''orientation''
  1789 media query [[!MEDIAQ]] (or other conditional on the size of the paper), then
  1790 the declaration must be
  1791 <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
  1792 queries do not honor 'size': they assume the paper size that would be chosen
  1793 if no @page rules were specified.</p>
  1795 <p class=issue>It would be useful if media queries could respond at least
  1796 to sizes specified on an unqualified @page.
  1798 <div class="example">
  1799   <p>In the following example
  1800   <pre>
  1801   @page {
  1802     size: 4in 6in;
  1805   @media (max-width: 6in) {
  1806     @page {
  1807       size: letter;
  1810   </pre>
  1811   <p>The second <code>size</code> declaration is ignored, i.e. the specified value
  1812   of the <code>size</code> property is <code>4in 6in</code>.
  1813 </div>
  1815 <table class="page-sizes">
  1816 <tr>
  1817 <th>Value</th>
  1818 <th>Description</th>
  1819 </tr>
  1820 <tr>
  1821 <td>auto</td>
  1822 <td>The page box will be set to a size and orientation chosen by the UA. In the
  1823 usual case, the page box size and orientation is chosen to match the target
  1824 media sheet.</td>
  1825 </tr>
  1826 <tr>
  1827 <td>landscape</td>
  1828 <td>Specifies that the page's content be printed in landscape orientation. The
  1829 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
  1830 is chosen by the UA.</td>
  1831 </tr>
  1832 <tr>
  1833 <td>portrait</td>
  1834 <td>Specifies that the page's content be printed in portrait orientation. The
  1835 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
  1836 is chosen by the UA.</td>
  1837 </tr>
  1838 <tr>
  1839 <td>&lt;length&gt;</td>
  1840 <td>The page box will be set to the given absolute dimension(s). If only one length
  1841 value is specified, it sets both the width and height of the page box (i.e.,
  1842 the box is a square). If two length values are specified, the first establishes
  1843 the page box width, and the second the page box height. Values in units of
  1844 <span class="css">'em'</span> and <span class="css">'ex'</span> refer to the
  1845 page context's font. Negative lengths are illegal.</td>
  1846 </tr>
  1847 <tr>
  1848 <td>&lt;page-size&gt;</td>
  1849 <td>A page size can be specified using one of the following media names. This is
  1850 the equivalent of specifying the <span class="css">'&lt;page-size&gt;'</span>
  1851 using length values. The definition of the the media names comes from
  1852 <cite>Media Standardized Names</cite> [[!PWGMSN]].
  1854 <dl>
  1856 <dt>A5</dt>
  1857 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>
  1859 <dt>A4</dt>
  1860 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.</dd>
  1862 <dt>A3</dt>
  1863 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>
  1865 <dt>B5</dt>
  1866 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>
  1868 <dt>B4</dt>
  1869 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>
  1871 <dt>letter</dt>
  1872 <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11
  1873 inches high</dd>
  1875 <dt>legal</dt>
  1876 <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches
  1877 high.</dd>
  1879 <dt>ledger</dt>
  1880 <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches
  1881 high.</dd>
  1882 </dl></td>
  1883 </tr>
  1884 </table>
  1886 <p>The '&lt;page-size&gt;' names can be used in conjunction with 'landscape' or
  1887 'portrait' to indicate both size and orientation.</p>
  1889 <h4>Some examples:</h4>
  1891 <div class="example">
  1892 <pre>
  1893 @page {
  1894 size: A4 landscape;
  1896 </pre>
  1898 <p>The above example sets the width of the page box to be 297mm and the height to
  1899 be 210mm. The page box in this example should be rendered on a page sheet size
  1900 of 210 mm by 297 mm.</p>
  1901 </div>
  1903 <div class="example">
  1905 <p>In the following example, the outer edges of the page box will align with the
  1906 page. The percentage value on the <span class="property">'margin'</span>
  1907 property is relative to the page size so if the page sheet dimensions are 210mm
  1908 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page
  1909 borders or padding set in the UA default style sheet, the resulting page area
  1910 is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>
  1911 <pre>
  1912 @page {
  1913 size: auto;/* auto is the initial value */
  1914 margin: 10%;
  1916 </pre>
  1917 </div>
  1919 <div class="example">
  1920 <pre>
  1921 @page {
  1922 size: 8.5in 11in;/* width height */
  1924 </pre>
  1926 <p>The above example sets the width of the page box to be 8.5 inches and the
  1927 height to be 11 inches. This indicates that the page sheet size should be
  1928 8.5"x11" and the orientation 'portrait'.</p>
  1929 </div>
  1931 <h4 id="page-size-media-query">Media Queries</h4>
  1933 <p>This section is informative.</p>
  1935 <p>By using Media Queries [[MEDIAQ]], one style sheet can express different
  1936 stylistic preferences for different page sizes. Consider this example:</p>
  1938 <div class="example" style="font-size: 10pt;">
  1939 <pre>
  1940  /* style sheet for "A4" printing */
  1941  @media print and (width: 21cm) and (height: 29.7cm) {
  1942     @page {
  1943        margin: 3cm;
  1947  /* style sheet for "letter" printing */
  1948  @media print and (width: 8.5in) and (height: 11in) {
  1949     @page {
  1950         margin: 1in;
  1953 </pre>
  1954 </div>
  1956 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
  1957 sheets are given a "1in" page margin.</p>
  1959 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>
  1961 <p>If a page box does not match the target page sheet dimensions, the user agent
  1962 should do one of the following (in order of preference):</p>
  1964 <ol>
  1965   <li>Render the page box at the indicated size on a larger page sheet.</li>
  1966   <li>Rotate the page box 90° if this will make the page box fit the page sheet.</li>
  1967   <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box
  1968   <em class="RFC2119">should</em> be preserved.)</li>
  1969   <li>Reformat the page contents, including 'spilling' onto other page sheets.</li>
  1970   <li>Clip overflowed content (least preferred).</li>
  1971 </ol>
  1973 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before
  1974 performing these operations.</p>
  1976 <h3 id="positioning-page-box">Positioning the page box on the sheet</h3>
  1978 <p>When the page box is smaller than the page size, the user agent <em class="RFC2119">SHOULD</em> either:</p>
  1980 <ul>
  1981   <li>center the page box on the sheet since this will align double-sided pages
  1982   and avoid accidental loss of information that is printed near the edge of the
  1983   sheet; or</li>
  1984   <li>position the page box in the upper left corner of the page sheet, as this
  1985   may minimize media consumption.</li>
  1986 </ul>
  1988 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this
  1989 regard.</p><!-- "Page selector and page context" -->
  1991 <h2 id="page-breaks">
  1992     <a id="pg-br-before-after"></a>
  1993     <a id="page-break-before"></a>
  1994     <a id="page-break-after"></a>
  1995     <a id="page-break-inside"></a>
  1996     <a id="breaks-inside"></a>
  1997     <a id="orphans"></a>
  1998     <a id="widows"></a>
  1999     <a id="allowed-pg-brk"></a>
  2000     <a id="brk-btw-blocks"></a>
  2001     <a id="brk-btw-lines"></a>
  2002     <a id="brk-end-block"></a>
  2003     <a id="forced-pg-brk"></a>
  2004     <a id="best-pg-brk"></a>
  2005     Page Breaks
  2006 </h2>
  2008 <p>
  2009   The [[!CSS3-BREAK]] module defines how and where CSS boxes
  2010   can be <i>fragmented</i>, including across page breaks.
  2011   It defines a few properties that indicate where the user agent
  2012   <em class="RFC2119">MAY</em> or <em class="RFC2119">MUST</em> break pages,
  2013   and on what page (left or right) the subsequent content resumes.
  2014   Each page break ends layout in the current <a href="#page-box">page box</a>
  2015   and causes remaining pieces of the document tree to be laid out
  2016   in a new page box.
  2017 </p>
  2019 <h3 id="using-named-pages">Using named pages: 'page'</h3>
  2020 <table class="propdef" summary="property definition">
  2021   <tr>
  2022     <th>Name:
  2023     <td><dfn id="page">page</dfn>
  2024   <tr>
  2025     <th>Value:
  2026     <td>auto | &lt;identifier&gt;
  2027   <tr>
  2028     <th>Initial:
  2029     <td>auto
  2030   <tr>
  2031     <th>Applies to:
  2032     <td>block-level elements
  2033   <tr>
  2034     <th>Inherited:
  2035     <td>no (but see prose)
  2036   <tr>
  2037     <th>Percentages:
  2038     <td>N/A
  2039   <tr>
  2040     <th>Media:
  2041     <td>paged
  2042   <tr>
  2043     <th>Computed value:
  2044     <td>specified value
  2045 </table>
  2047 <p>The 'page' property is used to specify a particular type of page
  2048 on which an element <em class="RFC2119">MUST</em> be displayed.
  2049 If necessary, a <i>forced page break</i> is introduced
  2050 and a new page generated of the specified type.
  2052 <div class="example">
  2054 <p>This example will put all tables on a right-hand side landscape page (named
  2055 "rotated"):</p>
  2056 <pre>
  2057 @page rotated { size: landscape }
  2058 table { page: rotated; page-break-before: right }
  2059 </pre>
  2060 </div>
  2062 <p>
  2063   The 'page' property works as follows:
  2064   If the two boxes meeting at a <a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break point
  2065   do not have the same propagated value for 'page',
  2066   then a page break is forced between them,
  2067   and the boxes after the break are rendered on a page box of the named type.
  2068   The propagated value 
  2069   See [[!CSS3-BREAK]] for additional details on paged breaks.
  2070 </p>
  2073 <p>
  2074   The 'page' property does not inherit.
  2075   However, if the 'page' value on an element is ''auto'',
  2076   then it is treated as having the same name as its nearest ancestor with a non-auto value.
  2077   When indicated on the root element, the effective name is the empty string.
  2079 <p>Because a previous version of this specification indicated that the 'page'
  2080 property is inherited, an implementation that inherits the 'page' property and
  2081 treats ''auto'' as always naming the empty string remains conformant to CSS3
  2082 Paged Media. Therefore authors should not explicitly specify the ''auto''
  2083 value on a descendant of an element with a non-''auto'' 'page' value as the
  2084 resulting behavior will be unpredictable.
  2086 <p>
  2087   Page names are case-sensitive identifiers.
  2088   However the ''auto'' value, being a CSS keyword, is
  2089   <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>.
  2091 <div class="example">
  2093 <p>In this example, the two tables are rendered on landscape pages (indeed, on the
  2094 same page, if they fit). The page type "narrow" is used for the &lt;p&gt; after
  2095 the second table, as the page properties for the table element are no longer in
  2096 effect:</p>
  2097 <pre>
  2098 @page narrow { size: 9cm 18cm }
  2099 @page rotated { size: landscape }
  2100 div { page: narrow }
  2101 table { page: rotated }
  2102 </pre>with this document:
  2103 <pre>
  2104 &lt;div&gt;
  2105 &lt;table&gt;...&lt;/table&gt;
  2106 &lt;table&gt;...&lt;/table&gt;
  2107 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;
  2108 &lt;/div&gt;
  2109 </pre>
  2110 </div>
  2112 <div class="example">
  2113   <p>In Japanese documents, sometimes different parts of a single document
  2114   will have different <i lang="ja-Latn">kihon hanmen</i>. [[JLREQ]]
  2115   The 'page' property, together with ''@page'' rules specifying different page widths,
  2116   can accomodate this type of layout:
  2117   <pre>
  2118 &lt;!DOCTYPE html>
  2119 &lt;html lang="ja">
  2120   &lt;style>
  2121     html   { writing-mode: vertical-rl;
  2122              line-height: 1.6; }
  2123     .main  { page: main;
  2124              columns: 2; column-gap: 1rem; }
  2125     .index { page: index;
  2126              columns: 3; column-gap: 1rem; }
  2127     @page       { margin: auto;    /* center kihon hanmen on page */
  2128                   width:  40rem; } /* 1.6 &times; 25 lines        */
  2129     @page main  { height: 61rem; } /* 2 &times; 30 chars + 1 &times; gap */
  2130     @page index { height: 62rem; } /* 3 &times; 20 chars + 2 &times; gap */
  2131   &lt;/style>
  2132   &lt;section class="main"> ... &lt;/section>
  2133   &lt;section class="index"> ... &lt;/section>
  2134 &lt;/html>
  2135 </pre>
  2136 </div>
  2139 <h2 id="image-properties">Image Properties</h2>
  2141 <p class="note">This section has been moved to [[CSS3-IMAGES]].</p>
  2143 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>
  2145 <h3 class="no-num">Properties that apply within the page context</h3>
  2147 <p>The following CSS 2.1 [[!CSS21]] properties apply to the page box.
  2148 If a conforming user agent supports any of these properties on block
  2149 boxes, then it must also support that property for the page box.</p>
  2151 <table class="property-list">
  2152   <tbody>
  2153     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
  2154         <td>direction
  2155   <tbody>
  2156     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
  2157         <td>background-color
  2158     <tr><td>background-image
  2159     <tr><td>background-repeat
  2160     <tr><td>background-attachment
  2161     <tr><td>background-position
  2162     <tr><td>background
  2163   <tbody>
  2164     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
  2165         <td>border-top-width
  2166     <tr><td>border-right-width
  2167     <tr><td>border-bottom-width
  2168     <tr><td>border-left-width
  2169     <tr><td>border-width
  2170     <tr><td>border-top-color
  2171     <tr><td>border-right-color
  2172     <tr><td>border-bottom-color
  2173     <tr><td>border-left-color
  2174     <tr><td>border-color
  2175     <tr><td>border-top-style
  2176     <tr><td>border-right-style
  2177     <tr><td>border-bottom-style
  2178     <tr><td>border-left-style
  2179     <tr><td>border-short-style
  2180     <tr><td>border-top
  2181     <tr><td>border-right
  2182     <tr><td>border-bottom
  2183     <tr><td>border-left
  2184     <tr><td>border
  2185   <tbody>
  2186     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
  2187         <td>counter-reset
  2188     <tr><td>counter-increment
  2189   <tbody>
  2190     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
  2191   <tbody>
  2192     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
  2193         <td>font-family
  2194     <tr><td>font-size
  2195     <tr><td>font-style
  2196     <tr><td>font-variant
  2197     <tr><td>font-weight
  2198     <tr><td>font
  2199   <tbody>
  2200     <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>
  2201         <td>height
  2202     <tr><td>min-height
  2203     <tr><td>max-height
  2204   <tbody>
  2205     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
  2206   <tbody>
  2207     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
  2208         <td>margin-top
  2209     <tr><td>margin-right
  2210     <tr><td>margin-bottom
  2211     <tr><td>margin-left
  2212     <tr><td>margin
  2213   <tbody>
  2214     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
  2215         <td>outline-width
  2216     <tr><td>outline-style
  2217     <tr><td>outline-color
  2218     <tr><td>outline
  2219   <tbody>
  2220     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
  2221         <td>padding-top
  2222     <tr><td>padding-right
  2223     <tr><td>padding-bottom
  2224     <tr><td>padding-left
  2225     <tr><td>padding
  2226   <tbody>
  2227     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
  2228   <tbody>
  2229     <tr><td rowspan="8"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
  2230         <td>direction
  2231     <tr><td>letter-spacing
  2232     <tr><td>text-align
  2233     <tr><td>text-decoration
  2234     <tr><td>text-indent
  2235     <tr><td>text-transform
  2236     <tr><td>white-space
  2237     <tr><td>word-spacing
  2238   <tbody>
  2239     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
  2240   <tbody>
  2241     <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>
  2242         <td>width
  2243     <tr><td>min-width
  2244     <tr><td>max-width
  2245 </table>
  2247 <p>Properties that apply to the page-margin boxes can also be set within
  2248 the page context: if inheritable or explicitly inherited (with the
  2249 <code>inherit</code> keyword in the margin context), they will inherit
  2250 to the page-margin boxes.</p>
  2252 <h3 class="no-num">Properties that apply within the margin contexts</h3>
  2254 <p>The following CSS 2.1 [[!CSS21]] properties apply to page-margin boxes.
  2255 If a conforming user agents supports any of these properties on block
  2256 boxes, then it must also support that property for page-margin boxes (except
  2257 for <code>z-index</code>, which is optional for page-margin boxes).</p>
  2259 <table class="property-list">
  2260   <tbody>
  2261     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
  2262         <td>direction
  2263     <tr><td>unicode-bidi
  2264   <tbody>
  2265     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
  2266         <td>background-color
  2267     <tr><td>background-image
  2268     <tr><td>background-repeat
  2269     <tr><td>background-attachment
  2270     <tr><td>background-position
  2271     <tr><td>background
  2272   <tbody>
  2273     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
  2274         <td>border-top-width
  2275     <tr><td>border-right-width
  2276     <tr><td>border-bottom-width
  2277     <tr><td>border-left-width
  2278     <tr><td>border-width
  2279     <tr><td>border-top-color
  2280     <tr><td>border-right-color
  2281     <tr><td>border-bottom-color
  2282     <tr><td>border-left-color
  2283     <tr><td>border-color
  2284     <tr><td>border-top-style
  2285     <tr><td>border-right-style
  2286     <tr><td>border-bottom-style
  2287     <tr><td>border-left-style
  2288     <tr><td>border-short-style
  2289     <tr><td>border-top
  2290     <tr><td>border-right
  2291     <tr><td>border-bottom
  2292     <tr><td>border-left
  2293     <tr><td>border
  2294   <tbody>
  2295     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
  2296         <td>counter-reset
  2297     <tr><td>counter-increment
  2298   <tbody>
  2299     <tr><td colspan="2"><a href="">content</a>
  2300   <tbody>
  2301     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
  2302   <tbody>
  2303     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
  2304         <td>font-family
  2305     <tr><td>font-size
  2306     <tr><td>font-style
  2307     <tr><td>font-variant
  2308     <tr><td>font-weight
  2309     <tr><td>font
  2310   <tbody>
  2311     <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>
  2312         <td>height
  2313     <tr><td>min-height
  2314     <tr><td>max-height
  2315   <tbody>
  2316     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
  2317   <tbody>
  2318     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
  2319         <td>margin-top
  2320     <tr><td>margin-right
  2321     <tr><td>margin-bottom
  2322     <tr><td>margin-left
  2323     <tr><td>margin
  2324   <tbody>
  2325     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
  2326         <td>outline-width
  2327     <tr><td>outline-style
  2328     <tr><td>outline-color
  2329     <tr><td>outline
  2330   <tbody>
  2331     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
  2332   <tbody>
  2333     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
  2334         <td>padding-top
  2335     <tr><td>padding-right
  2336     <tr><td>padding-bottom
  2337     <tr><td>padding-left
  2338     <tr><td>padding
  2339   <tbody>
  2340     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
  2341   <tbody>
  2342     <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
  2343         <td>letter-spacing
  2344     <tr><td>text-align
  2345     <tr><td>text-decoration
  2346     <tr><td>text-indent
  2347     <tr><td>text-transform
  2348     <tr><td>white-space
  2349     <tr><td>word-spacing
  2350   <tbody>
  2351     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
  2352   <tbody>
  2353     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
  2354   <tbody>
  2355     <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>
  2356         <td>width
  2357     <tr><td>min-width
  2358     <tr><td>max-width
  2359   <tbody>
  2360     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
  2361 </table>
  2363 <h2 class="no-num" id="transfer-possibilities">Appendix B: Transfer Possibilities</h2>
  2365 <p>Often, but not always, the page box has a one-to-one correspondence to the
  2366 physical surface onto which the document is ultimately rendered. The CSS3 page
  2367 model specifies formatting within the page box, but it is the user agent's
  2368 responsibility to transfer the page box to the sheet. Some user agent transfer
  2369 possibilities that are not addressed by CSS3 include:</p>
  2371 <ul id="complex-usecases">
  2372   <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>
  2373   <li>Transferring two page boxes to the front and back surfaces of the same
  2374   sheet (e.g. double-sided printing);</li>
  2375   <li>Transferring N (small) page boxes to one sheet (called "N-up");</li>
  2376   <li>Transferring one (large) page box to N x M sheets (called "tiling");</li>
  2377   <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on
  2378   a sheet, which, when folded and trimmed like a book, appear in their proper
  2379   sequence;</li>
  2380   <li>Printing one document to multiple output trays;</li>
  2381   <li>Generating files containing print instructions.</li>
  2382 </ul>
  2384 <h2 class="no-num" id="references">References</h2>
  2386 <h3 class="no-num" id="normative-references">Normative References</h3><!--normative-->
  2388 <h3 class="no-num" id="informative-references">Informative References</h3><!--informative-->
  2389 </div>
  2390 </div>
  2391 </body>
  2392 </html>

mercurial