css3-page/Overview.html

Thu, 07 Mar 2013 17:13:37 +0100

author
Simon Sapin <simon.sapin@exyr.org>
date
Thu, 07 Mar 2013 17:13:37 +0100
changeset 7677
2a3f835f72e3
parent 7672
ad000eb1bb5d
child 7681
b1294a270bbe
permissions
-rw-r--r--

[css3-page] Define the default stacking order of page-margin boxes.

WG resolution:
http://lists.w3.org/Archives/Public/www-style/2013Mar/0157.html
http://lists.w3.org/Archives/Public/www-style/2013Mar/0163.html

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     3 <html lang=en>
     4  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
     5   <title> CSS Paged Media Module Level 3</title>
     7   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
     8   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     9    rel=dcterms.rights>
    10   <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
    11   <meta content=text name=dcterms.type>
    12   <meta content=2013-03-07 name=dcterms.issued>
    13   <meta content="Melinda Grant" name=dcterms.creator>
    14   <meta content="Håkon Wium Lie" name=dcterms.creator>
    15   <meta content="Elika J. Etemad" name=dcterms.creator>
    16   <meta content="Simon Sapin" name=dcterms.creator>
    17   <meta content=W3C name=dcterms.publisher>
    18   <meta content="http://dev.w3.org/csswg/css3-page/" name=dcterms.identifier>
    19   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    20   <link href="../default.css" rel=stylesheet type="text/css">
    21   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    22    type="text/css">
    23   <style type="text/css">
    24   .keyword { font-weight:bold }
    25   .equation { padding: 2% }
    26   table.equation {text-align:center}
    27   td, th { vertical-align: top }
    28   pre { font-size: 1em; }
    30   #margin-values { border-collapse: collapse; }
    31   #margin-values td,
    32   #margin-values th
    33   {
    34                 padding: 0.2em;
    35                 border: thin solid black;
    36   }
    38   .property-list
    39   {
    40                 border: 1px solid black;
    41                 padding: .2em;
    42                 margin-top: 2em;
    43   }
    45   .property-list td
    46   {
    47                 border: 1px solid black;
    48                 padding: .1em;
    49   }
    51   .editorial
    52   {
    53                 display: block;
    54                 font-family: arial, helvetica, sans-serif;
    55       font-size: 80%;
    56       margin-left: .5in;
    57       margin-right: 1in ;
    58       padding: 0.125in;
    59       background: #FFFFDD ;
    60   }
    62   .editorial:after { content: "Ed."}
    63   .RFC2119
    64   {
    65                 text-transform: lowercase;
    66                 font-style: italic
    67   }
    69   em em.RFC2119
    70   {
    71                 text-transform: lowercase;
    72                 font-style: normal
    73   }
    75   table.page-sizes
    76   {
    77                 border: thin solid;
    78                 margin-top: 1.5em;
    79   }
    80   table.page-sizes td
    81   {
    82                 border: thin solid;
    83                 padding: .5em;
    84   }
    85   table.page-sizes th
    86   {
    87                 border: thin solid;
    88                 padding: .5em;
    89                 background: #ffffaa;
    90   }
    92 </style>
    94  <body class=h-entry>
    95   <div>
    96    <div class=head> <!--begin-logo-->
    97     <p><a href="http://www.w3.org/"><img alt=W3C height=48
    98      src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
   100     <h1 class=p-name>CSS Paged Media Module Level 3</h1>
   102     <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
   103      class=dt-updated><span class=value-title title=20130307> 7 March
   104      2013</span></span></h2>
   106     <dl>
   107      <dt>This version:
   109      <dd><a class=u-url
   110       href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
   111      <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130307</a></dd> -->
   113      <dt>Latest version:
   115      <dd><a
   116       href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a>
   118      <dt>Previous version:
   120      <dd><a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/"
   121       rel=previous>http://www.w3.org/TR/2006/WD-css3-page-20061010/</a>
   123      <dt>Issue Tracking:
   125      <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/13"
   126       rel=issues>http://www.w3.org/Style/CSS/Tracker/products/13</a>
   127       <!-- or use the wiki:
   128     <dd><a rel="issues" href="http://wiki.csswg.org/spec/css3-page"
   129            >http://wiki.csswg.org/spec/css3-page</a></dd>
   130 -->
   132      <dt>Feedback:
   134      <dd><a
   135       href="mailto:www-style@w3.org?subject=%5Bcss3-page%5D%20feedback">www-style@w3.org</a>
   136       with subject line “<kbd>[css3-page] <var>… message topic
   137       …</var></kbd>” (<a
   138       href="http://lists.w3.org/Archives/Public/www-style/"
   139       rel=discussion>archives</a>)
   141      <dt>Editors:
   143      <dd class="p-author h-card vcard"> <span class="p-name fn">Melinda
   144       Grant</span>, <span class="p-org org">Hewlett-Packard</span>
   146      <dd class="p-author h-card vcard"> <span class="p-name fn">Håkon Wium
   147       Lie</span>, <span class="p-org org">Opera Software</span>
   149      <dd class="p-author h-card vcard"> <span class="p-name fn">Elika J.
   150       Etemad</span>, <span class="p-org org">Mozilla</span>
   152      <dd class="p-author h-card vcard"> <span class="p-name fn">Simon
   153       Sapin</span>, <span class="p-org org">Kozea</span>
   154     </dl>
   155     <!--begin-copyright-->
   156     <p class=copyright><a
   157      href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   158      rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
   159      title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   160      href="http://www.csail.mit.edu/"><abbr
   161      title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   162      href="http://www.ercim.eu/"><abbr
   163      title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
   164      <a href="http://www.keio.ac.jp/">Keio</a>, <a
   165      href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
   166      href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   167      <a
   168      href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   169      and <a
   170      href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   171      use</a> rules apply.</p>
   172     <!--end-copyright--></div>
   174    <hr title="Separator for header">
   176    <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   178    <p> <span class=p-summary> This module describes the page model that
   179     partitions a flow into pages. It builds on the <a
   180     href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> and
   181     introduces and defines the page model and paged media. It adds
   182     functionality for pagination, page margins, page size and orientation,
   183     headers and footers, widows and orphans, and image orientation. Finally
   184     it extends generated content to enable page numbering and running headers
   185     / footers. </span></p>
   186    <!-- "Status of this document" -->
   187    <h2 class="no-num no-toc" id=status>Status of this Document</h2>
   188    <!--begin-status-->
   189    <p>This is a public copy of the editors' draft. It is provided for
   190     discussion only and may change at any moment. Its publication here does
   191     not imply endorsement of its contents by W3C. Don't cite this document
   192     other than as work in progress.
   194    <p>The (<a
   195     href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
   196     public mailing list <a
   197     href="mailto:www-style@w3.org?Subject=%5Bcss3-page%5D%20PUT%20SUBJECT%20HERE">
   198     www-style@w3.org</a> (see <a
   199     href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   200     discussion of this specification. When sending e-mail, please put the
   201     text “css3-page” in the subject, preferably like this:
   202     “[<!---->css3-page<!---->] <em>…summary of comment…</em>”
   204    <p>This document was produced by the <a href="/Style/CSS/members">CSS
   205     Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
   207    <p>This document was produced by a group operating under the <a
   208     href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   209     Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   210     rel=disclosure>public list of any patent disclosures</a> made in
   211     connection with the deliverables of the group; that page also includes
   212     instructions for disclosing a patent. An individual who has actual
   213     knowledge of a patent which the individual believes contains <a
   214     href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   215     Claim(s)</a> must disclose the information in accordance with <a
   216     href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of
   217     the W3C Patent Policy</a>.</p>
   218    <!--end-status-->
   219    <p>This document contains the <abbr
   220     title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
   221     Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
   222     of 7 March 2013. The Last Call period ends on <span
   223     class=fudge>TBD</span>.
   225    <p>Expected next revision to this document is another LCWD, due to the
   226     substantive changes to page-margin box sizing and other areas that are
   227     now specified with more precision.
   229    <p>The <a href="lc2_issues.htm">Disposition of Comments</a> document
   230     contains the current issues list and responses to input received during
   231     this Last Call period.
   233    <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
   234    <!--begin-toc-->
   235    <ul class=toc>
   236     <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
   238     <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>
   240     <li><a href="#page-terms"><span class=secno>3. </span>Page
   241      Terminology</a>
   243     <li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page
   244      Model</a>
   245      <ul class=toc>
   246       <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
   247        and Painting Order</a>
   249       <li><a href="#content-outside-box"><span class=secno>4.2.
   250        </span>Content outside the page box</a>
   252       <li><a href="#progression"><span class=secno>4.3. </span>Page
   253        Progression</a>
   254      </ul>
   256     <li><a href="#page-selector-and-context"><span class=secno>5. </span>Page
   257      Selectors and the Page Context</a>
   258      <ul class=toc>
   259       <li><a href="#at-page-rule"><span class=secno>5.1. </span>The @page
   260        Rule</a>
   262       <li><a href="#page-selectors"><span class=secno>5.2. </span>Page
   263        selectors</a>
   264        <ul class=toc>
   265         <li><a href="#pseudo-classes"><span class=secno>5.2.1. </span> Page
   266          pseudo-classes: :left, :right, :first, and :blank </a>
   267        </ul>
   269       <li><a href="#syntax-page-selector"><span class=secno>5.3. </span>@page
   270        rule grammar</a>
   272       <li><a href="#cascading-and-page-context"><span class=secno>5.4.
   273        </span>Cascading in the page context</a>
   274      </ul>
   276     <li><a href="#margin-boxes"><span class=secno>6. </span>Page-Margin
   277      Boxes</a>
   278      <ul class=toc>
   279       <li><a href="#margin-at-rules"><span class=secno>6.1. </span>At-rules
   280        for page-margin boxes</a>
   282       <li><a href="#populating-margin-boxes"><span class=secno>6.2.
   283        </span>Populating page-margin boxes</a>
   285       <li><a href="#margin-dimension"><span class=secno>6.3. </span>Computing
   286        Page-margin Box Dimensions</a>
   287        <ul class=toc>
   288         <li><a href="#margin-box-terms"><span class=secno>6.3.1.
   289          </span>Page-Margin Box Layout Terminology</a>
   291         <li><a href="#variable-sizing"><span class=secno>6.3.2. </span>
   292          Page-Margin Box Variable Dimension Computation Rules</a>
   293          <ul class=toc>
   294           <li><a href="#variable-auto-margins"><span class=secno>6.3.2.1.
   295            </span>Margins</a>
   297           <li><a href="#variable-auto-sizing"><span class=secno>6.3.2.2.
   298            </span>Resolving ‘<code class=css>auto</code>’ widths</a>
   300           <li><a href="#variable-minmax"><span class=secno>6.3.2.3.
   301            </span>Handling ‘<code class=property>min-width</code>’ and
   302            ‘<code class=property>max-width</code>’</a>
   304           <li><a href="#variable-position"><span class=secno>6.3.2.4.
   305            </span>Positioning</a>
   307           <li><a href="#variable-mapping"><span class=secno>6.3.2.5.
   308            </span>Boxes on other sides</a>
   309          </ul>
   311         <li><a href="#fixed-sizing"><span class=secno>6.3.3.
   312          </span>Page-Margin Box Fixed Dimension Computation Rules</a>
   313        </ul>
   315       <li><a href="#margin-box-ex"><span class=secno>6.4. </span>Page-margin
   316        box examples</a>
   317      </ul>
   319     <li><a href="#page-properties"><span class=secno>7. </span>Page
   320      Properties</a>
   321      <ul class=toc>
   322       <li><a href="#page-based-counters"><span class=secno>7.1.
   323        </span>Page-based counters</a>
   325       <li><a href="#margin-text-alignment"><span class=secno>7.2.
   326        </span>Page-margin boxes and default values</a>
   327      </ul>
   329     <li><a href="#page-size"><span class=secno>8. </span>Page Size</a>
   330      <ul class=toc>
   331       <li><a href="#page-size-prop"><span class=secno>8.1. </span>Page size:
   332        the ‘<code class=property>size</code>’ property</a>
   333        <ul class=toc>
   334         <li><a href="#some-examples"><span class=secno>8.1.1. </span>Some
   335          examples:</a>
   337         <li><a href="#page-size-media-query"><span class=secno>8.1.2.
   338          </span>Media Queries</a>
   339        </ul>
   341       <li><a href="#renderingpages"><span class=secno>8.2. </span>Rendering
   342        page boxes that do not fit a page sheet</a>
   344       <li><a href="#positioning-page-box"><span class=secno>8.3.
   345        </span>Positioning the page box on the sheet</a>
   346      </ul>
   348     <li><a href="#page-breaks"><span class=secno>9. </span> Page Breaks </a>
   349      <ul class=toc>
   350       <li><a href="#using-named-pages"><span class=secno>9.1. </span>Using
   351        named pages: ‘<code class=property>page</code>’</a>
   352      </ul>
   354     <li><a href="#image-properties"><span class=secno>10. </span>Image
   355      Properties</a>
   357     <li class=no-num><a href="#properties-list">Appendix A: Applicable CSS2.1
   358      Properties</a>
   359      <ul class=toc>
   360       <li class=no-num><a href="#page-property-list"> CSS 2.1 Properties that
   361        apply within the page context</a>
   363       <li class=no-num><a href="#margin-property-list"> CSS 2.1 properties
   364        that apply within the margin contexts</a>
   365      </ul>
   367     <li class=no-num><a href="#transfer-possibilities">Appendix B: Transfer
   368      Possibilities</a>
   370     <li class=no-num><a href="#changes">Changes</a>
   372     <li class=no-num><a href="#references">References</a>
   373      <ul class=toc>
   374       <li class=no-num><a href="#normative-references">Normative
   375        References</a>
   377       <li class=no-num><a href="#informative-references">Informative
   378        References</a>
   379      </ul>
   380    </ul>
   381    <!--end-toc--> <!-- "Introduction" -->
   382    <h2 id=intro><span class=secno>1. </span>Introduction</h2>
   384    <p>Paged media (e.g., paper, transparencies, photo album pages, pages
   385     displayed on computer screens as printed output simulations) differ from
   386     <a
   387     href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous
   388     media</a> in that the content of the document is split into one or more
   389     discrete static display surfaces. To handle pages, CSS3 Paged Media
   390     describes how:
   392    <ul>
   393     <li><a href="#page-breaks">page breaks</a> are created and avoided;
   395     <li>the page properties such as size, orientation, margins, border, and
   396      padding are specified;
   398     <li>headers and footers are established within the page margins;
   400     <li>content such as page counters are placed in the headers and footers;
   401      and
   403     <li>orphans and widows can be controlled.
   404    </ul>
   406    <p>This module defines a <a href="#page-model">page model</a> that
   407     specifies how a document is formatted within a rectangular area, called
   408     the <a href="#page-box-page-rule">page box</a>, that has finite width and
   409     height.
   411    <p>Although CSS3 does not specify how user agents transfer page boxes to
   412     sheets, it does include certain mechanisms for telling user agents about
   413     the intended page sheet <a href="#page-size">size and orientation</a>. In
   414     the general case, CSS3 assumes that one page box will be transferred to
   415     one surface of similar size.
   417    <p>All properties defined in this specification also accept the <a
   418     href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   419     keyword as their value, but for readability it has not been listed
   420     explicitly.
   422    <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
   424    <p>All of the text in this specification is normative except sections
   425     explicitly marked as non-normative, examples, and notes. The keywords
   426     "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em
   427     class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em
   428     class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em
   429     class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>",
   430     "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when
   431     used in this document are to be interpreted as described in <cite>RFC
   432     2119</cite> <a href="#RFC2119"
   433     rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>. However, for
   434     readability, these words do not appear in all uppercase letters in this
   435     specification.
   437    <p>Examples in this specification are introduced with the words "for
   438     example" or are set apart from the normative text with
   439     <code>class="example"</code>, like this:
   441    <div class=example>
   442     <p>This is an example of an informative example.
   443    </div>
   445    <p>Informative notes begin with the word "Note" and are set apart from the
   446     normative text with <code>class="note"</code>, like this:
   448    <p class=note>Note, this is an informative note.
   450    <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
   452    <p>The following terminology and accompanying diagrams help to describe
   453     the page model:
   455    <dl>
   456     <dt id=page-sheet>Page sheet
   458     <dd><img
   459      alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"
   460      height=148 src=PageSheet.png style="float: right;" width=194>The page
   461      sheet is one surface of the physical medium. The illustration to the
   462      right shows a representation of the upper-left corner of a page sheet.
   464     <dt id=printable-area>Printable and non-printable areas
   466     <dd>The non-printable area is the area of a page sheet that a physical
   467      device such as a printer is not capable of marking reliably, usually due
   468      to the printer's paper handling mechanism. This value is printer
   469      dependent and is usually a small region along each edge of the page
   470      sheet. The printable area is the area of page sheet that a printer
   471      <em>is</em> capable of marking reliably. The size of the printable area
   472      is the size of the page sheet reduced by the size of the non-printable
   473      area. A user agent may not know the dimensions of this area for a
   474      particular printing device; but when its dimensions are known, user
   475      agents <em class=RFC2119>MAY</em> adjust the formatting of the document
   476      so that content falls within the printable area. How this adjustment is
   477      accomplished is device dependent within the constraints expressed in the
   478      sections <a href="#renderingpages">Rendering page boxes that do not fit
   479      a page sheet</a> and <a href="#content-outside-box">Content outside the
   480      page box</a>.
   482     <dt id=page-orientation>Page Orientation
   484     <dd>The page orientation is defined by comparing the length of the edges
   485      of a <a href="#page-box">page box</a>. The page box is a rectangle with
   486      two perpendicular edges called the long edge and the short edge. The
   487      length of the long edge is always greater than or equal to the length of
   488      the short edge. When the page box is square, the two edges are of the
   489      same length and either can be used as the long edge with the other being
   490      the short edge. This specification defines page orientations of ‘<code
   491      class=property>portrait</code>’ and ‘<code
   492      class=property>landscape</code>’.
   494     <dt id=portrait>Portrait Orientation
   496     <dd>A portrait page's height is greater than or equal to its width.
   497      Horizontal elements are parallel to the short edge and vertical elements
   498      to the long edge.
   500     <dt id=landscape>Landscape Orientation
   502     <dd>A landscape page's width is greater than or equal to its height.
   503      Horizontal elements are parallel to the long edge and vertical elements
   504      to the short edge. <span class=note>Note that CSS3 makes no distinction
   505      between landscape and reverse-landscape orientations. However, future
   506      versions of CSS may do so. UAs should consider, when formatting for
   507      duplexed printing, the binding edge, page progression, and ease of
   508      reading when choosing between landscape and reverse-landscape
   509      renderings.</span>
   511     <dt id=duplex-printing>Duplex Printing
   513     <dd>Duplex printing prints one page box per side of a page sheet and uses
   514      both sides of the page sheet. This module provides no ability to specify
   515      whether a document is duplex printed, but the concept of left and right
   516      pages is based on the assumption that the document is duplex printed,
   517      regardless of whether or not it actually is.
   519     <dt id=binding-edge>Binding Edge
   521     <dd>The binding edge is the edge of the page box that is toward the
   522      binding if the material is bound. The binding edge often has a larger
   523      margin than the opposite edge to provide for the space used by the
   524      binding. The binding edge can be any of the four edges. However, page
   525      sheets are customarily bound so that the binding edge of page boxes with
   526      portrait orientation is vertical. This module provides no method to
   527      specify the binding edge. In duplex printing, the binding edge is on
   528      opposite sides of the page box for the left and right pages.
   530     <dt id=facing-pages>Facing Pages
   532     <dd>Facing pages are two sequential pages such that when the document is
   533      duplex printed they are on separate sheets of paper. Typically, the
   534      earlier page will be the back side of one sheet and the later page will
   535      be the front side of another. They are usually laid out so that the
   536      binding edges of facing pages are vertical and adjacent when the pages
   537      are placed in their normal reading orientation.
   539     <dt id=left-page>Left Page
   541     <dd>A page that would be on the left if it is part of a pair of facing
   542      pages as typically laid out. Page layouts for documents using a
   543      left-to-right page progression have the earlier of the facing pages on
   544      the left. Rules specific to the left page can be specified using the
   545      <span class=css>‘<code class=css>:left</code>’</span> <a
   546      href="#page-selector"><i>page selector</i></a>.
   548     <dt id=right-page>Right Page
   550     <dd>A page that would be on the right if it is part of a pair of facing
   551      pages as typically laid out. Page layouts for documents using a
   552      right-to-left page progression have the earlier of the facing pages on
   553      the right. Rules specific to the right page can be specified using the
   554      <span class=css>‘<code class=css>:right</code>’</span> <a
   555      href="#page-selector"><i>page selector</i></a>.
   556    </dl>
   558    <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>
   560    <p>In the paged media formatting model, the document is transferred into
   561     one or more page boxes. The <dfn id=page-box>page box</dfn> is a
   562     specialized CSS box that maps to a rectangular print media surface, such
   563     as a page of paper. It is roughly analogous to the <a
   564     href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
   565     <img alt="" height=266 src=PageBox.png style="float: right;" width=267>
   567    <p>As with other CSS <a
   568     href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box consists
   569     of margin, border, padding, and content areas. The content and margin
   570     areas of a page box have special functions:
   572    <ul>
   573     <li>The content area of a page box is called the <dfn id=page-area>page
   574      area</dfn>. The content of the document is flowed into one or more page
   575      boxes. The page area acts as a container for all the boxes generated by
   576      the root element and its descendants that are laid out within a given
   577      page box. The edges of the page area on the first page establish the
   578      rectangle that is the initial <a
   579      href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing
   580      block</a> of the document.
   582     <li>The margin area of a page box is divided into 16 <dfn
   583      id=page-margin-boxes>page-margin boxes</dfn>. Each page-margin box has
   584      its own margin, border, padding and content areas. Page-margin boxes are
   585      typically used to display running headers and footers.
   586    </ul>
   588    <p>The properties of a <a href="#page-box"><i>page box</i></a> are
   589     determined by properties <a
   590     href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a>
   591     within the <a href="#page-context"><i>page context</i></a>, which is the
   592     <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration
   593     block</a> of the <code>@page</code> rule. Similarly the properties of a
   594     <i>page-margin box</i> are determined by properties declared within its
   595     <a href="#margin-context"><i>margin context</i></a>. Declarations in the
   596     page context can affect the page box and/or inherit to the page-margin
   597     boxes, but they do not apply to or inherit into the document's root
   598     element or other content.
   600    <p>The <a href="#containing-block0"><i>containing block</i></a> of the
   601     page box is specified using the ‘<a href="#size"><code
   602     class=property>size</code></a>’ property in the <a
   603     href="#page-context"><i>page context</i></a>. The width and horizontal
   604     margins of the page box are then calculated exactly as for a <a
   605     href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
   606     block element in normal flow</a>. <a href="#CSS21"
   607     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The height and vertical
   608     margins of the page box are calculated analogously (instead of using the
   609     block height formulas). In both cases if the values are over-constrained,
   610     instead of ignoring any margins, the containing block is resized to
   611     coincide with the margin edges of the page box.
   613    <h3 id=painting><span class=secno>4.1. </span> Page Backgrounds and
   614     Painting Order</h3>
   616    <p>When drawing a page of content, the page layers are painted in the
   617     following painting order (bottommost first):
   619    <ol>
   620     <li>page background
   622     <li>document canvas
   624     <li>page borders
   626     <li>document contents
   628     <li>page-margin boxes
   629    </ol>
   631    <p>In the page model, the page background behaves similar to the root
   632     background: its <a
   633     href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background
   634     painting area</i></a> is the entire page box, including its margins
   635     (regardless of ‘<code class=property>background-clip</code>’). Page
   636     backgrounds are anchored within the page box's padding area by default
   637     (and honor ‘<code class=property>background-origin</code>’ if the UA
   638     supports <a href="#CSS3BG"
   639     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code
   640     class=property>background-attachment</code>’ is ‘<code
   641     class=css>fixed</code>’ then the image is positioned relative to the
   642     page box including its margins (i.e. the <a
   643     href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background
   644     positioning area</i></a>, like the <i>background painting area</i>, is
   645     the page's margin box).
   647    <p>The document canvas background is drawn as the page box's background:
   648     by default its <i>background painting area</i> covers the page box's
   649     border box, and for UAs that support <a href="#CSS3BG"
   650     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, follows the ‘<code
   651     class=property>background-clip</code>’ value specified on the root
   652     element. It remains, however, positioned with respect to the root element
   653     or page area as usual.
   655    <p>The ‘<code class=property>z-index</code>’ property applies to
   656     page-margin boxes. With respect to the page-margin boxes, the document
   657     canvas, page borders, and all of the document contents are treated as a
   658     single element with a <code>z-index</code> value of ‘<code
   659     class=css>0</code>’: the page-margin boxes never interleave with parts
   660     of the document content or between the content and the canvas. They may
   661     only paint in front of the document content or behind the document
   662     canvas. The page background is always painted underneath everything else.
   663     Since the <code>position</code> property does not apply to page-margin
   664     boxes, <code>z-index</code> always affects page-margin boxes as if they
   665     were positioned elements regardless of the <code>position</code>
   666     property's value.
   668    <p>The default painting order, or <a
   669     href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree
   670     order", of page-margin boxes with respect to each other is as follows:
   672    <ol>
   673     <li>‘<code class=css>@top-left-corner</code>’
   675     <li>‘<code class=css>@top-left</code>’
   677     <li>‘<code class=css>@top-center</code>’
   679     <li>‘<code class=css>@top-right</code>’
   681     <li>‘<code class=css>@top-right-corner</code>’
   683     <li>‘<code class=css>@right-top</code>’
   685     <li>‘<code class=css>@right-middle</code>’
   687     <li>‘<code class=css>@right-bottom</code>’
   689     <li>‘<code class=css>@bottom-right-corner</code>’
   691     <li>‘<code class=css>@bottom-right</code>’
   693     <li>‘<code class=css>@bottom-center</code>’
   695     <li>‘<code class=css>@bottom-left</code>’
   697     <li>‘<code class=css>@bottom-left-corner</code>’
   699     <li>‘<code class=css>@left-bottom</code>’
   701     <li>‘<code class=css>@left-middle</code>’
   703     <li>‘<code class=css>@left-top</code>’
   704    </ol>
   706    <p class=note> Start with ‘<code class=css>@top-left-corner</code>’,
   707     then go clockwise. This order is arbitrary but can be overridden with
   708     ‘<code class=property>z-index</code>’. It only has a visible effect
   709     when page-margin boxes overlap, which should not happen in most cases.
   711    <h3 id=content-outside-box><span class=secno>4.2. </span>Content outside
   712     the page box</h3>
   714    <p>When formatting content in the page model, some content may end up
   715     outside the page box. For example, an element whose ‘<code
   716     class=property>white-space</code>’ property has the value ‘<code
   717     class=property>pre</code>’ can generate a box that is wider than the
   718     page box. As another example, when boxes are positioned absolutely or
   719     relatively, they may end up in "inconvenient" locations. For example,
   720     images may be placed on the edge of the page box or 100,000 meters below
   721     the page box.
   723    <p>A specification for the exact formatting of such elements lies outside
   724     the scope of this document. However, it is recommended that authors and
   725     user agents observe the following general principles concerning content
   726     outside the page box:
   728    <ul>
   729     <li>
   730      <p>Content should be allowed slightly beyond the page box to allow pages
   731       to "bleed".
   733     <li>
   734      <p>User agents <em class=RFC2119>SHOULD</em> avoid generating a large
   735       number of content-empty pages to honor the positioning of elements
   736       (e.g., printing 100 blank pages is probably neither the author's nor
   737       the user's intent). A <dfn id=content-empty>Content-empty page</dfn> is
   738       a page box whose page area contains no printable content other than
   739       backgrounds and/or borders. A page box whose page area contains
   740       generated content, or content whose visibility is ‘<code
   741       class=property>hidden</code>’, or invisible content such as a
   742       zero-width space is not a content-empty page. On the other hand, a page
   743       containing only a background and/or borders and/or page-margin box
   744       content <em>is</em> a content-empty page.
   746      <p class=note>Note, however, that generating a small number of empty
   747       page boxes is sometimes necessary to honor the <span class=css>‘<code
   748       class=property>left</code>’</span> and <span class=css>‘<code
   749       class=property>right</code>’</span> values for <span
   750       class=property>‘<code class=property>break-before</code>’</span>
   751       and <span class=property>‘<code
   752       class=property>break-after</code>’</span>.
   754     <li>
   755      <p>Authors <em class=RFC2119>SHOULD NOT</em> position elements in
   756       inconvenient locations just to avoid rendering them. Instead:
   758      <ul>
   759       <li>To suppress box generation entirely, set the <span
   760        class=property>‘<code class=property>display</code>’</span>
   761        property to <span class=css>‘<code
   762        class=property>none</code>’</span>.
   764       <li>To make a box invisible, set the <span class=property>‘<code
   765        class=property>visibility</code>’</span> property.
   766      </ul>
   768     <li>
   769      <p>This specification does not define how boxes positioned outside the
   770       page box are handled. Possibilities include discarding them or creating
   771       page boxes for them at the end of the document.
   772    </ul>
   774    <h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>
   776    <p>CSS distinguishes between left pages and right pages on all documents,
   777     whether they are printed duplex or not. Each left page is followed by a
   778     right page and vice versa. Left and right pages can be styled differently
   779     with the <a href="#left-right-first"><code>:left</code> and
   780     <code>:right</code> pseudo-classes</a>.
   782    <p>Whether the first page of a document is a left page or a right page
   783     depends on the page progression of the document. The <dfn
   784     id=page-progression>page progression</dfn> is the direction in which the
   785     printed pages of a document would be sequenced when laid out
   786     side-to-side. For example, English and horizontally-set Japanese
   787     typically progress from left to right, whereas Arabic and vertically-set
   788     Japanese pages typically progress from right to left. In documents with a
   789     left-to-right page progression the first page of the document is a right
   790     page, and vice versa.
   792    <p>The page progression direction is determined as follows:
   794    <ul>
   795     <li>If text is laid out in horizontal lines, the page progression is the
   796      same as the inline progression.
   798     <li>If text is laid out in vertical lines, the page progression is the
   799      same as the block progression.
   800    </ul>
   802    <p>If the UA supports the ‘<code class=property>direction</code>’ and
   803     ‘<code class=property>writing-mode</code>’ properties from the CSS 3
   804     Writing Modes Module <a href="#CSS3-WRITING-MODES"
   805     rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>, it
   806     must <a
   807     href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
   808     whether the first page is a left or right page from the values of those
   809     properties on the root element.
   811    <p> To explicitly force a document to begin printing on a left or right
   812     page, authors can specify a <a
   813     href="http://www.w3.org/TR/css3-break/#break-before">‘<code
   814     class=property>break-before</code>’</a> value that that propagates a
   815     page break to the root. <a href="#CSS3-BREAK"
   816     rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> The UA must
   817     suppress the first (empty) page(s) in this case (and the
   818     <code>:first</code> pseudo-class matches the first printed page).
   820    <div class=example>
   821     <pre>
   822 html { break-before: always }
   823 </pre>
   825     <p> For an HTML document with a left-to-right page progression, the above
   826      style rule will cause the first page of the document to print on a
   827      ‘<code class=css>:left</code>’ page
   829     <pre>
   830 html { break-before: left }
   831 </pre>
   833     <p> For an HTML document, the above style rule will cause the first page
   834      of the document to print on a ‘<code class=css>:left</code>’ page,
   835      regardless of the page progression.
   836    </div>
   838    <h2 id=page-selector-and-context><span class=secno>5. </span>Page
   839     Selectors and the Page Context</h2>
   841    <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>
   843    <p>Authors can specify various aspects of a page box, such as its
   844     dimensions, orientation, and margins, within an <span
   845     class=css>@page</span> rule. ‘<code class=css>@page</code>’ rules are
   846     allowed at the top-level of a stylesheet, as well as wherever <a
   847     href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a>
   848     are allowed. An <span class=css>@page</span> rule consists of the keyword
   849     <span class=css>‘<code class=css>@page</code>’</span>, an <em
   850     class=RFC2119>OPTIONAL</em> comma-separated list of <a
   851     href="#page-selectors">page selectors</a> and a block of declarations
   852     (said to be in the <dfn id=page-context>page context</dfn>). An ‘<code
   853     class=css>@page</code>’ rule can also contain other at-rules,
   854     interleaved between declarations. The current level of this specification
   855     only allows <a href="#margin-at-rules">margin at-rules</a> inside
   856     ‘<code class=css>@page</code>’.
   858    <p>‘<code class=css>@page</code>’ rules without a selector list are
   859     considered to have a single, empty selector. ‘<code
   860     class=css>@page</code>’ rules apply to pages that <a
   861     href="#match"><i>match</i></a> at least one of their selectors.
   863    <p>Properties declared within the page context apply to the page box.
   865    <p>If an error is encountered during the processing of a declaration block
   866     within a page or a margin context, the <a
   867     href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for
   868     handling parsing errors</a> apply; that is, valid declarations within the
   869     block are applied.
   871    <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>
   873    <p>A <dfn id=page-selector>page selector</dfn> is either:
   875    <ul>
   876     <li>one or more <a
   877      href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
   878      case-insensitive</a> <a href="#pseudo-classes">pseudo-classes</a>,
   880     <li>a <a href="#using-named-pages">page type</a> (a case-sensitive
   881      identifier) followed by zero or more pseudo-classes.
   882    </ul>
   884    <p> No whitespace is allowed between components of a selector. The <a
   885     href="#page_selector"><i title="page_selector">page selector
   886     grammar</i></a> and examples can be found below.
   888    <p>A selector is said to <dfn id=match>match</dfn> a given page if and
   889     only if all of its components match the page. Empty selectors (ie.
   890     ‘<code class=css>@page</code>’ rules without a selector) match every
   891     page. <span class=note>Empty selectors have the weakest <a
   892     href="#specificity"><i>specificity</i></a>.</span>
   894    <p><a href="#using-named-pages">Page type</a> selectors <a
   895     href="#match"><i>match</i></a> pages of the named type generated by the
   896     ‘<a href="#page"><code class=property>page</code></a>’ property.
   897     <span id=page-selector-syntax-restrict> A page type name of ‘<code
   898     class=css>auto</code>’ (<a
   899     href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
   900     case-insensitive</a>) does not make the rule invalid, but <em
   901     class=RFC2119>MUST</em> never match. </span> Individual <a
   902     href="#pseudo-classes">pseudo-classes</a> are defined below.
   904    <h4 id=pseudo-classes><span class=secno>5.2.1. </span> <a
   905     id=left-right-first></a> Page pseudo-classes: :left, :right, :first, and
   906     :blank</h4>
   908    <p> In addition to the optional <i>page name</i>, ‘<code
   909     class=css>@page</code>’ rules can restrict which pages they apply to
   910     with CSS pseudo-classes in their <a href="#page-selector"><i>page
   911     selector</i></a>.
   913    <p> When printing double-sided documents, left and right pages are often
   914     formatted differently. All pages are automatically classified by user
   915     agents as either left pages or right pages, based on <a
   916     href="#progression">page progression</a>. The ‘<code
   917     class=css>:left</code>’ and ‘<code class=css>:right</code>’
   918     pseudo-classes only <a href="#match"><i>match</i></a> left or right
   919     pages, respectively.
   921    <div class=example> The following example creates left and right binding
   922     edges using these pseudo-classes:
   923     <pre>
   924 @page :left {
   925 margin-left: 3cm;
   926 margin-right: 4cm;
   927 }
   929 @page :right {
   930 margin-left: 4cm;
   931 margin-right: 3cm;
   932 }
   933 </pre>
   934    </div>
   936    <p>If different declarations have been given for left and right pages, the
   937     user agent <em class=RFC2119>MUST</em> honor these declarations even if
   938     the user agent does not transfer the page boxes to left and right sheets
   939     (i.e., a printer that only prints on one side of the medium must
   940     nevertheless produce correctly formatted output).
   942    <div class=note>
   943     <p> <em><strong>Note.</strong> Adding declarations to the <span
   944      class=css>‘<code class=css>:left</code>’</span> or <span
   945      class=css>‘<code class=css>:right</code>’</span> pseudo-class does
   946      not necessarily influence whether the document comes out of the printer
   947      double- or single-sided (which is outside the scope of this
   948      specification).</em>
   949    </div>
   951    <p> The ‘<code class=css>:first</code>’ pseudo-class only <a
   952     href="#match"><i title=match>matches</i></a> the first printed page of a
   953     document.
   955    <div class=example>
   956     <pre>
   957 @page { margin: 2cm } /* All margins set to 2cm */
   959 @page :first {
   960 margin-top: 10cm /* Top margin on first page 10cm */
   961 }
   962 </pre>
   963    </div>
   965    <p> The ‘<code class=css>:blank</code>’ pseudo-class only <a
   966     href="#match"><i title=match>matches</i></a> <a href="#content-empty"><i
   967     title="content-empty page">content-empty pages</i></a> that appear as a
   968     result of <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced
   969     page breaks</a>.
   971    <div class=note>
   972     <p>Only the ‘<code class=css>left</code>’, ‘<code
   973      class=css>right</code>’, ‘<code class=css>recto</code>’ and
   974      ‘<code class=css>verso</code>’ values of the ‘<code
   975      class=property>break-before</code>’ and ‘<code
   976      class=property>break-after</code>’ properties can generate pages that
   977      match ‘<code class=css>:blank</code>’.
   978    </div>
   980    <div class=example>
   981     <p>In this example, forced page break may occur before <code>h1</code>
   982      elements.
   984     <pre>
   985 h1 { break-before: left }
   987 @page :blank {
   988   @top-center { content: "This page is intentionally left blank" }
   989 }
   990 </pre>
   991    </div>
   993    <p> A page matched by ‘<code class=css>:blank</code>’ can also be
   994     matched by other page pseudo-classes.
   996    <div class=example>
   997     <p>If headers have been specified on all right pages, a blank right page
   998      will be matched by both <code>:blank</code> and <code>:right</code>.
   999      Therefore, margin boxes set on right pages will have to be removed
  1000      unless they are wanted on blank pages. Here is an example where the top
  1001      center header is removed from blank pages, while the page number
  1002      remains:
  1004     <pre>
  1005 h1 { break-before: left }
  1007 @page :blank {
  1008   @top-center { content: none }
  1011 @page :right {
  1012   @top-center { content: "Preliminary edition" }
  1013   @bottom-center { content: counter(page) }
  1015 </pre>
  1017     <p>Due to the higher <a href="#specificity"><i>specificity</i></a> of
  1018      <code>:blank</code> over <code>:right</code>, the top center header is
  1019      removed even if <code>content: none</code> comes before <code>content:
  1020      "Preliminary edition"</code>.
  1021    </div>
  1023    <div class=note>
  1024     <p><em><strong>Note.</strong> Future versions of CSS may include other
  1025      page pseudo-classes.</em>
  1026    </div>
  1028    <h3 id=syntax-page-selector><span class=secno>5.3. </span>@page rule
  1029     grammar</h3>
  1031    <p>The syntax for the @page rule is a specialization of the generic
  1032     at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to
  1033     allow @page rules nested inside @media rules. User agents <em
  1034     class=RFC2119>MUST</em> adhere to the following grammar:
  1036    <p>See <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
  1037     Section 4.1.1 and Appendix G for the expansion of missing productions:
  1039    <p id=specializatons-of-ATKEYWORD> All new lexical tokens are
  1040     specializations of the ATKEYWORD lexical token:
  1042    <pre class=lexical>
  1043 PAGE_SYM              ::= "@page"
  1044 TOPLEFTCORNER_SYM     ::= "@top-left-corner"
  1045 TOPLEFT_SYM           ::= "@top-left"
  1046 TOPCENTER_SYM         ::= "@top-center"
  1047 TOPRIGHT_SYM          ::= "@top-right"
  1048 TOPRIGHTCORNER_SYM    ::= "@top-right-corner"
  1049 BOTTOMLEFTCORNER_SYM  ::= "@bottom-left-corner"
  1050 BOTTOMLEFT_SYM        ::= "@bottom-left"
  1051 BOTTOMCENTER_SYM      ::= "@bottom-center"
  1052 BOTTOMRIGHT_SYM       ::= "@bottom-right"
  1053 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
  1054 LEFTTOP_SYM           ::= "@left-top"
  1055 LEFTMIDDLE_SYM        ::= "@left-middle"
  1056 LEFTBOTTOM_SYM        ::= "@left-bottom"
  1057 RIGHTTOP_SYM          ::= "@right-top"
  1058 RIGHTMIDDLE_SYM       ::= "@right-middle"
  1059 RIGHTBOTTOM_SYM       ::= "@right-bottom"
  1061 <dfn
  1062     id=media>media</dfn> :
  1063      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <a
  1064     href="#syntax-prod-page"><i>page_rule</i></a> | ruleset ]* '}' S*
  1067 <dfn
  1068     id=syntax-prod-page>page_rule</dfn> :
  1069      PAGE_SYM S* <a
  1070     href="#page_selector_list"><i>page_selector_list</i></a> '{' S* <a
  1071     href="#page_body"><i>page_body</i></a> '}' S*
  1074 <dfn
  1075     id="page_selector_list">page_selector_list</dfn> :
  1076      [ <a
  1077     href="#page_selector"><i>page_selector</i></a> S* [ ',' <a
  1078     href="#page_selector"><i>page_selector</i></a> S* ]* ]?
  1081 <dfn
  1082     id="page_selector">page_selector</dfn> :
  1083      <a
  1084     href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>+ | IDENT <a
  1085     href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>*
  1088 <dfn
  1089     id=syntax-prod-pseudo-page>pseudo_page</dfn> :
  1090      ':' [ "left" | "right" | "first" | "blank" ]
  1093 <dfn
  1094     id="page_body">page_body</dfn> :  /* Can be empty */
  1095      declaration? [ ';' S* <a
  1096     href="#page_body"><i>page_body</i></a> ]? |
  1097      <a
  1098     href="#syntax-prod-margin"><i>page_margin_box</i></a> <a
  1099     href="#page_body"><i>page_body</i></a>
  1102 <dfn
  1103     id=syntax-prod-margin>page_margin_box</dfn> :
  1104      <a
  1105     href="#syntax-prod-margin-sym"><i>margin_sym</i></a> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  1108 <dfn
  1109     id=syntax-prod-margin-sym>margin_sym</dfn> :
  1110      TOPLEFTCORNER_SYM |
  1111      TOPLEFT_SYM |
  1112      TOPCENTER_SYM |
  1113      TOPRIGHT_SYM |
  1114      TOPRIGHTCORNER_SYM |
  1115      BOTTOMLEFTCORNER_SYM |
  1116      BOTTOMLEFT_SYM |
  1117      BOTTOMCENTER_SYM |
  1118      BOTTOMRIGHT_SYM |
  1119      BOTTOMRIGHTCORNER_SYM |
  1120      LEFTTOP_SYM |
  1121      LEFTMIDDLE_SYM |
  1122      LEFTBOTTOM_SYM |
  1123      RIGHTTOP_SYM |
  1124      RIGHTMIDDLE_SYM |
  1125      RIGHTBOTTOM_SYM
  1127 </pre>
  1129    <div class=example>
  1130     <p>The following are examples of page selectors (declaration block
  1131      intentionally left blank)
  1133     <pre>
  1134 @page { ... }
  1135 @page :left { ... }
  1136 @page :right { ... }
  1137 @page LandscapeTable { ... }
  1138 @page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
  1139 @page:first { ... }
  1140 @page toc, index { ... }
  1141 @page :blank:first { ... }
  1142 </pre>
  1144     <p>The following are examples of page-margin boxes where the declaration
  1145      blocks are intentionally left blank.
  1147     <pre>
  1148 @page {
  1149  @top-left { ... /* document name */ }
  1150  @bottom-center { ... /* page number */}
  1152 @page :left { @left-middle { ... /* page number in left margin */ }}
  1153 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
  1155 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
  1156 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
  1157 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
  1158              @bottom-right-corner { ... /* empty footer */ } }
  1159 </pre>
  1160    </div>
  1162    <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading
  1163     in the page context</h3>
  1165    <p>Declarations in page and margin contexts <a
  1166     href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like
  1167     declarations in <a
  1168     href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.
  1170    <p>The <dfn id=specificity>specificity</dfn> of page a selector is
  1171     computed in a manner analogous to the computations defined in the <a
  1172     href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:
  1174    <ul>
  1175     <li>Count the number of page type names (= <var>f</var>)
  1176      <p class=note> Given the syntax of page seletors, <var>f</var> can only
  1177       ever be 0 or 1.
  1179     <li>Count the number of ‘<code class=css>:first</code>’ or ‘<code
  1180      class=css>:blank</code>’ pseudo-classes (= <var>g</var>)
  1182     <li>Count the number of ‘<code class=css>:left</code>’ or ‘<code
  1183      class=css>:right</code>’ pseudo-classes (= <var>h</var>)
  1184    </ul>
  1186    <p> Specificities are compared by comparing the three components in order:
  1187     the specificity with <var>f</var> larger a value is more specific; if the
  1188     two <var>f</var> values are tied, then the specificity with a larger
  1189     <var>g</var> value is more specific; if the two <var>g</var> values are
  1190     also tied, then the specificity with a larger <var>h</var> value is more
  1191     specific; if all the values are tied, the two specifities are equal.
  1193    <p> Due to storage limitations, implementations may have limitations on
  1194     the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values
  1195     higher than the limit must be clamped to that limit, and not overflow.
  1197    <p class=note> Note: Each comma-separated selectors in the same ‘<code
  1198     class=css>@page</code>’ rule has its own specificity.
  1200    <p class=note> Note: Repeated occurrances of the same pseudo-classes are
  1201     allowed and do increase specificity.
  1203    <div class=example>
  1204     <p>Some page specificity calculation examples follow:
  1206     <pre>
  1207 @page { } /* specificity = (0,0,0) */
  1208 @page :left { } /* specificity = (0,0,1) */
  1209 @page :first { } /* specificity = (0,1,0) */
  1210 @page artsy { } /* specificity = (1,0,0) */
  1211 @page artsy:left { } /* specificity = (1,0,1) */
  1212 @page artsy:first { } /* specificity = (1,1,0) */
  1213 </pre>
  1214    </div>
  1216    <div class=example>
  1217     <p>Consider the following usage example:
  1219     <pre>
  1220 @page {
  1221   margin-left: 3cm;
  1224 @page :left {
  1225   margin-left: 4cm;
  1227 </pre>
  1229     <p>Due to the higher specificity of the pseudo-class selector, the left
  1230      margin on left pages will be 4cm and all other pages (the right-facing
  1231      pages) will have a left margin of 3cm.
  1232    </div>
  1234    <div class=example>
  1235     <p>In this example, the higher specificity of the green rules wins over
  1236      the red rule. Therefore the first page will have blue text in the
  1237      top-left page-margin box and green text in the top-right page-margin
  1238      box, while subsequent pages will have red text in the page-margin boxes.
  1240     <pre>
  1241 @page :first {
  1242   color: green;
  1244   @top-left {
  1245     content: "foo";
  1246     color: blue;
  1248   @top-right {
  1249     content: "bar";
  1253 @page { color: red;
  1254   @top-center {
  1255     content: "Page " counter(page);
  1258 </pre>
  1259    </div>
  1261    <div class=example>
  1262     <p>Page contexts cascade, so the following stylesheet would style pages
  1263      with 25 millimeter margins and 14 point type in the page-margin boxes:
  1265     <pre>
  1266 @page { margin: 25mm;}
  1267 @page { font-size: 14pt;}
  1268 </pre>
  1269    </div>
  1271    <h2 id=margin-boxes><span class=secno>6. </span>Page-Margin Boxes</h2>
  1273    <p>Page-margin boxes are boxes within the page margin that, like
  1274     pseudo-elements, can contain generated content.
  1276    <p>Page-margin boxes can be used to create page headers and footers, which
  1277     are portions of the page set aside for supplementary information such as
  1278     the page number or document title.
  1280    <div class=example>
  1281     <p>Typically, a <dfn id=page-header>page header</dfn> is located at the
  1282      top of the page in documents with a predominately horizontal writing
  1283      direction and on the side opposite the <a href="#binding-edge">binding
  1284      edge</a> for documents with a predominately vertical writing direction.
  1285      One possible design of page headers for horizontally written documents
  1286      uses the ‘<code class=css>@top-left-corner</code>’, ‘<code
  1287      class=css>@top-left</code>’, ‘<code class=css>@top-center</code>’,
  1288      ‘<code class=css>@top-right</code>’ and ‘<code
  1289      class=css>@top-right-corner</code>’ page-margin boxes. Another design,
  1290      for vertically written documents, could use the ‘<code
  1291      class=css>@right-top</code>’, ‘<code
  1292      class=css>@right-middle</code>’, and ‘<code
  1293      class=css>@right-bottom</code>’ page-margin boxes for <a
  1294      href="#right-page">right facing pages</a> and ‘<code
  1295      class=css>@left-top</code>’, ‘<code
  1296      class=css>@left-middle</code>’, and ‘<code
  1297      class=css>@left-bottom</code>’ for <a href="#left-page">left facing
  1298      pages</a>.
  1300     <p>The <dfn id=page-footer>page footer</dfn> is typically at the opposite
  1301      end of the page from the page header. For example, the design of a
  1302      horizontally written document with a page header at the top of the page
  1303      could use the ‘<code class=css>@bottom-left-corner</code>’, ‘<code
  1304      class=css>@bottom-left</code>’, ‘<code
  1305      class=css>@bottom-center</code>’, ‘<code
  1306      class=css>@bottom-right</code>’ and ‘<code
  1307      class=css>@bottom-right-corner</code>’ page-margin boxes as the page
  1308      footer. The design of a vertically written document could use the
  1309      page-margin boxes of the binding edge of the page for the page footer.
  1310    </div>
  1312    <p>Page-margin boxes are positioned with respect to the page area and are
  1313     independent of page orientation, for example the top page-margin boxes
  1314     are above the page area in both portrait and landscape orientation. The
  1315     various page-margin boxes are defined and illustrated in the diagram
  1316     below:
  1318    <table class=data id=margin-box-def
  1319     summary="defintion of each of the page-margin boxes">
  1320     <caption>Table 1 Page-Margin Box Definitions</caption>
  1322     <thead>
  1323      <tr>
  1324       <th>Box
  1326       <th>Description
  1328       <th>Placement
  1330     <tbody>
  1331      <tr id=top-margin-boxes-def>
  1332       <th id=top-left-corner-box-def>top-left-corner
  1334       <td>a fixed-size box defined by the intersection of the top and left
  1335        margins of the page box
  1337       <td><img
  1338        alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
  1339        height=47 src=TopLeftCornerBox.png width=181>
  1341      <tr id=top-left-box-def>
  1342       <th>top-left
  1344       <td>a variable-width box filling the top page margin between the
  1345        top-left-corner and top-center page-margin boxes
  1347       <td><img
  1348        alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"
  1349        height=47 src=TopLeftMarginBox.png width=181>
  1351      <tr id=top-center-box-def>
  1352       <th>top-center
  1354       <td>a variable-width box centered horizontally between the page's left
  1355        and right border edges and filling the page top margin between the
  1356        top-left and top-right page-margin boxes
  1358       <td><img
  1359        alt="the top center box with margin, border, and padding, centered within the page's top margin"
  1360        height=47 src=TopCenterMarginBox.png width=181>
  1362      <tr id=top-right-box-def>
  1363       <th>top-right
  1365       <td>a variable-width box filling the top page margin between the
  1366        top-center and top-right-corner page-margin boxes
  1368       <td><img
  1369        alt="the top right box with margin, border, and padding, nested within the page's top margin"
  1370        height=47 src=TopRightMarginBox.png width=181>
  1372      <tr>
  1373       <th id=top-right-corner-box-def>top-right-corner
  1375       <td>a fixed-size box defined by the intersection of the top and right
  1376        margins of the page box
  1378       <td><img
  1379        alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
  1380        height=47 src=TopRightCornerMarginBox.png width=181>
  1382      <tr id=left-margin-boxes-def>
  1383       <th id=left-top-box-def>left-top
  1385       <td>a variable-height box filling the left page margin between the
  1386        top-left-corner and left-middle page-margin boxes
  1388       <td rowspan=3><img
  1389        alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"
  1390        height=226 src=LeftMarginBoxes.png width=181>
  1392      <tr id=left-middle-box-def>
  1393       <th>left-middle
  1395       <td>a variable-height box centered vertically between the page's top
  1396        and bottom border edges and filling the left page margin between the
  1397        left-top and left-bottom page-margin boxes
  1399      <tr id=left-bottom-box-def>
  1400       <th>left-bottom
  1402       <td>a variable-height box filling the left page margin between the
  1403        left-middle and bottom-left-corner page-margin boxes
  1405      <tr id=right-margin-boxes-def>
  1406       <th id=right-top-box-def>right-top
  1408       <td>a variable-height box filling the right page margin between the
  1409        top-right-corner and right-middle page-margin boxes
  1411       <td rowspan=3><img
  1412        alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"
  1413        height=226 src=RightMarginBoxes.png width=181>
  1415      <tr id=right-middle-box-def>
  1416       <th>right-middle
  1418       <td>a variable-height box centered vertically between the page's top
  1419        and bottom border edges and filling the right page margin between the
  1420        right-top and right-bottom page-margin boxes
  1422      <tr id=right-bottom-box-def>
  1423       <th>right-bottom
  1425       <td>a variable-height box filling the right page margin between the
  1426        right-middle and bottom-right-corner page-margin boxes
  1428      <tr id=bottom-margin-boxes-def>
  1429       <th id=bottom-left-corner-box-def>bottom-left-corner
  1431       <td>a fixed-size box defined by the intersection of the bottom and left
  1432        margins of the page box
  1434       <td><img
  1435        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"
  1436        height=48 src=BottomLeftCornerBox.png width=181>
  1438      <tr id=bottom-left-box-def>
  1439       <th>bottom-left
  1441       <td>a variable-width box filling the bottom page margin between the
  1442        bottom-left-corner and bottom-center page-margin boxes
  1444       <td><img
  1445        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"
  1446        height=48 src=BottomLeftMarginBox.png width=181>
  1448      <tr id=bottom-center-box-def>
  1449       <th>bottom-center
  1451       <td>a variable-width box centered horizontally between the page's left
  1452        and right border edges and filling the bottom page margin between the
  1453        bottom-left and bottom-right page-margin boxes
  1455       <td style="vertical-align: middle;"><img
  1456        alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
  1457        height=48 src=BottomCenterMarginBox.png width=181>
  1459      <tr id=bottom-right-box-def>
  1460       <th>bottom-right
  1462       <td>a variable-width box filling the bottom page margin between the
  1463        bottom-center and bottom-right-corner page-margin boxes
  1465       <td><img
  1466        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"
  1467        height=48 src=BottomRightMarginBox.png width=181>
  1469      <tr id=bottom-right-corner-box-def>
  1470       <th>bottom-right-corner
  1472       <td>a fixed-size box defined by the intersection of the bottom and
  1473        right margins of the page box
  1475       <td><img
  1476        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"
  1477        height=48 src=BottomRightCornerBox.png width=181>
  1478    </table>
  1480    <h3 id=margin-at-rules><span class=secno>6.1. </span>At-rules for
  1481     page-margin boxes</h3>
  1483    <p>Page-margin boxes are created by <a href="#margin-at-rules">margin
  1484     at-rules</a> inside the <a href="#page-context">page context</a>. Authors
  1485     should put these rules after any declarations in the page context as
  1486     legacy clients may not handle declarations after margin at-rules
  1487     correctly.
  1489    <p>A <dfn id=margin-at-rule>margin at-rule</dfn> consists of an <a
  1490     href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the
  1491     page-margin box (e.g. <span class=css>‘<code
  1492     class=css>@top-left</code>’</span>) and a block of declarations (said
  1493     to be in the <dfn id=margin-context>margin context</dfn>).
  1495    <div class=example>
  1496     <p>The following style sheet establishes a page header containing the
  1497      title ("Hamlet") on the left side and the page number, preceded by "Page
  1498      ", on the right side:
  1500     <pre>
  1501 @page {
  1502   size: 8.5in 11in;
  1503   margin: 10%;
  1505   @top-left {
  1506     content: "Hamlet";
  1508   @top-right {
  1509     content: "Page " counter(page);
  1512 </pre>
  1513    </div>
  1515    <h3 id=populating-margin-boxes><span class=secno>6.2. </span>Populating
  1516     page-margin boxes</h3>
  1518    <p>As with the ‘<code class=css>:before</code>’ and ‘<code
  1519     class=css>:after</code>’ pseudo-elements, a specified ‘<code
  1520     class=css>content: normal</code>’ on a page-margin box computes to
  1521     ‘<code class=css>none</code>’. A page-margin box is <dfn
  1522     id=generated>generated</dfn> if and only if the computed value of its
  1523     ‘<code class=property>content</code>’ property is not ‘<code
  1524     class=property>none</code>’. Otherwise, no box is generated, as for
  1525     elements with ‘<code class=css>display: none</code>’.
  1527    <p class=note> The ‘<code class=property>display</code>’ property does
  1528     not apply to page-margin boxes.
  1530    <div class=example>
  1531     <p>The following style sheet creates a green box in each corner of the
  1532      page except the bottom-left corner.
  1534     <pre>
  1535   @page {
  1536     @top-left-corner { content: " "; border: solid green; }
  1537     @top-right-corner { content: url(foo.png); border: solid green; }
  1538     @bottom-right-corner { content: counter(page); border: solid green; }
  1539     @bottom-left-corner { content: normal; border: solid green; }
  1541 </pre>
  1542    </div>
  1544    <h3 id=margin-dimension><span class=secno>6.3. </span>Computing
  1545     Page-margin Box Dimensions</h3>
  1547    <p>The width and height of each page-margin box is determined by the rules
  1548     below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6
  1549     for page-margin boxes.
  1551    <p>The rules for applying ‘<code class=property>min-height</code>’,
  1552     ‘<code class=property>max-height</code>’, ‘<code
  1553     class=property>min-width</code>’, and ‘<code
  1554     class=property>max-width</code>’ <a href="#CSS21"
  1555     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do apply to page-margin
  1556     boxes and may imply a recalculation of the width, height, and/or margins
  1557     if the dimensions resulting from the specified ‘<code
  1558     class=property>width</code>’ or ‘<code
  1559     class=property>height</code>’ violate their constraints. If the UA does
  1560     not support the ‘<code class=property>min-height</code>’ or ‘<code
  1561     class=property>min-width</code>’ properties then it must behave as if
  1562     ‘<code class=property>min-height</code>’ and ‘<code
  1563     class=property>min-width</code>’ were always zero.
  1565    <h4 id=margin-box-terms><span class=secno>6.3.1. </span><a
  1566     id=max-margin-dimension></a>Page-Margin Box Layout Terminology</h4>
  1568    <p>In addition to the box model definitions in CSS2.1 <a href="#CSS21"
  1569     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the sizing terms in CSS
  1570     Intrinsic Sizing <a href="#CSS3-SIZING"
  1571     rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a>, the following
  1572     terms are defined for use in the subsequent page-margin box calculations:
  1574    <dl>
  1575     <dt><dfn id=available-width>available width</dfn>
  1577     <dd>The sum of the page’s left border width, left padding, <a
  1578      href="#page-box">page area</a> width, right padding, and right border
  1579      width. In other words, it is the distance between the <a
  1580      href="#page-box">page box</a>’s left right border edges. This quantity
  1581      is used when calculating dimensions of the top and bottom page-margin
  1582      boxes.
  1584     <dt><dfn id=available-height>available height</dfn>
  1586     <dd>The sum of the page’s top border width, top padding, <a
  1587      href="#page-box">page area</a> height, bottom padding, and bottom border
  1588      width. In other words, it is the distance between the <a
  1589      href="#page-box">page box</a>’s top bottom border edges. This quantity
  1590      is used when calculating dimensions of the left and right page-margin
  1591      boxes.
  1593     <dt><dfn id=outer-width>outer width</dfn>
  1595     <dd>The width of the <a
  1596      href="http://www.w3.org/TR/CSS21/box.html#outer-edge">outer edge</a>, as
  1597      defined in <a href="#CSS21"
  1598      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
  1600     <dt><dfn id=outer-min-width>outer min width</dfn>
  1602     <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
  1603      <a href="http://www.w3.org/TR/css3-sizing/#min-content">‘<code
  1604      class=css>min-content</code>’</a> is used when the width is ‘<code
  1605      class=css>auto</code>’.
  1607     <dt><dfn id=outer-max-width>outer max width</dfn>
  1609     <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
  1610      <a href="http://www.w3.org/TR/css3-sizing/#max-content">‘<code
  1611      class=css>max-content</code>’</a> is used when ‘<code
  1612      class=property>width</code>’ is ‘<code class=css>auto</code>’.
  1613    </dl>
  1615    <p>The <dfn id=containing-block>containing block</dfn> for a corner
  1616     page-margin box is the rectangle defined by the intersection of the two
  1617     page margins meeting at that corner.
  1619    <p>For all other page-margin boxes, the <dfn
  1620     id=containing-block0>containing block</dfn> is the rectangle formed by
  1621     the encapsulating page margin minus the containing blocks of the adjacent
  1622     corners' page-margin boxes. This means that the size of this containing
  1623     block is given in one dimension by the used page margin and in the other
  1624     dimension by the <a href="#available-width"><i>available width</i></a>
  1625     (for top and bottom page-margin boxes) or <a
  1626     href="#available-height"><i>available height</i></a> (for left and right
  1627     page-margin boxes).
  1629    <h4 id=variable-sizing><span class=secno>6.3.2. </span> Page-Margin Box
  1630     Variable Dimension Computation Rules</h4>
  1632    <p>The following rules apply to ‘<code
  1633     class=property>top-left</code>’, ‘<code
  1634     class=property>top-center</code>’ and ‘<code
  1635     class=property>top-right</code>’ page-margin boxes, which are referred
  1636     to as A, B, and C, respectively, in this section.
  1638    <h5 id=variable-auto-margins><span class=secno>6.3.2.1. </span>Margins</h5>
  1640    <p>If the ‘<code class=property>margin-left</code>’ or ‘<code
  1641     class=property>margin-right</code>’ property of any of the three boxes
  1642     computes to ‘<code class=css>auto</code>’, the used value is zero.
  1644    <h5 id=variable-auto-sizing><span class=secno>6.3.2.2. </span>Resolving
  1645     ‘<code class=css>auto</code>’ widths</h5>
  1647    <p>The following algorithm determines the used width of each box. For this
  1648     purpose, boxes that are not <a href="#generated"><i>generated</i></a> are
  1649     assumed to have a ‘<code class=property>width</code>’ and an <a
  1650     href="#outer-width"><i>outer width</i></a> of zero.
  1652    <p class=note> Note: The high-level goals are (in order of priority) to
  1653     center the middle box (B) if it is generated, to minimize overflow and
  1654     overlap, and to distribute space proportionally to the amount of content.
  1656    <p>If the middle box (B) is not <a href="#generated"><i>generated</i></a>,
  1657     distribute the <a href="#available-width"><i>available width</i></a> to A
  1658     and C as follows:
  1660    <ul>
  1661     <li> If only one box has ‘<code class=css>width: auto</code>’, its
  1662      used width is resolved so that the sum of the <a
  1663      href="#outer-width"><i>outer width</i></a>s equals <a
  1664      href="#available-width"><i>available width</i></a>.
  1666     <li id=flex-fit> If A and C both have ‘<code class=css>width:
  1667      auto</code>’, distribute the space to each box as follows:
  1668      <ol>
  1669       <li>If the sum of the outer <i>max-content widths</i> is less than the
  1670        <a href="#available-width"><i>available width</i></a>, call that
  1671        difference the <i>flex space</i>. Calculate each box's <i>flex
  1672        factor</i> as proportional to its outer <i>max-content width</i>, and
  1673        set its used outer width to:
  1674        <pre><i>max-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
  1676       <li>Otherwise if the sum of the outer <i>min-content widths</i> is less
  1677        than the <a href="#available-width"><i>available width</i></a>, call
  1678        that difference the <i>flex space</i> calculate each box's <i>flex
  1679        factor</i> as proportional to its <i>max-content</i> minus
  1680        <i>min-content</i>, and set its used outer width to:
  1681        <pre><i>min-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
  1683       <li>Otherwise, calculate its outer size as in the previous case, but
  1684        set each box's <i>flex factor</i> as proportional to its outer
  1685        <i>min-content width</i>.
  1686      </ol>
  1687      In each case, both <i>flex factors</i> are assumed to be ‘<code
  1688      class=css>1</code>’ if their sum is equal to zero.
  1689    </ul>
  1691    <p>If the middle box (B) is <a href="#generated"><i>generated</i></a>,
  1692     determine the ‘<code class=css>auto</code>’ widths of A, B, and C as
  1693     follows:
  1695    <ol>
  1696     <li> First, resolve any ‘<code class=css>auto</code>’ width of the
  1697      middle box (B): Assume there are two boxes, B and AC, where each of AC's
  1698      dimensions is double the maximum of A and C. (This preserves B's
  1699      centering.) Distribute the space to these two boxes (B and the imaginary
  1700      AC) as described for A and C <a href="#fit2">above</a>.
  1702     <li> Then, resolve any ‘<code class=css>auto</code>’ widths of the
  1703      side boxes (A and C) by setting that box's outer width to
  1704      <pre>(<a
  1705       href="#available-width"><i>available width</i></a> − <i>used outer size of B</i>) ÷ 2</pre>
  1707      <pre>
  1708     </pre>
  1709    </ol>
  1711    <h5 id=variable-minmax><span class=secno>6.3.2.3. </span>Handling ‘<code
  1712     class=property>min-width</code>’ and ‘<code
  1713     class=property>max-width</code>’</h5>
  1715    <p> The ‘<code class=property>min-width</code>’ and ‘<code
  1716     class=property>max-width</code>’ properties <a href="#CSS21"
  1717     rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> apply to page-margin boxes in
  1718     the variable dimension like on normal elements, except that the three
  1719     boxes on the same side are considered together.
  1721    <p> More precisely:
  1723    <ol>
  1724     <li> The tentative used widths are calculated (without ‘<code
  1725      class=property>min-width</code>’ and ‘<code
  1726      class=property>max-width</code>’) following the rules under <a
  1727      href="#marginbox-variabledim-with">Resolving ‘<code
  1728      class=css>auto</code>’ widths</a> above.
  1730     <li> If the tentative used width of any of the three boxes is greater
  1731      than ‘<code class=property>max-width</code>’, the rules above are
  1732      applied again, but this time using the computed value of ‘<code
  1733      class=property>max-width</code>’ as the computed value for ‘<code
  1734      class=property>width</code>’.
  1736     <li> If the resulting width of any of the three boxes is smaller than
  1737      ‘<code class=property>min-width</code>’, the rules above are applied
  1738      again, but this time using the value of ‘<code
  1739      class=property>min-width</code>’ as the computed value for ‘<code
  1740      class=property>width</code>’.
  1741    </ol>
  1743    <h5 id=variable-position><span class=secno>6.3.2.4. </span>Positioning</h5>
  1745    <p> Once the dimensions of the boxes are determined, they are positioned
  1746     as follows:
  1748    <ul>
  1749     <li>The left outer edge of A is flush with the left edge of the
  1750      containing block
  1752     <li>The outer area of B is centered in the containing block.
  1754     <li>The right outer edge of C is flush with the right edge of the
  1755      containing block.
  1756    </ul>
  1758    <h5 id=variable-mapping><span class=secno>6.3.2.5. </span>Boxes on other
  1759     sides</h5>
  1761    <p>The used values for ‘<code class=property>bottom-left</code>’,
  1762     ‘<code class=property>bottom-center</code>’ and ‘<code
  1763     class=property>bottom-right</code>’ page-margin boxes are established
  1764     by the same rules as for ‘<code class=property>top-left</code>’,
  1765     ‘<code class=property>top-center</code>’, and ‘<code
  1766     class=property>top-right</code>’, respectively.
  1768    <p>The used values for ‘<code class=property>left-top</code>’,
  1769     ‘<code class=property>left-middle</code>’ and ‘<code
  1770     class=property>left-bottom</code>’ boxes are established by the same
  1771     rules, with "width" replaced by "height", "left" by "top", "right" by
  1772     "bottom" and "center" by "middle".
  1774    <p>The used values for ‘<code class=property>right-top</code>’,
  1775     ‘<code class=property>right-middle</code>’ and ‘<code
  1776     class=property>right-bottom</code>’ page-margin boxes are established
  1777     by the same rules as for ‘<code class=property>left-top</code>’,
  1778     ‘<code class=property>left-middle</code>’ and ‘<code
  1779     class=property>left-bottom</code>’, respectively.
  1781    <h4 id=fixed-sizing><span class=secno>6.3.3. </span>Page-Margin Box Fixed
  1782     Dimension Computation Rules</h4>
  1784    <p>The rules below are used to calculate the used values of each ‘<code
  1785     class=property>top-left-corner</code>’, ‘<code
  1786     class=property>top-left</code>’, ‘<code
  1787     class=property>top-center</code>’, ‘<code
  1788     class=property>top-right</code>’, and ‘<code
  1789     class=property>top-right-corner</code>’ page-margin box's ‘<code
  1790     class=property>height</code>’, ‘<code
  1791     class=property>margin-top</code>’, and ‘<code
  1792     class=property>margin-bottom</code>’ properties:
  1794    <ol>
  1795     <li>The following constraint must hold among the used values of the
  1796      margin box's properties:
  1797      <p>‘<code class=property>margin-top</code>’ + ‘<code
  1798       class=property>border-top-width</code>’ + ‘<code
  1799       class=property>padding-top</code>’ + ‘<code
  1800       class=property>height</code>’ + ‘<code
  1801       class=property>padding-bottom</code>’ + ‘<code
  1802       class=property>border-bottom-width</code>’ + ‘<code
  1803       class=property>margin-bottom</code>’ = top page margin
  1805     <li>If ‘<code class=property>border-top-width</code>’ + ‘<code
  1806      class=property>padding-top</code>’ + ‘<code
  1807      class=property>height</code>’ (if it is not ‘<code
  1808      class=css>auto</code>’) + ‘<code
  1809      class=property>padding-bottom</code>’ + ‘<code
  1810      class=property>border-bottom-width</code>’, plus ‘<code
  1811      class=property>margin-top</code>’ and/or ‘<code
  1812      class=property>margin-bottom</code>’ if not ‘<code
  1813      class=css>auto</code>’, is larger than the height of the top page
  1814      margin, then any ‘<code class=css>auto</code>’ values for ‘<code
  1815      class=property>margin-top</code>’ or ‘<code
  1816      class=property>margin-bottom</code>’ are, for the following rules,
  1817      treated as zero.
  1819     <li>If at this point all of ‘<code class=property>height</code>’,
  1820      ‘<code class=property>margin-top</code>’, and ‘<code
  1821      class=property>margin-bottom</code>’ have a computed value other than
  1822      ‘<code class=css>auto</code>’, the values are said to be
  1823      "over-constrained". In this case, the specified value of ‘<code
  1824      class=property>margin-top</code>’ is treated as ‘<code
  1825      class=property>auto</code>’.
  1827     <li>If there is now exactly one value specified as ‘<code
  1828      class=property>auto</code>’, its used value follows from the equality.
  1830     <li>If ‘<code class=property>height</code>’ is set to ‘<code
  1831      class=property>auto</code>’, any other ‘<code
  1832      class=property>auto</code>’ values become ‘<code
  1833      class=css>0</code>’ and ‘<code class=property>height</code>’
  1834      follows from the resulting equality
  1836     <li>If both ‘<code class=property>margin-top</code>’ and ‘<code
  1837      class=property>margin-bottom</code>’ are ‘<code
  1838      class=property>auto</code>’, their used values are equal. This
  1839      vertically centers the page-margin box content within the top page
  1840      margin.
  1841    </ol>
  1843    <p>The same rules apply to the bottom page-margin boxes
  1844     (bottom-left-corner, bottom-left, bottom-center, bottom-right, and
  1845     bottom-right-corner), except that in the overconstrained case, the
  1846     ‘<code class=property>margin-bottom</code>’ is ignored rather than
  1847     the ‘<code class=property>margin-top</code>’.
  1849    <p>Analogous rules govern the properties for the left and right
  1850     page-margin boxes with respect to ‘<code class=property>width</code>’
  1851     (top-left-corner, left-top, left-middle, left-bottom, and
  1852     bottom-left-corner; top-right-corner, right-top, right-middle,
  1853     right-bottom, bottom-right-corner), with ‘<code
  1854     class=property>top</code>’ replaced by ‘<code
  1855     class=property>left</code>’, ‘<code class=property>bottom</code>’
  1856     replaced by ‘<code class=property>right</code>’, and ‘<code
  1857     class=property>height</code>’ replaced by ‘<code
  1858     class=property>width</code>’. In the overconstrained case for left
  1859     (right) page-margin boxes, the specified value of ‘<code
  1860     class=property>margin-left</code>’ (‘<code
  1861     class=property>margin-right</code>’) is ignored.
  1863    <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box
  1864     examples</h3>
  1866    <p>The following is a collection of examples of page-margin box usage.
  1868    <div class=example>
  1869     <p>Here is an example of a page with only a top-left header:
  1871     <pre>
  1872 @page {
  1873 @top-left { content: "Header in Left Cell (top-left)" }
  1875 </pre>
  1877     <p>Because there are no contents defined for the top-center or the
  1878      top-right page-margin boxes, the extent of the top-left page-margin box
  1879      is allowed to cross the center of the page box.
  1881     <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>
  1882    </div>
  1884    <div class=example>
  1885     <p>The following is an example of a page with a centered header:
  1887     <pre>
  1888 @page {
  1889 @top-center { content: "Header in Center Cell (top-center)" }
  1891 </pre>
  1893     <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>
  1894    </div>
  1896    <div class=example>
  1897     <p>The following is an example of a page with a single header in the
  1898      top-right page-margin box:
  1900     <pre>
  1901 @page {
  1902 @top-right { content: "Header in Right Cell (top-right)" }
  1904 </pre>
  1906     <p>Because the content of the center cell is empty, the extent of the
  1907      top-right page-margin box is allowed to cross the center of the page
  1908      box.
  1910     <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>
  1911    </div>
  1913    <div class=example>
  1914     <p>The following is an example of a page with a top-center and a top-left
  1915      header:
  1917     <pre>
  1918 @page {
  1919 @top-left { content: "Left Cell (top-left)" }
  1920 @top-center { content: "Header in Center Cell (top-center)" }
  1922 </pre>
  1924     <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>
  1925    </div>
  1927    <div class=example>
  1928     <p>The following is an example of a page with a top-center and a
  1929      top-right header:
  1931     <pre>
  1932 @page {
  1933 @top-center { content: "Header in Center Cell (top-center)" }
  1934 @top-right { content: "Right Cell (top-right)" }
  1936 </pre>
  1938     <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>
  1939    </div>
  1941    <div class=example>
  1942     <p>The following is an example of a page with top-left and top-right
  1943      headers:
  1945     <pre>
  1946 @page {
  1947 @top-left { content: "Header in top-left with approx. "
  1948                    "twice as many words as right cell." }
  1949 @top-right { content: "Right cell (top-right)" }
  1951 </pre>
  1953     <p>Because there are no center cell contents, the extent of the top-left
  1954      is allowed to cross the center of the page box.
  1956     <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>
  1957    </div>
  1959    <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>
  1961    <div>
  1962     <p> <a href="#properties-list">Appendix A</a> defines the normative list
  1963      of CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
  1964      <a href="#page-property-list">properties that apply to page boxes</a>.
  1965      If a conforming user agent supports any of these properties on block
  1966      boxes, then it <em class=RFC2119>MUST</em> also support that property in
  1967      the <a href="#page-context"><i>page context</i></a>. This specification
  1968      additionally defines the ‘<a href="#size"><code
  1969      class=property>size</code></a>’ property that only applies in the page
  1970      context.
  1972     <p> Properties that apply to the page-margin boxes can also be set within
  1973      the page context: if inheritable or explicitly inherited (with the
  1974      ‘<code class=css>inherit</code>’ keyword in the margin context),
  1975      they will inherit to the page-margin boxes.
  1977     <p> The same appendix defines the normative list of CSS 2.1 <a
  1978      href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a
  1979      href="#page-property-list">properties that apply to page-margin
  1980      boxes</a>. If a conforming user agent supports any of these properties
  1981      on block boxes, then it <em class=RFC2119>MUST</em> also support that
  1982      property in the <a href="#margin-context"><i>margin context</i></a>.
  1984     <p> Other properties defined by <a href="#CSS21"
  1985      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these
  1986      contexts. Behavior for properties not included in CSS 2.1 is undefined.
  1988     <p class=note> Note: The intent of leaving other properties undefined is
  1989      to allow the gradual addition of appropriate CSS3 properties as they
  1990      emerge, without having to update this specification with each addition.
  1992     <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
  1993      elements in the document</a>, both the page context and the margin
  1994      context have a computed value for every property, even if that property
  1995      does not apply to the page or page-margin box.
  1997     <p>The normal rules for CSS properties apply with the following
  1998      exceptions:
  2000     <ul>
  2001      <li>page-margin boxes inherit from the page context. The page context
  2002       inherits from the root element. However, since the previous revision of
  2003       CSS Paged Media Level 3 did not specify this point, an implementation
  2004       that sets inherited properties in the page context to their initial
  2005       values (as for the root element) is also conformant to CSS Paged Media
  2006       Level 3. Note that this exception will be removed in Level 4.
  2008      <li>Values in units of ‘<code class=css>em</code>’ and ‘<code
  2009       class=css>ex</code>’ are interpreted relative to the font associated
  2010       with their context. When used on the ‘<code
  2011       class=property>font-size</code>’ property in the margin context, they
  2012       are relative to the font of the page context. When used on the ‘<code
  2013       class=property>font-size</code>’ property in the page context, they
  2014       are relative to the ‘<code class=property>font-size</code>’ of the
  2015       root element. However, since a previous revision of CSS Paged Media
  2016       Level 3 was ambiguous on this point, an implementation that treats
  2017       ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on
  2018       ‘<code class=property>font-size</code>’ as relative to the initial
  2019       value is also conformant to CSS Paged Media Level 3. Note that this
  2020       exception will be removed in Level 4.
  2022      <li>Percentage values on the margin and padding properties are relative
  2023       to the dimensions of the containing block. For right and left values,
  2024       percentages are relative to the width of the containing block; for top
  2025       and bottom values, percentages are relative to the height of the
  2026       containing block.
  2028      <li>The used values of ‘<code class=property>width</code>’ and
  2029       ‘<code class=property>height</code>’ have special computation rules
  2030       for page boxes and page-margin boxes; see <a href="#page-size">Page
  2031       Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box
  2032       Dimensions</a>.
  2034      <li>The page background is positioned and painted <a href="#painting">as
  2035       described above</a>.
  2037      <li>The rules for counter scoping are modified <a
  2038       href=page-based-counters>as described below</a>.
  2040      <li> As on the ‘<code class=css>::before</code>’ and ‘<code
  2041       class=css>::after</code>’ pseudo-elements, the ‘<code
  2042       class=css>normal</code>’ value of the ‘<code
  2043       class=property>content</code>’ property computes to ‘<code
  2044       class=css>none</code>’ on page-margin boxes.
  2046      <li>On page-margin boxes, the ‘<code
  2047       class=property>vertical-align</code>’ property behaves <a
  2048       href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as
  2049       specified for table cells</a>. It <em>always</em> performs alignment in
  2050       the vertical dimension, regardless of writing mode.
  2051     </ul>
  2053     <p>It is <em class=RFC2119>recommended</em> that user agents establish a
  2054      default page margin via the user agent stylesheet that includes any
  2055      non-printable area. It is further <em class=RFC2119>recommended</em>
  2056      that authors assume that the default page area will not include
  2057      unprintable regions.
  2059     <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based
  2060      counters</h3>
  2062     <p>Counters can be defined and controlled within an <span
  2063      class=css>‘<code class=css>@page</code>’</span> rule, and used as
  2064      content in page-margin boxes. This is useful for maintaining a page
  2065      count.
  2067     <p>A ‘<code class=property>counter-increment</code>’ within either a
  2068      page or margin context causes the counter to increment with the
  2069      generation of each page box.
  2071     <p>If a counter is reset or incremented within the page context, it is in
  2072      scope for all page-margin boxes and obscures all counters of the same
  2073      name within the document.
  2075     <p>If a counter is reset or incremented within a margin context, it is in
  2076      scope for that page-margin box and obscures any counters of the same
  2077      name in both the page context and the document.
  2079     <p>If a counter that has not been reset or incremented within the margin
  2080      context or the page context is used by counter() or counters() in the
  2081      margin context, then the resultant value is exactly as if the
  2082      page-margin box were an element within the document at the start of the
  2083      page, inside the deepest element in the normal flow that spans the page
  2084      break. Use of the counter in this way does not affect the calculation of
  2085      the counter's value.
  2087     <p> A counter named ‘<a href="#page"><code class=css>page</code></a>’
  2088      is automatically created and incremented by 1 on every page of the
  2089      document, unless the ‘<code class=property>counter-increment</code>’
  2090      property in the <a href="#page-context"><i>page context</i></a>
  2091      explicitly specifies a different increment for the ‘<a
  2092      href="#page"><code class=css>page</code></a>’ counter. The implied
  2093      ‘<a href="#page"><code class=css>page</code></a>’ counter is a real
  2094      counter, and can be directly affected using the ‘<code
  2095      class=property>counter-increment</code>’ and ‘<code
  2096      class=property>counter-reset</code>’ properties when named explicitly
  2097      in those properties. It can also be used in the ‘<code
  2098      class=css>counter()</code>’ and ‘<code
  2099      class=css>counters()</code>’ function forms.
  2101     <div class=example>
  2102      <p>The following rules result in the placement of the current page
  2103       number in the middle of the outside margin of each page.
  2105      <pre>
  2106 @page {
  2107   margin: 10%;
  2109   @top-center {
  2110     font-family: sans-serif;
  2111     font-weight: bold;
  2112     font-size: 2em;
  2113     content: counter(page);
  2116 </pre>
  2118      <p>Adding the following rule will make all pages even-numbered.
  2120      <pre>
  2121 @page {
  2122   counter-increment: page 2;
  2124 </pre>
  2125     </div>
  2127     <p>Additionally, a counter named ‘<a href="#page"><code
  2128      class=css>pages</code></a>’ is automatically created by the UA. Its
  2129      value is always the total number of pages in the document. (In
  2130      continuous media this is always 1.) The value of ‘<a
  2131      href="#page"><code class=css>pages</code></a>’ cannot be manipulated:
  2132      while ‘<code class=property>counter-reset</code>’ and ‘<code
  2133      class=property>counter-increment</code>’ statements that set it are
  2134      valid, they have no effect.
  2136     <p>In all other respects, page-associated counters behave as described in
  2137      <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a
  2138      href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a
  2139      href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.
  2141     <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin
  2142      boxes and default values</h3>
  2144     <p>Properties used within page or margin contexts take their initial
  2145      values from their respective property definitions; however, user agents
  2146      must behave as though the values in the following table were established
  2147      by rules in the UA default style sheet.
  2149     <table class=data id=margin-values
  2150      summary="definition of page-margin box default properties">
  2151      <caption>Table 2. Default values for Page-Margin Boxes</caption>
  2153      <thead>
  2154       <tr>
  2155        <th>Page-margin box
  2157        <th><span class=property>‘<code
  2158         class=property>text-align</code>’</span>
  2160        <th><span class=property>‘<code
  2161         class=property>vertical-align</code>’</span>
  2163      <tbody>
  2164       <tr>
  2165        <td><a href="#top-left-corner-box-def">top-left-corner</a>
  2167        <td>right
  2169        <td>middle
  2171       <tr>
  2172        <td><a href="#top-left-box-def">top-left</a>
  2174        <td>left
  2176        <td>middle
  2178       <tr>
  2179        <td><a href="#top-center-box-def">top-center</a>
  2181        <td>center
  2183        <td>middle
  2185       <tr>
  2186        <td><a href="#top-right-box-def">top-right</a>
  2188        <td>right
  2190        <td>middle
  2192       <tr>
  2193        <td><a href="#top-right-corner-box-def">top-right-corner</a>
  2195        <td>left
  2197        <td>middle
  2199       <tr>
  2200        <td><a href="#left-top-box-def">left-top</a>
  2202        <td>center
  2204        <td>top
  2206       <tr>
  2207        <td><a href="#left-middle-box-def">left-middle</a>
  2209        <td>center
  2211        <td>middle
  2213       <tr>
  2214        <td><a href="#left-bottom-box-def">left-bottom</a>
  2216        <td>center
  2218        <td>bottom
  2220       <tr>
  2221        <td><a href="#right-top-box-def">right-top</a>
  2223        <td>center
  2225        <td>top
  2227       <tr>
  2228        <td><a href="#right-middle-box-def">right-middle</a>
  2230        <td>center
  2232        <td>middle
  2234       <tr>
  2235        <td><a href="#right-bottom-box-def">right-bottom</a>
  2237        <td>center
  2239        <td>bottom
  2241       <tr>
  2242        <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>
  2244        <td>right
  2246        <td>middle
  2248       <tr>
  2249        <td><a href="#bottom-left-box-def">bottom-left</a>
  2251        <td>left
  2253        <td>middle
  2255       <tr>
  2256        <td><a href="#bottom-center-box-def">bottom-center</a>
  2258        <td>center
  2260        <td>middle
  2262       <tr>
  2263        <td><a href="#bottom-right-box-def">bottom-right</a>
  2265        <td>right
  2267        <td>middle
  2269       <tr>
  2270        <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>
  2272        <td>left
  2274        <td>middle
  2275     </table>
  2277     <div class=example>
  2278      <p>This example style sheet could be used to create a centered header
  2279       with the current chapter name:
  2281      <pre>body {counter-reset: chapter;}
  2282 div.chapter {counter-increment: chapter;}
  2283 @page {
  2284 margin: 10%;
  2285 @top-center { content: "Chapter" counter(chapter) }
  2287 </pre>
  2288     </div>
  2290     <h2 id=page-size><span class=secno>8. </span>Page Size</h2>
  2292     <p>People around the world use many different paper sizes. It is a goal
  2293      of this specification that web content should be adaptable to a range of
  2294      different sizes without having to write a specific style sheet for each
  2295      paper size.
  2297     <p>However, in some situations it is important that a certain page size
  2298      achieves a certain style. One way to achieve this goal is to utilize the
  2299      ‘<a href="#size"><code class=property>size</code></a>’ property,
  2300      which indicates that the document should preferentially be displayed on
  2301      a surface of a certain size; another method is to use Media Queries <a
  2302      href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow
  2303      different style sheets to be applied to different page sizes.
  2305     <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a
  2306      href="#size"><code class=property>size</code></a>’ property</h3>
  2308     <table class=propdef summary="definition of the size property">
  2309      <tbody>
  2310       <tr>
  2311        <th>Name:
  2313        <td><dfn id=size>size</dfn>
  2315       <tr>
  2316        <th>Value:
  2318        <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |
  2319         landscape] ]
  2321       <tr>
  2322        <th>Initial:
  2324        <td>auto
  2326       <tr>
  2327        <td><em>Applies to:</em>
  2329        <td>page context
  2331       <tr>
  2332        <th>Inherited:
  2334        <td>N/A
  2336       <tr>
  2337        <th>Percentages:
  2339        <td>N/A
  2341       <tr>
  2342        <th>Media:
  2344        <td>paged
  2346       <tr>
  2347        <td><em>Computed value:</em>
  2349        <td>specified value
  2350     </table>
  2352     <p>This property specifies the target size and orientation of the <a
  2353      href="#page-box">page box</a>’s containing block. In the general case,
  2354      where one page box is rendered onto one <a href="#page-sheet">page
  2355      sheet</a>, the ‘<a href="#size"><code
  2356      class=property>size</code></a>’ property also indicates the size of
  2357      the destination page sheet.
  2359     <p>The size of a page box can either be "absolute" (fixed size) or
  2360      "scalable" (i.e., fitting available sheet sizes). The first three values
  2361      in the table below can be used to create scalable page boxes. Other
  2362      values define a fixed-size page box, and thereby indicate the preferred
  2363      output media size. When possible, output should be rendered on the media
  2364      size indicated. If the specified size is not available, the rules for <a
  2365      href="#renderingpages">transposing a page box to a different size</a>
  2366      apply.
  2368     <p>If a <a href="#size"><code>size</code></a> property declaration is
  2369      qualified by a ‘<code class=css>width</code>’, ‘<code
  2370      class=css>height</code>’, ‘<code class=css>device-width</code>’,
  2371      ‘<code class=css>device-height</code>’, ‘<code
  2372      class=css>aspect-ratio</code>’, ‘<code
  2373      class=css>device-aspect-ratio</code>’ or ‘<code
  2374      class=css>orientation</code>’ media query <a href="#MEDIAQ"
  2375      rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on
  2376      the size of the paper), then the declaration must be <a
  2377      href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
  2378      queries do not honor ‘<a href="#size"><code
  2379      class=property>size</code></a>’: they assume the paper size that would
  2380      be chosen if no @page rules were specified.
  2382     <p class=issue>It would be useful if media queries could respond at least
  2383      to sizes specified on an unqualified @page.
  2385     <div class=example>
  2386      <p>In the following example
  2388      <pre>
  2389   @page {
  2390     size: 4in 6in;
  2393   @media (max-width: 6in) {
  2394     @page {
  2395       size: letter;
  2398   </pre>
  2400      <p>The second <a href="#size"><code>size</code></a> declaration is
  2401       ignored, i.e. the specified value of the <a
  2402       href="#size"><code>size</code></a> property is <code>4in 6in</code>.
  2403     </div>
  2405     <table class=page-sizes>
  2406      <tbody>
  2407       <tr>
  2408        <th>Value
  2410        <th>Description
  2412       <tr>
  2413        <td>auto
  2415        <td>The page box will be set to a size and orientation chosen by the
  2416         UA. In the usual case, the page box size and orientation is chosen to
  2417         match the target media sheet.
  2419       <tr>
  2420        <td>landscape
  2422        <td>Specifies that the page's content be printed in landscape
  2423         orientation. The longer sides of the page box are horizontal. If a
  2424         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>
  2425         is not specified, the size of the page sheet is chosen by the UA.
  2427       <tr>
  2428        <td>portrait
  2430        <td>Specifies that the page's content be printed in portrait
  2431         orientation. The shorter sides of the page box are horizontal. If a
  2432         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>
  2433         is not specified, the size of the page sheet is chosen by the UA.
  2435       <tr>
  2436        <td>&lt;length&gt;
  2438        <td>The page box will be set to the given absolute dimension(s). If
  2439         only one length value is specified, it sets both the width and height
  2440         of the page box (i.e., the box is a square). If two length values are
  2441         specified, the first establishes the page box width, and the second
  2442         the page box height. Values in units of <span class=css>‘<code
  2443         class=property>em</code>’</span> and <span class=css>‘<code
  2444         class=property>ex</code>’</span> refer to the page context's font.
  2445         Negative lengths are illegal.
  2447       <tr>
  2448        <td>&lt;page-size&gt;
  2450        <td>A page size can be specified using one of the following media
  2451         names. This is the equivalent of specifying the <span
  2452         class=css>‘<code class=css>&lt;page-size&gt;</code>’</span> using
  2453         length values. The definition of the the media names comes from
  2454         <cite>Media Standardized Names</cite> <a href="#PWGMSN"
  2455         rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.
  2456         <dl>
  2457          <dt>A5
  2459          <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm
  2460           high.
  2462          <dt>A4
  2464          <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm
  2465           high.
  2467          <dt>A3
  2469          <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm
  2470           high.
  2472          <dt>B5
  2474          <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm
  2475           high.
  2477          <dt>B4
  2479          <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm
  2480           high.
  2482          <dt>letter
  2484          <dd>Equivalent to the size of North American letter media: 8.5
  2485           inches wide and 11 inches high
  2487          <dt>legal
  2489          <dd>Equivalent to the size of North American legal: 8.5 inches wide
  2490           by 14 inches high.
  2492          <dt>ledger
  2494          <dd>Equivalent to the size of North American ledger: 11 inches wide
  2495           by 17 inches high.
  2496         </dl>
  2497     </table>
  2499     <p>The ‘<code class=css>&lt;page-size&gt;</code>’ names can be used
  2500      in conjunction with ‘<code class=property>landscape</code>’ or
  2501      ‘<code class=property>portrait</code>’ to indicate both size and
  2502      orientation.
  2504     <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>
  2506     <div class=example>
  2507      <pre>
  2508 @page {
  2509 size: A4 landscape;
  2511 </pre>
  2513      <p>The above example sets the width of the page box to be 297mm and the
  2514       height to be 210mm. The page box in this example should be rendered on
  2515       a page sheet size of 210 mm by 297 mm.
  2516     </div>
  2518     <div class=example>
  2519      <p>In the following example, the outer edges of the page box will align
  2520       with the page. The percentage value on the <span
  2521       class=property>‘<code class=property>margin</code>’</span> property
  2522       is relative to the page size so if the page sheet dimensions are 210mm
  2523       x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are
  2524       no page borders or padding set in the UA default style sheet, the
  2525       resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).
  2527      <pre>
  2528 @page {
  2529 size: auto;/* auto is the initial value */
  2530 margin: 10%;
  2532 </pre>
  2533     </div>
  2535     <div class=example>
  2536      <pre>
  2537 @page {
  2538 size: 8.5in 11in;/* width height */
  2540 </pre>
  2542      <p>The above example sets the width of the page box to be 8.5 inches and
  2543       the height to be 11 inches. This indicates that the page sheet size
  2544       should be 8.5"x11" and the orientation ‘<code
  2545       class=property>portrait</code>’.
  2546     </div>
  2548     <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media
  2549      Queries</h4>
  2551     <p>This section is informative.
  2553     <p>By using Media Queries <a href="#MEDIAQ"
  2554      rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can
  2555      express different stylistic preferences for different page sizes.
  2556      Consider this example:
  2558     <div class=example style="font-size: 10pt;">
  2559      <pre>
  2560  /* style sheet for "A4" printing */
  2561  @media print and (width: 21cm) and (height: 29.7cm) {
  2562     @page {
  2563        margin: 3cm;
  2567  /* style sheet for "letter" printing */
  2568  @media print and (width: 8.5in) and (height: 11in) {
  2569     @page {
  2570         margin: 1in;
  2573 </pre>
  2574     </div>
  2576     <p>In the example above, "A4" sheets are given a "3cm" page margin, and
  2577      "letter" sheets are given a "1in" page margin.
  2579     <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes
  2580      that do not fit a page sheet</h3>
  2582     <p>If a page box does not match the target page sheet dimensions, the
  2583      user agent should do one of the following (in order of preference):
  2585     <ol>
  2586      <li>Render the page box at the indicated size on a larger page sheet.
  2588      <li>Rotate the page box 90° if this will make the page box fit the page
  2589       sheet.
  2591      <li>Scale the page box to fit the page sheet. (The aspect ratio of the
  2592       page box <em class=RFC2119>should</em> be preserved.)
  2594      <li>Graphically "slice" the page box onto multiple page sheets.
  2596      <li>Clip overflowed content (least preferred).
  2597     </ol>
  2599     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user
  2600      before performing these operations.
  2602     <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the
  2603      page box on the sheet</h3>
  2605     <p>When the page box is smaller than the page sheet, the user agent <em
  2606      class=RFC2119>SHOULD</em> either:
  2608     <ul>
  2609      <li>center the page box on the sheet since this will align double-sided
  2610       pages and avoid accidental loss of information that is printed near the
  2611       edge of the sheet; or
  2613      <li>position the page box in the upper left corner of the page sheet (or
  2614       another corner, based on the ‘<code
  2615       class=property>direction</code>’ and ‘<code
  2616       class=property>writing-mode</code>’ properties of the page box) as
  2617       this may minimize media consumption.
  2618     </ul>
  2620     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in
  2621      this regard.</p>
  2622     <!-- "Page selector and page context" -->
  2623     <h2 id=page-breaks><span class=secno>9. </span> <a
  2624      id=pg-br-before-after></a> <a id=page-break-before></a> <a
  2625      id=page-break-after></a> <a id=page-break-inside></a> <a
  2626      id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a
  2627      id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a
  2628      id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>
  2629      <a id=best-pg-brk></a> Page Breaks</h2>
  2631     <p> The CSS Fragmentation Module <a href="#CSS3-BREAK"
  2632      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines
  2633      how and where CSS boxes can be <i>fragmented</i>, including across page
  2634      breaks. It defines a few properties that indicate where the user agent
  2635      <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,
  2636      and on what page (left or right) the subsequent content resumes. Each
  2637      page break ends layout in the current <a href="#page-box">page box</a>
  2638      and causes remaining pieces of the document tree to be laid out in a new
  2639      page box.
  2641     <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:
  2642      ‘<a href="#page"><code class=property>page</code></a>’</h3>
  2644     <table class=propdef summary="property definition">
  2645      <tbody>
  2646       <tr>
  2647        <th>Name:
  2649        <td><dfn id=page>page</dfn>
  2651       <tr>
  2652        <th>Value:
  2654        <td>auto | &lt;identifier&gt;
  2656       <tr>
  2657        <th>Initial:
  2659        <td>auto
  2661       <tr>
  2662        <th>Applies to:
  2664        <td>boxes that create <a
  2665         href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break
  2666         points
  2668       <tr>
  2669        <th>Inherited:
  2671        <td>no (but see prose)
  2673       <tr>
  2674        <th>Percentages:
  2676        <td>N/A
  2678       <tr>
  2679        <th>Media:
  2681        <td>paged
  2683       <tr>
  2684        <th>Computed value:
  2686        <td>specified value
  2687     </table>
  2689     <p> The ‘<a href="#page"><code class=property>page</code></a>’
  2690      property is used to specify a particular type of page (called a <dfn
  2691      id=named-page>named page</dfn>) on which an element <em
  2692      class=RFC2119>MUST</em> be displayed. If necessary, a <i>forced page
  2693      break</i> is introduced and a new page generated of the specified type.
  2695     <p class=note> This page can be styled by using the same type name in a
  2696      <a href="#page-selectors">page selector</a>.
  2698     <p> Page type names are case-sensitive identifiers. However the ‘<code
  2699      class=css>auto</code>’ value, being a CSS keyword, is <a
  2700      href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
  2701      case-insensitive</a>.
  2703     <p> The ‘<a href="#page"><code class=property>page</code></a>’
  2704      property does not inherit. However, if the ‘<a href="#page"><code
  2705      class=property>page</code></a>’ value on an element is ‘<code
  2706      class=css>auto</code>’, then its used value is the value specified on
  2707      its nearest ancestor with a non-auto value. When specified on the root
  2708      element, the used value for ‘<code class=css>auto</code>’ is the
  2709      empty string.
  2710      <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
  2712     <p> Because a previous version of this specification indicated that the
  2713      ‘<a href="#page"><code class=property>page</code></a>’ property is
  2714      inherited, an implementation that inherits the ‘<a href="#page"><code
  2715      class=property>page</code></a>’ property and treats ‘<code
  2716      class=css>auto</code>’ as always naming the empty string remains
  2717      conformant to CSS Paged Media Level 3. Note that this exception will be
  2718      removed in Level 4. Therefore authors should not explicitly specify the
  2719      ‘<code class=css>auto</code>’ value on a descendant of an element
  2720      with a non-‘<code class=css>auto</code>’ value, as the resulting
  2721      behavior will be unpredictable.
  2723     <p> The ‘<a href="#page"><code class=property>page</code></a>’
  2724      property works as follows:
  2726     <ol>
  2727      <li> First, any ‘<code class=css>auto</code>’ values are resolved
  2728       against non-‘<code class=css>auto</code>’ ancestors (as specified
  2729       above).
  2731      <li> Next, a <dfn id=start-page-value>start ‘<code
  2732       class=property>page</code>’ value</dfn> and <dfn
  2733       id=end-page-value>end ‘<code class=property>page</code>’
  2734       value</dfn> is determined for each box as the value (if any) propagated
  2735       from its first or last child box (respectively), else the used value on
  2736       the box itself. A child propagates its own <a
  2737       href="#start-page-value"><i title="start page value">start</i></a> or
  2738       <a href="#end-page-value"><i>end ‘<code class=property>page</code>’
  2739       value</i></a> if and only if the ‘<a href="#page"><code
  2740       class=property>page</code></a>’ property applies to it.
  2741       <p class=note> Note: A first or last child <em>box</em> is not always
  2742        generated by a first or last child <em>element</em>. For example, an
  2743        element could only have a previous sibling with ‘<code
  2744        class=css>display: none</code>’ which does not generate any box.
  2746      <li> The first printed page’s type is the <a
  2747       href="#start-page-value"><i>start ‘<code
  2748       class=property>page</code>’ value</i></a> of the root.
  2750      <li> If for any two boxes meeting at a <a
  2751       href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break
  2752       point, the <a href="#end-page-value"><i>end ‘<code
  2753       class=property>page</code>’ value</i></a> of the box preceding the
  2754       break and <a href="#start-page-value"><i>start ‘<code
  2755       class=property>page</code>’ value</i></a> of the box succeeding the
  2756       break do not match, then a page break is forced between the two boxes,
  2757       and content after the break resumes on a page box of the named type.
  2758     </ol>
  2760     <p class=note> Essentially, the two ‘<a href="#page"><code
  2761      class=property>page</code></a>’ values compared are those from the
  2762      deepest boxes meeting at the class 1 break point, ignoring any subtrees
  2763      rooted by boxes to which the ‘<a href="#page"><code
  2764      class=property>page</code></a>’ property does not apply.
  2766     <p>See <a href="#CSS3-BREAK"
  2767      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> for additional
  2768      details on page breaks.
  2770     <div class=example>
  2771      <p>In this example, the two tables are rendered on landscape pages
  2772       (indeed, on the same page, if they fit). The page type "narrow" is used
  2773       for the &lt;p&gt; after the second table, as the page properties for
  2774       the table element are no longer in effect:
  2776      <pre>
  2777 @page narrow { size: 9cm 18cm }
  2778 @page rotated { size: landscape }
  2779 div { page: narrow }
  2780 table { page: rotated }
  2781 </pre>
  2782      with this document:
  2783      <pre>
  2784 &lt;div&gt;
  2785 &lt;table&gt;...&lt;/table&gt;
  2786 &lt;table&gt;...&lt;/table&gt;
  2787 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;
  2788 &lt;/div&gt;
  2789 </pre>
  2790     </div>
  2792     <div class=example>
  2793      <p>In Japanese documents, sometimes different parts of a single document
  2794       will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"
  2795       rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a
  2796       href="#page"><code class=property>page</code></a>’ property, together
  2797       with ‘<code class=css>@page</code>’ rules specifying different page
  2798       widths, can accomodate this type of layout:
  2800      <pre>
  2801 &lt;!DOCTYPE html>
  2802 &lt;html lang="ja">
  2803   &lt;style>
  2804     html   { writing-mode: vertical-rl;
  2805              line-height: 1.6; }
  2806     .main  { page: main;
  2807              columns: 2; column-gap: 1rem; }
  2808     .index { page: index;
  2809              columns: 3; column-gap: 1rem; }
  2810     @page       { margin: auto;    /* center kihon hanmen on page */
  2811                   width:  40rem; } /* 1.6 × 25 lines        */
  2812     @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */
  2813     @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
  2814   &lt;/style>
  2815   &lt;section class="main"> ... &lt;/section>
  2816   &lt;section class="index"> ... &lt;/section>
  2817 &lt;/html>
  2818 </pre>
  2819     </div>
  2821     <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>
  2823     <p class=note>This section has been moved to <a href="#CSS3-IMAGES"
  2824      rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.
  2826     <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1
  2827      Properties</h2>
  2829     <h3 class=no-num id=page-property-list> CSS 2.1 Properties that apply
  2830      within the page context</h3>
  2832     <p> This list is described in the <a href="#page-properties">Page
  2833      Properties</a> section.
  2835     <table class=property-list>
  2836      <tbody>
  2837       <tr>
  2838        <td rowspan=2><a
  2839         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
  2840         properties</a>
  2842        <td>direction
  2844      <tbody>
  2845       <tr>
  2846        <td rowspan=6><a
  2847         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
  2848         properties</a>
  2850        <td>background-color
  2852       <tr>
  2853        <td>background-image
  2855       <tr>
  2856        <td>background-repeat
  2858       <tr>
  2859        <td>background-attachment
  2861       <tr>
  2862        <td>background-position
  2864       <tr>
  2865        <td>background
  2867      <tbody>
  2868       <tr>
  2869        <td rowspan=20><a
  2870         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
  2871         properties</a>
  2873        <td>border-top-width
  2875       <tr>
  2876        <td>border-right-width
  2878       <tr>
  2879        <td>border-bottom-width
  2881       <tr>
  2882        <td>border-left-width
  2884       <tr>
  2885        <td>border-width
  2887       <tr>
  2888        <td>border-top-color
  2890       <tr>
  2891        <td>border-right-color
  2893       <tr>
  2894        <td>border-bottom-color
  2896       <tr>
  2897        <td>border-left-color
  2899       <tr>
  2900        <td>border-color
  2902       <tr>
  2903        <td>border-top-style
  2905       <tr>
  2906        <td>border-right-style
  2908       <tr>
  2909        <td>border-bottom-style
  2911       <tr>
  2912        <td>border-left-style
  2914       <tr>
  2915        <td>border-short-style
  2917       <tr>
  2918        <td>border-top
  2920       <tr>
  2921        <td>border-right
  2923       <tr>
  2924        <td>border-bottom
  2926       <tr>
  2927        <td>border-left
  2929       <tr>
  2930        <td>border
  2932      <tbody>
  2933       <tr>
  2934        <td rowspan=2><a
  2935         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
  2936         properties</a>
  2938        <td>counter-reset
  2940       <tr>
  2941        <td>counter-increment
  2943      <tbody>
  2944       <tr>
  2945        <td colspan=2><a
  2946         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
  2948      <tbody>
  2949       <tr>
  2950        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
  2951         properties</a>
  2953        <td>font-family
  2955       <tr>
  2956        <td>font-size
  2958       <tr>
  2959        <td>font-style
  2961       <tr>
  2962        <td>font-variant
  2964       <tr>
  2965        <td>font-weight
  2967       <tr>
  2968        <td>font
  2970      <tbody>
  2971       <tr>
  2972        <td rowspan=3><a
  2973         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
  2974         <a
  2975         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
  2977        <td>height
  2979       <tr>
  2980        <td>min-height
  2982       <tr>
  2983        <td>max-height
  2985      <tbody>
  2986       <tr>
  2987        <td colspan=2><a
  2988         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
  2990      <tbody>
  2991       <tr>
  2992        <td rowspan=5><a
  2993         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
  2994         properties</a>
  2996        <td>margin-top
  2998       <tr>
  2999        <td>margin-right
  3001       <tr>
  3002        <td>margin-bottom
  3004       <tr>
  3005        <td>margin-left
  3007       <tr>
  3008        <td>margin
  3010      <tbody>
  3011       <tr>
  3012        <td rowspan=5><a
  3013         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
  3014         properties</a>
  3016        <td>outline-width
  3018       <tr>
  3019        <td>outline-style
  3021       <tr>
  3022        <td>outline-color
  3024       <tr>
  3025        <td>outline
  3027      <tbody>
  3028       <tr>
  3029        <td rowspan=5><a
  3030         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
  3031         properties</a>
  3033        <td>padding-top
  3035       <tr>
  3036        <td>padding-right
  3038       <tr>
  3039        <td>padding-bottom
  3041       <tr>
  3042        <td>padding-left
  3044       <tr>
  3045        <td>padding
  3047      <tbody>
  3048       <tr>
  3049        <td colspan=2><a
  3050         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
  3052      <tbody>
  3053       <tr>
  3054        <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
  3055         properties</a>
  3057        <td>letter-spacing
  3059       <tr>
  3060        <td>text-align
  3062       <tr>
  3063        <td>text-decoration
  3065       <tr>
  3066        <td>text-indent
  3068       <tr>
  3069        <td>text-transform
  3071       <tr>
  3072        <td>white-space
  3074       <tr>
  3075        <td>word-spacing
  3077      <tbody>
  3078       <tr>
  3079        <td colspan=2><a
  3080         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
  3082      <tbody>
  3083       <tr>
  3084        <td rowspan=3><a
  3085         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
  3086         <a
  3087         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
  3089        <td>width
  3091       <tr>
  3092        <td>min-width
  3094       <tr>
  3095        <td>max-width
  3096     </table>
  3098     <h3 class=no-num id=margin-property-list> CSS 2.1 properties that apply
  3099      within the margin contexts</h3>
  3101     <p> This list is described in the <a href="#page-properties">Page
  3102      Properties</a> section.
  3104     <table class=property-list>
  3105      <tbody>
  3106       <tr>
  3107        <td rowspan=2><a
  3108         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
  3109         properties</a>
  3111        <td>direction
  3113       <tr>
  3114        <td>unicode-bidi
  3116      <tbody>
  3117       <tr>
  3118        <td rowspan=6><a
  3119         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
  3120         properties</a>
  3122        <td>background-color
  3124       <tr>
  3125        <td>background-image
  3127       <tr>
  3128        <td>background-repeat
  3130       <tr>
  3131        <td>background-attachment
  3133       <tr>
  3134        <td>background-position
  3136       <tr>
  3137        <td>background
  3139      <tbody>
  3140       <tr>
  3141        <td rowspan=20><a
  3142         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
  3143         properties</a>
  3145        <td>border-top-width
  3147       <tr>
  3148        <td>border-right-width
  3150       <tr>
  3151        <td>border-bottom-width
  3153       <tr>
  3154        <td>border-left-width
  3156       <tr>
  3157        <td>border-width
  3159       <tr>
  3160        <td>border-top-color
  3162       <tr>
  3163        <td>border-right-color
  3165       <tr>
  3166        <td>border-bottom-color
  3168       <tr>
  3169        <td>border-left-color
  3171       <tr>
  3172        <td>border-color
  3174       <tr>
  3175        <td>border-top-style
  3177       <tr>
  3178        <td>border-right-style
  3180       <tr>
  3181        <td>border-bottom-style
  3183       <tr>
  3184        <td>border-left-style
  3186       <tr>
  3187        <td>border-short-style
  3189       <tr>
  3190        <td>border-top
  3192       <tr>
  3193        <td>border-right
  3195       <tr>
  3196        <td>border-bottom
  3198       <tr>
  3199        <td>border-left
  3201       <tr>
  3202        <td>border
  3204      <tbody>
  3205       <tr>
  3206        <td rowspan=2><a
  3207         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
  3208         properties</a>
  3210        <td>counter-reset
  3212       <tr>
  3213        <td>counter-increment
  3215      <tbody>
  3216       <tr>
  3217        <td colspan=2><a href="">content</a>
  3219      <tbody>
  3220       <tr>
  3221        <td colspan=2><a
  3222         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
  3224      <tbody>
  3225       <tr>
  3226        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
  3227         properties</a>
  3229        <td>font-family
  3231       <tr>
  3232        <td>font-size
  3234       <tr>
  3235        <td>font-style
  3237       <tr>
  3238        <td>font-variant
  3240       <tr>
  3241        <td>font-weight
  3243       <tr>
  3244        <td>font
  3246      <tbody>
  3247       <tr>
  3248        <td rowspan=3><a
  3249         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
  3250         <a
  3251         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
  3253        <td>height
  3255       <tr>
  3256        <td>min-height
  3258       <tr>
  3259        <td>max-height
  3261      <tbody>
  3262       <tr>
  3263        <td colspan=2><a
  3264         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
  3266      <tbody>
  3267       <tr>
  3268        <td rowspan=5><a
  3269         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
  3270         properties</a>
  3272        <td>margin-top
  3274       <tr>
  3275        <td>margin-right
  3277       <tr>
  3278        <td>margin-bottom
  3280       <tr>
  3281        <td>margin-left
  3283       <tr>
  3284        <td>margin
  3286      <tbody>
  3287       <tr>
  3288        <td rowspan=5><a
  3289         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
  3290         properties</a>
  3292        <td>outline-width
  3294       <tr>
  3295        <td>outline-style
  3297       <tr>
  3298        <td>outline-color
  3300       <tr>
  3301        <td>outline
  3303      <tbody>
  3304       <tr>
  3305        <td colspan=2><a
  3306         href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
  3308      <tbody>
  3309       <tr>
  3310        <td rowspan=5><a
  3311         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
  3312         properties</a>
  3314        <td>padding-top
  3316       <tr>
  3317        <td>padding-right
  3319       <tr>
  3320        <td>padding-bottom
  3322       <tr>
  3323        <td>padding-left
  3325       <tr>
  3326        <td>padding
  3328      <tbody>
  3329       <tr>
  3330        <td colspan=2><a
  3331         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
  3333      <tbody>
  3334       <tr>
  3335        <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
  3336         properties</a>
  3338        <td>letter-spacing
  3340       <tr>
  3341        <td>text-align
  3343       <tr>
  3344        <td>text-decoration
  3346       <tr>
  3347        <td>text-indent
  3349       <tr>
  3350        <td>text-transform
  3352       <tr>
  3353        <td>white-space
  3355       <tr>
  3356        <td>word-spacing
  3358      <tbody>
  3359       <tr>
  3360        <td colspan=2><a
  3361         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
  3363      <tbody>
  3364       <tr>
  3365        <td colspan=2><a
  3366         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
  3368      <tbody>
  3369       <tr>
  3370        <td rowspan=3><a
  3371         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
  3372         <a
  3373         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
  3375        <td>width
  3377       <tr>
  3378        <td>min-width
  3380       <tr>
  3381        <td>max-width
  3383      <tbody>
  3384       <tr>
  3385        <td colspan=2><a
  3386         href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
  3387     </table>
  3389     <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer
  3390      Possibilities</h2>
  3392     <p>Often, but not always, the page box has a one-to-one correspondence to
  3393      the physical surface onto which the document is ultimately rendered. The
  3394      CSS3 page model specifies formatting within the page box, but it is the
  3395      user agent's responsibility to transfer the page box to the sheet. Some
  3396      user agent transfer possibilities that are not addressed by CSS3
  3397      include:
  3399     <ul id=complex-usecases>
  3400      <li>Transferring one page box to one sheet (e.g. single-sided printing);
  3402      <li>Transferring two page boxes to the front and back surfaces of the
  3403       same sheet (e.g. double-sided printing);
  3405      <li>Transferring N (small) page boxes to one sheet (called "N-up");
  3407      <li>Transferring one (large) page box to N x M sheets (called "tiling");
  3409      <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group
  3410       of pages printed on a sheet, which, when folded and trimmed like a
  3411       book, appear in their proper sequence;
  3413      <li>Printing one document to multiple output trays;
  3415      <li>Generating files containing print instructions.
  3416     </ul>
  3418     <h2 class=no-num id=changes>Changes</h2>
  3420     <p> Changes since the <a
  3421      href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006
  3422      Working Draft</a> are:
  3424     <ul>
  3425      <li>The first printed page can be <a
  3426       href="#using-named-pages">named</a>.
  3428      <li>The ‘<code class=css>:blank</code>’ <a
  3429       href="#pseudo-classes">pseudo-class</a> was imported from the <a
  3430       href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged
  3431       Media</a> module.
  3433      <li>‘<code class=css>@page</code>’ rules can now take multiple comma
  3434       separated selectors, each selector can have multiple pseudo-classes.
  3435       <div class=example>
  3436        <pre>@page :first, :blank { @bottom-center { content: none } }</pre>
  3438        <pre>@page :first:left { @bottom-left { content: none } }</pre>
  3439       </div>
  3441      <li>Margin boxes are renamed <a href="#margin-boxes">page-margin
  3442       boxes</a>, to avoid confusion with the margin area of each box.
  3444      <li>The <a href="#variable-sizing">Variable Dimension</a> layout rules
  3445       for page-margin boxes have been much simplified to not require
  3446       quadratic optimization.
  3448      <li>The relative <a href="#painting">painting order</a> of page-margin
  3449       boxes and page content has changed.
  3451      <li>The description of page breaks and definition of related properties
  3452       (except for the ‘<a href="#page"><code
  3453       class=property>page</code></a>’ property) have been moved to the CSS
  3454       Fragmentation Module. <a href="#CSS3-BREAK"
  3455       rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>
  3457      <li>The ‘<code class=property>fit</code>’ and ‘<code
  3458       class=property>fit-position</code>’ properties are renamed to
  3459       ‘<code class=property>object-fit</code>’ and ‘<code
  3460       class=property>object-position</code>’, redefined to enable
  3461       additional use cases, and moved to the CSS3 Image Values and Replaced
  3462       Content module. <a href="#CSS3-IMAGES"
  3463       rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>
  3465      <li>Many miscellaneous clarifications and editorial improvements have
  3466       been incorporated.
  3467     </ul>
  3469     <h2 class=no-num id=references>References</h2>
  3471     <h3 class=no-num id=normative-references>Normative References</h3>
  3472     <!--begin-normative--> <!-- Sorted by label -->
  3473     <dl class=bibliography>
  3474      <dt
  3475       style="display: none"><!-- keeps the doc valid if the DL is empty -->
  3476       <!---->
  3478      <dt id=CSS21>[CSS21]
  3480      <dd>Bert Bos; et al. <a
  3481       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading
  3482       Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7
  3483       June 2011. W3C Recommendation. URL: <a
  3484       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
  3485      </dd>
  3486      <!---->
  3488      <dt id=CSS3-BREAK>[CSS3-BREAK]
  3490      <dd>Rossen Atanassov; Elika J. Etemad. <a
  3491       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
  3492       Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
  3493       Draft. (Work in progress.) URL: <a
  3494       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
  3495      </dd>
  3496      <!---->
  3498      <dt id=CSS3-SIZING>[CSS3-SIZING]
  3500      <dd>Tab Atkins Jr.; Elika J. Etemad. <a
  3501       href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS
  3502       Intrinsic &amp; Extrinsic Sizing Module Level 3.</cite></a> 27
  3503       September 2012. W3C Working Draft. (Work in progress.) URL: <a
  3504       href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>
  3505      </dd>
  3506      <!---->
  3508      <dt id=CSS3BG>[CSS3BG]
  3510      <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
  3511       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
  3512       Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
  3513       Candidate Recommendation. (Work in progress.) URL: <a
  3514       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
  3515      </dd>
  3516      <!---->
  3518      <dt id=MEDIAQ>[MEDIAQ]
  3520      <dd>Florian Rivoal. <a
  3521       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
  3522       Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
  3523       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
  3524      </dd>
  3525      <!---->
  3527      <dt id=PWGMSN>[PWGMSN]
  3529      <dd>Ron Bergman; Tom Hastings. <a
  3530       href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media
  3531       Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer
  3532       Working Group 5101.1-2002. URL: <a
  3533       href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf">ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf</a>
  3534      </dd>
  3535      <!---->
  3537      <dt id=RFC2119>[RFC2119]
  3539      <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
  3540       words for use in RFCs to Indicate Requirement Levels.</cite></a>
  3541       Internet RFC 2119. URL: <a
  3542       href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  3543      </dd>
  3544      <!---->
  3545     </dl>
  3546     <!--end-normative-->
  3547     <h3 class=no-num id=informative-references>Informative References</h3>
  3548     <!--begin-informative--> <!-- Sorted by label -->
  3549     <dl class=bibliography>
  3550      <dt
  3551       style="display: none"><!-- keeps the doc valid if the DL is empty -->
  3552       <!---->
  3554      <dt id=CSS3-IMAGES>[CSS3-IMAGES]
  3556      <dd>Elika J. Etemad; Tab Atkins Jr. <a
  3557       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS
  3558       Image Values and Replaced Content Module Level 3.</cite></a> 17 April
  3559       2012. W3C Candidate Recommendation. (Work in progress.) URL: <a
  3560       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
  3561      </dd>
  3562      <!---->
  3564      <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
  3566      <dd>Elika J. Etemad; Koji Ishii. <a
  3567       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
  3568       Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
  3569       Draft. (Work in progress.) URL: <a
  3570       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
  3571      </dd>
  3572      <!---->
  3574      <dt id=JLREQ>[JLREQ]
  3576      <dd>Yasuhiro Anan; et al. <a
  3577       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements
  3578       for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group
  3579       Note. URL: <a
  3580       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>
  3581      </dd>
  3582      <!---->
  3583     </dl>
  3584     <!--end-informative--></div>
  3585   </div>

mercurial