drafts: css3-page/Overview.html@33f961bea4f4

     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-02-24 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=20130224>24 February

   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-20130224</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 24 February 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

   361        href="#properties-that-apply-within-the-page-co">Properties that apply

   362        within the page context</a>

   364       <li class=no-num><a

   365        href="#properties-that-apply-within-the-margin-">Properties that apply

   366        within the margin contexts</a>

   367      </ul>

   369     <li class=no-num><a href="#transfer-possibilities">Appendix B: Transfer

   370      Possibilities</a>

   372     <li class=no-num><a href="#changes">Changes</a>

   374     <li class=no-num><a href="#references">References</a>

   375      <ul class=toc>

   376       <li class=no-num><a href="#normative-references">Normative

   377        References</a>

   379       <li class=no-num><a href="#informative-references">Informative

   380        References</a>

   381      </ul>

   382    </ul>

   383    <!--end-toc--> <!-- "Introduction" -->

   384    <h2 id=intro><span class=secno>1. </span>Introduction</h2>

   386    <p>Paged media (e.g., paper, transparencies, photo album pages, pages

   387     displayed on computer screens as printed output simulations) differ from

   388     <a

   389     href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous

   390     media</a> in that the content of the document is split into one or more

   391     discrete static display surfaces. To handle pages, CSS3 Paged Media

   392     describes how:

   394    <ul>

   395     <li><a href="#page-breaks">page breaks</a> are created and avoided;

   397     <li>the page properties such as size, orientation, margins, border, and

   398      padding are specified;

   400     <li>headers and footers are established within the page margins;

   402     <li>content such as page counters are placed in the headers and footers;

   403      and

   405     <li>orphans and widows can be controlled.

   406    </ul>

   408    <p>This module defines a <a href="#page-model">page model</a> that

   409     specifies how a document is formatted within a rectangular area, called

   410     the <a href="#page-box-page-rule">page box</a>, that has finite width and

   411     height.

   413    <p>Although CSS3 does not specify how user agents transfer page boxes to

   414     sheets, it does include certain mechanisms for telling user agents about

   415     the intended page sheet <a href="#page-size">size and orientation</a>. In

   416     the general case, CSS3 assumes that one page box will be transferred to

   417     one surface of similar size.

   419    <p>All properties defined in this specification also accept the <a

   420     href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>

   421     keyword as their value, but for readability it has not been listed

   422     explicitly.

   424    <h2 id=conformance><span class=secno>2. </span>Conformance</h2>

   426    <p>All of the text in this specification is normative except sections

   427     explicitly marked as non-normative, examples, and notes. The keywords

   428     "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em

   429     class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em

   430     class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em

   431     class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>",

   432     "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when

   433     used in this document are to be interpreted as described in <cite>RFC

   434     2119</cite> <a href="#RFC2119"

   435     rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>. However, for

   436     readability, these words do not appear in all uppercase letters in this

   437     specification.

   439    <p>Examples in this specification are introduced with the words "for

   440     example" or are set apart from the normative text with

   441     <code>class="example"</code>, like this:

   443    <div class=example>

   444     <p>This is an example of an informative example.

   445    </div>

   447    <p>Informative notes begin with the word "Note" and are set apart from the

   448     normative text with <code>class="note"</code>, like this:

   450    <p class=note>Note, this is an informative note.

   452    <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>

   454    <p>The following terminology and accompanying diagrams help to describe

   455     the page model:

   457    <dl>

   458     <dt id=page-sheet>Page sheet

   460     <dd><img

   461      alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"

   462      height=148 src=PageSheet.png style="float: right;" width=194>The page

   463      sheet is one surface of the physical medium. The illustration to the

   464      right shows a representation of the upper-left corner of a page sheet.

   466     <dt id=printable-area>Printable and non-printable areas

   468     <dd>The non-printable area is the area of a page sheet that a physical

   469      device such as a printer is not capable of marking reliably, usually due

   470      to the printer's paper handling mechanism. This value is printer

   471      dependent and is usually a small region along each edge of the page

   472      sheet. The printable area is the area of page sheet that a printer

   473      <em>is</em> capable of marking reliably. The size of the printable area

   474      is the size of the page sheet reduced by the size of the non-printable

   475      area. A user agent may not know the dimensions of this area for a

   476      particular printing device; but when its dimensions are known, user

   477      agents <em class=RFC2119>MAY</em> adjust the formatting of the document

   478      so that content falls within the printable area. How this adjustment is

   479      accomplished is device dependent within the constraints expressed in the

   480      sections <a href="#renderingpages">Rendering page boxes that do not fit

   481      a page sheet</a> and <a href="#content-outside-box">Content outside the

   482      page box</a>.

   484     <dt id=page-orientation>Page Orientation

   486     <dd>The page orientation is defined by comparing the length of the edges

   487      of a <a href="#page-box">page box</a>. The page box is a rectangle with

   488      two perpendicular edges called the long edge and the short edge. The

   489      length of the long edge is always greater than or equal to the length of

   490      the short edge. When the page box is square, the two edges are of the

   491      same length and either can be used as the long edge with the other being

   492      the short edge. This specification defines page orientations of ‘<code

   493      class=property>portrait</code>’ and ‘<code

   494      class=property>landscape</code>’.

   496     <dt id=portrait>Portrait Orientation

   498     <dd>A portrait page's height is greater than or equal to its width.

   499      Horizontal elements are parallel to the short edge and vertical elements

   500      to the long edge.

   502     <dt id=landscape>Landscape Orientation

   504     <dd>A landscape page's width is greater than or equal to its height.

   505      Horizontal elements are parallel to the long edge and vertical elements

   506      to the short edge. <span class=note>Note that CSS3 makes no distinction

   507      between landscape and reverse-landscape orientations. However, future

   508      versions of CSS may do so. UAs should consider, when formatting for

   509      duplexed printing, the binding edge, page progression, and ease of

   510      reading when choosing between landscape and reverse-landscape

   511      renderings.</span>

   513     <dt id=duplex-printing>Duplex Printing

   515     <dd>Duplex printing prints one page box per side of a page sheet and uses

   516      both sides of the page sheet. This module provides no ability to specify

   517      whether a document is duplex printed, but the concept of left and right

   518      pages is based on the assumption that the document is duplex printed,

   519      regardless of whether or not it actually is.

   521     <dt id=binding-edge>Binding Edge

   523     <dd>The binding edge is the edge of the page box that is toward the

   524      binding if the material is bound. The binding edge often has a larger

   525      margin than the opposite edge to provide for the space used by the

   526      binding. The binding edge can be any of the four edges. However, page

   527      sheets are customarily bound so that the binding edge of page boxes with

   528      portrait orientation is vertical. This module provides no method to

   529      specify the binding edge. In duplex printing, the binding edge is on

   530      opposite sides of the page box for the left and right pages.

   532     <dt id=facing-pages>Facing Pages

   534     <dd>Facing pages are two sequential pages such that when the document is

   535      duplex printed they are on separate sheets of paper. Typically, the

   536      earlier page will be the back side of one sheet and the later page will

   537      be the front side of another. They are usually laid out so that the

   538      binding edges of facing pages are vertical and adjacent when the pages

   539      are placed in their normal reading orientation.

   541     <dt id=left-page>Left Page

   543     <dd>A page that would be on the left if it is part of a pair of facing

   544      pages as typically laid out. Page layouts for documents using a

   545      left-to-right page progression have the earlier of the facing pages on

   546      the left. Rules specific to the left page can be specified using the

   547      <span class=css>‘<code class=css>:left</code>’</span> <a

   548      href="#page-selector"><i>page selector</i></a>.

   550     <dt id=right-page>Right Page

   552     <dd>A page that would be on the right if it is part of a pair of facing

   553      pages as typically laid out. Page layouts for documents using a

   554      right-to-left page progression have the earlier of the facing pages on

   555      the right. Rules specific to the right page can be specified using the

   556      <span class=css>‘<code class=css>:right</code>’</span> <a

   557      href="#page-selector"><i>page selector</i></a>.

   558    </dl>

   560    <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>

   562    <p>In the paged media formatting model, the document is transferred into

   563     one or more page boxes. The <dfn id=page-box>page box</dfn> is a

   564     specialized CSS box that maps to a rectangular print media surface, such

   565     as a page of paper. It is roughly analogous to the <a

   566     href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.

   567     <img alt="" height=266 src=PageBox.png style="float: right;" width=267>

   569    <p>As with other CSS <a

   570     href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box consists

   571     of margin, border, padding, and content areas. The content and margin

   572     areas of a page box have special functions:

   574    <ul>

   575     <li>The content area of a page box is called the <dfn id=page-area>page

   576      area</dfn>. The content of the document is flowed into one or more page

   577      boxes. The page area acts as a container for all the boxes generated by

   578      the root element and its descendants that are laid out within a given

   579      page box. The edges of the page area on the first page establish the

   580      rectangle that is the initial <a

   581      href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing

   582      block</a> of the document.

   584     <li>The margin area of a page box is divided into 16 <dfn

   585      id=page-margin-boxes>page-margin boxes</dfn>. Each page-margin box has

   586      its own margin, border, padding and content areas. Page-margin boxes are

   587      typically used to display running headers and footers.

   588    </ul>

   590    <p>The properties of a <a href="#page-box"><i>page box</i></a> are

   591     determined by properties <a

   592     href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a>

   593     within the <a href="#page-context"><i>page context</i></a>, which is the

   594     <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration

   595     block</a> of the <code>@page</code> rule. Similarly the properties of a

   596     <i>page-margin box</i> are determined by properties declared within its

   597     <a href="#margin-context"><i>margin context</i></a>. Declarations in the

   598     page context can affect the page box and/or inherit to the page-margin

   599     boxes, but they do not apply to or inherit into the document's root

   600     element or other content.

   602    <p>The <a href="#containing-block0"><i>containing block</i></a> of the

   603     page box is specified using the ‘<a href="#size"><code

   604     class=property>size</code></a>’ property in the <a

   605     href="#page-context"><i>page context</i></a>. The width and horizontal

   606     margins of the page box are then calculated exactly as for a <a

   607     href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced

   608     block element in normal flow</a>. <a href="#CSS21"

   609     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The height and vertical

   610     margins of the page box are calculated analogously (instead of using the

   611     block height formulas). In both cases if the values are over-constrained,

   612     instead of ignoring any margins, the containing block is resized to

   613     coincide with the margin edges of the page box.

   615    <h3 id=painting><span class=secno>4.1. </span> Page Backgrounds and

   616     Painting Order</h3>

   618    <p>When drawing a page of content, the page layers are painted in the

   619     following painting order (bottommost first):

   621    <ol>

   622     <li>page background

   624     <li>document canvas

   626     <li>page borders

   628     <li>document contents

   630     <li>page-margin boxes

   631    </ol>

   633    <p>In the page model, the page background behaves similar to the root

   634     background: its <a

   635     href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background

   636     painting area</i></a> is the entire page box, including its margins

   637     (regardless of ‘<code class=property>background-clip</code>’). Page

   638     backgrounds are anchored within the page box's padding area by default

   639     (and honor ‘<code class=property>background-origin</code>’ if the UA

   640     supports <a href="#CSS3BG"

   641     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code

   642     class=property>background-attachment</code>’ is ‘<code

   643     class=css>fixed</code>’ then the image is positioned relative to the

   644     page box including its margins (i.e. the <a

   645     href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background

   646     positioning area</i></a>, like the <i>background painting area</i>, is

   647     the page's margin box).

   649    <p>The document canvas background is drawn as the page box's background:

   650     by default its <i>background painting area</i> covers the page box's

   651     border box, and for UAs that support <a href="#CSS3BG"

   652     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, follows the ‘<code

   653     class=property>background-clip</code>’ value specified on the root

   654     element. It remains, however, positioned with respect to the root element

   655     or page area as usual.

   657    <p>The UA may support the <code>z-index</code> property for page-margin

   658     boxes. With respect to the page-margin boxes, the document canvas, page

   659     borders, and all of the document contents are treated as a single element

   660     with a <code>z-index</code> value of ‘<code class=css>0</code>’: the

   661     page-margin boxes never interleave with parts of the document content or

   662     between the content and the canvas. They may only paint in front of the

   663     document content or behind the document canvas. The page background is

   664     always painted underneath everything else. Since the

   665     <code>position</code> property does not apply to page-margin boxes,

   666     <code>z-index</code> always affects page-margin boxes as if they were

   667     positioned elements regardless of the <code>position</code> property's

   668     value.

   670    <p>The default painting order, or <a

   671     href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree

   672     order", of page-margin boxes with respect to each other is not specified.

   673     However, the page-margin boxes are defined to come after the page box and

   674     its contents. <span class=issue>Suggestions here are welcome.</span>

   676    <h3 id=content-outside-box><span class=secno>4.2. </span>Content outside

   677     the page box</h3>

   679    <p>When formatting content in the page model, some content may end up

   680     outside the page box. For example, an element whose ‘<code

   681     class=property>white-space</code>’ property has the value ‘<code

   682     class=property>pre</code>’ can generate a box that is wider than the

   683     page box. As another example, when boxes are positioned absolutely or

   684     relatively, they may end up in "inconvenient" locations. For example,

   685     images may be placed on the edge of the page box or 100,000 meters below

   686     the page box.

   688    <p>A specification for the exact formatting of such elements lies outside

   689     the scope of this document. However, it is recommended that authors and

   690     user agents observe the following general principles concerning content

   691     outside the page box:

   693    <ul>

   694     <li>

   695      <p>Content should be allowed slightly beyond the page box to allow pages

   696       to "bleed".

   698     <li>

   699      <p>User agents <em class=RFC2119>SHOULD</em> avoid generating a large

   700       number of content-empty pages to honor the positioning of elements

   701       (e.g., printing 100 blank pages is probably neither the author's nor

   702       the user's intent). A <dfn id=content-empty>Content-empty page</dfn> is

   703       a page box whose page area contains no printable content other than

   704       backgrounds and/or borders. A page box whose page area contains

   705       generated content, or content whose visibility is ‘<code

   706       class=property>hidden</code>’, or invisible content such as a

   707       zero-width space is not a content-empty page. On the other hand, a page

   708       containing only a background and/or borders and/or page-margin box

   709       content <em>is</em> a content-empty page.

   711      <p class=note>Note, however, that generating a small number of empty

   712       page boxes is sometimes necessary to honor the <span class=css>‘<code

   713       class=property>left</code>’</span> and <span class=css>‘<code

   714       class=property>right</code>’</span> values for <span

   715       class=property>‘<code class=property>break-before</code>’</span>

   716       and <span class=property>‘<code

   717       class=property>break-after</code>’</span>.

   719     <li>

   720      <p>Authors <em class=RFC2119>SHOULD NOT</em> position elements in

   721       inconvenient locations just to avoid rendering them. Instead:

   723      <ul>

   724       <li>To suppress box generation entirely, set the <span

   725        class=property>‘<code class=property>display</code>’</span>

   726        property to <span class=css>‘<code

   727        class=property>none</code>’</span>.

   729       <li>To make a box invisible, set the <span class=property>‘<code

   730        class=property>visibility</code>’</span> property.

   731      </ul>

   733     <li>

   734      <p>This specification does not define how boxes positioned outside the

   735       page box are handled. Possibilities include discarding them or creating

   736       page boxes for them at the end of the document.

   737    </ul>

   739    <h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>

   741    <p>CSS distinguishes between left pages and right pages on all documents,

   742     whether they are printed duplex or not. Each left page is followed by a

   743     right page and vice versa. Left and right pages can be styled differently

   744     with the <a href="#left-right-first"><code>:left</code> and

   745     <code>:right</code> pseudo-classes</a>.

   747    <p>Whether the first page of a document is a left page or a right page

   748     depends on the page progression of the document. The <dfn

   749     id=page-progression>page progression</dfn> is the direction in which the

   750     printed pages of a document would be sequenced when laid out

   751     side-to-side. For example, English and horizontally-set Japanese

   752     typically progress from left to right, whereas Arabic and vertically-set

   753     Japanese pages typically progress from right to left. In documents with a

   754     left-to-right page progression the first page of the document is a right

   755     page, and vice versa.

   757    <p>The page progression direction is determined as follows:

   759    <ul>

   760     <li>If text is laid out in horizontal lines, the page progression is the

   761      same as the inline progression.

   763     <li>If text is laid out in vertical lines, the page progression is the

   764      same as the block progression.

   765    </ul>

   767    <p>If the UA supports the ‘<code class=property>direction</code>’ and

   768     ‘<code class=property>writing-mode</code>’ properties from the CSS 3

   769     Writing Modes Module <a href="#CSS3-WRITING-MODES"

   770     rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>, it

   771     must <a

   772     href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>

   773     whether the first page is a left or right page from the values of those

   774     properties on the root element.

   776    <p> To explicitly force a document to begin printing on a left or right

   777     page, authors can specify a <a

   778     href="http://www.w3.org/TR/css3-break/#break-before">‘<code

   779     class=property>break-before</code>’</a> value that that propagates a

   780     page break to the root. <a href="#CSS3-BREAK"

   781     rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> The UA must

   782     suppress the first (empty) page(s) in this case (and the

   783     <code>:first</code> pseudo-class matches the first printed page).

   785    <div class=example>

   786     <pre>

   787 html { break-before: always }

   788 </pre>

   790     <p> For an HTML document with a left-to-right page progression, the above

   791      style rule will cause the first page of the document to print on a

   792      ‘<code class=css>:left</code>’ page

   794     <pre>

   795 html { break-before: left }

   796 </pre>

   798     <p> For an HTML document, the above style rule will cause the first page

   799      of the document to print on a ‘<code class=css>:left</code>’ page,

   800      regardless of the page progression.

   801    </div>

   803    <h2 id=page-selector-and-context><span class=secno>5. </span>Page

   804     Selectors and the Page Context</h2>

   806    <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>

   808    <p>Authors can specify various aspects of a page box, such as its

   809     dimensions, orientation, and margins, within an <span

   810     class=css>@page</span> rule. ‘<code class=css>@page</code>’ rules are

   811     allowed at the top-level of a stylesheet, as well as wherever <a

   812     href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a>

   813     are allowed. An <span class=css>@page</span> rule consists of the keyword

   814     <span class=css>‘<code class=css>@page</code>’</span>, an <em

   815     class=RFC2119>OPTIONAL</em> comma-separated list of <a

   816     href="#page-selectors">page selectors</a> and a block of declarations

   817     (said to be in the <dfn id=page-context>page context</dfn>). An ‘<code

   818     class=css>@page</code>’ rule can also contain other at-rules,

   819     interleaved between declarations. The current level of this specification

   820     only allows <a href="#margin-at-rules">margin at-rules</a> inside

   821     ‘<code class=css>@page</code>’.

   823    <p>‘<code class=css>@page</code>’ rules without a selector list are

   824     considered to have a single, empty selector. ‘<code

   825     class=css>@page</code>’ rules apply to pages that <a

   826     href="#match"><i>match</i></a> at least one of their selectors.

   828    <p>Properties declared within the page context apply to the page box.

   830    <p>If an error is encountered during the processing of a declaration block

   831     within a page or a margin context, the <a

   832     href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for

   833     handling parsing errors</a> apply; that is, valid declarations within the

   834     block are applied.

   836    <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>

   838    <p>A <dfn id=page-selector>page selector</dfn> is either:

   840    <ul>

   841     <li>one or more <a

   842      href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII

   843      case-insensitive</a> <a href="#pseudo-classes">pseudo-classes</a>,

   845     <li>a <a href="#using-named-pages">page type</a> (a case-sensitive

   846      identifier) followed by zero or more pseudo-classes.

   847    </ul>

   849    <p> No whitespace is allowed between components of a selector. The <a

   850     href="#page_selector"><i title="page_selector">page selector

   851     grammar</i></a> and examples can be found below.

   853    <p>A selector is said to <dfn id=match>match</dfn> a given page if and

   854     only if all of its components match the page. Empty selectors (ie.

   855     ‘<code class=css>@page</code>’ rules without a selector) match every

   856     page. <span class=note>Empty selectors have the weakest <a

   857     href="#specificity"><i>specificity</i></a>.</span>

   859    <p><a href="#using-named-pages">Page type</a> selectors <a

   860     href="#match"><i>match</i></a> pages of the named type generated by the

   861     ‘<a href="#page"><code class=property>page</code></a>’ property.

   862     <span id=page-selector-syntax-restrict> A page type name of ‘<code

   863     class=css>auto</code>’ (<a

   864     href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII

   865     case-insensitive</a>) does not make the rule invalid, but <em

   866     class=RFC2119>MUST</em> never match. </span> Individual <a

   867     href="#pseudo-classes">pseudo-classes</a> are defined below.

   869    <h4 id=pseudo-classes><span class=secno>5.2.1. </span> <a

   870     id=left-right-first></a> Page pseudo-classes: :left, :right, :first, and

   871     :blank</h4>

   873    <p> When printing double-sided documents, left and right pages are often

   874     formatted differently. This can be expressed through CSS pseudo-classes

   875     defined in the <a href="#page-context">page context</a>.

   877    <p> All pages are automatically classified by user agents as either left

   878     pages or right pages, based on <a href="#progression">page

   879     progression</a>. The ‘<code class=css>:left</code>’ and ‘<code

   880     class=css>:right</code>’ pseudo-classes only <a

   881     href="#match"><i>match</i></a> left or right pages, respectively.

   883    <div class=example> The following example creates left and right binding

   884     edges using these pseudo-classes:

   885     <pre>

   886 @page :left {

   887 margin-left: 3cm;

   888 margin-right: 4cm;

   889 }

   891 @page :right {

   892 margin-left: 4cm;

   893 margin-right: 3cm;

   894 }

   895 </pre>

   896    </div>

   898    <p>If different declarations have been given for left and right pages, the

   899     user agent <em class=RFC2119>MUST</em> honor these declarations even if

   900     the user agent does not transfer the page boxes to left and right sheets

   901     (i.e., a printer that only prints on one side of the medium must

   902     nevertheless produce correctly formatted output).

   904    <div class=note>

   905     <p> <em><strong>Note.</strong> Adding declarations to the <span

   906      class=css>‘<code class=css>:left</code>’</span> or <span

   907      class=css>‘<code class=css>:right</code>’</span> pseudo-class does

   908      not necessarily influence whether the document comes out of the printer

   909      double- or single-sided (which is outside the scope of this

   910      specification).</em>

   911    </div>

   913    <p> The ‘<code class=css>:first</code>’ pseudo-class only <a

   914     href="#match"><i title=match>matches</i></a> the first printed page of a

   915     document.

   917    <div class=example>

   918     <pre>

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

   921 @page :first {

   922 margin-top: 10cm /* Top margin on first page 10cm */

   923 }

   924 </pre>

   925    </div>

   927    <p> The ‘<code class=css>:blank</code>’ pseudo-class only <a

   928     href="#match"><i title=match>matches</i></a> <a href="#content-empty"><i

   929     title="content-empty page">content-empty pages</i></a> that appear as a

   930     result of <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced

   931     page breaks</a>.

   933    <div class=note>

   934     <p>Only the ‘<code class=css>left</code>’, ‘<code

   935      class=css>right</code>’, ‘<code class=css>recto</code>’ and

   936      ‘<code class=css>verso</code>’ values of the ‘<code

   937      class=property>break-before</code>’ and ‘<code

   938      class=property>break-after</code>’ properties can generate pages that

   939      match ‘<code class=css>:blank</code>’.

   940    </div>

   942    <div class=example>

   943     <p>In this example, forced page break may occur before <code>h1</code>

   944      elements.

   946     <pre>

   947 h1 { break-before: left }

   949 @page :blank {

   950   @top-center { content: "This page is intentionally left blank" }

   951 }

   952 </pre>

   953    </div>

   955    <p> A page matched by ‘<code class=css>:blank</code>’ can also be

   956     matched by other page pseudo-classes.

   958    <div class=example>

   959     <p>If headers have been specified on all right pages, a blank right page

   960      will be matched by both <code>:blank</code> and <code>:right</code>.

   961      Therefore, margin boxes set on right pages will have to be removed

   962      unless they are wanted on blank pages. Here is an example where the top

   963      center header is removed from blank pages, while the page number

   964      remains:

   966     <pre>

   967 h1 { break-before: left }

   969 @page :blank {

   970   @top-center { content: none }

   971 }

   973 @page :right {

   974   @top-center { content: "Preliminary edition" }

   975   @bottom-center { content: counter(page) }

   976 }

   977 </pre>

   979     <p>Due to the higher <a href="#specificity"><i>specificity</i></a> of

   980      <code>:blank</code> over <code>:right</code>, the top center header is

   981      removed even if <code>content: none</code> comes before <code>content:

   982      "Preliminary edition"</code>.

   983    </div>

   985    <div class=note>

   986     <p><em><strong>Note.</strong> Future versions of CSS may include other

   987      page pseudo-classes.</em>

   988    </div>

   990    <h3 id=syntax-page-selector><span class=secno>5.3. </span>@page rule

   991     grammar</h3>

   993    <p>The syntax for the @page rule is a specialization of the generic

   994     at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to

   995     allow @page rules nested inside @media rules. User agents <em

   996     class=RFC2119>MUST</em> adhere to the following grammar:

   998    <p>See <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,

   999     Section 4.1.1 and Appendix G for the expansion of missing productions:

  1001    <p id=specializatons-of-ATKEYWORD> All new lexical tokens are

  1002     specializations of the ATKEYWORD lexical token:

  1004    <pre class=lexical>

  1005 PAGE_SYM              ::= "@page"

  1006 TOPLEFTCORNER_SYM     ::= "@top-left-corner"

  1007 TOPLEFT_SYM           ::= "@top-left"

  1008 TOPCENTER_SYM         ::= "@top-center"

  1009 TOPRIGHT_SYM          ::= "@top-right"

  1010 TOPRIGHTCORNER_SYM    ::= "@top-right-corner"

  1011 BOTTOMLEFTCORNER_SYM  ::= "@bottom-left-corner"

  1012 BOTTOMLEFT_SYM        ::= "@bottom-left"

  1013 BOTTOMCENTER_SYM      ::= "@bottom-center"

  1014 BOTTOMRIGHT_SYM       ::= "@bottom-right"

  1015 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"

  1016 LEFTTOP_SYM           ::= "@left-top"

  1017 LEFTMIDDLE_SYM        ::= "@left-middle"

  1018 LEFTBOTTOM_SYM        ::= "@left-bottom"

  1019 RIGHTTOP_SYM          ::= "@right-top"

  1020 RIGHTMIDDLE_SYM       ::= "@right-middle"

  1021 RIGHTBOTTOM_SYM       ::= "@right-bottom"

  1023 <dfn

  1024     id=media>media</dfn> :

  1025      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <a

  1026     href="#syntax-prod-page"><i>page_rule</i></a> | ruleset ]* '}' S*

  1027      ;

  1029 <dfn

  1030     id=syntax-prod-page>page_rule</dfn> :

  1031      PAGE_SYM S* <a

  1032     href="#page_selector_list"><i>page_selector_list</i></a> '{' S* <a

  1033     href="#page_body"><i>page_body</i></a> '}' S*

  1034      ;

  1036 <dfn

  1037     id="page_selector_list">page_selector_list</dfn> :

  1038      [ <a

  1039     href="#page_selector"><i>page_selector</i></a> S* [ ',' <a

  1040     href="#page_selector"><i>page_selector</i></a> S* ]* ]?

  1041      ;

  1043 <dfn

  1044     id="page_selector">page_selector</dfn> :

  1045      <a

  1046     href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>+ | IDENT <a

  1047     href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>*

  1048      ;

  1050 <dfn

  1051     id=syntax-prod-pseudo-page>pseudo_page</dfn> :

  1052      ':' [ "left" | "right" | "first" | "blank" ]

  1053      ;

  1055 <dfn

  1056     id="page_body">page_body</dfn> :  /* Can be empty */

  1057      declaration? [ ';' S* <a

  1058     href="#page_body"><i>page_body</i></a> ]? |

  1059      <a

  1060     href="#syntax-prod-margin"><i>page_margin_box</i></a> <a

  1061     href="#page_body"><i>page_body</i></a>

  1062      ;

  1064 <dfn

  1065     id=syntax-prod-margin>page_margin_box</dfn> :

  1066      <a

  1067     href="#syntax-prod-margin-sym"><i>margin_sym</i></a> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*

  1068      ;

  1070 <dfn

  1071     id=syntax-prod-margin-sym>margin_sym</dfn> :

  1072      TOPLEFTCORNER_SYM |

  1073      TOPLEFT_SYM |

  1074      TOPCENTER_SYM |

  1075      TOPRIGHT_SYM |

  1076      TOPRIGHTCORNER_SYM |

  1077      BOTTOMLEFTCORNER_SYM |

  1078      BOTTOMLEFT_SYM |

  1079      BOTTOMCENTER_SYM |

  1080      BOTTOMRIGHT_SYM |

  1081      BOTTOMRIGHTCORNER_SYM |

  1082      LEFTTOP_SYM |

  1083      LEFTMIDDLE_SYM |

  1084      LEFTBOTTOM_SYM |

  1085      RIGHTTOP_SYM |

  1086      RIGHTMIDDLE_SYM |

  1087      RIGHTBOTTOM_SYM

  1088      ;

  1089 </pre>

  1091    <div class=example>

  1092     <p>The following are examples of page selectors (declaration block

  1093      intentionally left blank)

  1095     <pre>

  1096 @page { ... }

  1097 @page :left { ... }

  1098 @page :right { ... }

  1099 @page LandscapeTable { ... }

  1100 @page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */

  1101 @page:first { ... }

  1102 @page toc, index { ... }

  1103 @page :blank:first { ... }

  1104 </pre>

  1106     <p>The following are examples of page-margin boxes where the declaration

  1107      blocks are intentionally left blank.

  1109     <pre>

  1110 @page {

  1111  @top-left { ... /* document name */ }

  1112  @bottom-center { ... /* page number */}

  1113 }

  1114 @page :left { @left-middle { ... /* page number in left margin */ }}

  1115 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}

  1117 @page :left { @bottom-left-corner { ... /* left page numbers */ }}

  1118 @page :right { @bottom-right-corner { ... /* right page numbers */ }}

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

  1120              @bottom-right-corner { ... /* empty footer */ } }

  1121 </pre>

  1122    </div>

  1124    <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading

  1125     in the page context</h3>

  1127    <p>Declarations in page and margin contexts <a

  1128     href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like

  1129     declarations in <a

  1130     href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.

  1132    <p>The <dfn id=specificity>specificity</dfn> of page a selector is

  1133     computed in a manner analogous to the computations defined in the <a

  1134     href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:

  1136    <ul>

  1137     <li>Count the number of page type names (= <var>f</var>)

  1138      <p class=note>This is 0 or 1.

  1140     <li>Count the number of ‘<code class=css>:first</code>’ or ‘<code

  1141      class=css>:blank</code>’ pseudo-classes (= <var>g</var>)

  1143     <li>Count the number of ‘<code class=css>:left</code>’ or ‘<code

  1144      class=css>:right</code>’ pseudo-classes (= <var>h</var>)

  1145    </ul>

  1147    <p> Specificities are compared by comparing the three components in order:

  1148     the specificity with <var>f</var> larger a value is more specific; if the

  1149     two <var>f</var> values are tied, then the specificity with a larger

  1150     <var>g</var> value is more specific; if the two <var>g</var> values are

  1151     also tied, then the specificity with a larger <var>h</var> value is more

  1152     specific; if all the values are tied, the two specifities are equal.

  1154    <p> Due to storage limitations, implementations may have limitations on

  1155     the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values

  1156     higher than the limit must be clamped to that limit, and not overflow.

  1158    <p class=note> Note: Each comma-separated selectors in the same ‘<code

  1159     class=css>@page</code>’ rule has its own specificity.

  1161    <p class=note> Note: Repeated occurrances of the same pseudo-classes are

  1162     allowed and do increase specificity.

  1164    <div class=example>

  1165     <p>Some page specificity calculation examples follow:

  1167     <pre>

  1168 @page { } /* specificity = (0,0,0) */

  1169 @page :left { } /* specificity = (0,0,1) */

  1170 @page :first { } /* specificity = (0,1,0) */

  1171 @page artsy { } /* specificity = (1,0,0) */

  1172 @page artsy:left { } /* specificity = (1,0,1) */

  1173 @page artsy:first { } /* specificity = (1,1,0) */

  1174 </pre>

  1175    </div>

  1177    <div class=example>

  1178     <p>Consider the following usage example:

  1180     <pre>

  1181 @page {

  1182   margin-left: 3cm;

  1183 }

  1185 @page :left {

  1186   margin-left: 4cm;

  1187 }

  1188 </pre>

  1190     <p>Due to the higher specificity of the pseudo-class selector, the left

  1191      margin on left pages will be 4cm and all other pages (the right-facing

  1192      pages) will have a left margin of 3cm.

  1193    </div>

  1195    <div class=example>

  1196     <p>In this example, the higher specificity of the green rules wins over

  1197      the red rule. Therefore the first page will have blue text in the

  1198      top-left page-margin box and green text in the top-right page-margin

  1199      box, while subsequent pages will have red text in the page-margin boxes.

  1201     <pre>

  1202 @page :first {

  1203   color: green;

  1205   @top-left {

  1206     content: "foo";

  1207     color: blue;

  1208   }

  1209   @top-right {

  1210     content: "bar";

  1211   }

  1212 }

  1214 @page { color: red;

  1215   @top-center {

  1216     content: "Page " counter(page);

  1217   }

  1218 }

  1219 </pre>

  1220    </div>

  1222    <div class=example>

  1223     <p>Page contexts cascade, so the following stylesheet would style pages

  1224      with 25 millimeter margins and 14 point type in the page-margin boxes:

  1226     <pre>

  1227 @page { margin: 25mm;}

  1228 @page { font-size: 14pt;}

  1229 </pre>

  1230    </div>

  1232    <h2 id=margin-boxes><span class=secno>6. </span>Page-Margin Boxes</h2>

  1234    <p>Page-margin boxes are boxes within the page margin that, like

  1235     pseudo-elements, can contain generated content.

  1237    <p>Page-margin boxes can be used to create page headers and footers, which

  1238     are portions of the page set aside for supplementary information such as

  1239     the page number or document title.

  1241    <div class=example>

  1242     <p>Typically, a <dfn id=page-header>page header</dfn> is located at the

  1243      top of the page in documents with a predominately horizontal writing

  1244      direction and on the side opposite the <a href="#binding-edge">binding

  1245      edge</a> for documents with a predominately vertical writing direction.

  1246      One possible design of page headers for horizontally written documents

  1247      uses the ‘<code class=css>@top-left-corner</code>’, ‘<code

  1248      class=css>@top-left</code>’, ‘<code class=css>@top-center</code>’,

  1249      ‘<code class=css>@top-right</code>’ and ‘<code

  1250      class=css>@top-right-corner</code>’ page-margin boxes. Another design,

  1251      for vertically written documents, could use the ‘<code

  1252      class=css>@right-top</code>’, ‘<code

  1253      class=css>@right-middle</code>’, and ‘<code

  1254      class=css>@right-bottom</code>’ page-margin boxes for <a

  1255      href="#right-page">right facing pages</a> and ‘<code

  1256      class=css>@left-top</code>’, ‘<code

  1257      class=css>@left-middle</code>’, and ‘<code

  1258      class=css>@left-bottom</code>’ for <a href="#left-page">left facing

  1259      pages</a>.

  1261     <p>The <dfn id=page-footer>page footer</dfn> is typically at the opposite

  1262      end of the page from the page header. For example, the design of a

  1263      horizontally written document with a page header at the top of the page

  1264      could use the ‘<code class=css>@bottom-left-corner</code>’, ‘<code

  1265      class=css>@bottom-left</code>’, ‘<code

  1266      class=css>@bottom-center</code>’, ‘<code

  1267      class=css>@bottom-right</code>’ and ‘<code

  1268      class=css>@bottom-right-corner</code>’ page-margin boxes as the page

  1269      footer. The design of a vertically written document could use the

  1270      page-margin boxes of the binding edge of the page for the page footer.

  1271    </div>

  1273    <p>Page-margin boxes are positioned with respect to the page area and are

  1274     independent of page orientation, for example the top page-margin boxes

  1275     are above the page area in both portrait and landscape orientation. The

  1276     various page-margin boxes are defined and illustrated in the diagram

  1277     below:

  1279    <table class=data id=margin-box-def

  1280     summary="defintion of each of the page-margin boxes">

  1281     <caption>Table 1 Page-Margin Box Definitions</caption>

  1283     <thead>

  1284      <tr>

  1285       <th>Box

  1287       <th>Description

  1289       <th>Placement

  1291     <tbody>

  1292      <tr id=top-margin-boxes-def>

  1293       <th id=top-left-corner-box-def>top-left-corner

  1295       <td>a fixed-size box defined by the intersection of the top and left

  1296        margins of the page box

  1298       <td><img

  1299        alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"

  1300        height=47 src=TopLeftCornerBox.png width=181>

  1302      <tr id=top-left-box-def>

  1303       <th>top-left

  1305       <td>a variable-width box filling the top page margin between the

  1306        top-left-corner and top-center page-margin boxes

  1308       <td><img

  1309        alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"

  1310        height=47 src=TopLeftMarginBox.png width=181>

  1312      <tr id=top-center-box-def>

  1313       <th>top-center

  1315       <td>a variable-width box centered horizontally between the page's left

  1316        and right border edges and filling the page top margin between the

  1317        top-left and top-right page-margin boxes

  1319       <td><img

  1320        alt="the top center box with margin, border, and padding, centered within the page's top margin"

  1321        height=47 src=TopCenterMarginBox.png width=181>

  1323      <tr id=top-right-box-def>

  1324       <th>top-right

  1326       <td>a variable-width box filling the top page margin between the

  1327        top-center and top-right-corner page-margin boxes

  1329       <td><img

  1330        alt="the top right box with margin, border, and padding, nested within the page's top margin"

  1331        height=47 src=TopRightMarginBox.png width=181>

  1333      <tr>

  1334       <th id=top-right-corner-box-def>top-right-corner

  1336       <td>a fixed-size box defined by the intersection of the top and right

  1337        margins of the page box

  1339       <td><img

  1340        alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"

  1341        height=47 src=TopRightCornerMarginBox.png width=181>

  1343      <tr id=left-margin-boxes-def>

  1344       <th id=left-top-box-def>left-top

  1346       <td>a variable-height box filling the left page margin between the

  1347        top-left-corner and left-middle page-margin boxes

  1349       <td rowspan=3><img

  1350        alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"

  1351        height=226 src=LeftMarginBoxes.png width=181>

  1353      <tr id=left-middle-box-def>

  1354       <th>left-middle

  1356       <td>a variable-height box centered vertically between the page's top

  1357        and bottom border edges and filling the left page margin between the

  1358        left-top and left-bottom page-margin boxes

  1360      <tr id=left-bottom-box-def>

  1361       <th>left-bottom

  1363       <td>a variable-height box filling the left page margin between the

  1364        left-middle and bottom-left-corner page-margin boxes

  1366      <tr id=right-margin-boxes-def>

  1367       <th id=right-top-box-def>right-top

  1369       <td>a variable-height box filling the right page margin between the

  1370        top-right-corner and right-middle page-margin boxes

  1372       <td rowspan=3><img

  1373        alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"

  1374        height=226 src=RightMarginBoxes.png width=181>

  1376      <tr id=right-middle-box-def>

  1377       <th>right-middle

  1379       <td>a variable-height box centered vertically between the page's top

  1380        and bottom border edges and filling the right page margin between the

  1381        right-top and right-bottom page-margin boxes

  1383      <tr id=right-bottom-box-def>

  1384       <th>right-bottom

  1386       <td>a variable-height box filling the right page margin between the

  1387        right-middle and bottom-right-corner page-margin boxes

  1389      <tr id=bottom-margin-boxes-def>

  1390       <th id=bottom-left-corner-box-def>bottom-left-corner

  1392       <td>a fixed-size box defined by the intersection of the bottom and left

  1393        margins of the page box

  1395       <td><img

  1396        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"

  1397        height=48 src=BottomLeftCornerBox.png width=181>

  1399      <tr id=bottom-left-box-def>

  1400       <th>bottom-left

  1402       <td>a variable-width box filling the bottom page margin between the

  1403        bottom-left-corner and bottom-center page-margin boxes

  1405       <td><img

  1406        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"

  1407        height=48 src=BottomLeftMarginBox.png width=181>

  1409      <tr id=bottom-center-box-def>

  1410       <th>bottom-center

  1412       <td>a variable-width box centered horizontally between the page's left

  1413        and right border edges and filling the bottom page margin between the

  1414        bottom-left and bottom-right page-margin boxes

  1416       <td style="vertical-align: middle;"><img

  1417        alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"

  1418        height=48 src=BottomCenterMarginBox.png width=181>

  1420      <tr id=bottom-right-box-def>

  1421       <th>bottom-right

  1423       <td>a variable-width box filling the bottom page margin between the

  1424        bottom-center and bottom-right-corner page-margin boxes

  1426       <td><img

  1427        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"

  1428        height=48 src=BottomRightMarginBox.png width=181>

  1430      <tr id=bottom-right-corner-box-def>

  1431       <th>bottom-right-corner

  1433       <td>a fixed-size box defined by the intersection of the bottom and

  1434        right margins of the page box

  1436       <td><img

  1437        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"

  1438        height=48 src=BottomRightCornerBox.png width=181>

  1439    </table>

  1441    <h3 id=margin-at-rules><span class=secno>6.1. </span>At-rules for

  1442     page-margin boxes</h3>

  1444    <p>Page-margin boxes are created by <a href="#margin-at-rules">margin

  1445     at-rules</a> inside the <a href="#page-context">page context</a>. These

  1446     rules should come after any declarations in the page context as legacy

  1447     clients may not handle declarations after margin at-rules correctly.

  1449    <p>A <dfn id=margin-at-rule>margin at-rule</dfn> consists of an <a

  1450     href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the

  1451     page-margin box (e.g. <span class=css>‘<code

  1452     class=css>@top-left</code>’</span>) and a block of declarations (said

  1453     to be in the <dfn id=margin-context>margin context</dfn>).

  1455    <div class=example>

  1456     <p>The following style sheet establishes a page header containing the

  1457      title ("Hamlet") on the left side and the page number, preceded by "Page

  1458      ", on the right side:

  1460     <pre>

  1461 @page {

  1462   size: 8.5in 11in;

  1463   margin: 10%;

  1465   @top-left {

  1466     content: "Hamlet";

  1467   }

  1468   @top-right {

  1469     content: "Page " counter(page);

  1470   }

  1471 }

  1472 </pre>

  1473    </div>

  1475    <h3 id=populating-margin-boxes><span class=secno>6.2. </span>Populating

  1476     page-margin boxes</h3>

  1478    <p>As with the ‘<code class=css>:before</code>’ and ‘<code

  1479     class=css>:after</code>’ pseudo-elements, a specified ‘<code

  1480     class=property>content</code>’ of ‘<code class=css>normal</code>’

  1481     on a page-margin box computes to ‘<code class=css>none</code>’, and

  1482     the page-margin box is <dfn id=generated>generated</dfn> if and only if

  1483     the computed value of its ‘<code class=property>content</code>’

  1484     property is not ‘<code class=property>none</code>’. Otherwise it

  1485     behaves as if it had ‘<code class=css>display: none</code>’.

  1487    <div class=example>

  1488     <p>The following style sheet creates a green box in each corner of the

  1489      page except the bottom-left corner.

  1491     <pre>

  1492   @page {

  1493     @top-left-corner { content: " "; border: solid green; }

  1494     @top-right-corner { content: url(foo.png); border: solid green; }

  1495     @bottom-right-corner { content: counter(page); border: solid green; }

  1496     @bottom-left-corner { content: normal; border: solid green; }

  1497   }

  1498 </pre>

  1499    </div>

  1501    <h3 id=margin-dimension><span class=secno>6.3. </span>Computing

  1502     Page-margin Box Dimensions</h3>

  1504    <p>The width and height of each page-margin box is determined by the rules

  1505     below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6

  1506     for page-margin boxes.

  1508    <p>The rules for applying ‘<code class=property>min-height</code>’,

  1509     ‘<code class=property>max-height</code>’, ‘<code

  1510     class=property>min-width</code>’, and ‘<code

  1511     class=property>max-width</code>’ <a href="#CSS21"

  1512     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do apply to page-margin

  1513     boxes and may imply a recalculation of the width, height, and/or margins

  1514     if the dimensions resulting from the specified ‘<code

  1515     class=property>width</code>’ or ‘<code

  1516     class=property>height</code>’ violate their constraints. If the UA does

  1517     not support the ‘<code class=property>min-height</code>’ or ‘<code

  1518     class=property>min-width</code>’ properties then it must behave as if

  1519     ‘<code class=property>min-height</code>’ and ‘<code

  1520     class=property>min-width</code>’ were always zero.

  1522    <h4 id=margin-box-terms><span class=secno>6.3.1. </span><a

  1523     id=max-margin-dimension></a>Page-Margin Box Layout Terminology</h4>

  1525    <p>In addition to the box model definitions in CSS2.1 <a href="#CSS21"

  1526     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the sizing terms in CSS

  1527     Intrinsic Sizing <a href="#CSS3-SIZING"

  1528     rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a>, the following

  1529     terms are defined for use in the subsequent page-margin box calculations:

  1531    <dl>

  1532     <dt><dfn id=available-width>available width</dfn>

  1534     <dd>The sum of the page’s left border width, left padding, <a

  1535      href="#page-box">page area</a> width, right padding, and right border

  1536      width. In other words, it is the distance between the <a

  1537      href="#page-box">page box</a>’s left right border edges. This quantity

  1538      is used when calculating dimensions of the top and bottom page-margin

  1539      boxes.

  1541     <dt><dfn id=available-height>available height</dfn>

  1543     <dd>The sum of the page’s top border width, top padding, <a

  1544      href="#page-box">page area</a> height, bottom padding, and bottom border

  1545      width. In other words, it is the distance between the <a

  1546      href="#page-box">page box</a>’s top bottom border edges. This quantity

  1547      is used when calculating dimensions of the left and right page-margin

  1548      boxes.

  1550     <dt><dfn id=outer-width>outer width</dfn>

  1552     <dd>The width of the <a

  1553      href="http://www.w3.org/TR/CSS21/box.html#outer-edge">outer edge</a>, as

  1554      defined in <a href="#CSS21"

  1555      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  1557     <dt><dfn id=outer-min-width>outer min width</dfn>

  1559     <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that

  1560      <a href="http://www.w3.org/TR/css3-sizing/#min-content">‘<code

  1561      class=css>min-content</code>’</a> is used when the width is ‘<code

  1562      class=css>auto</code>’.

  1564     <dt><dfn id=outer-max-width>outer max width</dfn>

  1566     <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that

  1567      <a href="http://www.w3.org/TR/css3-sizing/#max-content">‘<code

  1568      class=css>max-content</code>’</a> is used when ‘<code

  1569      class=property>width</code>’ is ‘<code class=css>auto</code>’.

  1570    </dl>

  1572    <p>The <dfn id=containing-block>containing block</dfn> for a corner

  1573     page-margin box is the rectangle defined by the intersection of the two

  1574     page margins meeting at that corner.

  1576    <p>For all other page-margin boxes, the <dfn

  1577     id=containing-block0>containing block</dfn> is the rectangle formed by

  1578     the encapsulating page margin minus the containing blocks of the adjacent

  1579     corners' page-margin boxes. This means that the size of this containing

  1580     block is given in one dimension by the used page margin and in the other

  1581     dimension by the <a href="#available-width"><i>available width</i></a>

  1582     (for top and bottom page-margin boxes) or <a

  1583     href="#available-height"><i>available height</i></a> (for left and right

  1584     page-margin boxes).

  1586    <h4 id=variable-sizing><span class=secno>6.3.2. </span> Page-Margin Box

  1587     Variable Dimension Computation Rules</h4>

  1589    <p>The following rules apply to ‘<code

  1590     class=property>top-left</code>’, ‘<code

  1591     class=property>top-center</code>’ and ‘<code

  1592     class=property>top-right</code>’ page-margin boxes, which are referred

  1593     to as A, B, and C, respectively, in this section.

  1595    <h5 id=variable-auto-margins><span class=secno>6.3.2.1. </span>Margins</h5>

  1597    <p>If the ‘<code class=property>margin-left</code>’ or ‘<code

  1598     class=property>margin-right</code>’ property of any of the three boxes

  1599     computes to ‘<code class=css>auto</code>’, the used value is zero.

  1601    <h5 id=variable-auto-sizing><span class=secno>6.3.2.2. </span>Resolving

  1602     ‘<code class=css>auto</code>’ widths</h5>

  1604    <p>The following algorithm determines the used width of each box. For this

  1605     purpose, boxes that are not <a href="#generated"><i>generated</i></a> are

  1606     assumed to have a ‘<code class=property>width</code>’ and an <a

  1607     href="#outer-width"><i>outer width</i></a> of zero.

  1609    <p class=note> Note: The high-level goals are (in order of priority) to

  1610     center the middle box (B) if it is generated, to minimize overflow and

  1611     overlap, and to distribute space proportionally to the amount of content.

  1613    <p>If the middle box (B) is not <a href="#generated"><i>generated</i></a>,

  1614     distribute the <a href="#available-width"><i>available width</i></a> to A

  1615     and C as follows:

  1617    <ul>

  1618     <li> If only one box has ‘<code class=css>width: auto</code>’, its

  1619      used width is resolved so that the sum of the <a

  1620      href="#outer-width"><i>outer width</i></a>s equals <a

  1621      href="#available-width"><i>available width</i></a>.

  1623     <li id=flex-fit> If A and C both have ‘<code class=css>width:

  1624      auto</code>’, distribute the space to each box as follows:

  1625      <ol>

  1626       <li>If the sum of the outer <i>max-content widths</i> is less than the

  1627        <a href="#available-width"><i>available width</i></a>, call that

  1628        difference the <i>flex space</i>. Calculate each box's <i>flex

  1629        factor</i> as proportional to its outer <i>max-content width</i>, and

  1630        set its used outer width to:

  1631        <pre><i>max-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>

  1633       <li>Otherwise if the sum of the outer <i>min-content widths</i> is less

  1634        than the <a href="#available-width"><i>available width</i></a>, call

  1635        that difference the <i>flex space</i> calculate each box's <i>flex

  1636        factor</i> as proportional to its <i>max-content</i> minus

  1637        <i>min-content</i>, and set its used outer width to:

  1638        <pre><i>min-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>

  1640       <li>Otherwise, calculate its outer size as in the previous case, but

  1641        set each box's <i>flex factor</i> as proportional to its outer

  1642        <i>min-content width</i>.

  1643      </ol>

  1644      In each case, both <i>flex factors</i> are assumed to be ‘<code

  1645      class=css>1</code>’ if their sum is equal to zero.

  1646    </ul>

  1648    <p>If the middle box (B) is <a href="#generated"><i>generated</i></a>,

  1649     determine the ‘<code class=css>auto</code>’ widths of A, B, and C as

  1650     follows:

  1652    <ol>

  1653     <li> First, resolve any ‘<code class=css>auto</code>’ width of the

  1654      middle box (B): Assume there are two boxes, B and AC, where each of AC's

  1655      dimensions is double the maximum of A and C. (This preserves B's

  1656      centering.) Distribute the space to these two boxes (B and the imaginary

  1657      AC) as described for A and C <a href="#fit2">above</a>.

  1659     <li> Then, resolve any ‘<code class=css>auto</code>’ widths of the

  1660      side boxes (A and C) by setting that box's outer width to

  1661      <pre>(<a

  1662       href="#available-width"><i>available width</i></a> − <i>used outer size of B</i>) ÷ 2</pre>

  1664      <pre>

  1665     </pre>

  1666    </ol>

  1668    <h5 id=variable-minmax><span class=secno>6.3.2.3. </span>Handling ‘<code

  1669     class=property>min-width</code>’ and ‘<code

  1670     class=property>max-width</code>’</h5>

  1672    <p> The ‘<code class=property>min-width</code>’ and ‘<code

  1673     class=property>max-width</code>’ properties <a href="#CSS21"

  1674     rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> apply to page-margin boxes in

  1675     the variable dimension like on normal elements, except that the three

  1676     boxes on the same side are considered together.

  1678    <p> More precisely:

  1680    <ol>

  1681     <li> The tentative used widths are calculated (without ‘<code

  1682      class=property>min-width</code>’ and ‘<code

  1683      class=property>max-width</code>’) following the rules under <a

  1684      href="#marginbox-variabledim-with">Resolving ‘<code

  1685      class=css>auto</code>’ widths</a> above.

  1687     <li> If the tentative used width of any of the three boxes is greater

  1688      than ‘<code class=property>max-width</code>’, the rules above are

  1689      applied again, but this time using the computed value of ‘<code

  1690      class=property>max-width</code>’ as the computed value for ‘<code

  1691      class=property>width</code>’.

  1693     <li> If the resulting width of any of the three boxes is smaller than

  1694      ‘<code class=property>min-width</code>’, the rules above are applied

  1695      again, but this time using the value of ‘<code

  1696      class=property>min-width</code>’ as the computed value for ‘<code

  1697      class=property>width</code>’.

  1698    </ol>

  1700    <h5 id=variable-position><span class=secno>6.3.2.4. </span>Positioning</h5>

  1702    <p> Once the dimensions of the boxes are determined, they are positioned

  1703     as follows:

  1705    <ul>

  1706     <li>The left outer edge of A is flush with the left edge of the

  1707      containing block

  1709     <li>The outer area of B is centered in the containing block.

  1711     <li>The right outer edge of C is flush with the right edge of the

  1712      containing block.

  1713    </ul>

  1715    <h5 id=variable-mapping><span class=secno>6.3.2.5. </span>Boxes on other

  1716     sides</h5>

  1718    <p>The used values for ‘<code class=property>bottom-left</code>’,

  1719     ‘<code class=property>bottom-center</code>’ and ‘<code

  1720     class=property>bottom-right</code>’ page-margin boxes are established

  1721     by the same rules as for ‘<code class=property>top-left</code>’,

  1722     ‘<code class=property>top-center</code>’, and ‘<code

  1723     class=property>top-right</code>’, respectively.

  1725    <p>The used values for ‘<code class=property>left-top</code>’,

  1726     ‘<code class=property>left-middle</code>’ and ‘<code

  1727     class=property>left-bottom</code>’ boxes are established by the same

  1728     rules, with "width" replaced by "height", "left" by "top", "right" by

  1729     "bottom" and "center" by "middle".

  1731    <p>The used values for ‘<code class=property>right-top</code>’,

  1732     ‘<code class=property>right-middle</code>’ and ‘<code

  1733     class=property>right-bottom</code>’ page-margin boxes are established

  1734     by the same rules as for ‘<code class=property>left-top</code>’,

  1735     ‘<code class=property>left-middle</code>’ and ‘<code

  1736     class=property>left-bottom</code>’, respectively.

  1738    <h4 id=fixed-sizing><span class=secno>6.3.3. </span>Page-Margin Box Fixed

  1739     Dimension Computation Rules</h4>

  1741    <p>The rules below are used to calculate the used values of each ‘<code

  1742     class=property>top-left-corner</code>’, ‘<code

  1743     class=property>top-left</code>’, ‘<code

  1744     class=property>top-center</code>’, ‘<code

  1745     class=property>top-right</code>’, and ‘<code

  1746     class=property>top-right-corner</code>’ page-margin box's ‘<code

  1747     class=property>height</code>’, ‘<code

  1748     class=property>margin-top</code>’, and ‘<code

  1749     class=property>margin-bottom</code>’ properties:

  1751    <ol>

  1752     <li>The following constraint must hold among the used values of the

  1753      margin box's properties:

  1754      <p>‘<code class=property>margin-top</code>’ + ‘<code

  1755       class=property>border-top-width</code>’ + ‘<code

  1756       class=property>padding-top</code>’ + ‘<code

  1757       class=property>height</code>’ + ‘<code

  1758       class=property>padding-bottom</code>’ + ‘<code

  1759       class=property>border-bottom-width</code>’ + ‘<code

  1760       class=property>margin-bottom</code>’ = top page margin

  1762     <li>If ‘<code class=property>border-top-width</code>’ + ‘<code

  1763      class=property>padding-top</code>’ + ‘<code

  1764      class=property>height</code>’ (if it is not ‘<code

  1765      class=css>auto</code>’) + ‘<code

  1766      class=property>padding-bottom</code>’ + ‘<code

  1767      class=property>border-bottom-width</code>’, plus ‘<code

  1768      class=property>margin-top</code>’ and/or ‘<code

  1769      class=property>margin-bottom</code>’ if not ‘<code

  1770      class=css>auto</code>’, is larger than the height of the top page

  1771      margin, then any ‘<code class=css>auto</code>’ values for ‘<code

  1772      class=property>margin-top</code>’ or ‘<code

  1773      class=property>margin-bottom</code>’ are, for the following rules,

  1774      treated as zero.

  1776     <li>If at this point all of ‘<code class=property>height</code>’,

  1777      ‘<code class=property>margin-top</code>’, and ‘<code

  1778      class=property>margin-bottom</code>’ have a computed value other than

  1779      ‘<code class=css>auto</code>’, the values are said to be

  1780      "over-constrained". In this case, the specified value of ‘<code

  1781      class=property>margin-top</code>’ is treated as ‘<code

  1782      class=property>auto</code>’.

  1784     <li>If there is now exactly one value specified as ‘<code

  1785      class=property>auto</code>’, its used value follows from the equality.

  1787     <li>If ‘<code class=property>height</code>’ is set to ‘<code

  1788      class=property>auto</code>’, any other ‘<code

  1789      class=property>auto</code>’ values become ‘<code

  1790      class=css>0</code>’ and ‘<code class=property>height</code>’

  1791      follows from the resulting equality

  1793     <li>If both ‘<code class=property>margin-top</code>’ and ‘<code

  1794      class=property>margin-bottom</code>’ are ‘<code

  1795      class=property>auto</code>’, their used values are equal. This

  1796      vertically centers the page-margin box content within the top page

  1797      margin.

  1798    </ol>

  1800    <p>The same rules apply to the bottom page-margin boxes

  1801     (bottom-left-corner, bottom-left, bottom-center, bottom-right, and

  1802     bottom-right-corner), except that in the overconstrained case, the

  1803     ‘<code class=property>margin-bottom</code>’ is ignored rather than

  1804     the ‘<code class=property>margin-top</code>’.

  1806    <p>Analogous rules govern the properties for the left and right

  1807     page-margin boxes with respect to ‘<code class=property>width</code>’

  1808     (top-left-corner, left-top, left-middle, left-bottom, and

  1809     bottom-left-corner; top-right-corner, right-top, right-middle,

  1810     right-bottom, bottom-right-corner), with ‘<code

  1811     class=property>top</code>’ replaced by ‘<code

  1812     class=property>left</code>’, ‘<code class=property>bottom</code>’

  1813     replaced by ‘<code class=property>right</code>’, and ‘<code

  1814     class=property>height</code>’ replaced by ‘<code

  1815     class=property>width</code>’. In the overconstrained case for left

  1816     (right) page-margin boxes, the specified value of ‘<code

  1817     class=property>margin-left</code>’ (‘<code

  1818     class=property>margin-right</code>’) is ignored.

  1820    <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box

  1821     examples</h3>

  1823    <p>The following is a collection of examples of page-margin box usage.

  1825    <div class=example>

  1826     <p>Here is an example of a page with only a top-left header:

  1828     <pre>

  1829 @page {

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

  1831 }

  1832 </pre>

  1834     <p>Because there are no contents defined for the top-center or the

  1835      top-right page-margin boxes, the extent of the top-left page-margin box

  1836      is allowed to cross the center of the page box.

  1838     <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>

  1839    </div>

  1841    <div class=example>

  1842     <p>The following is an example of a page with a centered header:

  1844     <pre>

  1845 @page {

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

  1847 }

  1848 </pre>

  1850     <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>

  1851    </div>

  1853    <div class=example>

  1854     <p>The following is an example of a page with a single header in the

  1855      top-right page-margin box:

  1857     <pre>

  1858 @page {

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

  1860 }

  1861 </pre>

  1863     <p>Because the content of the center cell is empty, the extent of the

  1864      top-right page-margin box is allowed to cross the center of the page

  1865      box.

  1867     <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>

  1868    </div>

  1870    <div class=example>

  1871     <p>The following is an example of a page with a top-center and a top-left

  1872      header:

  1874     <pre>

  1875 @page {

  1876 @top-left { content: "Left Cell (top-left)" }

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

  1878 }

  1879 </pre>

  1881     <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>

  1882    </div>

  1884    <div class=example>

  1885     <p>The following is an example of a page with a top-center and a

  1886      top-right header:

  1888     <pre>

  1889 @page {

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

  1891 @top-right { content: "Right Cell (top-right)" }

  1892 }

  1893 </pre>

  1895     <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>

  1896    </div>

  1898    <div class=example>

  1899     <p>The following is an example of a page with top-left and top-right

  1900      headers:

  1902     <pre>

  1903 @page {

  1904 @top-left { content: "Header in top-left with approx. "

  1905                    "twice as many words as right cell." }

  1906 @top-right { content: "Right cell (top-right)" }

  1907 }

  1908 </pre>

  1910     <p>Because there are no center cell contents, the extent of the top-left

  1911      is allowed to cross the center of the page box.

  1913     <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>

  1914    </div>

  1916    <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>

  1918    <div>

  1919     <p>The following properties, when used in the <a

  1920      href="#page-context">page context</a>, apply to the page box:

  1922     <ul>

  1923      <li><a

  1924       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  1925       properties</a>

  1927      <li><a

  1928       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  1929       properties</a>

  1931      <li><a

  1932       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  1934      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  1935       properties</a>

  1937      <li><a

  1938       href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>

  1940      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  1942      <li><a

  1943       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  1945      <li><a

  1946       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  1947       properties</a>

  1949      <li><a

  1950       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  1951       properties</a>

  1953      <li><a

  1954       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  1955       properties</a>

  1957      <li><a

  1958       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  1960      <li><a href="#page-size">size</a>

  1962      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  1964      <li><a

  1965       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  1966     </ul>

  1968     <p>The following properties, when used in a <a

  1969      href="#margin-at-rule">margin context</a>, apply to page-margin boxes

  1970      and their content:

  1972     <ul>

  1973      <li><a

  1974       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  1975       properties</a>

  1977      <li><a

  1978       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  1979       properties</a>

  1981      <li><a

  1982       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  1984      <li><a

  1985       href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>

  1987      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  1988       properties</a>

  1990      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  1992      <li><a

  1993       href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  1994       <a

  1995       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  1997      <li><a

  1998       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2000      <li><a

  2001       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  2002       properties</a>

  2004      <li><a

  2005       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  2006       properties</a>

  2008      <li><a

  2009       href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  2011      <li><a

  2012       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  2013       properties</a>

  2015      <li><a

  2016       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  2018      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  2020      <li><a

  2021       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  2023      <li><a

  2024       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  2026      <li><a

  2027       href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  2028       <a

  2029       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  2031      <li><a

  2032       href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  2033     </ul>

  2035     <p>A detailed list of properties that <em class=RFC2119>MUST</em> be

  2036      supported within page and margin contexts by a conforming implementation

  2037      can be found in <a href="#properties-list">Appendix A</a>.

  2039     <p>Other properties defined by <a href="#CSS21"

  2040      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these

  2041      contexts. Behavior for properties not included in CSS 2.1 and not listed

  2042      here or in Appendix A is undefined.

  2044     <p class=note> Note: The intent of leaving other properties undefined is

  2045      to allow the gradual addition of appropriate CSS3 properties as they

  2046      emerge, without having to update this specification with each addition.

  2048     <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with

  2049      elements in the document</a>, both the page context and the margin

  2050      context have a computed value for every property, even if that property

  2051      does not apply to the page or page-margin box.

  2053     <p>The normal rules for CSS properties apply with the following

  2054      exceptions:

  2056     <ul>

  2057      <li>page-margin boxes inherit from the page context. The page context

  2058       inherits from the root element. However, since the previous revision of

  2059       CSS Paged Media Level 3 did not specify this point, an implementation

  2060       that sets inherited properties in the page context to their initial

  2061       values (as for the root element) is also conformant to CSS Paged Media

  2062       Level 3. Note that this exception will be removed in Level 4.

  2064      <li>Values in units of ‘<code class=css>em</code>’ and ‘<code

  2065       class=css>ex</code>’ are interpreted relative to the font associated

  2066       with their context. When used on the ‘<code

  2067       class=property>font-size</code>’ property in the margin context, they

  2068       are relative to the font of the page context. When used on the ‘<code

  2069       class=property>font-size</code>’ property in the page context, they

  2070       are relative to the ‘<code class=property>font-size</code>’ of the

  2071       root element. However, since a previous revision of CSS Paged Media

  2072       Level 3 was ambiguous on this point, an implementation that treats

  2073       ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on

  2074       ‘<code class=property>font-size</code>’ as relative to the initial

  2075       value is also conformant to CSS Paged Media Level 3. Note that this

  2076       exception will be removed in Level 4.

  2078      <li>Percentage values on the margin and padding properties are relative

  2079       to the dimensions of the containing block. For right and left values,

  2080       percentages are relative to the width of the containing block; for top

  2081       and bottom values, percentages are relative to the height of the

  2082       containing block.

  2084      <li>The used values of ‘<code class=property>width</code>’ and

  2085       ‘<code class=property>height</code>’ have special computation rules

  2086       for page boxes and page-margin boxes; see <a href="#page-size">Page

  2087       Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box

  2088       Dimensions</a>.

  2090      <li>The page background is positioned and painted <a href="#painting">as

  2091       described above</a>.

  2093      <li>The rules for counter scoping are modified <a

  2094       href=page-based-counters>as described below</a>.

  2096      <li> As on the ‘<code class=css>::before</code>’ and ‘<code

  2097       class=css>::after</code>’ pseudo-elements, the ‘<code

  2098       class=css>normal</code>’ value of the ‘<code

  2099       class=property>content</code>’ property computes to ‘<code

  2100       class=css>none</code>’ on page-margin boxes.

  2102      <li>On page-margin boxes, the ‘<code

  2103       class=property>vertical-align</code>’ property behaves <a

  2104       href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as

  2105       specified for table cells</a>. It <em>always</em> performs alignment in

  2106       the vertical dimension, regardless of writing mode.

  2107     </ul>

  2109     <p>It is <em class=RFC2119>recommended</em> that user agents establish a

  2110      default page margin via the user agent stylesheet that includes any

  2111      non-printable area. It is further <em class=RFC2119>recommended</em>

  2112      that authors assume that the default page area will not include

  2113      unprintable regions.

  2115     <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based

  2116      counters</h3>

  2118     <p>Counters can be defined and controlled within an <span

  2119      class=css>‘<code class=css>@page</code>’</span> rule, and used as

  2120      content in page-margin boxes. This is useful for maintaining a page

  2121      count.

  2123     <p>A ‘<code class=property>counter-increment</code>’ within either a

  2124      page or margin context causes the counter to increment with the

  2125      generation of each page box.

  2127     <p>If a counter is reset or incremented within the page context, it is in

  2128      scope for all page-margin boxes and obscures all counters of the same

  2129      name within the document.

  2131     <p>If a counter is reset or incremented within a margin context, it is in

  2132      scope for that page-margin box and obscures any counters of the same

  2133      name in both the page context and the document.

  2135     <p>If a counter that has not been reset or incremented within the margin

  2136      context or the page context is used by counter() or counters() in the

  2137      margin context, then the resultant value is exactly as if the

  2138      page-margin box were an element within the document at the start of the

  2139      page, inside the deepest element in the normal flow that spans the page

  2140      break. Use of the counter in this way does not affect the calculation of

  2141      the counter's value.

  2143     <p> A counter named ‘<a href="#page"><code class=css>page</code></a>’

  2144      is automatically created and incremented by 1 on every page of the

  2145      document, unless the ‘<code class=property>counter-increment</code>’

  2146      property in the <a href="#page-context"><i>page context</i></a>

  2147      explicitly specifies a different increment for the ‘<a

  2148      href="#page"><code class=css>page</code></a>’ counter. The implied

  2149      ‘<a href="#page"><code class=css>page</code></a>’ counter is a real

  2150      counter, and can be directly affected using the ‘<code

  2151      class=property>counter-increment</code>’ and ‘<code

  2152      class=property>counter-reset</code>’ properties when named explicitly

  2153      in those properties. It can also be used in the ‘<code

  2154      class=css>counter()</code>’ and ‘<code

  2155      class=css>counters()</code>’ function forms.

  2157     <div class=example>

  2158      <p>The following rules result in the placement of the current page

  2159       number in the middle of the outside margin of each page.

  2161      <pre>

  2162 @page {

  2163   margin: 10%;

  2165   @top-center {

  2166     font-family: sans-serif;

  2167     font-weight: bold;

  2168     font-size: 2em;

  2169     content: counter(page);

  2170   }

  2171 }

  2172 </pre>

  2174      <p>Adding the following rule will make all pages even-numbered.

  2176      <pre>

  2177 @page {

  2178   counter-increment: page 2;

  2179 }

  2180 </pre>

  2181     </div>

  2183     <p>Additionally, a counter named ‘<a href="#page"><code

  2184      class=css>pages</code></a>’ is automatically created by the UA. Its

  2185      value is always the total number of pages in the document. (In

  2186      continuous media this is always 1.) The value of ‘<a

  2187      href="#page"><code class=css>pages</code></a>’ cannot be manipulated:

  2188      while ‘<code class=property>counter-reset</code>’ and ‘<code

  2189      class=property>counter-increment</code>’ statements that set it are

  2190      valid, they have no effect.

  2192     <p>In all other respects, page-associated counters behave as described in

  2193      <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a

  2194      href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a

  2195      href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.

  2197     <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin

  2198      boxes and default values</h3>

  2200     <p>Properties used within page or margin contexts take their initial

  2201      values from their respective property definitions; however, user agents

  2202      must behave as though the values in the following table were established

  2203      by rules in the UA default style sheet.

  2205     <table class=data id=margin-values

  2206      summary="definition of page-margin box default properties">

  2207      <caption>Table 2. Default values for Page-Margin Boxes</caption>

  2209      <thead>

  2210       <tr>

  2211        <th>Page-margin box

  2213        <th><span class=property>‘<code

  2214         class=property>text-align</code>’</span>

  2216        <th><span class=property>‘<code

  2217         class=property>vertical-align</code>’</span>

  2219      <tbody>

  2220       <tr>

  2221        <td><a href="#top-left-corner-box-def">top-left-corner</a>

  2223        <td>right

  2225        <td>middle

  2227       <tr>

  2228        <td><a href="#top-left-box-def">top-left</a>

  2230        <td>left

  2232        <td>middle

  2234       <tr>

  2235        <td><a href="#top-center-box-def">top-center</a>

  2237        <td>center

  2239        <td>middle

  2241       <tr>

  2242        <td><a href="#top-right-box-def">top-right</a>

  2244        <td>right

  2246        <td>middle

  2248       <tr>

  2249        <td><a href="#top-right-corner-box-def">top-right-corner</a>

  2251        <td>left

  2253        <td>middle

  2255       <tr>

  2256        <td><a href="#left-top-box-def">left-top</a>

  2258        <td>center

  2260        <td>top

  2262       <tr>

  2263        <td><a href="#left-middle-box-def">left-middle</a>

  2265        <td>center

  2267        <td>middle

  2269       <tr>

  2270        <td><a href="#left-bottom-box-def">left-bottom</a>

  2272        <td>center

  2274        <td>bottom

  2276       <tr>

  2277        <td><a href="#right-top-box-def">right-top</a>

  2279        <td>center

  2281        <td>top

  2283       <tr>

  2284        <td><a href="#right-middle-box-def">right-middle</a>

  2286        <td>center

  2288        <td>middle

  2290       <tr>

  2291        <td><a href="#right-bottom-box-def">right-bottom</a>

  2293        <td>center

  2295        <td>bottom

  2297       <tr>

  2298        <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>

  2300        <td>right

  2302        <td>middle

  2304       <tr>

  2305        <td><a href="#bottom-left-box-def">bottom-left</a>

  2307        <td>left

  2309        <td>middle

  2311       <tr>

  2312        <td><a href="#bottom-center-box-def">bottom-center</a>

  2314        <td>center

  2316        <td>middle

  2318       <tr>

  2319        <td><a href="#bottom-right-box-def">bottom-right</a>

  2321        <td>right

  2323        <td>middle

  2325       <tr>

  2326        <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>

  2328        <td>left

  2330        <td>middle

  2331     </table>

  2333     <div class=example>

  2334      <p>This example style sheet could be used to create a centered header

  2335       with the current chapter name:

  2337      <pre>body {counter-reset: chapter;}

  2338 div.chapter {counter-increment: chapter;}

  2339 @page {

  2340 margin: 10%;

  2341 @top-center { content: "Chapter" counter(chapter) }

  2342 }

  2343 </pre>

  2344     </div>

  2346     <h2 id=page-size><span class=secno>8. </span>Page Size</h2>

  2348     <p>People around the world use many different paper sizes. It is a goal

  2349      of this specification that web content should be adaptable to a range of

  2350      different sizes without having to write a specific style sheet for each

  2351      paper size.

  2353     <p>However, in some situations it is important that a certain page size

  2354      achieves a certain style. One way to achieve this goal is to utilize the

  2355      ‘<a href="#size"><code class=property>size</code></a>’ property,

  2356      which indicates that the document should preferentially be displayed on

  2357      a surface of a certain size; another method is to use Media Queries <a

  2358      href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow

  2359      different style sheets to be applied to different page sizes.

  2361     <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a

  2362      href="#size"><code class=property>size</code></a>’ property</h3>

  2364     <table class=propdef summary="definition of the size property">

  2365      <tbody>

  2366       <tr>

  2367        <th>Name:

  2369        <td><dfn id=size>size</dfn>

  2371       <tr>

  2372        <th>Value:

  2374        <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |

  2375         landscape] ]

  2377       <tr>

  2378        <th>Initial:

  2380        <td>auto

  2382       <tr>

  2383        <td><em>Applies to:</em>

  2385        <td>page context

  2387       <tr>

  2388        <th>Inherited:

  2390        <td>N/A

  2392       <tr>

  2393        <th>Percentages:

  2395        <td>N/A

  2397       <tr>

  2398        <th>Media:

  2400        <td>paged

  2402       <tr>

  2403        <td><em>Computed value:</em>

  2405        <td>specified value

  2406     </table>

  2408     <p>This property specifies the target size and orientation of the <a

  2409      href="#page-box">page box</a>’s containing block. In the general case,

  2410      where one page box is rendered onto one <a href="#page-sheet">page

  2411      sheet</a>, the ‘<a href="#size"><code

  2412      class=property>size</code></a>’ property also indicates the size of

  2413      the destination page sheet.

  2415     <p>The size of a page box can either be "absolute" (fixed size) or

  2416      "scalable" (i.e., fitting available sheet sizes). The first three values

  2417      in the table below can be used to create scalable page boxes. Other

  2418      values define a fixed-size page box, and thereby indicate the preferred

  2419      output media size. When possible, output should be rendered on the media

  2420      size indicated. If the specified size is not available, the rules for <a

  2421      href="#renderingpages">transposing a page box to a different size</a>

  2422      apply.

  2424     <p>If a <a href="#size"><code>size</code></a> property declaration is

  2425      qualified by a ‘<code class=css>width</code>’, ‘<code

  2426      class=css>height</code>’, ‘<code class=css>device-width</code>’,

  2427      ‘<code class=css>device-height</code>’, ‘<code

  2428      class=css>aspect-ratio</code>’, ‘<code

  2429      class=css>device-aspect-ratio</code>’ or ‘<code

  2430      class=css>orientation</code>’ media query <a href="#MEDIAQ"

  2431      rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on

  2432      the size of the paper), then the declaration must be <a

  2433      href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media

  2434      queries do not honor ‘<a href="#size"><code

  2435      class=property>size</code></a>’: they assume the paper size that would

  2436      be chosen if no @page rules were specified.

  2438     <p class=issue>It would be useful if media queries could respond at least

  2439      to sizes specified on an unqualified @page.

  2441     <div class=example>

  2442      <p>In the following example

  2444      <pre>

  2445   @page {

  2446     size: 4in 6in;

  2447   }

  2449   @media (max-width: 6in) {

  2450     @page {

  2451       size: letter;

  2452     }

  2453   }

  2454   </pre>

  2456      <p>The second <a href="#size"><code>size</code></a> declaration is

  2457       ignored, i.e. the specified value of the <a

  2458       href="#size"><code>size</code></a> property is <code>4in 6in</code>.

  2459     </div>

  2461     <table class=page-sizes>

  2462      <tbody>

  2463       <tr>

  2464        <th>Value

  2466        <th>Description

  2468       <tr>

  2469        <td>auto

  2471        <td>The page box will be set to a size and orientation chosen by the

  2472         UA. In the usual case, the page box size and orientation is chosen to

  2473         match the target media sheet.

  2475       <tr>

  2476        <td>landscape

  2478        <td>Specifies that the page's content be printed in landscape

  2479         orientation. The longer sides of the page box are horizontal. If a

  2480         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>

  2481         is not specified, the size of the page sheet is chosen by the UA.

  2483       <tr>

  2484        <td>portrait

  2486        <td>Specifies that the page's content be printed in portrait

  2487         orientation. The shorter sides of the page box are horizontal. If a

  2488         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>

  2489         is not specified, the size of the page sheet is chosen by the UA.

  2491       <tr>

  2492        <td>&lt;length&gt;

  2494        <td>The page box will be set to the given absolute dimension(s). If

  2495         only one length value is specified, it sets both the width and height

  2496         of the page box (i.e., the box is a square). If two length values are

  2497         specified, the first establishes the page box width, and the second

  2498         the page box height. Values in units of <span class=css>‘<code

  2499         class=property>em</code>’</span> and <span class=css>‘<code

  2500         class=property>ex</code>’</span> refer to the page context's font.

  2501         Negative lengths are illegal.

  2503       <tr>

  2504        <td>&lt;page-size&gt;

  2506        <td>A page size can be specified using one of the following media

  2507         names. This is the equivalent of specifying the <span

  2508         class=css>‘<code class=css>&lt;page-size&gt;</code>’</span> using

  2509         length values. The definition of the the media names comes from

  2510         <cite>Media Standardized Names</cite> <a href="#PWGMSN"

  2511         rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.

  2512         <dl>

  2513          <dt>A5

  2515          <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm

  2516           high.

  2518          <dt>A4

  2520          <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm

  2521           high.

  2523          <dt>A3

  2525          <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm

  2526           high.

  2528          <dt>B5

  2530          <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm

  2531           high.

  2533          <dt>B4

  2535          <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm

  2536           high.

  2538          <dt>letter

  2540          <dd>Equivalent to the size of North American letter media: 8.5

  2541           inches wide and 11 inches high

  2543          <dt>legal

  2545          <dd>Equivalent to the size of North American legal: 8.5 inches wide

  2546           by 14 inches high.

  2548          <dt>ledger

  2550          <dd>Equivalent to the size of North American ledger: 11 inches wide

  2551           by 17 inches high.

  2552         </dl>

  2553     </table>

  2555     <p>The ‘<code class=css>&lt;page-size&gt;</code>’ names can be used

  2556      in conjunction with ‘<code class=property>landscape</code>’ or

  2557      ‘<code class=property>portrait</code>’ to indicate both size and

  2558      orientation.

  2560     <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>

  2562     <div class=example>

  2563      <pre>

  2564 @page {

  2565 size: A4 landscape;

  2566 }

  2567 </pre>

  2569      <p>The above example sets the width of the page box to be 297mm and the

  2570       height to be 210mm. The page box in this example should be rendered on

  2571       a page sheet size of 210 mm by 297 mm.

  2572     </div>

  2574     <div class=example>

  2575      <p>In the following example, the outer edges of the page box will align

  2576       with the page. The percentage value on the <span

  2577       class=property>‘<code class=property>margin</code>’</span> property

  2578       is relative to the page size so if the page sheet dimensions are 210mm

  2579       x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are

  2580       no page borders or padding set in the UA default style sheet, the

  2581       resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).

  2583      <pre>

  2584 @page {

  2585 size: auto;/* auto is the initial value */

  2586 margin: 10%;

  2587 }

  2588 </pre>

  2589     </div>

  2591     <div class=example>

  2592      <pre>

  2593 @page {

  2594 size: 8.5in 11in;/* width height */

  2595 }

  2596 </pre>

  2598      <p>The above example sets the width of the page box to be 8.5 inches and

  2599       the height to be 11 inches. This indicates that the page sheet size

  2600       should be 8.5"x11" and the orientation ‘<code

  2601       class=property>portrait</code>’.

  2602     </div>

  2604     <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media

  2605      Queries</h4>

  2607     <p>This section is informative.

  2609     <p>By using Media Queries <a href="#MEDIAQ"

  2610      rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can

  2611      express different stylistic preferences for different page sizes.

  2612      Consider this example:

  2614     <div class=example style="font-size: 10pt;">

  2615      <pre>

  2616  /* style sheet for "A4" printing */

  2617  @media print and (width: 21cm) and (height: 29.7cm) {

  2618     @page {

  2619        margin: 3cm;

  2620     }

  2621  }

  2623  /* style sheet for "letter" printing */

  2624  @media print and (width: 8.5in) and (height: 11in) {

  2625     @page {

  2626         margin: 1in;

  2627     }

  2628  }

  2629 </pre>

  2630     </div>

  2632     <p>In the example above, "A4" sheets are given a "3cm" page margin, and

  2633      "letter" sheets are given a "1in" page margin.

  2635     <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes

  2636      that do not fit a page sheet</h3>

  2638     <p>If a page box does not match the target page sheet dimensions, the

  2639      user agent should do one of the following (in order of preference):

  2641     <ol>

  2642      <li>Render the page box at the indicated size on a larger page sheet.

  2644      <li>Rotate the page box 90° if this will make the page box fit the page

  2645       sheet.

  2647      <li>Scale the page box to fit the page sheet. (The aspect ratio of the

  2648       page box <em class=RFC2119>should</em> be preserved.)

  2650      <li>Reformat the page contents, including ‘<code

  2651       class=property>spilling</code>’ onto other page sheets.

  2653      <li>Clip overflowed content (least preferred).

  2654     </ol>

  2656     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user

  2657      before performing these operations.

  2659     <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the

  2660      page box on the sheet</h3>

  2662     <p>When the page box is smaller than the page size, the user agent <em

  2663      class=RFC2119>SHOULD</em> either:

  2665     <ul>

  2666      <li>center the page box on the sheet since this will align double-sided

  2667       pages and avoid accidental loss of information that is printed near the

  2668       edge of the sheet; or

  2670      <li>position the page box in the upper left corner of the page sheet, as

  2671       this may minimize media consumption.

  2672     </ul>

  2674     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in

  2675      this regard.</p>

  2676     <!-- "Page selector and page context" -->

  2677     <h2 id=page-breaks><span class=secno>9. </span> <a

  2678      id=pg-br-before-after></a> <a id=page-break-before></a> <a

  2679      id=page-break-after></a> <a id=page-break-inside></a> <a

  2680      id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a

  2681      id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a

  2682      id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>

  2683      <a id=best-pg-brk></a> Page Breaks</h2>

  2685     <p> The CSS Fragmentation Module <a href="#CSS3-BREAK"

  2686      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines

  2687      how and where CSS boxes can be <i>fragmented</i>, including across page

  2688      breaks. It defines a few properties that indicate where the user agent

  2689      <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,

  2690      and on what page (left or right) the subsequent content resumes. Each

  2691      page break ends layout in the current <a href="#page-box">page box</a>

  2692      and causes remaining pieces of the document tree to be laid out in a new

  2693      page box.

  2695     <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:

  2696      ‘<a href="#page"><code class=property>page</code></a>’</h3>

  2698     <table class=propdef summary="property definition">

  2699      <tbody>

  2700       <tr>

  2701        <th>Name:

  2703        <td><dfn id=page>page</dfn>

  2705       <tr>

  2706        <th>Value:

  2708        <td>auto | &lt;identifier&gt;

  2710       <tr>

  2711        <th>Initial:

  2713        <td>auto

  2715       <tr>

  2716        <th>Applies to:

  2718        <td>boxes that create <a

  2719         href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break

  2720         points

  2722       <tr>

  2723        <th>Inherited:

  2725        <td>no (but see prose)

  2727       <tr>

  2728        <th>Percentages:

  2730        <td>N/A

  2732       <tr>

  2733        <th>Media:

  2735        <td>paged

  2737       <tr>

  2738        <th>Computed value:

  2740        <td>specified value

  2741     </table>

  2743     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2744      property is used to specify a particular type of page (called a <dfn

  2745      id=named-page>named page</dfn>) on which an element <em

  2746      class=RFC2119>MUST</em> be displayed. If necessary, a <i>forced page

  2747      break</i> is introduced and a new page generated of the specified type.

  2749     <p class=note> This page can be styled by using the same type name in a

  2750      <a href="#page-selectors">page selector</a>.

  2752     <p> Page type names are case-sensitive identifiers. However the ‘<code

  2753      class=css>auto</code>’ value, being a CSS keyword, is <a

  2754      href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII

  2755      case-insensitive</a>.

  2757     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2758      property does not inherit. However, if the ‘<a href="#page"><code

  2759      class=property>page</code></a>’ value on an element is ‘<code

  2760      class=css>auto</code>’, then its used value is the value specified on

  2761      its nearest ancestor with a non-auto value. When specified on the root

  2762      element, the used value for ‘<code class=css>auto</code>’ is the

  2763      empty string.

  2764      <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->

  2766     <p> Because a previous version of this specification indicated that the

  2767      ‘<a href="#page"><code class=property>page</code></a>’ property is

  2768      inherited, an implementation that inherits the ‘<a href="#page"><code

  2769      class=property>page</code></a>’ property and treats ‘<code

  2770      class=css>auto</code>’ as always naming the empty string remains

  2771      conformant to CSS3 Paged Media. Therefore authors should not explicitly

  2772      specify the ‘<code class=css>auto</code>’ value on a descendant of

  2773      an element with a non-‘<code class=css>auto</code>’ value, as the

  2774      resulting behavior will be unpredictable.

  2776     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2777      property works as follows:

  2779     <ol>

  2780      <li> First, any ‘<code class=css>auto</code>’ values are resolved

  2781       against non-‘<code class=css>auto</code>’ ancestors (as specified

  2782       above).

  2784      <li> Next, a <dfn id=start-page-value>start ‘<code

  2785       class=property>page</code>’ value</dfn> and <dfn

  2786       id=end-page-value>end ‘<code class=property>page</code>’

  2787       value</dfn> is determined for each box as the value (if any) propagated

  2788       from its first or last child (respectively), else the used value on the

  2789       box itself. A child propagates its own <a href="#start-page-value"><i

  2790       title="start page value">start</i></a> or <a

  2791       href="#end-page-value"><i>end ‘<code class=property>page</code>’

  2792       value</i></a> if and only if the ‘<a href="#page"><code

  2793       class=property>page</code></a>’ property applies to it.

  2795      <li> The first printed page’s type is the <a

  2796       href="#start-page-value"><i>start ‘<code

  2797       class=property>page</code>’ value</i></a> of the root.

  2799      <li> If for any two boxes meeting at a <a

  2800       href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break

  2801       point, the <a href="#end-page-value"><i>end ‘<code

  2802       class=property>page</code>’ value</i></a> of the box preceding the

  2803       break and <a href="#start-page-value"><i>start ‘<code

  2804       class=property>page</code>’ value</i></a> of the box succeeding the

  2805       break do not match, then a page break is forced between the two boxes,

  2806       and content after the break resumes on a page box of the named type.

  2807     </ol>

  2809     <p class=note> Essentially, the two ‘<a href="#page"><code

  2810      class=property>page</code></a>’ values compared are those from the

  2811      deepest boxes meeting at the class 1 break point, ignoring any subtrees

  2812      rooted by boxes to which the ‘<a href="#page"><code

  2813      class=property>page</code></a>’ property does not apply.

  2815     <p>See <a href="#CSS3-BREAK"

  2816      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> for additional

  2817      details on page breaks.

  2819     <div class=example>

  2820      <p>In this example, the two tables are rendered on landscape pages

  2821       (indeed, on the same page, if they fit). The page type "narrow" is used

  2822       for the &lt;p&gt; after the second table, as the page properties for

  2823       the table element are no longer in effect:

  2825      <pre>

  2826 @page narrow { size: 9cm 18cm }

  2827 @page rotated { size: landscape }

  2828 div { page: narrow }

  2829 table { page: rotated }

  2830 </pre>

  2831      with this document:

  2832      <pre>

  2833 &lt;div&gt;

  2834 &lt;table&gt;...&lt;/table&gt;

  2835 &lt;table&gt;...&lt;/table&gt;

  2836 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;

  2837 &lt;/div&gt;

  2838 </pre>

  2839     </div>

  2841     <div class=example>

  2842      <p>In Japanese documents, sometimes different parts of a single document

  2843       will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"

  2844       rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a

  2845       href="#page"><code class=property>page</code></a>’ property, together

  2846       with ‘<code class=css>@page</code>’ rules specifying different page

  2847       widths, can accomodate this type of layout:

  2849      <pre>

  2850 &lt;!DOCTYPE html>

  2851 &lt;html lang="ja">

  2852   &lt;style>

  2853     html   { writing-mode: vertical-rl;

  2854              line-height: 1.6; }

  2855     .main  { page: main;

  2856              columns: 2; column-gap: 1rem; }

  2857     .index { page: index;

  2858              columns: 3; column-gap: 1rem; }

  2859     @page       { margin: auto;    /* center kihon hanmen on page */

  2860                   width:  40rem; } /* 1.6 × 25 lines        */

  2861     @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */

  2862     @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */

  2863   &lt;/style>

  2864   &lt;section class="main"> ... &lt;/section>

  2865   &lt;section class="index"> ... &lt;/section>

  2866 &lt;/html>

  2867 </pre>

  2868     </div>

  2870     <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>

  2872     <p class=note>This section has been moved to <a href="#CSS3-IMAGES"

  2873      rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.

  2875     <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1

  2876      Properties</h2>

  2878     <h3 class=no-num id=properties-that-apply-within-the-page-co>Properties

  2879      that apply within the page context</h3>

  2881     <p>The following CSS 2.1 <a href="#CSS21"

  2882      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to the

  2883      page box. If a conforming user agent supports any of these properties on

  2884      block boxes, then it must also support that property for the page box.

  2886     <table class=property-list>

  2887      <tbody>

  2888       <tr>

  2889        <td rowspan=2><a

  2890         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi

  2891         properties</a>

  2893        <td>direction

  2895      <tbody>

  2896       <tr>

  2897        <td rowspan=6><a

  2898         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  2899         properties</a>

  2901        <td>background-color

  2903       <tr>

  2904        <td>background-image

  2906       <tr>

  2907        <td>background-repeat

  2909       <tr>

  2910        <td>background-attachment

  2912       <tr>

  2913        <td>background-position

  2915       <tr>

  2916        <td>background

  2918      <tbody>

  2919       <tr>

  2920        <td rowspan=20><a

  2921         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  2922         properties</a>

  2924        <td>border-top-width

  2926       <tr>

  2927        <td>border-right-width

  2929       <tr>

  2930        <td>border-bottom-width

  2932       <tr>

  2933        <td>border-left-width

  2935       <tr>

  2936        <td>border-width

  2938       <tr>

  2939        <td>border-top-color

  2941       <tr>

  2942        <td>border-right-color

  2944       <tr>

  2945        <td>border-bottom-color

  2947       <tr>

  2948        <td>border-left-color

  2950       <tr>

  2951        <td>border-color

  2953       <tr>

  2954        <td>border-top-style

  2956       <tr>

  2957        <td>border-right-style

  2959       <tr>

  2960        <td>border-bottom-style

  2962       <tr>

  2963        <td>border-left-style

  2965       <tr>

  2966        <td>border-short-style

  2968       <tr>

  2969        <td>border-top

  2971       <tr>

  2972        <td>border-right

  2974       <tr>

  2975        <td>border-bottom

  2977       <tr>

  2978        <td>border-left

  2980       <tr>

  2981        <td>border

  2983      <tbody>

  2984       <tr>

  2985        <td rowspan=2><a

  2986         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  2987         properties</a>

  2989        <td>counter-reset

  2991       <tr>

  2992        <td>counter-increment

  2994      <tbody>

  2995       <tr>

  2996        <td colspan=2><a

  2997         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2999      <tbody>

  3000       <tr>

  3001        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font

  3002         properties</a>

  3004        <td>font-family

  3006       <tr>

  3007        <td>font-size

  3009       <tr>

  3010        <td>font-style

  3012       <tr>

  3013        <td>font-variant

  3015       <tr>

  3016        <td>font-weight

  3018       <tr>

  3019        <td>font

  3021      <tbody>

  3022       <tr>

  3023        <td rowspan=3><a

  3024         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  3025         <a

  3026         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  3028        <td>height

  3030       <tr>

  3031        <td>min-height

  3033       <tr>

  3034        <td>max-height

  3036      <tbody>

  3037       <tr>

  3038        <td colspan=2><a

  3039         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  3041      <tbody>

  3042       <tr>

  3043        <td rowspan=5><a

  3044         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  3045         properties</a>

  3047        <td>margin-top

  3049       <tr>

  3050        <td>margin-right

  3052       <tr>

  3053        <td>margin-bottom

  3055       <tr>

  3056        <td>margin-left

  3058       <tr>

  3059        <td>margin

  3061      <tbody>

  3062       <tr>

  3063        <td rowspan=5><a

  3064         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  3065         properties</a>

  3067        <td>outline-width

  3069       <tr>

  3070        <td>outline-style

  3072       <tr>

  3073        <td>outline-color

  3075       <tr>

  3076        <td>outline

  3078      <tbody>

  3079       <tr>

  3080        <td rowspan=5><a

  3081         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  3082         properties</a>

  3084        <td>padding-top

  3086       <tr>

  3087        <td>padding-right

  3089       <tr>

  3090        <td>padding-bottom

  3092       <tr>

  3093        <td>padding-left

  3095       <tr>

  3096        <td>padding

  3098      <tbody>

  3099       <tr>

  3100        <td colspan=2><a

  3101         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  3103      <tbody>

  3104       <tr>

  3105        <td rowspan=8><a href="http://www.w3.org/TR/CSS21/text.html">text

  3106         properties</a>

  3108        <td>direction

  3110       <tr>

  3111        <td>letter-spacing

  3113       <tr>

  3114        <td>text-align

  3116       <tr>

  3117        <td>text-decoration

  3119       <tr>

  3120        <td>text-indent

  3122       <tr>

  3123        <td>text-transform

  3125       <tr>

  3126        <td>white-space

  3128       <tr>

  3129        <td>word-spacing

  3131      <tbody>

  3132       <tr>

  3133        <td colspan=2><a

  3134         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  3136      <tbody>

  3137       <tr>

  3138        <td rowspan=3><a

  3139         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  3140         <a

  3141         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  3143        <td>width

  3145       <tr>

  3146        <td>min-width

  3148       <tr>

  3149        <td>max-width

  3150     </table>

  3152     <p>Properties that apply to the page-margin boxes can also be set within

  3153      the page context: if inheritable or explicitly inherited (with the

  3154      <code>inherit</code> keyword in the margin context), they will inherit

  3155      to the page-margin boxes.

  3157     <h3 class=no-num id=properties-that-apply-within-the-margin->Properties

  3158      that apply within the margin contexts</h3>

  3160     <p>The following CSS 2.1 <a href="#CSS21"

  3161      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to

  3162      page-margin boxes. If a conforming user agents supports any of these

  3163      properties on block boxes, then it must also support that property for

  3164      page-margin boxes (except for <code>z-index</code>, which is optional

  3165      for page-margin boxes).

  3167     <table class=property-list>

  3168      <tbody>

  3169       <tr>

  3170        <td rowspan=2><a

  3171         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi

  3172         properties</a>

  3174        <td>direction

  3176       <tr>

  3177        <td>unicode-bidi

  3179      <tbody>

  3180       <tr>

  3181        <td rowspan=6><a

  3182         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  3183         properties</a>

  3185        <td>background-color

  3187       <tr>

  3188        <td>background-image

  3190       <tr>

  3191        <td>background-repeat

  3193       <tr>

  3194        <td>background-attachment

  3196       <tr>

  3197        <td>background-position

  3199       <tr>

  3200        <td>background

  3202      <tbody>

  3203       <tr>

  3204        <td rowspan=20><a

  3205         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  3206         properties</a>

  3208        <td>border-top-width

  3210       <tr>

  3211        <td>border-right-width

  3213       <tr>

  3214        <td>border-bottom-width

  3216       <tr>

  3217        <td>border-left-width

  3219       <tr>

  3220        <td>border-width

  3222       <tr>

  3223        <td>border-top-color

  3225       <tr>

  3226        <td>border-right-color

  3228       <tr>

  3229        <td>border-bottom-color

  3231       <tr>

  3232        <td>border-left-color

  3234       <tr>

  3235        <td>border-color

  3237       <tr>

  3238        <td>border-top-style

  3240       <tr>

  3241        <td>border-right-style

  3243       <tr>

  3244        <td>border-bottom-style

  3246       <tr>

  3247        <td>border-left-style

  3249       <tr>

  3250        <td>border-short-style

  3252       <tr>

  3253        <td>border-top

  3255       <tr>

  3256        <td>border-right

  3258       <tr>

  3259        <td>border-bottom

  3261       <tr>

  3262        <td>border-left

  3264       <tr>

  3265        <td>border

  3267      <tbody>

  3268       <tr>

  3269        <td rowspan=2><a

  3270         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  3271         properties</a>

  3273        <td>counter-reset

  3275       <tr>

  3276        <td>counter-increment

  3278      <tbody>

  3279       <tr>

  3280        <td colspan=2><a href="">content</a>

  3282      <tbody>

  3283       <tr>

  3284        <td colspan=2><a

  3285         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  3287      <tbody>

  3288       <tr>

  3289        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font

  3290         properties</a>

  3292        <td>font-family

  3294       <tr>

  3295        <td>font-size

  3297       <tr>

  3298        <td>font-style

  3300       <tr>

  3301        <td>font-variant

  3303       <tr>

  3304        <td>font-weight

  3306       <tr>

  3307        <td>font

  3309      <tbody>

  3310       <tr>

  3311        <td rowspan=3><a

  3312         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  3313         <a

  3314         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  3316        <td>height

  3318       <tr>

  3319        <td>min-height

  3321       <tr>

  3322        <td>max-height

  3324      <tbody>

  3325       <tr>

  3326        <td colspan=2><a

  3327         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  3329      <tbody>

  3330       <tr>

  3331        <td rowspan=5><a

  3332         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  3333         properties</a>

  3335        <td>margin-top

  3337       <tr>

  3338        <td>margin-right

  3340       <tr>

  3341        <td>margin-bottom

  3343       <tr>

  3344        <td>margin-left

  3346       <tr>

  3347        <td>margin

  3349      <tbody>

  3350       <tr>

  3351        <td rowspan=5><a

  3352         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  3353         properties</a>

  3355        <td>outline-width

  3357       <tr>

  3358        <td>outline-style

  3360       <tr>

  3361        <td>outline-color

  3363       <tr>

  3364        <td>outline

  3366      <tbody>

  3367       <tr>

  3368        <td colspan=2><a

  3369         href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  3371      <tbody>

  3372       <tr>

  3373        <td rowspan=5><a

  3374         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  3375         properties</a>

  3377        <td>padding-top

  3379       <tr>

  3380        <td>padding-right

  3382       <tr>

  3383        <td>padding-bottom

  3385       <tr>

  3386        <td>padding-left

  3388       <tr>

  3389        <td>padding

  3391      <tbody>

  3392       <tr>

  3393        <td colspan=2><a

  3394         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  3396      <tbody>

  3397       <tr>

  3398        <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text

  3399         properties</a>

  3401        <td>letter-spacing

  3403       <tr>

  3404        <td>text-align

  3406       <tr>

  3407        <td>text-decoration

  3409       <tr>

  3410        <td>text-indent

  3412       <tr>

  3413        <td>text-transform

  3415       <tr>

  3416        <td>white-space

  3418       <tr>

  3419        <td>word-spacing

  3421      <tbody>

  3422       <tr>

  3423        <td colspan=2><a

  3424         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  3426      <tbody>

  3427       <tr>

  3428        <td colspan=2><a

  3429         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  3431      <tbody>

  3432       <tr>

  3433        <td rowspan=3><a

  3434         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  3435         <a

  3436         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  3438        <td>width

  3440       <tr>

  3441        <td>min-width

  3443       <tr>

  3444        <td>max-width

  3446      <tbody>

  3447       <tr>

  3448        <td colspan=2><a

  3449         href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  3450     </table>

  3452     <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer

  3453      Possibilities</h2>

  3455     <p>Often, but not always, the page box has a one-to-one correspondence to

  3456      the physical surface onto which the document is ultimately rendered. The

  3457      CSS3 page model specifies formatting within the page box, but it is the

  3458      user agent's responsibility to transfer the page box to the sheet. Some

  3459      user agent transfer possibilities that are not addressed by CSS3

  3460      include:

  3462     <ul id=complex-usecases>

  3463      <li>Transferring one page box to one sheet (e.g. single-sided printing);

  3465      <li>Transferring two page boxes to the front and back surfaces of the

  3466       same sheet (e.g. double-sided printing);

  3468      <li>Transferring N (small) page boxes to one sheet (called "N-up");

  3470      <li>Transferring one (large) page box to N x M sheets (called "tiling");

  3472      <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group

  3473       of pages printed on a sheet, which, when folded and trimmed like a

  3474       book, appear in their proper sequence;

  3476      <li>Printing one document to multiple output trays;

  3478      <li>Generating files containing print instructions.

  3479     </ul>

  3481     <h2 class=no-num id=changes>Changes</h2>

  3483     <p> Changes since the <a

  3484      href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006

  3485      Working Draft</a> are:

  3487     <ul>

  3488      <li>The first printed page can be <a

  3489       href="#using-named-pages">named</a>.

  3491      <li>The ‘<code class=css>:blank</code>’ <a

  3492       href="#pseudo-classes">pseudo-class</a> was imported from the <a

  3493       href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged

  3494       Media</a> module.

  3496      <li>‘<code class=css>@page</code>’ rules can now take multiple comma

  3497       separated selectors, each selector can have multiple pseudo-classes.

  3498       <div class=example>

  3499        <pre>@page :first, :blank { @bottom-center { content: none } }</pre>

  3501        <pre>@page :first:left { @bottom-left { content: none } }</pre>

  3502       </div>

  3504      <li>Margin boxes are renamed <a href="#margin-boxes">page-margin

  3505       boxes</a>, to avoid confusion with the margin area of each box.

  3507      <li>The <a href="#variable-sizing">Variable Dimension</a> layout rules

  3508       for page-margin boxes have been much simplified to not require

  3509       quadratic optimization.

  3511      <li>The relative <a href="#painting">painting order</a> of page-margin

  3512       boxes and page content has changed.

  3514      <li>The description of page breaks and definition of related properties

  3515       (except for the ‘<a href="#page"><code

  3516       class=property>page</code></a>’ property) have been moved to the CSS

  3517       Fragmentation Module. <a href="#CSS3-BREAK"

  3518       rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>

  3520      <li>The ‘<code class=property>fit</code>’ and ‘<code

  3521       class=property>fit-position</code>’ properties are renamed to

  3522       ‘<code class=property>object-fit</code>’ and ‘<code

  3523       class=property>object-position</code>’, redefined to enable

  3524       additional use cases, and moved to the CSS3 Image Values and Replaced

  3525       Content module. <a href="#CSS3-IMAGES"

  3526       rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>

  3528      <li>Many miscellaneous clarifications and editorial improvements have

  3529       been incorporated.

  3530     </ul>

  3532     <h2 class=no-num id=references>References</h2>

  3534     <h3 class=no-num id=normative-references>Normative References</h3>

  3535     <!--begin-normative--> <!-- Sorted by label -->

  3536     <dl class=bibliography>

  3537      <dt

  3538       style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3539       <!---->

  3541      <dt id=CSS21>[CSS21]

  3543      <dd>Bert Bos; et al. <a

  3544       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading

  3545       Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7

  3546       June 2011. W3C Recommendation. URL: <a

  3547       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  3548      </dd>

  3549      <!---->

  3551      <dt id=CSS3-BREAK>[CSS3-BREAK]

  3553      <dd>Rossen Atanassov; Elika J. Etemad. <a

  3554       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS

  3555       Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working

  3556       Draft. (Work in progress.) URL: <a

  3557       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>

  3558      </dd>

  3559      <!---->

  3561      <dt id=CSS3-SIZING>[CSS3-SIZING]

  3563      <dd>Tab Atkins Jr.; Elika J. Etemad. <a

  3564       href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS

  3565       Intrinsic &amp; Extrinsic Sizing Module Level 3.</cite></a> 27

  3566       September 2012. W3C Working Draft. (Work in progress.) URL: <a

  3567       href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>

  3568      </dd>

  3569      <!---->

  3571      <dt id=CSS3BG>[CSS3BG]

  3573      <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a

  3574       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS

  3575       Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C

  3576       Candidate Recommendation. (Work in progress.) URL: <a

  3577       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>

  3578      </dd>

  3579      <!---->

  3581      <dt id=MEDIAQ>[MEDIAQ]

  3583      <dd>Florian Rivoal. <a

  3584       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media

  3585       Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a

  3586       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>

  3587      </dd>

  3588      <!---->

  3590      <dt id=PWGMSN>[PWGMSN]

  3592      <dd>Ron Bergman; Tom Hastings. <a

  3593       href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media

  3594       Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer

  3595       Working Group 5101.1-2002. URL: <a

  3596       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>

  3597      </dd>

  3598      <!---->

  3600      <dt id=RFC2119>[RFC2119]

  3602      <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  3603       words for use in RFCs to Indicate Requirement Levels.</cite></a>

  3604       Internet RFC 2119. URL: <a

  3605       href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  3606      </dd>

  3607      <!---->

  3608     </dl>

  3609     <!--end-normative-->

  3610     <h3 class=no-num id=informative-references>Informative References</h3>

  3611     <!--begin-informative--> <!-- Sorted by label -->

  3612     <dl class=bibliography>

  3613      <dt

  3614       style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3615       <!---->

  3617      <dt id=CSS3-IMAGES>[CSS3-IMAGES]

  3619      <dd>Elika J. Etemad; Tab Atkins Jr. <a

  3620       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS

  3621       Image Values and Replaced Content Module Level 3.</cite></a> 17 April

  3622       2012. W3C Candidate Recommendation. (Work in progress.) URL: <a

  3623       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>

  3624      </dd>

  3625      <!---->

  3627      <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]

  3629      <dd>Elika J. Etemad; Koji Ishii. <a

  3630       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS

  3631       Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working

  3632       Draft. (Work in progress.) URL: <a

  3633       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>

  3634      </dd>

  3635      <!---->

  3637      <dt id=JLREQ>[JLREQ]

  3639      <dd>Yasuhiro Anan; et al. <a

  3640       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements

  3641       for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group

  3642       Note. URL: <a

  3643       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>

  3644      </dd>

  3645      <!---->

  3646     </dl>

  3647     <!--end-informative--></div>

  3648   </div>

Mercurial > drafts / file revision

css3-page/Overview.html@33f961bea4f4

css3-page/Overview.html