drafts: css3-page/Overview.html@9d57f98d774f

     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-12 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://www.w3.org/TR/2013/ED-css3-page-20130212/"

    19    name=dcterms.identifier>

    20   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>

    21   <link href="../default.css" rel=stylesheet type="text/css">

    22   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet

    23    type="text/css">

    24   <style type="text/css">

    25   .keyword { font-weight:bold }

    26   .equation { padding: 2% }

    27   table.equation {text-align:center}

    28   td, th { vertical-align: top }

    29   pre { font-size: 1em; }

    31   #margin-values { border-collapse: collapse; }

    32   #margin-values td,

    33   #margin-values th

    34   {

    35                 padding: 0.2em;

    36                 border: thin solid black;

    37   }

    39   .property-list

    40   {

    41                 border: 1px solid black;

    42                 padding: .2em;

    43                 margin-top: 2em;

    44   }

    46   .property-list td

    47   {

    48                 border: 1px solid black;

    49                 padding: .1em;

    50   }

    52   .editorial

    53   {

    54                 display: block;

    55                 font-family: arial, helvetica, sans-serif;

    56       font-size: 80%;

    57       margin-left: .5in;

    58       margin-right: 1in ;

    59       padding: 0.125in;

    60       background: #FFFFDD ;

    61   }

    63   .editorial:after { content: "Ed."}

    64   .RFC2119

    65   {

    66                 text-transform: lowercase;

    67                 font-style: italic

    68   }

    70   em em.RFC2119

    71   {

    72                 text-transform: lowercase;

    73                 font-style: normal

    74   }

    76   table.page-sizes

    77   {

    78                 border: thin solid;

    79                 margin-top: 1.5em;

    80   }

    81   table.page-sizes td

    82   {

    83                 border: thin solid;

    84                 padding: .5em;

    85   }

    86   table.page-sizes th

    87   {

    88                 border: thin solid;

    89                 padding: .5em;

    90                 background: #ffffaa;

    91   }

    93 </style>

    95  <body>

    96   <div>

    97    <div class=head> <!--begin-logo-->

    98     <p><a href="http://www.w3.org/"><img alt=W3C height=48

    99      src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   101     <h1>CSS Paged Media Module Level 3</h1>

   103     <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 12 February 2013</h2>

   105     <dl>

   106      <dt>This version:

   108      <dd><a

   109       href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>

   110      <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-page-20130212/">http://www.w3.org/TR/2013/WD-css3-page-20130212</a></dd> -->

   112      <dt>Latest version:

   114      <dd><a

   115       href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a>

   117      <dt>Previous version:

   119      <dd><a

   120       href="http://www.w3.org/TR/2004/CR-css3-page-20040225/">http://www.w3.org/TR/2004/CR-css3-page-20040225/</a>

   122      <dt>Editors:

   124      <dd>Melinda Grant, Hewlett-Packard

   126      <dd>Håkon Wium Lie, Opera Software

   128      <dd>Elika J. Etemad, Hewlett-Packard

   130      <dd>Simon Sapin, Kozea

   131     </dl>

   132     <!--begin-copyright-->

   133     <p class=copyright><a

   134      href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

   135      rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr

   136      title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a

   137      href="http://www.csail.mit.edu/"><abbr

   138      title="Massachusetts Institute of Technology">MIT</abbr></a>, <a

   139      href="http://www.ercim.eu/"><abbr

   140      title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,

   141      <a href="http://www.keio.ac.jp/">Keio</a>, <a

   142      href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a

   143      href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

   144      <a

   145      href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

   146      and <a

   147      href="http://www.w3.org/Consortium/Legal/copyright-documents">document

   148      use</a> rules apply.</p>

   149     <!--end-copyright--></div>

   151    <hr title="Separator for header">

   153    <h2 class="no-num no-toc" id=abstract>Abstract</h2>

   155    <p>This module describes the page model that partitions a flow into pages.

   156     It builds on the <a href="http://www.w3.org/TR/CSS21/box.html">Box model

   157     module</a> and introduces and defines the page model and paged media. It

   158     adds functionality for pagination, page margins, page size and

   159     orientation, headers and footers, widows and orphans, and image

   160     orientation. Finally it extends generated content to enable page

   161     numbering and running headers / footers.</p>

   162    <!-- "Status of this document" -->

   163    <h2 class="no-num no-toc" id=status>Status of this Document</h2>

   164    <!--begin-status-->

   165    <p>This is a public copy of the editors' draft. It is provided for

   166     discussion only and may change at any moment. Its publication here does

   167     not imply endorsement of its contents by W3C. Don't cite this document

   168     other than as work in progress.

   170    <p>The (<a

   171     href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)

   172     public mailing list <a

   173     href="mailto:www-style@w3.org?Subject=%5Bcss3-page%5D%20PUT%20SUBJECT%20HERE">

   174     www-style@w3.org</a> (see <a

   175     href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for

   176     discussion of this specification. When sending e-mail, please put the

   177     text “css3-page” in the subject, preferably like this:

   178     “[<!---->css3-page<!---->] <em>…summary of comment…</em>”

   180    <p>This document was produced by the <a href="/Style/CSS/members">CSS

   181     Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

   183    <p>This document was produced by a group operating under the <a

   184     href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent

   185     Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"

   186     rel=disclosure>public list of any patent disclosures</a> made in

   187     connection with the deliverables of the group; that page also includes

   188     instructions for disclosing a patent. An individual who has actual

   189     knowledge of a patent which the individual believes contains <a

   190     href="/Consortium/Patent-Policy-20040205/#def-essential">Essential

   191     Claim(s)</a> must disclose the information in accordance with <a

   192     href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of

   193     the W3C Patent Policy</a>.</p>

   194    <!--end-status-->

   195    <p>This document contains the <abbr

   196     title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last

   197     Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>

   198     of 12 February 2013. The Last Call period ends on <span

   199     class=fudge>TBD</span>.

   201    <p>Relative to the previous Last Call Working Draft, this version has

   202     dropped the formerly named ‘<code class=property>fit</code>’ and

   203     ‘<code class=property>fit-position</code>’ properties; they are

   204     renamed to ‘<code class=property>object-fit</code>’ and ‘<code

   205     class=property>object-position</code>’, redefined to enable additional

   206     use cases, and moved to the <a

   207     href="http://www.w3.org/TR/css3-images/">CSS3 Image Values and Replaced

   208     Content module</a>. The page-page-margin box sizing algorithm has been

   209     reworded to be a bit simpler, and many miscellaneous clarifications and

   210     editorial improvements have been incorporated.

   212    <p>Features at-risk (may be removed if they lack implementor interest):

   214    <ul>

   215     <li>comma-separated page selectors

   216    </ul>

   218    <p>Expected next revision to this document is another LCWD, due to the

   219     substantive changes to page-margin box sizing and other areas that are

   220     now specified with more precision.

   222    <p>The <a href="lc2_issues.htm">Disposition of Comments</a> document

   223     contains the current issues list and responses to input received during

   224     this Last Call period.

   226    <h2 class="no-num no-toc" id=contents>Table of Contents</h2>

   227    <!--begin-toc-->

   228    <ul class=toc>

   229     <li><a href="#intro"><span class=secno>1. </span>Introduction</a>

   231     <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>

   233     <li><a href="#page-terms"><span class=secno>3. </span>Page

   234      Terminology</a>

   236     <li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page

   237      Model</a>

   238      <ul class=toc>

   239       <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds

   240        and Painting Order</a>

   242       <li><a href="#content-outside-box"><span class=secno>4.2.

   243        </span>Content outside the page box</a>

   245       <li><a href="#progression"><span class=secno>4.3. </span>Page

   246        Progression</a>

   247      </ul>

   249     <li><a href="#page-selector-and-context"><span class=secno>5. </span>Page

   250      Selectors and the Page Context</a>

   251      <ul class=toc>

   252       <li><a href="#at-page-rule"><span class=secno>5.1. </span>The @page

   253        Rule</a>

   255       <li><a href="#pseudo-classes"><span class=secno>5.2. </span> Page

   256        pseudo-classes: :left, :right, :first, and :blank </a>

   258       <li><a href="#syntax-page-selector"><span class=secno>5.3. </span>@page

   259        rule grammar</a>

   261       <li><a href="#cascading-and-page-context"><span class=secno>5.4.

   262        </span>Cascading in the page context</a>

   263      </ul>

   265     <li><a href="#margin-boxes"><span class=secno>6. </span>Page-Margin

   266      Boxes</a>

   267      <ul class=toc>

   268       <li><a href="#margin-at-rules"><span class=secno>6.1. </span>At-rules

   269        for page-margin boxes</a>

   271       <li><a href="#populating-margin-boxes"><span class=secno>6.2.

   272        </span>Populating page-margin boxes</a>

   274       <li><a href="#margin-box-dimensions"><span class=secno>6.3.

   275        </span>Computing Page-margin Box Dimensions</a>

   276        <ul class=toc>

   277         <li><a href="#max-margin-dimension"><span class=secno>6.3.1.

   278          </span>Page-Margin Box Layout Terminology</a>

   280         <li><a href="#margin-dimension"><span class=secno>6.3.2.

   281          </span>Page-Margin Box Variable Dimension Computation Rules</a>

   282          <ul class=toc>

   283           <li><a href="#marginbox-variabledim-margins"><span

   284            class=secno>6.3.2.1. </span>Margins</a>

   286           <li><a href="#marginbox-variabledim-with"><span

   287            class=secno>6.3.2.2. </span>Resolving ‘<code

   288            class=css>auto</code>’ widths</a>

   290           <li><a href="#marginbox-variabledim-minmax"><span

   291            class=secno>6.3.2.3. </span>Handling ‘<code

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

   293            class=property>max-width</code>’</a>

   295           <li><a href="#marginbox-variabledim-positioning"><span

   296            class=secno>6.3.2.4. </span>Positioning</a>

   298           <li><a href="#marginbox-variabledim-others"><span

   299            class=secno>6.3.2.5. </span>Boxes on other sides</a>

   300          </ul>

   302         <li><a href="#margin-constraints"><span class=secno>6.3.3.

   303          </span>Page-Margin Box Fixed Dimension Computation Rules</a>

   304        </ul>

   306       <li><a href="#margin-box-ex"><span class=secno>6.4. </span>Page-margin

   307        box examples</a>

   308      </ul>

   310     <li><a href="#page-properties"><span class=secno>7. </span>Page

   311      Properties</a>

   312      <ul class=toc>

   313       <li><a href="#page-based-counters"><span class=secno>7.1.

   314        </span>Page-based counters</a>

   316       <li><a href="#margin-text-alignment"><span class=secno>7.2.

   317        </span>Page-margin boxes and default values</a>

   318      </ul>

   320     <li><a href="#page-size"><span class=secno>8. </span>Page Size</a>

   321      <ul class=toc>

   322       <li><a href="#page-size-prop"><span class=secno>8.1. </span>Page size:

   323        the ‘<code class=property>size</code>’ property</a>

   324        <ul class=toc>

   325         <li><a href="#some-examples"><span class=secno>8.1.1. </span>Some

   326          examples:</a>

   328         <li><a href="#page-size-media-query"><span class=secno>8.1.2.

   329          </span>Media Queries</a>

   330        </ul>

   332       <li><a href="#renderingpages"><span class=secno>8.2. </span>Rendering

   333        page boxes that do not fit a page sheet</a>

   335       <li><a href="#positioning-page-box"><span class=secno>8.3.

   336        </span>Positioning the page box on the sheet</a>

   337      </ul>

   339     <li><a href="#page-breaks"><span class=secno>9. </span> Page Breaks </a>

   340      <ul class=toc>

   341       <li><a href="#using-named-pages"><span class=secno>9.1. </span>Using

   342        named pages: ‘<code class=property>page</code>’</a>

   343      </ul>

   345     <li><a href="#image-properties"><span class=secno>10. </span>Image

   346      Properties</a>

   348     <li class=no-num><a href="#properties-list">Appendix A: Applicable CSS2.1

   349      Properties</a>

   350      <ul class=toc>

   351       <li class=no-num><a

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

   353        within the page context</a>

   355       <li class=no-num><a

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

   357        within the margin contexts</a>

   358      </ul>

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

   361      Possibilities</a>

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

   364      <ul class=toc>

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

   366        References</a>

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

   369        References</a>

   370      </ul>

   371    </ul>

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

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

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

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

   377     <a

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

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

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

   381     describes how:

   383    <ul>

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

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

   387      padding are specified;

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

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

   392      and

   394     <li>orphans and widows can be controlled.

   395    </ul>

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

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

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

   400     height.

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

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

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

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

   406     one surface of similar size.

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

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

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

   411     explicitly.

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

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

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

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

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

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

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

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

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

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

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

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

   426     specification.

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

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

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

   432    <div class=example>

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

   434    </div>

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

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

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

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

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

   444     the page model:

   446    <dl>

   447     <dt id=page-sheet>Page sheet

   449     <dd><img

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   468      accomplished is device dependent within the constraints expressed in the

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

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

   471      page box</a>.

   473     <dt id=page-orientation>Page Orientation

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

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

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

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

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

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

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

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

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

   485     <dt id=portrait>Portrait Orientation

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

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

   489      to the long edge.

   491     <dt id=landscape>Landscape Orientation

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

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

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

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

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

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

   499      reading when choosing between landscape and reverse-landscape

   500      renderings.</span>

   502     <dt id=duplex-printing>Duplex Printing

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

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

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

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

   508      regardless of whether or not it actually is.

   510     <dt id=binding-edge>Binding Edge

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

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

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

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

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

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

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

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

   521     <dt id=facing-pages>Facing Pages

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

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

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

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

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

   528      are placed in their normal reading orientation.

   530     <dt id=left-page>Left Page

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

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

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

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

   536      <span class=css>‘<code class=css>:left</code>’</span> page selector.

   538     <dt id=right-page>Right Page

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

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

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

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

   544      <span class=css>‘<code class=css>:right</code>’</span> page

   545      selector.

   546    </dl>

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

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

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

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

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

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

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

   557    <p>As with other CSS <a

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

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

   560     areas of a page box have special functions:

   562    <ul>

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

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

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

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

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

   568      rectangle that is the initial <a

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

   570      block</a> of the document.

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

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

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

   575      typically used to display running headers and footers.

   576    </ul>

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

   579     determined by properties <a

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

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

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

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

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

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

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

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

   588     element or other content.

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

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

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

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

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

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

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

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

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

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

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

   601     coincide with the margin edges of the page box.

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

   604     Painting Order</h3>

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

   607     following painting order (bottommost first):

   609    <ol>

   610     <li>page background

   612     <li>document canvas

   614     <li>page borders

   616     <li>document contents

   618     <li>page-margin boxes

   619    </ol>

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

   622     background: its <a

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

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

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

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

   627     supports <a href="#CSS3BG"

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

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

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

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

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

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

   634     the page's margin box).

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

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

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

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

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

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

   642     or page area as usual.

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

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

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

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

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

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

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

   651     always painted underneath everything else. Since the

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

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

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

   655     value.

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

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

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

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

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

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

   664     the page box</h3>

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

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

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

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

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

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

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

   673     the page box.

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

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

   677     user agents observe the following general principles concerning content

   678     outside the page box:

   680    <ul>

   681     <li>

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

   683       to "bleed".

   685     <li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   702       class=property>‘<code

   703       class=property>page-break-before</code>’</span> and <span

   704       class=property>‘<code

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

   707     <li>

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

   709       inconvenient locations just to avoid rendering them. Instead:

   711      <ul>

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

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

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

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

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

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

   719      </ul>

   721     <li>

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

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

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

   725    </ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   743     page, and vice versa.

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

   747    <ul>

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

   749      same as the inline progression.

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

   752      same as the block progression.

   753    </ul>

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

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

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

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

   759     must <a

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

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

   762     properties on the root element.

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

   765     page, authors can specify a <a

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

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

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

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

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

   771     <code>:first</code> selector applies to the first printed page).

   773    <div class=example>

   774     <pre>

   775 html { page-break-before: always }

   776 </pre>

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

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

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

   782     <pre>

   783 html { page-break-before: left }

   784 </pre>

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

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

   788      regardless of the page progression.

   789    </div>

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

   792     Selectors and the Page Context</h2>

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

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

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

   798     class=css>@page</span> rule. An <span class=css>@page</span> rule

   799     consists of the keyword <span class=css>‘<code

   800     class=css>@page</code>’</span>, an <em class=RFC2119>OPTIONAL</em>

   801     comma-separated list of <a href="#page-selector"><i

   802     title="page selector">page selectors</i></a> and a block of declarations

   803     (said to be in the <dfn id=page-context>page context</dfn>). <a

   804     href="#margin-at-rules">Margin at-rules</a> may be interleaved with the

   805     declarations in the page context.

   807    <p>A <dfn id=page-selector>page selector</dfn> is either a page

   808     pseudo-class, or a page name followed with no intervening whitespace by

   809     an <em class=RFC2119>OPTIONAL</em> page pseudo-class. The page selector

   810     specifies for which pages the declarations apply. In CSS3, page selectors

   811     can designate the first page of a document, all left pages, all right

   812     pages, or <a href="#using-named-pages">pages with specific names</a>.

   813     Multiple selectors may be combined with a comma (which may be preceded

   814     and/or followed by white space); in this case the ‘<code

   815     class=css>@page</code>’ rule applies to pages that match any of the

   816     page selectors. (Note: this feature is at-risk.) If no page selector is

   817     given, then the ‘<code class=css>@page</code>’ rule applies to all

   818     pages.

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

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

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

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

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

   826     block are applied.

   828    <h3 id=pseudo-classes><span class=secno>5.2. </span> <a

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

   830     :blank</h3>

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

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

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

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

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

   838     progression</a>. The <span class=css>‘<code

   839     class=css>:left</code>’</span> and <span class=css>‘<code

   840     class=css>:right</code>’</span> page pseudo-classes can be used to

   841     selectively apply rules to only the left or right pages, respectively.

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

   844     edges using these pseudo-classes:

   845     <pre>

   846 @page :left {

   847 margin-left: 3cm;

   848 margin-right: 4cm;

   849 }

   851 @page :right {

   852 margin-left: 4cm;

   853 margin-right: 3cm;

   854 }

   855 </pre>

   856    </div>

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

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

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

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

   862     nevertheless produce correctly formatted output).

   864    <div class=note>

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

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

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

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

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

   870      specification).</em>

   871    </div>

   873    <p>Authors can also specify style for the first page of a document with

   874     the <span class=css>‘<code class=css>:first</code>’</span>

   875     pseudo-class. Such style rules are applied only to the first printed page

   876     of a document.

   878    <div class=example>

   879     <pre>

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

   882 @page :first {

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

   884 }

   885 </pre>

   886    </div>

   888    <p> Blank pages that appear as a result of <a

   889     href="http://www.w3.org/TR/css3-break/#forced-breaks">forced page

   890     breaks</a> can be styled with the <code>:blank</code> pseudo-class.

   892    <div class=example>

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

   894      elements.

   896     <pre>

   897 h1 { page-break-before: left }

   899 @page :blank {

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

   901 }

   902 </pre>

   903    </div>

   905    <p> A page matched by <code>:blank</code> can also be matched by other

   906     page pseudo-classes.

   908    <div class=example>

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

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

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

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

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

   914      remains:

   916     <pre>

   917 h1 { page-break-before: left }

   919 @page :blank {

   920   @top-center { content: none }

   921 }

   923 @page :right {

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

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

   926 }

   927 </pre>

   929     <p>Due to the higher specificity of <code>:blank</code> over

   930      <code>:right</code>, the top center header is removed even if

   931      <code>content: none</code> comes before <code>content: "Preliminary

   932      edition"</code>.

   933    </div>

   935    <div class=note>

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

   937      page pseudo-classes.</em>

   938    </div>

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

   941     grammar</h3>

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

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

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

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

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

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

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

   952     specializations of the ATKEYWORD lexical token:

   954    <pre class=lexical>

   955 PAGE_SYM              ::= "@page"

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

   957 TOPLEFT_SYM           ::= "@top-left"

   958 TOPCENTER_SYM         ::= "@top-center"

   959 TOPRIGHT_SYM          ::= "@top-right"

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

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

   962 BOTTOMLEFT_SYM        ::= "@bottom-left"

   963 BOTTOMCENTER_SYM      ::= "@bottom-center"

   964 BOTTOMRIGHT_SYM       ::= "@bottom-right"

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

   966 LEFTTOP_SYM           ::= "@left-top"

   967 LEFTMIDDLE_SYM        ::= "@left-middle"

   968 LEFTBOTTOM_SYM        ::= "@left-bottom"

   969 RIGHTTOP_SYM          ::= "@right-top"

   970 RIGHTMIDDLE_SYM       ::= "@right-middle"

   971 RIGHTBOTTOM_SYM       ::= "@right-bottom"

   973 <span

   974     id=syntax-prod-media>media</span> :

   975      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*

   976      ;

   978 <span

   979     id=syntax-prod-page title="">page</span> :

   980      PAGE_SYM S* [ page_selector S* [ ',' page_selector S* ]* ]?

   981      '{' S* page_body '}' S*

   982      ;

   984 <span

   985     id=syntax-prod-page-body>page_body</span> :  /* Can be empty */

   986      declaration? [ ';' S* page_body ]? |

   987      page_margin_box page_body

   988      ;

   990 <span

   991     id=syntax-prod-page-selector>page_selector</span> :

   992      pseudo_page | IDENT pseudo_page?

   993      ;

   994 <span

   995     id=syntax-prod-pseudo-page>pseudo_page</span> :

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

   997      ;

   999 <span

  1000     id=syntax-prod-margin>page_margin_box</span> :

  1001      margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*

  1002      ;

  1004 <span

  1005     id=syntax-prod-margin-sym>margin_sym</span> :

  1006      TOPLEFTCORNER_SYM |

  1007      TOPLEFT_SYM |

  1008      TOPCENTER_SYM |

  1009      TOPRIGHT_SYM |

  1010      TOPRIGHTCORNER_SYM |

  1011      BOTTOMLEFTCORNER_SYM |

  1012      BOTTOMLEFT_SYM |

  1013      BOTTOMCENTER_SYM |

  1014      BOTTOMRIGHT_SYM |

  1015      BOTTOMRIGHTCORNER_SYM |

  1016      LEFTTOP_SYM |

  1017      LEFTMIDDLE_SYM |

  1018      LEFTBOTTOM_SYM |

  1019      RIGHTTOP_SYM |

  1020      RIGHTMIDDLE_SYM |

  1021      RIGHTBOTTOM_SYM

  1022      ;

  1023 </pre>

  1025    <p id=page-selector-syntax-restrict> The value ‘<code

  1026     class=property>auto</code>’ is not a valid page name and must be

  1027     treated as matching nothing.

  1029    <div class=example>

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

  1031      intentionally left blank)

  1033     <pre>

  1034 @page { ... }

  1035 @page :left { ... }

  1036 @page :right { ... }

  1037 @page LandscapeTable { ... }

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

  1039 @page:first { ... };

  1040 </pre>

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

  1043      blocks are intentionally left blank.

  1045     <pre>

  1046 @page {

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

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

  1049 }

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

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

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

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

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

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

  1057 </pre>

  1058    </div>

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

  1061     in the page context</h3>

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

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

  1065     declarations in <a

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

  1068    <p>The specificity of page selectors is computed in a manner analogous to

  1069     the computations defined in the <a

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

  1072    <ul>

  1073     <li>if the page selector has a named page, f=1; else f=0

  1075     <li>if the page selector has a ‘<code class=css>:first</code>’ or

  1076      ‘<code class=css>:blank</code>’ pseudo-class, g=1; else g=0

  1078     <li>if the page selector has a ‘<code class=css>:left</code>’ or

  1079      ‘<code class=css>:right</code>’ pseudo-class, h=1; else h=0

  1080    </ul>

  1082    <p>Concatenating the three numbers f-g-h gives the specificity.

  1084    <div class=example>

  1085     <p>Some page specificity calculation examples follow:

  1087     <pre>

  1088       @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */

  1089       @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */

  1090       @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */

  1091       @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */

  1092       @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */

  1093       @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */

  1094 </pre>

  1095    </div>

  1097    <div class=example>

  1098     <p>Consider the following usage example:

  1100     <pre>

  1101 @page {

  1102 margin-left: 3cm;

  1103 }

  1105 @page :left {

  1106 margin-left: 4cm;

  1107 }

  1108 </pre>

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

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

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

  1113    </div>

  1115    <div class=example>

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

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

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

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

  1121     <pre>

  1122 @page :first {

  1123 color: green;

  1125 @top-left {

  1126   content: "foo";

  1127   color: blue;

  1128 }

  1129 @top-right {

  1130   content: "bar";

  1131 }

  1132 }

  1134 @page { color: red;

  1135 @top-center {

  1136   content: "Page " counter(page);

  1137   }

  1138 }

  1139 </pre>

  1140    </div>

  1142    <div class=example>

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

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

  1146     <pre>

  1147 @page { margin: 25mm;}

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

  1149 </pre>

  1150    </div>

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

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

  1155     pseudo-elements, can contain generated content.

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

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

  1159     the page number or document title.

  1161    <div class=example>

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

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

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

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

  1166      One possible design of page headers for horizontally written documents

  1167      uses the <span class=css>‘<code

  1168      class=property>top-left-corner</code>’</span>, <span

  1169      class=css>‘<code class=property>top-left</code>’</span>, <span

  1170      class=css>‘<code class=property>top-center</code>’</span>, <span

  1171      class=css>‘<code class=property>top-right</code>’</span> and <span

  1172      class=css>‘<code class=property>top-right-corner</code>’</span>

  1173      page-margin boxes. Another design, for vertically written documents,

  1174      could use the <span class=css>‘<code

  1175      class=property>right-top</code>’</span>, <span class=css>‘<code

  1176      class=property>right-middle</code>’</span>, and <span

  1177      class=css>‘<code class=property>right-bottom</code>’</span>

  1178      page-margin boxes for <a href="#right-page">right facing pages</a> and

  1179      <span class=css>‘<code class=property>left-top</code>’</span>, <span

  1180      class=css>‘<code class=property>left-middle</code>’</span>, and

  1181      <span class=css>‘<code class=property>left-bottom</code>’</span> for

  1182      <a href="#left-page">left facing pages</a>.

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

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

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

  1187      could use the <span class=css>‘<code

  1188      class=property>bottom-left-corner</code>’</span>, <span

  1189      class=css>‘<code class=property>bottom-left</code>’</span>, <span

  1190      class=css>‘<code class=property>bottom-center</code>’</span>, <span

  1191      class=css>‘<code class=property>bottom-right</code>’</span> and

  1192      <span class=css>‘<code

  1193      class=property>bottom-right-corner</code>’</span> page-margin boxes as

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

  1195      the page-margin boxes of the binding edge of the page for the page

  1196      footer.

  1197    </div>

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

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

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

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

  1203     below:

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

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

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

  1209     <thead>

  1210      <tr>

  1211       <th>Box

  1213       <th>Description

  1215       <th>Placement

  1217     <tbody>

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

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

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

  1222        margins of the page box

  1224       <td><img

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

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

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

  1229       <th>top-left

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

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

  1234       <td><img

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

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

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

  1239       <th>top-center

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

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

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

  1245       <td><img

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

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

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

  1250       <th>top-right

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

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

  1255       <td><img

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

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

  1259      <tr>

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

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

  1263        margins of the page box

  1265       <td><img

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

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

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

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

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

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

  1275       <td rowspan=3><img

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

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

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

  1280       <th>left-middle

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

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

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

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

  1287       <th>left-bottom

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

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

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

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

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

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

  1298       <td rowspan=3><img

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

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

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

  1303       <th>right-middle

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

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

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

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

  1310       <th>right-bottom

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

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

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

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

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

  1319        margins of the page box

  1321       <td><img

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

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

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

  1326       <th>bottom-left

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

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

  1331       <td><img

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

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

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

  1336       <th>bottom-center

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

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

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

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

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

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

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

  1347       <th>bottom-right

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

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

  1352       <td><img

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

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

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

  1357       <th>bottom-right-corner

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

  1360        right margins of the page box

  1362       <td><img

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

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

  1365    </table>

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

  1368     page-margin boxes</h3>

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

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

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

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

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

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

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

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

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

  1381    <div class=example>

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

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

  1384      ", on the right side:

  1386     <pre>

  1387 @page {

  1388   size: 8.5in 11in;

  1389   margin: 10%;

  1391   @top-left {

  1392     content: "Hamlet";

  1393   }

  1394   @top-right {

  1395     content: "Page " counter(page);

  1396   }

  1397 }

  1398 </pre>

  1399    </div>

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

  1402     page-margin boxes</h3>

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

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

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

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

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

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

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

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

  1413    <div class=example>

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

  1415      page except the bottom-left corner.

  1417     <pre>

  1418   @page {

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

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

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

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

  1423   }

  1424 </pre>

  1425    </div>

  1427    <h3 id=margin-box-dimensions><span class=secno>6.3. </span>Computing

  1428     Page-margin Box Dimensions</h3>

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

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

  1432     for page-margin boxes.

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

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

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

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

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

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

  1440     if the dimensions resulting from the specified ‘<code

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

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

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

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

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

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

  1448    <h4 id=max-margin-dimension><span class=secno>6.3.1. </span>Page-Margin

  1449     Box Layout Terminology</h4>

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

  1452     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, the following terms are

  1453     defined for use in the subsequent page-margin box calculations:

  1455    <dl>

  1456     <dt id=MaxBoxWidth><dfn id=max-box-width>max box width</dfn>

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

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

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

  1461      href="#page-box">page box</a>’s left border edge and right border

  1462      edge. This quantity is used when calculating dimensions of the top and

  1463      bottom page-margin boxes.

  1465     <dt id=MaxBoxHeight><dfn id=max-box-height>max box height</dfn>

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

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

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

  1470      href="#page-box">page box</a>’s top border edge and bottom border

  1471      edge. This quantity is used when calculating dimensions of the left and

  1472      right page-margin boxes.

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

  1476     <dd>the sum of a page-margin box's left and right margins, left and right

  1477      border widths, left and right padding, and content-box width.

  1479     <dt><dfn id=outer-height>outer height</dfn>

  1481     <dd>the sum of a page-margin box's top and bottom margins, top and bottom

  1482      border widths, top and bottom padding, and content-box height.

  1483    </dl>

  1485    <dl>

  1486     <dt><dfn id=outer-min-content>outer min-content</dfn> width

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

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

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

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

  1493     <dt><dfn id=outer-max-content>outer max-content</dfn> width

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

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

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

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

  1499    </dl>

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

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

  1503     page margins meeting at that corner.

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

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

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

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

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

  1510     dimension by the <a href="#MaxBoxWidth">max box width</a> (for top and

  1511     bottom page-margin boxes) or <a href="#MaxBoxHeight">max box height</a>

  1512     (for left and right page-margin boxes).

  1514    <h4 id=margin-dimension><span class=secno>6.3.2. </span>Page-Margin Box

  1515     Variable Dimension Computation Rules</h4>

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

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

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

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

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

  1523    <h5 id=marginbox-variabledim-margins><span class=secno>6.3.2.1.

  1524     </span>Margins</h5>

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

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

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

  1530    <h5 id=marginbox-variabledim-with><span class=secno>6.3.2.2.

  1531     </span>Resolving ‘<code class=css>auto</code>’ widths</h5>

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

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

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

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

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

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

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

  1542    <ol>

  1543     <li> If B is not <a href="#generated"><i>generated</i></a>:

  1544      <ol>

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

  1546        width is resolved so that the sum of the <a

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

  1548        href="#max-box-width"><i>max box width</i></a>.

  1550       <li> If A and C both have ‘<code class=css>width: auto</code>’:

  1551        <ol>

  1552         <li> Let <i>free space</i> be <a href="#max-box-width"><i>max box

  1553          width</i></a> minus A’s and C’s <i>outer min-content width</i>.

  1555         <li> If <i>free space</i> is positive, let the respective

  1556          <i>weight</i> for A and C be <i>max-content</i> minus

  1557          <i>min-content</i>. If it is negative or zero, let the weights be

  1558          <i>min-content</i>. In either case if both weights are zero, let

  1559          them be ‘<code class=css>1px</code>’ instead. <span class=note>

  1560          The ‘<code class=css>1px</code>’ value is arbitrary as long as

  1561          the weights are equal. </span>

  1563         <li> The respective used width is <i>min-content</i> + <i>free

  1564          space</i> × <i>weight</i> ÷ sum of both weights

  1565        </ol>

  1566      </ol>

  1568     <li> If B is <a href="#generated"><i>generated</i></a>:

  1569      <ol>

  1570       <li> If B has ‘<code class=css>width: auto</code>’:

  1571        <ol>

  1572         <li> Let <i>free space</i> be <a href="#max-box-width"><i>max box

  1573          width</i></a> - 2 × max(<i>min<sub>A</sub></i>,

  1574          <i>min<sub>C</sub></i>) - <i>min<sub>B</sub></i>, where <i>min</i>

  1575          is a box’s <i>outer min-content width</i> if ‘<code

  1576          class=property>width</code>’ is ‘<code class=css>auto</code>’,

  1577          zero otherwise.

  1579         <li> Let <i>upper limit</i> be <a href="#max-box-width"><i>max box

  1580          width</i></a> - 2 × max(<i>fixed<sub>A</sub></i>,

  1581          <i>fixed<sub>C</sub></i>), where <i>fixed</i> is a box’s <a

  1582          href="#outer-width"><i>outer width</i></a> if ‘<code

  1583          class=property>width</code>’ is not ‘<code

  1584          class=css>auto</code>’, zero otherwise.

  1586         <li> If <i>free space</i> is positive, let the <i>weight</i> of a box

  1587          be <i>max-content</i> minus <i>min-content</i>. If it is negative or

  1588          zero, let the weights be <i>min-content</i>.

  1590         <li> Let <i>weight<sub>AC</sub></i> be max(<i>weight<sub>A</sub></i>,

  1591          <i>weight<sub>C</sub></i>)

  1593         <li> If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>

  1594          are zero, let them be ‘<code class=css>1px</code>’ instead.

  1596         <li> B’s used width is min(<i>upper limit</i>, <i>min-content</i> +

  1597          <i>free space</i> × <i>weight<sub>B</sub></i> ÷

  1598          (<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))

  1599        </ol>

  1601       <li> Then, if A or C has ‘<code class=css>width: auto</code>’, the

  1602        respective used widths are resolved so that <a

  1603        href="#outer-width"><i>outer width</i></a> equals (<a

  1604        href="#max-box-width"><i>max box width</i></a> - B’s <a

  1605        href="#outer-width"><i>outer width</i></a>) ÷ 2

  1606      </ol>

  1607    </ol>

  1609    <h5 id=marginbox-variabledim-minmax><span class=secno>6.3.2.3.

  1610     </span>Handling ‘<code class=property>min-width</code>’ and ‘<code

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

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

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

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

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

  1617     boxes on the same side are considered together.

  1619    <p> More precisely:

  1621    <ol>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1639    </ol>

  1641    <h5 id=marginbox-variabledim-positioning><span class=secno>6.3.2.4.

  1642     </span>Positioning</h5>

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

  1645     as follows:

  1647    <ul>

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

  1649      containing block

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

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

  1654      containing block.

  1655    </ul>

  1657    <h5 id=marginbox-variabledim-others><span class=secno>6.3.2.5.

  1658     </span>Boxes on other sides</h5>

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

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

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

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

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

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

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

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

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

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

  1671     "bottom" and "center" by "middle".

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

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

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

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

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

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

  1680    <h4 id=margin-constraints><span class=secno>6.3.3. </span>Page-Margin Box

  1681     Fixed Dimension Computation Rules</h4>

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

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

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

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

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

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

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

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

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

  1693    <ol>

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

  1695      margin box's properties:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1716      treated as zero.

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

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

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

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

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

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

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

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

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

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

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

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

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

  1733      follows from the resulting equality

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

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

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

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

  1739      margin.

  1740    </ol>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1759     class=property>margin-left</code>’ (‘<code

  1760     class=property>margin-right</code>’) is ignored.

  1762    <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box

  1763     examples</h3>

  1765    <p>The following is a collection of examples of page-margin box usage.

  1767    <div class=example>

  1768     <p>Here is an example of a page with only a top-left header:

  1770     <pre>

  1771 @page {

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

  1773 }

  1774 </pre>

  1776     <p>Because there are no contents defined for the top-center or the

  1777      top-right page-margin boxes, the extent of the top-left page-margin box

  1778      is allowed to cross the center of the page box.

  1780     <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>

  1781    </div>

  1783    <div class=example>

  1784     <p>The following is an example of a page with a centered header:

  1786     <pre>

  1787 @page {

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

  1789 }

  1790 </pre>

  1792     <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>

  1793    </div>

  1795    <div class=example>

  1796     <p>The following is an example of a page with a single header in the

  1797      top-right page-margin box:

  1799     <pre>

  1800 @page {

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

  1802 }

  1803 </pre>

  1805     <p>Because the content of the center cell is empty, the extent of the

  1806      top-right page-margin box is allowed to cross the center of the page

  1807      box.

  1809     <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>

  1810    </div>

  1812    <div class=example>

  1813     <p>The following is an example of a page with a top-center and a top-left

  1814      header:

  1816     <pre>

  1817 @page {

  1818 @top-left { content: "Left Cell (top-left)" }

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

  1820 }

  1821 </pre>

  1823     <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>

  1824    </div>

  1826    <div class=example>

  1827     <p>The following is an example of a page with a top-center and a

  1828      top-right header:

  1830     <pre>

  1831 @page {

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

  1833 @top-right { content: "Right Cell (top-right)" }

  1834 }

  1835 </pre>

  1837     <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>

  1838    </div>

  1840    <div class=example>

  1841     <p>The following is an example of a page with top-left and top-right

  1842      headers:

  1844     <pre>

  1845 @page {

  1846 @top-left { content: "Header in top-left with approx. "

  1847                    "twice as many words as right cell." }

  1848 @top-right { content: "Right cell (top-right)" }

  1849 }

  1850 </pre>

  1852     <p>Because there are no center cell contents, the extent of the top-left

  1853      is allowed to cross the center of the page box.

  1855     <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>

  1856    </div>

  1858    <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>

  1860    <div>

  1861     <p>The following properties, when used in the <a

  1862      href="#page-context">page context</a>, apply to the page box:

  1864     <ul>

  1865      <li><a

  1866       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  1867       properties</a>

  1869      <li><a

  1870       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  1871       properties</a>

  1873      <li><a

  1874       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  1876      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  1877       properties</a>

  1879      <li><a

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

  1882      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  1884      <li><a

  1885       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  1887      <li><a

  1888       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  1889       properties</a>

  1891      <li><a

  1892       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  1893       properties</a>

  1895      <li><a

  1896       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  1897       properties</a>

  1899      <li><a

  1900       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  1902      <li><a href="#page-size">size</a>

  1904      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  1906      <li><a

  1907       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  1908     </ul>

  1910     <p>The following properties, when used in a <a

  1911      href="#margin-at-rule">margin context</a>, apply to page-margin boxes

  1912      and their content:

  1914     <ul>

  1915      <li><a

  1916       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  1917       properties</a>

  1919      <li><a

  1920       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  1921       properties</a>

  1923      <li><a

  1924       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  1926      <li><a

  1927       href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>

  1929      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  1930       properties</a>

  1932      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  1934      <li><a

  1935       href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  1936       <a

  1937       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  1939      <li><a

  1940       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  1942      <li><a

  1943       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  1944       properties</a>

  1946      <li><a

  1947       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  1948       properties</a>

  1950      <li><a

  1951       href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</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="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  1962      <li><a

  1963       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  1965      <li><a

  1966       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  1968      <li><a

  1969       href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  1970       <a

  1971       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  1973      <li><a

  1974       href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  1975     </ul>

  1977     <p>A detailed list of properties that <em class=RFC2119>MUST</em> be

  1978      supported within page and margin contexts by a conforming implementation

  1979      can be found in <a href="#properties-list">Appendix A</a>.

  1981     <p>Other properties defined by <a href="#CSS21"

  1982      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these

  1983      contexts. Behavior for properties not included in CSS 2.1 and not listed

  1984      here or in Appendix A is undefined.

  1986     <p class=note> Note: The intent of leaving other properties undefined is

  1987      to allow the gradual addition of appropriate CSS3 properties as they

  1988      emerge, without having to update this specification with each addition.

  1990     <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with

  1991      elements in the document</a>, both the page context and the margin

  1992      context have a computed value for every property, even if that property

  1993      does not apply to the page or page-margin box.

  1995     <p>The normal rules for CSS properties apply with the following

  1996      exceptions:

  1998     <ul>

  1999      <li>page-margin boxes inherit from the page context. The page context

  2000       inherits from the root element. However, since the previous revision of

  2001       CSS Paged Media Level 3 did not specify this point, an implementation

  2002       that sets inherited properties in the page context to their initial

  2003       values (as for the root element) is also conformant to CSS Paged Media

  2004       Level 3. Note that this exception will be removed in Level 4.

  2006      <li>Values in units of ‘<code class=css>em</code>’ and ‘<code

  2007       class=css>ex</code>’ are interpreted relative to the font associated

  2008       with their context. When used on the ‘<code

  2009       class=property>font-size</code>’ property in the margin context, they

  2010       are relative to the font of the page context. When used on the ‘<code

  2011       class=property>font-size</code>’ property in the page context, they

  2012       are relative to the ‘<code class=property>font-size</code>’ of the

  2013       root element. However, since a previous revision of CSS Paged Media

  2014       Level 3 was ambiguous on this point, an implementation that treats

  2015       ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on

  2016       ‘<code class=property>font-size</code>’ as relative to the initial

  2017       value is also conformant to CSS Paged Media Level 3. Note that this

  2018       exception will be removed in Level 4.

  2020      <li>Percentage values on the margin and padding properties are relative

  2021       to the dimensions of the containing block. For right and left values,

  2022       percentages are relative to the width of the containing block; for top

  2023       and bottom values, percentages are relative to the height of the

  2024       containing block.

  2026      <li>The used values of ‘<code class=property>width</code>’ and

  2027       ‘<code class=property>height</code>’ have special computation rules

  2028       for page boxes and page-margin boxes; see <a href="#page-size">Page

  2029       Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box

  2030       Dimensions</a>.

  2032      <li>The page background is positioned and painted <a href="#painting">as

  2033       described above</a>.

  2035      <li>The rules for counter scoping are modified <a

  2036       href=page-based-counters>as described below</a>.

  2038      <li> As on the ‘<code class=css>::before</code>’ and ‘<code

  2039       class=css>::after</code>’ pseudo-elements, the ‘<code

  2040       class=css>normal</code>’ value of the ‘<code

  2041       class=property>content</code>’ property computes to ‘<code

  2042       class=css>none</code>’ on page-margin boxes.

  2044      <li>On page-margin boxes, the ‘<code

  2045       class=property>vertical-align</code>’ property behaves <a

  2046       href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as

  2047       specified for table cells</a>. It <em>always</em> performs alignment in

  2048       the vertical dimension, regardless of writing mode.

  2049     </ul>

  2051     <p>It is <em class=RFC2119>recommended</em> that user agents establish a

  2052      default page margin via the user agent stylesheet that includes any

  2053      non-printable area. It is further <em class=RFC2119>recommended</em>

  2054      that authors assume that the default page area will not include

  2055      unprintable regions.

  2057     <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based

  2058      counters</h3>

  2060     <p>Counters can be defined and controlled within an <span

  2061      class=css>‘<code class=css>@page</code>’</span> rule, and used as

  2062      content in page-margin boxes. This is useful for maintaining a page

  2063      count.

  2065     <div class=example>

  2066      <p>The following rules result in the placement of the current page

  2067       number in the middle of the outside margin of each page.

  2069      <pre>

  2070 @page {

  2071 margin: 10%;

  2072 counter-increment: page;

  2074 @top-center {

  2075   font-family: sans-serif;

  2076   font-weight: bold;

  2077   font-size: 2em;

  2078   content: counter(page);

  2079 }

  2080 }

  2081 </pre>

  2082     </div>

  2084     <p>A ‘<code class=property>counter-increment</code>’ within either a

  2085      page or margin context causes the counter to increment with the

  2086      generation of each page box.

  2088     <p>If a counter is reset or incremented within the page context, it is in

  2089      scope for all page-margin boxes and obscures all counters of the same

  2090      name within the document.

  2092     <p>If a counter is reset or incremented within a margin context, it is in

  2093      scope for that page-margin box and obscures any counters of the same

  2094      name in both the page context and the document.

  2096     <p>If a counter that has not been reset or incremented within the margin

  2097      context or the page context is used by counter() or counters() in the

  2098      margin context, then the resultant value is exactly as if the

  2099      page-margin box were an element within the document at the start of the

  2100      page, inside the deepest element in the normal flow that spans the page

  2101      break. Use of the counter in this way does not affect the calculation of

  2102      the counter's value.

  2104     <p>A counter named ‘<a href="#page"><code class=css>page</code></a>’

  2105      is automatically created and incremented on every page of the document.

  2106      Specifically, the UA must automatically create and increment such a

  2107      counter as if ‘<code class=css>@page { counter-increment: page;

  2108      }</code>’ were specified. The implied ‘<a href="#page"><code

  2109      class=css>page</code></a>’ counter is a real counter, and can be

  2110      directly affected using the ‘<code

  2111      class=property>counter-increment</code>’ and ‘<code

  2112      class=property>counter-reset</code>’ properties when named explicitly

  2113      in those properties. It can also be used in the ‘<code

  2114      class=css>counter()</code>’ and ‘<code

  2115      class=css>counters()</code>’ function forms.

  2117     <p>Additionally, a counter named ‘<a href="#page"><code

  2118      class=css>pages</code></a>’ is automatically created by the UA. Its

  2119      value is always the total number of pages in the document. (In

  2120      continuous media this is always 1.) The value of ‘<a

  2121      href="#page"><code class=css>pages</code></a>’ cannot be manipulated:

  2122      while ‘<code class=property>counter-reset</code>’ and ‘<code

  2123      class=property>counter-increment</code>’ statements that set it are

  2124      valid, they have no effect.

  2126     <p>In all other respects, page-associated counters behave as described in

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

  2128      href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a

  2129      href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.

  2131     <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin

  2132      boxes and default values</h3>

  2134     <p>Properties used within page or margin contexts take their initial

  2135      values from their respective property definitions; however, user agents

  2136      must behave as though the values in the following table were established

  2137      by rules in the UA default style sheet.

  2139     <table class=data id=margin-values

  2140      summary="definition of page-margin box default properties">

  2141      <caption>Table 2. Default values for Page-Margin Boxes</caption>

  2143      <thead>

  2144       <tr>

  2145        <th>Page-margin box

  2147        <th><span class=property>‘<code

  2148         class=property>text-align</code>’</span>

  2150        <th><span class=property>‘<code

  2151         class=property>vertical-align</code>’</span>

  2153      <tbody>

  2154       <tr>

  2155        <td><a href="#top-left-corner-box-def">top-left-corner</a>

  2157        <td>right

  2159        <td>middle

  2161       <tr>

  2162        <td><a href="#top-left-box-def">top-left</a>

  2164        <td>left

  2166        <td>middle

  2168       <tr>

  2169        <td><a href="#top-center-box-def">top-center</a>

  2171        <td>center

  2173        <td>middle

  2175       <tr>

  2176        <td><a href="#top-right-box-def">top-right</a>

  2178        <td>right

  2180        <td>middle

  2182       <tr>

  2183        <td><a href="#top-right-corner-box-def">top-right-corner</a>

  2185        <td>left

  2187        <td>middle

  2189       <tr>

  2190        <td><a href="#left-top-box-def">left-top</a>

  2192        <td>center

  2194        <td>top

  2196       <tr>

  2197        <td><a href="#left-middle-box-def">left-middle</a>

  2199        <td>center

  2201        <td>middle

  2203       <tr>

  2204        <td><a href="#left-bottom-box-def">left-bottom</a>

  2206        <td>center

  2208        <td>bottom

  2210       <tr>

  2211        <td><a href="#right-top-box-def">right-top</a>

  2213        <td>center

  2215        <td>top

  2217       <tr>

  2218        <td><a href="#right-middle-box-def">right-middle</a>

  2220        <td>center

  2222        <td>middle

  2224       <tr>

  2225        <td><a href="#right-bottom-box-def">right-bottom</a>

  2227        <td>center

  2229        <td>bottom

  2231       <tr>

  2232        <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>

  2234        <td>right

  2236        <td>middle

  2238       <tr>

  2239        <td><a href="#bottom-left-box-def">bottom-left</a>

  2241        <td>left

  2243        <td>middle

  2245       <tr>

  2246        <td><a href="#bottom-center-box-def">bottom-center</a>

  2248        <td>center

  2250        <td>middle

  2252       <tr>

  2253        <td><a href="#bottom-right-box-def">bottom-right</a>

  2255        <td>right

  2257        <td>middle

  2259       <tr>

  2260        <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>

  2262        <td>left

  2264        <td>middle

  2265     </table>

  2267     <div class=example>

  2268      <p>This example style sheet could be used to create a centered header

  2269       with the current chapter name:

  2271      <pre>body {counter-reset: chapter;}

  2272 div.chapter {counter-increment: chapter;}

  2273 @page {

  2274 margin: 10%;

  2275 @top-center { content: "Chapter" counter(chapter) }

  2276 }

  2277 </pre>

  2278     </div>

  2280     <h2 id=page-size><span class=secno>8. </span>Page Size</h2>

  2282     <p>People around the world use many different paper sizes. It is a goal

  2283      of this specification that web content should be adaptable to a range of

  2284      different sizes without having to write a specific style sheet for each

  2285      paper size.

  2287     <p>However, in some situations it is important that a certain page size

  2288      achieves a certain style. One way to achieve this goal is to utilize the

  2289      ‘<a href="#size"><code class=property>size</code></a>’ property,

  2290      which indicates that the document should preferentially be displayed on

  2291      a surface of a certain size; another method is to use Media Queries <a

  2292      href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow

  2293      different style sheets to be applied to different page sizes.

  2295     <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a

  2296      href="#size"><code class=property>size</code></a>’ property</h3>

  2298     <table class=propdef summary="definition of the size property">

  2299      <tbody>

  2300       <tr>

  2301        <th>Name:

  2303        <td><dfn id=size>size</dfn>

  2305       <tr>

  2306        <th>Value:

  2308        <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |

  2309         landscape] ]

  2311       <tr>

  2312        <th>Initial:

  2314        <td>auto

  2316       <tr>

  2317        <td><em>Applies to:</em>

  2319        <td>page context

  2321       <tr>

  2322        <th>Inherited:

  2324        <td>N/A

  2326       <tr>

  2327        <th>Percentages:

  2329        <td>N/A

  2331       <tr>

  2332        <th>Media:

  2334        <td>paged

  2336       <tr>

  2337        <td><em>Computed value:</em>

  2339        <td>specified value

  2340     </table>

  2342     <p>This property specifies the target size and orientation of the <a

  2343      href="#page-box">page box</a>‘<code class=css>s containing block. In

  2344      the general case, where one page box is rendered onto one <a

  2345      href="#page-sheet">page sheet</a>, the </code>’size' property also

  2346      indicates the size of the destination page sheet.

  2348     <p>The size of a page box can either be "absolute" (fixed size) or

  2349      "scalable" (i.e., fitting available sheet sizes). The first three values

  2350      in the table below can be used to create scalable page boxes. Other

  2351      values define a fixed-size page box, and thereby indicate the preferred

  2352      output media size. When possible, output should be rendered on the media

  2353      size indicated. If the specified size is not available, the rules for <a

  2354      href="#renderingpages">transposing a page box to a different size</a>

  2355      apply.

  2357     <p>If a <a href="#size"><code>size</code></a> property declaration is

  2358      qualified by a ‘<code class=css>width</code>’, ‘<code

  2359      class=css>height</code>’, ‘<code class=css>device-width</code>’,

  2360      ‘<code class=css>device-height</code>’, ‘<code

  2361      class=css>aspect-ratio</code>’, ‘<code

  2362      class=css>device-aspect-ratio</code>’ or ‘<code

  2363      class=css>orientation</code>’ media query <a href="#MEDIAQ"

  2364      rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on

  2365      the size of the paper), then the declaration must be <a

  2366      href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media

  2367      queries do not honor ‘<a href="#size"><code

  2368      class=property>size</code></a>’: they assume the paper size that would

  2369      be chosen if no @page rules were specified.

  2371     <p class=issue>It would be useful if media queries could respond at least

  2372      to sizes specified on an unqualified @page.

  2374     <div class=example>

  2375      <p>In the following example

  2377      <pre>

  2378   @page {

  2379     size: 4in 6in;

  2380   }

  2382   @media (max-width: 6in) {

  2383     @page {

  2384       size: letter;

  2385     }

  2386   }

  2387   </pre>

  2389      <p>The second <a href="#size"><code>size</code></a> declaration is

  2390       ignored, i.e. the specified value of the <a

  2391       href="#size"><code>size</code></a> property is <code>4in 6in</code>.

  2392     </div>

  2394     <table class=page-sizes>

  2395      <tbody>

  2396       <tr>

  2397        <th>Value

  2399        <th>Description

  2401       <tr>

  2402        <td>auto

  2404        <td>The page box will be set to a size and orientation chosen by the

  2405         UA. In the usual case, the page box size and orientation is chosen to

  2406         match the target media sheet.

  2408       <tr>

  2409        <td>landscape

  2411        <td>Specifies that the page's content be printed in landscape

  2412         orientation. The longer sides of the page box are horizontal. If a

  2413         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>

  2414         is not specified, the size of the page sheet is chosen by the UA.

  2416       <tr>

  2417        <td>portrait

  2419        <td>Specifies that the page's content be printed in portrait

  2420         orientation. The shorter sides of the page box are horizontal. If a

  2421         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>

  2422         is not specified, the size of the page sheet is chosen by the UA.

  2424       <tr>

  2425        <td>&lt;length&gt;

  2427        <td>The page box will be set to the given absolute dimension(s). If

  2428         only one length value is specified, it sets both the width and height

  2429         of the page box (i.e., the box is a square). If two length values are

  2430         specified, the first establishes the page box width, and the second

  2431         the page box height. Values in units of <span class=css>‘<code

  2432         class=property>em</code>’</span> and <span class=css>‘<code

  2433         class=property>ex</code>’</span> refer to the page context's font.

  2434         Negative lengths are illegal.

  2436       <tr>

  2437        <td>&lt;page-size&gt;

  2439        <td>A page size can be specified using one of the following media

  2440         names. This is the equivalent of specifying the <span

  2441         class=css>‘<code class=css>&lt;page-size&gt;</code>’</span> using

  2442         length values. The definition of the the media names comes from

  2443         <cite>Media Standardized Names</cite> <a href="#PWGMSN"

  2444         rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.

  2445         <dl>

  2446          <dt>A5

  2448          <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm

  2449           high.

  2451          <dt>A4

  2453          <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm

  2454           high.

  2456          <dt>A3

  2458          <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm

  2459           high.

  2461          <dt>B5

  2463          <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm

  2464           high.

  2466          <dt>B4

  2468          <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm

  2469           high.

  2471          <dt>letter

  2473          <dd>Equivalent to the size of North American letter media: 8.5

  2474           inches wide and 11 inches high

  2476          <dt>legal

  2478          <dd>Equivalent to the size of North American legal: 8.5 inches wide

  2479           by 14 inches high.

  2481          <dt>ledger

  2483          <dd>Equivalent to the size of North American ledger: 11 inches wide

  2484           by 17 inches high.

  2485         </dl>

  2486     </table>

  2488     <p>The ‘<code class=css>&lt;page-size&gt;</code>’ names can be used

  2489      in conjunction with ‘<code class=property>landscape</code>’ or

  2490      ‘<code class=property>portrait</code>’ to indicate both size and

  2491      orientation.

  2493     <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>

  2495     <div class=example>

  2496      <pre>

  2497 @page {

  2498 size: A4 landscape;

  2499 }

  2500 </pre>

  2502      <p>The above example sets the width of the page box to be 297mm and the

  2503       height to be 210mm. The page box in this example should be rendered on

  2504       a page sheet size of 210 mm by 297 mm.

  2505     </div>

  2507     <div class=example>

  2508      <p>In the following example, the outer edges of the page box will align

  2509       with the page. The percentage value on the <span

  2510       class=property>‘<code class=property>margin</code>’</span> property

  2511       is relative to the page size so if the page sheet dimensions are 210mm

  2512       x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are

  2513       no page borders or padding set in the UA default style sheet, the

  2514       resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).

  2516      <pre>

  2517 @page {

  2518 size: auto;/* auto is the initial value */

  2519 margin: 10%;

  2520 }

  2521 </pre>

  2522     </div>

  2524     <div class=example>

  2525      <pre>

  2526 @page {

  2527 size: 8.5in 11in;/* width height */

  2528 }

  2529 </pre>

  2531      <p>The above example sets the width of the page box to be 8.5 inches and

  2532       the height to be 11 inches. This indicates that the page sheet size

  2533       should be 8.5"x11" and the orientation ‘<code

  2534       class=property>portrait</code>’.

  2535     </div>

  2537     <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media

  2538      Queries</h4>

  2540     <p>This section is informative.

  2542     <p>By using Media Queries <a href="#MEDIAQ"

  2543      rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can

  2544      express different stylistic preferences for different page sizes.

  2545      Consider this example:

  2547     <div class=example style="font-size: 10pt;">

  2548      <pre>

  2549  /* style sheet for "A4" printing */

  2550  @media print and (width: 21cm) and (height: 29.7cm) {

  2551     @page {

  2552        margin: 3cm;

  2553     }

  2554  }

  2556  /* style sheet for "letter" printing */

  2557  @media print and (width: 8.5in) and (height: 11in) {

  2558     @page {

  2559         margin: 1in;

  2560     }

  2561  }

  2562 </pre>

  2563     </div>

  2565     <p>In the example above, "A4" sheets are given a "3cm" page margin, and

  2566      "letter" sheets are given a "1in" page margin.

  2568     <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes

  2569      that do not fit a page sheet</h3>

  2571     <p>If a page box does not match the target page sheet dimensions, the

  2572      user agent should do one of the following (in order of preference):

  2574     <ol>

  2575      <li>Render the page box at the indicated size on a larger page sheet.

  2577      <li>Rotate the page box 90° if this will make the page box fit the page

  2578       sheet.

  2580      <li>Scale the page box to fit the page sheet. (The aspect ratio of the

  2581       page box <em class=RFC2119>should</em> be preserved.)

  2583      <li>Reformat the page contents, including ‘<code

  2584       class=property>spilling</code>’ onto other page sheets.

  2586      <li>Clip overflowed content (least preferred).

  2587     </ol>

  2589     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user

  2590      before performing these operations.

  2592     <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the

  2593      page box on the sheet</h3>

  2595     <p>When the page box is smaller than the page size, the user agent <em

  2596      class=RFC2119>SHOULD</em> either:

  2598     <ul>

  2599      <li>center the page box on the sheet since this will align double-sided

  2600       pages and avoid accidental loss of information that is printed near the

  2601       edge of the sheet; or

  2603      <li>position the page box in the upper left corner of the page sheet, as

  2604       this may minimize media consumption.

  2605     </ul>

  2607     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in

  2608      this regard.</p>

  2609     <!-- "Page selector and page context" -->

  2610     <h2 id=page-breaks><span class=secno>9. </span> <a

  2611      id=pg-br-before-after></a> <a id=page-break-before></a> <a

  2612      id=page-break-after></a> <a id=page-break-inside></a> <a

  2613      id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a

  2614      id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a

  2615      id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>

  2616      <a id=best-pg-brk></a> Page Breaks</h2>

  2618     <p> The <a href="#CSS3-BREAK"

  2619      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines

  2620      how and where CSS boxes can be <i>fragmented</i>, including across page

  2621      breaks. It defines a few properties that indicate where the user agent

  2622      <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,

  2623      and on what page (left or right) the subsequent content resumes. Each

  2624      page break ends layout in the current <a href="#page-box">page box</a>

  2625      and causes remaining pieces of the document tree to be laid out in a new

  2626      page box.

  2628     <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:

  2629      ‘<a href="#page"><code class=property>page</code></a>’</h3>

  2631     <table class=propdef summary="property definition">

  2632      <tbody>

  2633       <tr>

  2634        <th>Name:

  2636        <td><dfn id=page>page</dfn>

  2638       <tr>

  2639        <th>Value:

  2641        <td>auto | &lt;identifier&gt;

  2643       <tr>

  2644        <th>Initial:

  2646        <td>auto

  2648       <tr>

  2649        <th>Applies to:

  2651        <td>boxes that create <a

  2652         href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break

  2653         points

  2655       <tr>

  2656        <th>Inherited:

  2658        <td>no (but see prose)

  2660       <tr>

  2661        <th>Percentages:

  2663        <td>N/A

  2665       <tr>

  2666        <th>Media:

  2668        <td>paged

  2670       <tr>

  2671        <th>Computed value:

  2673        <td>specified value

  2674     </table>

  2676     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2677      property is used to specify a particular type of page (called a <dfn

  2678      id=named-page>named page</dfn>) on which an element <em

  2679      class=RFC2119>MUST</em> be displayed. If necessary, a <i>forced page

  2680      break</i> is introduced and a new page generated of the specified type.

  2682     <p> Page names are case-sensitive identifiers. However the ‘<code

  2683      class=css>auto</code>’ value, being a CSS keyword, is <a

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

  2685      case-insensitive</a>.

  2687     <div class=example>

  2688      <p>This example will put all tables on a right-hand side landscape page

  2689       (named "rotated"):

  2691      <pre>

  2692 @page rotated { size: landscape }

  2693 table { page: rotated; page-break-before: right }

  2694 </pre>

  2695     </div>

  2697     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2698      property works as follows:

  2700     <ol>

  2701      <li> First, any ‘<code class=css>auto</code>’ values are resolved

  2702       against non-‘<code class=css>auto</code>’ ancestors (as specified

  2703       below).

  2705      <li> Next, a <dfn id=preceding-page-value>preceding ‘<code

  2706       class=property>page</code>’ value</dfn> and <dfn

  2707       id=succeeding-page-value>succeeding ‘<code

  2708       class=property>page</code>’ value</dfn> is determined for each box as

  2709       the value (if any) propagated from its last or first child

  2710       (respectively), else the used value on the box itself. A child

  2711       propagates its own <a href="#preceding-page-value"><i

  2712       title="preceding page value">preceding</i></a> or <a

  2713       href="#succeeding-page-value"><i>succeeding ‘<code

  2714       class=property>page</code>’ value</i></a> <em>iff</em> the ‘<a

  2715       href="#page"><code class=property>page</code></a>’ property applies

  2716       to it.

  2718      <li> If for any two boxes meeting at a <a

  2719       href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break

  2720       point, the <a href="#preceding-page-value"><i>preceding ‘<code

  2721       class=property>page</code>’ value</i></a> and <a

  2722       href="#succeeding-page-value"><i>succeeding ‘<code

  2723       class=property>page</code>’ value</i></a> do not match, then a page

  2724       break is forced between the two boxes, and content after the break

  2725       resumes on a page box of the named type.

  2726     </ol>

  2728     <p> Essentially, the two ‘<a href="#page"><code

  2729      class=property>page</code></a>’ values compared are those from the

  2730      deepest boxes meeting at the class 1 break point, ignoring any subtrees

  2731      rooted by boxes to which the ‘<a href="#page"><code

  2732      class=property>page</code></a>’ property does not apply.

  2734     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2735      property does not inherit. However, if the ‘<a href="#page"><code

  2736      class=property>page</code></a>’ value on an element is ‘<code

  2737      class=css>auto</code>’, then its used value is the value specified on

  2738      its nearest ancestor with a non-auto value. When specified on the root

  2739      element, the effective name is the empty string.

  2740      <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->

  2742     <p> Because a previous version of this specification indicated that the

  2743      ‘<a href="#page"><code class=property>page</code></a>’ property is

  2744      inherited, an implementation that inherits the ‘<a href="#page"><code

  2745      class=property>page</code></a>’ property and treats ‘<code

  2746      class=css>auto</code>’ as always naming the empty string remains

  2747      conformant to CSS3 Paged Media. Therefore authors should not explicitly

  2748      specify the ‘<code class=css>auto</code>’ value on a descendant of

  2749      an element with a non-‘<code class=css>auto</code>’ value, as the

  2750      resulting behavior will be unpredictable.

  2752     <p>See <a href="#CSS3-BREAK"

  2753      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> for additional

  2754      details on page breaks.

  2756     <div class=example>

  2757      <p>In this example, the two tables are rendered on landscape pages

  2758       (indeed, on the same page, if they fit). The page type "narrow" is used

  2759       for the &lt;p&gt; after the second table, as the page properties for

  2760       the table element are no longer in effect:

  2762      <pre>

  2763 @page narrow { size: 9cm 18cm }

  2764 @page rotated { size: landscape }

  2765 div { page: narrow }

  2766 table { page: rotated }

  2767 </pre>

  2768      with this document:

  2769      <pre>

  2770 &lt;div&gt;

  2771 &lt;table&gt;...&lt;/table&gt;

  2772 &lt;table&gt;...&lt;/table&gt;

  2773 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;

  2774 &lt;/div&gt;

  2775 </pre>

  2776     </div>

  2778     <div class=example>

  2779      <p>In Japanese documents, sometimes different parts of a single document

  2780       will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"

  2781       rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a

  2782       href="#page"><code class=property>page</code></a>’ property, together

  2783       with ‘<code class=css>@page</code>’ rules specifying different page

  2784       widths, can accomodate this type of layout:

  2786      <pre>

  2787 &lt;!DOCTYPE html>

  2788 &lt;html lang="ja">

  2789   &lt;style>

  2790     html   { writing-mode: vertical-rl;

  2791              line-height: 1.6; }

  2792     .main  { page: main;

  2793              columns: 2; column-gap: 1rem; }

  2794     .index { page: index;

  2795              columns: 3; column-gap: 1rem; }

  2796     @page       { margin: auto;    /* center kihon hanmen on page */

  2797                   width:  40rem; } /* 1.6 × 25 lines        */

  2798     @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */

  2799     @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */

  2800   &lt;/style>

  2801   &lt;section class="main"> ... &lt;/section>

  2802   &lt;section class="index"> ... &lt;/section>

  2803 &lt;/html>

  2804 </pre>

  2805     </div>

  2807     <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>

  2809     <p class=note>This section has been moved to <a href="#CSS3-IMAGES"

  2810      rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.

  2812     <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1

  2813      Properties</h2>

  2815     <h3 class=no-num id=properties-that-apply-within-the-page-co>Properties

  2816      that apply within the page context</h3>

  2818     <p>The following CSS 2.1 <a href="#CSS21"

  2819      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to the

  2820      page box. If a conforming user agent supports any of these properties on

  2821      block boxes, then it must also support that property for the page box.

  2823     <table class=property-list>

  2824      <tbody>

  2825       <tr>

  2826        <td rowspan=2><a

  2827         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi

  2828         properties</a>

  2830        <td>direction

  2832      <tbody>

  2833       <tr>

  2834        <td rowspan=6><a

  2835         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  2836         properties</a>

  2838        <td>background-color

  2840       <tr>

  2841        <td>background-image

  2843       <tr>

  2844        <td>background-repeat

  2846       <tr>

  2847        <td>background-attachment

  2849       <tr>

  2850        <td>background-position

  2852       <tr>

  2853        <td>background

  2855      <tbody>

  2856       <tr>

  2857        <td rowspan=20><a

  2858         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  2859         properties</a>

  2861        <td>border-top-width

  2863       <tr>

  2864        <td>border-right-width

  2866       <tr>

  2867        <td>border-bottom-width

  2869       <tr>

  2870        <td>border-left-width

  2872       <tr>

  2873        <td>border-width

  2875       <tr>

  2876        <td>border-top-color

  2878       <tr>

  2879        <td>border-right-color

  2881       <tr>

  2882        <td>border-bottom-color

  2884       <tr>

  2885        <td>border-left-color

  2887       <tr>

  2888        <td>border-color

  2890       <tr>

  2891        <td>border-top-style

  2893       <tr>

  2894        <td>border-right-style

  2896       <tr>

  2897        <td>border-bottom-style

  2899       <tr>

  2900        <td>border-left-style

  2902       <tr>

  2903        <td>border-short-style

  2905       <tr>

  2906        <td>border-top

  2908       <tr>

  2909        <td>border-right

  2911       <tr>

  2912        <td>border-bottom

  2914       <tr>

  2915        <td>border-left

  2917       <tr>

  2918        <td>border

  2920      <tbody>

  2921       <tr>

  2922        <td rowspan=2><a

  2923         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  2924         properties</a>

  2926        <td>counter-reset

  2928       <tr>

  2929        <td>counter-increment

  2931      <tbody>

  2932       <tr>

  2933        <td colspan=2><a

  2934         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2936      <tbody>

  2937       <tr>

  2938        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font

  2939         properties</a>

  2941        <td>font-family

  2943       <tr>

  2944        <td>font-size

  2946       <tr>

  2947        <td>font-style

  2949       <tr>

  2950        <td>font-variant

  2952       <tr>

  2953        <td>font-weight

  2955       <tr>

  2956        <td>font

  2958      <tbody>

  2959       <tr>

  2960        <td rowspan=3><a

  2961         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  2962         <a

  2963         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  2965        <td>height

  2967       <tr>

  2968        <td>min-height

  2970       <tr>

  2971        <td>max-height

  2973      <tbody>

  2974       <tr>

  2975        <td colspan=2><a

  2976         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2978      <tbody>

  2979       <tr>

  2980        <td rowspan=5><a

  2981         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  2982         properties</a>

  2984        <td>margin-top

  2986       <tr>

  2987        <td>margin-right

  2989       <tr>

  2990        <td>margin-bottom

  2992       <tr>

  2993        <td>margin-left

  2995       <tr>

  2996        <td>margin

  2998      <tbody>

  2999       <tr>

  3000        <td rowspan=5><a

  3001         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  3002         properties</a>

  3004        <td>outline-width

  3006       <tr>

  3007        <td>outline-style

  3009       <tr>

  3010        <td>outline-color

  3012       <tr>

  3013        <td>outline

  3015      <tbody>

  3016       <tr>

  3017        <td rowspan=5><a

  3018         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  3019         properties</a>

  3021        <td>padding-top

  3023       <tr>

  3024        <td>padding-right

  3026       <tr>

  3027        <td>padding-bottom

  3029       <tr>

  3030        <td>padding-left

  3032       <tr>

  3033        <td>padding

  3035      <tbody>

  3036       <tr>

  3037        <td colspan=2><a

  3038         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  3040      <tbody>

  3041       <tr>

  3042        <td rowspan=8><a href="http://www.w3.org/TR/CSS21/text.html">text

  3043         properties</a>

  3045        <td>direction

  3047       <tr>

  3048        <td>letter-spacing

  3050       <tr>

  3051        <td>text-align

  3053       <tr>

  3054        <td>text-decoration

  3056       <tr>

  3057        <td>text-indent

  3059       <tr>

  3060        <td>text-transform

  3062       <tr>

  3063        <td>white-space

  3065       <tr>

  3066        <td>word-spacing

  3068      <tbody>

  3069       <tr>

  3070        <td colspan=2><a

  3071         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  3073      <tbody>

  3074       <tr>

  3075        <td rowspan=3><a

  3076         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  3077         <a

  3078         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  3080        <td>width

  3082       <tr>

  3083        <td>min-width

  3085       <tr>

  3086        <td>max-width

  3087     </table>

  3089     <p>Properties that apply to the page-margin boxes can also be set within

  3090      the page context: if inheritable or explicitly inherited (with the

  3091      <code>inherit</code> keyword in the margin context), they will inherit

  3092      to the page-margin boxes.

  3094     <h3 class=no-num id=properties-that-apply-within-the-margin->Properties

  3095      that apply within the margin contexts</h3>

  3097     <p>The following CSS 2.1 <a href="#CSS21"

  3098      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to

  3099      page-margin boxes. If a conforming user agents supports any of these

  3100      properties on block boxes, then it must also support that property for

  3101      page-margin boxes (except for <code>z-index</code>, which is optional

  3102      for page-margin boxes).

  3104     <table class=property-list>

  3105      <tbody>

  3106       <tr>

  3107        <td rowspan=2><a

  3108         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi

  3109         properties</a>

  3111        <td>direction

  3113       <tr>

  3114        <td>unicode-bidi

  3116      <tbody>

  3117       <tr>

  3118        <td rowspan=6><a

  3119         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  3120         properties</a>

  3122        <td>background-color

  3124       <tr>

  3125        <td>background-image

  3127       <tr>

  3128        <td>background-repeat

  3130       <tr>

  3131        <td>background-attachment

  3133       <tr>

  3134        <td>background-position

  3136       <tr>

  3137        <td>background

  3139      <tbody>

  3140       <tr>

  3141        <td rowspan=20><a

  3142         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  3143         properties</a>

  3145        <td>border-top-width

  3147       <tr>

  3148        <td>border-right-width

  3150       <tr>

  3151        <td>border-bottom-width

  3153       <tr>

  3154        <td>border-left-width

  3156       <tr>

  3157        <td>border-width

  3159       <tr>

  3160        <td>border-top-color

  3162       <tr>

  3163        <td>border-right-color

  3165       <tr>

  3166        <td>border-bottom-color

  3168       <tr>

  3169        <td>border-left-color

  3171       <tr>

  3172        <td>border-color

  3174       <tr>

  3175        <td>border-top-style

  3177       <tr>

  3178        <td>border-right-style

  3180       <tr>

  3181        <td>border-bottom-style

  3183       <tr>

  3184        <td>border-left-style

  3186       <tr>

  3187        <td>border-short-style

  3189       <tr>

  3190        <td>border-top

  3192       <tr>

  3193        <td>border-right

  3195       <tr>

  3196        <td>border-bottom

  3198       <tr>

  3199        <td>border-left

  3201       <tr>

  3202        <td>border

  3204      <tbody>

  3205       <tr>

  3206        <td rowspan=2><a

  3207         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  3208         properties</a>

  3210        <td>counter-reset

  3212       <tr>

  3213        <td>counter-increment

  3215      <tbody>

  3216       <tr>

  3217        <td colspan=2><a href="">content</a>

  3219      <tbody>

  3220       <tr>

  3221        <td colspan=2><a

  3222         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  3224      <tbody>

  3225       <tr>

  3226        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font

  3227         properties</a>

  3229        <td>font-family

  3231       <tr>

  3232        <td>font-size

  3234       <tr>

  3235        <td>font-style

  3237       <tr>

  3238        <td>font-variant

  3240       <tr>

  3241        <td>font-weight

  3243       <tr>

  3244        <td>font

  3246      <tbody>

  3247       <tr>

  3248        <td rowspan=3><a

  3249         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  3250         <a

  3251         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  3253        <td>height

  3255       <tr>

  3256        <td>min-height

  3258       <tr>

  3259        <td>max-height

  3261      <tbody>

  3262       <tr>

  3263        <td colspan=2><a

  3264         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  3266      <tbody>

  3267       <tr>

  3268        <td rowspan=5><a

  3269         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  3270         properties</a>

  3272        <td>margin-top

  3274       <tr>

  3275        <td>margin-right

  3277       <tr>

  3278        <td>margin-bottom

  3280       <tr>

  3281        <td>margin-left

  3283       <tr>

  3284        <td>margin

  3286      <tbody>

  3287       <tr>

  3288        <td rowspan=5><a

  3289         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  3290         properties</a>

  3292        <td>outline-width

  3294       <tr>

  3295        <td>outline-style

  3297       <tr>

  3298        <td>outline-color

  3300       <tr>

  3301        <td>outline

  3303      <tbody>

  3304       <tr>

  3305        <td colspan=2><a

  3306         href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  3308      <tbody>

  3309       <tr>

  3310        <td rowspan=5><a

  3311         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  3312         properties</a>

  3314        <td>padding-top

  3316       <tr>

  3317        <td>padding-right

  3319       <tr>

  3320        <td>padding-bottom

  3322       <tr>

  3323        <td>padding-left

  3325       <tr>

  3326        <td>padding

  3328      <tbody>

  3329       <tr>

  3330        <td colspan=2><a

  3331         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  3333      <tbody>

  3334       <tr>

  3335        <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text

  3336         properties</a>

  3338        <td>letter-spacing

  3340       <tr>

  3341        <td>text-align

  3343       <tr>

  3344        <td>text-decoration

  3346       <tr>

  3347        <td>text-indent

  3349       <tr>

  3350        <td>text-transform

  3352       <tr>

  3353        <td>white-space

  3355       <tr>

  3356        <td>word-spacing

  3358      <tbody>

  3359       <tr>

  3360        <td colspan=2><a

  3361         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  3363      <tbody>

  3364       <tr>

  3365        <td colspan=2><a

  3366         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  3368      <tbody>

  3369       <tr>

  3370        <td rowspan=3><a

  3371         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  3372         <a

  3373         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  3375        <td>width

  3377       <tr>

  3378        <td>min-width

  3380       <tr>

  3381        <td>max-width

  3383      <tbody>

  3384       <tr>

  3385        <td colspan=2><a

  3386         href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  3387     </table>

  3389     <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer

  3390      Possibilities</h2>

  3392     <p>Often, but not always, the page box has a one-to-one correspondence to

  3393      the physical surface onto which the document is ultimately rendered. The

  3394      CSS3 page model specifies formatting within the page box, but it is the

  3395      user agent's responsibility to transfer the page box to the sheet. Some

  3396      user agent transfer possibilities that are not addressed by CSS3

  3397      include:

  3399     <ul id=complex-usecases>

  3400      <li>Transferring one page box to one sheet (e.g. single-sided printing);

  3402      <li>Transferring two page boxes to the front and back surfaces of the

  3403       same sheet (e.g. double-sided printing);

  3405      <li>Transferring N (small) page boxes to one sheet (called "N-up");

  3407      <li>Transferring one (large) page box to N x M sheets (called "tiling");

  3409      <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group

  3410       of pages printed on a sheet, which, when folded and trimmed like a

  3411       book, appear in their proper sequence;

  3413      <li>Printing one document to multiple output trays;

  3415      <li>Generating files containing print instructions.

  3416     </ul>

  3418     <h2 class=no-num id=references>References</h2>

  3420     <h3 class=no-num id=normative-references>Normative References</h3>

  3421     <!--begin-normative--> <!-- Sorted by label -->

  3422     <dl class=bibliography>

  3423      <dt

  3424       style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3425       <!---->

  3427      <dt id=CSS21>[CSS21]

  3429      <dd>Bert Bos; et al. <a

  3430       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading

  3431       Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7

  3432       June 2011. W3C Recommendation. URL: <a

  3433       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  3434      </dd>

  3435      <!---->

  3437      <dt id=CSS3-BREAK>[CSS3-BREAK]

  3439      <dd>Rossen Atanassov; Elika J. Etemad. <a

  3440       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS

  3441       Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working

  3442       Draft. (Work in progress.) URL: <a

  3443       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>

  3444      </dd>

  3445      <!---->

  3447      <dt id=CSS3BG>[CSS3BG]

  3449      <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a

  3450       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS

  3451       Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C

  3452       Candidate Recommendation. (Work in progress.) URL: <a

  3453       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>

  3454      </dd>

  3455      <!---->

  3457      <dt id=MEDIAQ>[MEDIAQ]

  3459      <dd>Florian Rivoal. <a

  3460       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media

  3461       Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a

  3462       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>

  3463      </dd>

  3464      <!---->

  3466      <dt id=PWGMSN>[PWGMSN]

  3468      <dd>Ron Bergman; Tom Hastings. <a

  3469       href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media

  3470       Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer

  3471       Working Group 5101.1-2002. URL: <a

  3472       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>

  3473      </dd>

  3474      <!---->

  3476      <dt id=RFC2119>[RFC2119]

  3478      <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  3479       words for use in RFCs to Indicate Requirement Levels.</cite></a>

  3480       Internet RFC 2119. URL: <a

  3481       href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  3482      </dd>

  3483      <!---->

  3484     </dl>

  3485     <!--end-normative-->

  3486     <h3 class=no-num id=informative-references>Informative References</h3>

  3487     <!--begin-informative--> <!-- Sorted by label -->

  3488     <dl class=bibliography>

  3489      <dt

  3490       style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3491       <!---->

  3493      <dt id=CSS3-IMAGES>[CSS3-IMAGES]

  3495      <dd>Elika J. Etemad; Tab Atkins Jr. <a

  3496       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS

  3497       Image Values and Replaced Content Module Level 3.</cite></a> 17 April

  3498       2012. W3C Candidate Recommendation. (Work in progress.) URL: <a

  3499       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>

  3500      </dd>

  3501      <!---->

  3503      <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]

  3505      <dd>Elika J. Etemad; Koji Ishii. <a

  3506       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS

  3507       Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working

  3508       Draft. (Work in progress.) URL: <a

  3509       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>

  3510      </dd>

  3511      <!---->

  3513      <dt id=JLREQ>[JLREQ]

  3515      <dd>Yasuhiro Anan; et al. <a

  3516       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements

  3517       for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group

  3518       Note. URL: <a

  3519       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>

  3520      </dd>

  3521      <!---->

  3522     </dl>

  3523     <!--end-informative--></div>

  3524   </div>

Mercurial > drafts / file revision

css3-page/Overview.html@9d57f98d774f

css3-page/Overview.html