drafts: css3-page/Overview.html@0dff950123a2

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

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

     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-21 name=dcterms.issued>

    13   <meta content="Melinda Grant" name=dcterms.creator>

    14   <meta content="Håkon Wium Lie" name=dcterms.creator>

    15   <meta content="Elika J. Etemad" name=dcterms.creator>

    16   <meta content="Simon Sapin" name=dcterms.creator>

    17   <meta content=W3C name=dcterms.publisher>

    18   <meta content="http://dev.w3.org/csswg/css3-page/" name=dcterms.identifier>

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

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

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

    22    type="text/css">

    23   <style type="text/css">

    24   .keyword { font-weight:bold }

    25   .equation { padding: 2% }

    26   table.equation {text-align:center}

    27   td, th { vertical-align: top }

    28   pre { font-size: 1em; }

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

    31   #margin-values td,

    32   #margin-values th

    33   {

    34                 padding: 0.2em;

    35                 border: thin solid black;

    36   }

    38   .property-list

    39   {

    40                 border: 1px solid black;

    41                 padding: .2em;

    42                 margin-top: 2em;

    43   }

    45   .property-list td

    46   {

    47                 border: 1px solid black;

    48                 padding: .1em;

    49   }

    51   .editorial

    52   {

    53                 display: block;

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

    55       font-size: 80%;

    56       margin-left: .5in;

    57       margin-right: 1in ;

    58       padding: 0.125in;

    59       background: #FFFFDD ;

    60   }

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

    63   .RFC2119

    64   {

    65                 text-transform: lowercase;

    66                 font-style: italic

    67   }

    69   em em.RFC2119

    70   {

    71                 text-transform: lowercase;

    72                 font-style: normal

    73   }

    75   table.page-sizes

    76   {

    77                 border: thin solid;

    78                 margin-top: 1.5em;

    79   }

    80   table.page-sizes td

    81   {

    82                 border: thin solid;

    83                 padding: .5em;

    84   }

    85   table.page-sizes th

    86   {

    87                 border: thin solid;

    88                 padding: .5em;

    89                 background: #ffffaa;

    90   }

    92 </style>

    94  <body>

    95   <div>

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

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

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

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

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

   104     <dl>

   105      <dt>This version:

   107      <dd><a

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

   109      <!-- <dd><a href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130221</a></dd> -->

   111      <dt>Latest version:

   113      <dd><a

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

   116      <dt>Previous version:

   118      <dd><a

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

   121      <dt>Editors:

   123      <dd>Melinda Grant, Hewlett-Packard

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

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

   129      <dd>Simon Sapin, Kozea

   130     </dl>

   131     <!--begin-copyright-->

   132     <p class=copyright><a

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

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

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

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

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

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

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

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

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

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

   143      <a

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

   145      and <a

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

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

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

   150    <hr title="Separator for header">

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

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

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

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

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

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

   159     orientation. Finally it extends generated content to enable page

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

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

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

   163    <!--begin-status-->

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

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

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

   167     other than as work in progress.

   169    <p>The (<a

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

   171     public mailing list <a

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   193    <!--end-status-->

   194    <p>This document contains the <abbr

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

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

   197     of 21 February 2013. The Last Call period ends on <span

   198     class=fudge>TBD</span>.

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

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

   202     now specified with more precision.

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

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

   206     this Last Call period.

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

   209    <!--begin-toc-->

   210    <ul class=toc>

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

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

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

   216      Terminology</a>

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

   219      Model</a>

   220      <ul class=toc>

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

   222        and Painting Order</a>

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

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

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

   228        Progression</a>

   229      </ul>

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

   232      Selectors and the Page Context</a>

   233      <ul class=toc>

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

   235        Rule</a>

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

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

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

   241        rule grammar</a>

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

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

   245      </ul>

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

   248      Boxes</a>

   249      <ul class=toc>

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

   251        for page-margin boxes</a>

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

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

   256       <li><a href="#margin-dimension"><span class=secno>6.3. </span>Computing

   257        Page-margin Box Dimensions</a>

   258        <ul class=toc>

   259         <li><a href="#margin-box-terms"><span class=secno>6.3.1.

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

   262         <li><a href="#variable-sizing"><span class=secno>6.3.2. </span>

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

   264          <ul class=toc>

   265           <li><a href="#variable-auto-margins"><span class=secno>6.3.2.1.

   266            </span>Margins</a>

   268           <li><a href="#variable-auto-sizing"><span class=secno>6.3.2.2.

   269            </span>Resolving ‘<code class=css>auto</code>’ widths</a>

   271           <li><a href="#variable-minmax"><span class=secno>6.3.2.3.

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

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

   275           <li><a href="#variable-position"><span class=secno>6.3.2.4.

   276            </span>Positioning</a>

   278           <li><a href="#variable-mapping"><span class=secno>6.3.2.5.

   279            </span>Boxes on other sides</a>

   280          </ul>

   282         <li><a href="#fixed-sizing"><span class=secno>6.3.3.

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

   284        </ul>

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

   287        box examples</a>

   288      </ul>

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

   291      Properties</a>

   292      <ul class=toc>

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

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

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

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

   298      </ul>

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

   301      <ul class=toc>

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

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

   304        <ul class=toc>

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

   306          examples:</a>

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

   309          </span>Media Queries</a>

   310        </ul>

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

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

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

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

   317      </ul>

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

   320      <ul class=toc>

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

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

   323      </ul>

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

   326      Properties</a>

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

   329      Properties</a>

   330      <ul class=toc>

   331       <li class=no-num><a

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

   333        within the page context</a>

   335       <li class=no-num><a

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

   337        within the margin contexts</a>

   338      </ul>

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

   341      Possibilities</a>

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

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

   346      <ul class=toc>

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

   348        References</a>

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

   351        References</a>

   352      </ul>

   353    </ul>

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

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

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

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

   359     <a

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

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

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

   363     describes how:

   365    <ul>

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

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

   369      padding are specified;

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

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

   374      and

   376     <li>orphans and widows can be controlled.

   377    </ul>

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

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

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

   382     height.

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

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

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

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

   388     one surface of similar size.

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

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

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

   393     explicitly.

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

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

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

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

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

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

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

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

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

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

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

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

   408     specification.

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

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

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

   414    <div class=example>

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

   416    </div>

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

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

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

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

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

   426     the page model:

   428    <dl>

   429     <dt id=page-sheet>Page sheet

   431     <dd><img

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   450      accomplished is device dependent within the constraints expressed in the

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

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

   453      page box</a>.

   455     <dt id=page-orientation>Page Orientation

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

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

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

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

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

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

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

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

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

   467     <dt id=portrait>Portrait Orientation

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

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

   471      to the long edge.

   473     <dt id=landscape>Landscape Orientation

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

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

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

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

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

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

   481      reading when choosing between landscape and reverse-landscape

   482      renderings.</span>

   484     <dt id=duplex-printing>Duplex Printing

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

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

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

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

   490      regardless of whether or not it actually is.

   492     <dt id=binding-edge>Binding Edge

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

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

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

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

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

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

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

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

   503     <dt id=facing-pages>Facing Pages

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

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

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

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

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

   510      are placed in their normal reading orientation.

   512     <dt id=left-page>Left Page

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

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

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

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

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

   520     <dt id=right-page>Right Page

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

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

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

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

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

   527      selector.

   528    </dl>

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

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

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

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

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

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

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

   539    <p>As with other CSS <a

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

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

   542     areas of a page box have special functions:

   544    <ul>

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

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

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

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

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

   550      rectangle that is the initial <a

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

   552      block</a> of the document.

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

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

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

   557      typically used to display running headers and footers.

   558    </ul>

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

   561     determined by properties <a

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

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

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

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

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

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

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

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

   570     element or other content.

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

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

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

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

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

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

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

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

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

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

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

   583     coincide with the margin edges of the page box.

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

   586     Painting Order</h3>

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

   589     following painting order (bottommost first):

   591    <ol>

   592     <li>page background

   594     <li>document canvas

   596     <li>page borders

   598     <li>document contents

   600     <li>page-margin boxes

   601    </ol>

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

   604     background: its <a

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

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

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

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

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

   610     supports <a href="#CSS3BG"

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

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

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

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

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

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

   617     the page's margin box).

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

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

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

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

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

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

   625     or page area as usual.

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

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

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

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

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

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

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

   634     always painted underneath everything else. Since the

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

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

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

   638     value.

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

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

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

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

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

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

   647     the page box</h3>

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

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

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

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

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

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

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

   656     the page box.

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

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

   660     user agents observe the following general principles concerning content

   661     outside the page box:

   663    <ul>

   664     <li>

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

   666       to "bleed".

   668     <li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   686       and <span class=property>‘<code

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

   689     <li>

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

   691       inconvenient locations just to avoid rendering them. Instead:

   693      <ul>

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

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

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

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

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

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

   701      </ul>

   703     <li>

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

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

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

   707    </ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   725     page, and vice versa.

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

   729    <ul>

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

   731      same as the inline progression.

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

   734      same as the block progression.

   735    </ul>

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

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

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

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

   741     must <a

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

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

   744     properties on the root element.

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

   747     page, authors can specify a <a

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

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

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

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

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

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

   755    <div class=example>

   756     <pre>

   757 html { break-before: always }

   758 </pre>

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

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

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

   764     <pre>

   765 html { break-before: left }

   766 </pre>

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

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

   770      regardless of the page progression.

   771    </div>

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

   774     Selectors and the Page Context</h2>

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

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

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

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

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

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

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

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

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

   786     href="#page-selector"><i title="page selector">page selectors</i></a> and

   787     a block of declarations (said to be in the <dfn id=page-context>page

   788     context</dfn>). An ‘<code class=css>@page</code>’ rule can also

   789     contain other at-rules, interleaved between declarations. The current

   790     level of this specification only allows <a href="#margin-at-rules">margin

   791     at-rules</a> inside ‘<code class=css>@page</code>’.

   793    <p>A <dfn id=page-selector>page selector</dfn> is either one or more page

   794     pseudo-classes, or a page name followed by zero or more page

   795     pseudo-classes. No whitespace is allowed between a page name and a page

   796     pseudo-class, or between two pseudo-classes. The page selector specifies

   797     for which pages the declarations apply. In CSS3, page selectors can

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

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

   801    <p>If a <a href="#page-selector"><i>page selector</i></a> has multiple

   802     pseudo-classes, only pages that match all of the pseudo-classes match the

   803     selector. Multiple selectors may be combined with a comma (which may be

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

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

   806     page selectors. If no page selector is given, then the ‘<code

   807     class=css>@page</code>’ rule applies to all pages.

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

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

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

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

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

   815     block are applied.

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

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

   819     :blank</h3>

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

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

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

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

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

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

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

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

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

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

   833     edges using these pseudo-classes:

   834     <pre>

   835 @page :left {

   836 margin-left: 3cm;

   837 margin-right: 4cm;

   838 }

   840 @page :right {

   841 margin-left: 4cm;

   842 margin-right: 3cm;

   843 }

   844 </pre>

   845    </div>

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

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

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

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

   851     nevertheless produce correctly formatted output).

   853    <div class=note>

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

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

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

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

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

   859      specification).</em>

   860    </div>

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

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

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

   865     of a document.

   867    <div class=example>

   868     <pre>

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

   871 @page :first {

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

   873 }

   874 </pre>

   875    </div>

   877    <p> <a href="#content-empty"><i title="content-empty page">Content-empty

   878     pages</i></a> that appear as a result of <a

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

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

   882    <div class=note>

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

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

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

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

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

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

   889    </div>

   891    <div class=example>

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

   893      elements.

   895     <pre>

   896 h1 { break-before: left }

   898 @page :blank {

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

   900 }

   901 </pre>

   902    </div>

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

   905     page pseudo-classes.

   907    <div class=example>

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

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

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

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

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

   913      remains:

   915     <pre>

   916 h1 { break-before: left }

   918 @page :blank {

   919   @top-center { content: none }

   920 }

   922 @page :right {

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

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

   925 }

   926 </pre>

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

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

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

   931      edition"</code>.

   932    </div>

   934    <div class=note>

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

   936      page pseudo-classes.</em>

   937    </div>

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

   940     grammar</h3>

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

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

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

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

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

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

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

   951     specializations of the ATKEYWORD lexical token:

   953    <pre class=lexical>

   954 PAGE_SYM              ::= "@page"

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

   956 TOPLEFT_SYM           ::= "@top-left"

   957 TOPCENTER_SYM         ::= "@top-center"

   958 TOPRIGHT_SYM          ::= "@top-right"

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

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

   961 BOTTOMLEFT_SYM        ::= "@bottom-left"

   962 BOTTOMCENTER_SYM      ::= "@bottom-center"

   963 BOTTOMRIGHT_SYM       ::= "@bottom-right"

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

   965 LEFTTOP_SYM           ::= "@left-top"

   966 LEFTMIDDLE_SYM        ::= "@left-middle"

   967 LEFTBOTTOM_SYM        ::= "@left-bottom"

   968 RIGHTTOP_SYM          ::= "@right-top"

   969 RIGHTMIDDLE_SYM       ::= "@right-middle"

   970 RIGHTBOTTOM_SYM       ::= "@right-bottom"

   972 <span

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

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

   975      ;

   977 <span

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

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

   980      '{' S* page_body '}' S*

   981      ;

   983 <span

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

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

   986      page_margin_box page_body

   987      ;

   989 <span

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

   991      pseudo_page+ | IDENT pseudo_page*

   992      ;

   993 <span

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

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

   996      ;

   998 <span

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

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

  1001      ;

  1003 <span

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

  1005      TOPLEFTCORNER_SYM |

  1006      TOPLEFT_SYM |

  1007      TOPCENTER_SYM |

  1008      TOPRIGHT_SYM |

  1009      TOPRIGHTCORNER_SYM |

  1010      BOTTOMLEFTCORNER_SYM |

  1011      BOTTOMLEFT_SYM |

  1012      BOTTOMCENTER_SYM |

  1013      BOTTOMRIGHT_SYM |

  1014      BOTTOMRIGHTCORNER_SYM |

  1015      LEFTTOP_SYM |

  1016      LEFTMIDDLE_SYM |

  1017      LEFTBOTTOM_SYM |

  1018      RIGHTTOP_SYM |

  1019      RIGHTMIDDLE_SYM |

  1020      RIGHTBOTTOM_SYM

  1021      ;

  1022 </pre>

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

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

  1026     treated as matching nothing.

  1028    <div class=example>

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

  1030      intentionally left blank)

  1032     <pre>

  1033 @page { ... }

  1034 @page :left { ... }

  1035 @page :right { ... }

  1036 @page LandscapeTable { ... }

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

  1038 @page:first { ... };

  1039 </pre>

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

  1042      blocks are intentionally left blank.

  1044     <pre>

  1045 @page {

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

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

  1048 }

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

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

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

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

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

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

  1056 </pre>

  1057    </div>

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

  1060     in the page context</h3>

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

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

  1064     declarations in <a

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

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

  1068     the computations defined in the <a

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

  1071    <p>Each comma-separated selectors in the same ‘<code

  1072     class=css>@page</code>’ rule match pages with its own specificity.

  1073     ‘<code class=css>@page</code>’ rules without selectors are considered

  1074     to have a single, empty selector (whose specificity is zero.)

  1076    <ul>

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

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

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

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

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

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

  1085    </ul>

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

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

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

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

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

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

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

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

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

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

  1099     allowed and do increase specificity.

  1101    <div class=example>

  1102     <p>Some page specificity calculation examples follow:

  1104     <pre>

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

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

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

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

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

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

  1111 </pre>

  1112    </div>

  1114    <div class=example>

  1115     <p>Consider the following usage example:

  1117     <pre>

  1118 @page {

  1119   margin-left: 3cm;

  1120 }

  1122 @page :left {

  1123   margin-left: 4cm;

  1124 }

  1125 </pre>

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

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

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

  1130    </div>

  1132    <div class=example>

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

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

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

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

  1138     <pre>

  1139 @page :first {

  1140   color: green;

  1142   @top-left {

  1143     content: "foo";

  1144     color: blue;

  1145   }

  1146   @top-right {

  1147     content: "bar";

  1148   }

  1149 }

  1151 @page { color: red;

  1152   @top-center {

  1153     content: "Page " counter(page);

  1154   }

  1155 }

  1156 </pre>

  1157    </div>

  1159    <div class=example>

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

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

  1163     <pre>

  1164 @page { margin: 25mm;}

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

  1166 </pre>

  1167    </div>

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

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

  1172     pseudo-elements, can contain generated content.

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

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

  1176     the page number or document title.

  1178    <div class=example>

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

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

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

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

  1183      One possible design of page headers for horizontally written documents

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

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

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

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

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

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

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

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

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

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

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

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

  1196      pages</a>.

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

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

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

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

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

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

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

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

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

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

  1208    </div>

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

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

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

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

  1214     below:

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

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

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

  1220     <thead>

  1221      <tr>

  1222       <th>Box

  1224       <th>Description

  1226       <th>Placement

  1228     <tbody>

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

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

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

  1233        margins of the page box

  1235       <td><img

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

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

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

  1240       <th>top-left

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

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

  1245       <td><img

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

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

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

  1250       <th>top-center

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

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

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

  1256       <td><img

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

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

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

  1261       <th>top-right

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

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

  1266       <td><img

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

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

  1270      <tr>

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

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

  1274        margins of the page box

  1276       <td><img

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

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

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

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

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

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

  1286       <td rowspan=3><img

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

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

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

  1291       <th>left-middle

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

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

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

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

  1298       <th>left-bottom

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

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

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

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

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

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

  1309       <td rowspan=3><img

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

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

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

  1314       <th>right-middle

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

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

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

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

  1321       <th>right-bottom

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

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

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

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

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

  1330        margins of the page box

  1332       <td><img

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

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

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

  1337       <th>bottom-left

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

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

  1342       <td><img

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

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

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

  1347       <th>bottom-center

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

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

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

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

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

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

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

  1358       <th>bottom-right

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

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

  1363       <td><img

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

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

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

  1368       <th>bottom-right-corner

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

  1371        right margins of the page box

  1373       <td><img

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

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

  1376    </table>

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

  1379     page-margin boxes</h3>

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

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

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

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

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

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

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

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

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

  1392    <div class=example>

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

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

  1395      ", on the right side:

  1397     <pre>

  1398 @page {

  1399   size: 8.5in 11in;

  1400   margin: 10%;

  1402   @top-left {

  1403     content: "Hamlet";

  1404   }

  1405   @top-right {

  1406     content: "Page " counter(page);

  1407   }

  1408 }

  1409 </pre>

  1410    </div>

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

  1413     page-margin boxes</h3>

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

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

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

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

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

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

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

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

  1424    <div class=example>

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

  1426      page except the bottom-left corner.

  1428     <pre>

  1429   @page {

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

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

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

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

  1434   }

  1435 </pre>

  1436    </div>

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

  1439     Page-margin Box Dimensions</h3>

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

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

  1443     for page-margin boxes.

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

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

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

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

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

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

  1451     if the dimensions resulting from the specified ‘<code

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

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

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

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

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

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

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

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

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

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

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

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

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

  1468    <dl>

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

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

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

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

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

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

  1476      boxes.

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

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

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

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

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

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

  1485      boxes.

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

  1489     <dd>The width of the <a

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

  1491      defined in <a href="#CSS21"

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

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

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

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

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

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

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

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

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

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

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

  1507    </dl>

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

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

  1511     page margins meeting at that corner.

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

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

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

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

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

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

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

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

  1521     page-margin boxes).

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

  1524     Variable Dimension Computation Rules</h4>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1552     and C as follows:

  1554    <ul>

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

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

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

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

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

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

  1562      <ol>

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

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

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

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

  1567        set its used outer width to:

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

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

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

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

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

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

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

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

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

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

  1580      </ol>

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

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

  1583    </ul>

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

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

  1587     follows:

  1589    <ol>

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

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

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

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

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

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

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

  1598      <pre>(<a

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

  1601      <pre>

  1602     </pre>

  1603    </ol>

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

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

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

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

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

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

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

  1613     boxes on the same side are considered together.

  1615    <p> More precisely:

  1617    <ol>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1635    </ol>

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

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

  1640     as follows:

  1642    <ul>

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

  1644      containing block

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

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

  1649      containing block.

  1650    </ul>

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

  1653     sides</h5>

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

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

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

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

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

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

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

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

  1664     class=property>left-bottom</code>’ boxes are established by the same

  1665     rules, with "width" replaced by "height", "left" by "top", "right" by

  1666     "bottom" and "center" by "middle".

  1668    <p>The used values for ‘<code class=property>right-top</code>’,

  1669     ‘<code class=property>right-middle</code>’ and ‘<code

  1670     class=property>right-bottom</code>’ page-margin boxes are established

  1671     by the same rules as for ‘<code class=property>left-top</code>’,

  1672     ‘<code class=property>left-middle</code>’ and ‘<code

  1673     class=property>left-bottom</code>’, respectively.

  1675    <h4 id=fixed-sizing><span class=secno>6.3.3. </span>Page-Margin Box Fixed

  1676     Dimension Computation Rules</h4>

  1678    <p>The rules below are used to calculate the used values of each ‘<code

  1679     class=property>top-left-corner</code>’, ‘<code

  1680     class=property>top-left</code>’, ‘<code

  1681     class=property>top-center</code>’, ‘<code

  1682     class=property>top-right</code>’, and ‘<code

  1683     class=property>top-right-corner</code>’ page-margin box's ‘<code

  1684     class=property>height</code>’, ‘<code

  1685     class=property>margin-top</code>’, and ‘<code

  1686     class=property>margin-bottom</code>’ properties:

  1688    <ol>

  1689     <li>The following constraint must hold among the used values of the

  1690      margin box's properties:

  1691      <p>‘<code class=property>margin-top</code>’ + ‘<code

  1692       class=property>border-top-width</code>’ + ‘<code

  1693       class=property>padding-top</code>’ + ‘<code

  1694       class=property>height</code>’ + ‘<code

  1695       class=property>padding-bottom</code>’ + ‘<code

  1696       class=property>border-bottom-width</code>’ + ‘<code

  1697       class=property>margin-bottom</code>’ = top page margin

  1699     <li>If ‘<code class=property>border-top-width</code>’ + ‘<code

  1700      class=property>padding-top</code>’ + ‘<code

  1701      class=property>height</code>’ (if it is not ‘<code

  1702      class=css>auto</code>’) + ‘<code

  1703      class=property>padding-bottom</code>’ + ‘<code

  1704      class=property>border-bottom-width</code>’, plus ‘<code

  1705      class=property>margin-top</code>’ and/or ‘<code

  1706      class=property>margin-bottom</code>’ if not ‘<code

  1707      class=css>auto</code>’, is larger than the height of the top page

  1708      margin, then any ‘<code class=css>auto</code>’ values for ‘<code

  1709      class=property>margin-top</code>’ or ‘<code

  1710      class=property>margin-bottom</code>’ are, for the following rules,

  1711      treated as zero.

  1713     <li>If at this point all of ‘<code class=property>height</code>’,

  1714      ‘<code class=property>margin-top</code>’, and ‘<code

  1715      class=property>margin-bottom</code>’ have a computed value other than

  1716      ‘<code class=css>auto</code>’, the values are said to be

  1717      "over-constrained". In this case, the specified value of ‘<code

  1718      class=property>margin-top</code>’ is treated as ‘<code

  1719      class=property>auto</code>’.

  1721     <li>If there is now exactly one value specified as ‘<code

  1722      class=property>auto</code>’, its used value follows from the equality.

  1724     <li>If ‘<code class=property>height</code>’ is set to ‘<code

  1725      class=property>auto</code>’, any other ‘<code

  1726      class=property>auto</code>’ values become ‘<code

  1727      class=css>0</code>’ and ‘<code class=property>height</code>’

  1728      follows from the resulting equality

  1730     <li>If both ‘<code class=property>margin-top</code>’ and ‘<code

  1731      class=property>margin-bottom</code>’ are ‘<code

  1732      class=property>auto</code>’, their used values are equal. This

  1733      vertically centers the page-margin box content within the top page

  1734      margin.

  1735    </ol>

  1737    <p>The same rules apply to the bottom page-margin boxes

  1738     (bottom-left-corner, bottom-left, bottom-center, bottom-right, and

  1739     bottom-right-corner), except that in the overconstrained case, the

  1740     ‘<code class=property>margin-bottom</code>’ is ignored rather than

  1741     the ‘<code class=property>margin-top</code>’.

  1743    <p>Analogous rules govern the properties for the left and right

  1744     page-margin boxes with respect to ‘<code class=property>width</code>’

  1745     (top-left-corner, left-top, left-middle, left-bottom, and

  1746     bottom-left-corner; top-right-corner, right-top, right-middle,

  1747     right-bottom, bottom-right-corner), with ‘<code

  1748     class=property>top</code>’ replaced by ‘<code

  1749     class=property>left</code>’, ‘<code class=property>bottom</code>’

  1750     replaced by ‘<code class=property>right</code>’, and ‘<code

  1751     class=property>height</code>’ replaced by ‘<code

  1752     class=property>width</code>’. In the overconstrained case for left

  1753     (right) page-margin boxes, the specified value of ‘<code

  1754     class=property>margin-left</code>’ (‘<code

  1755     class=property>margin-right</code>’) is ignored.

  1757    <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box

  1758     examples</h3>

  1760    <p>The following is a collection of examples of page-margin box usage.

  1762    <div class=example>

  1763     <p>Here is an example of a page with only a top-left header:

  1765     <pre>

  1766 @page {

  1767 @top-left { content: "Header in Left Cell (top-left)" }

  1768 }

  1769 </pre>

  1771     <p>Because there are no contents defined for the top-center or the

  1772      top-right page-margin boxes, the extent of the top-left page-margin box

  1773      is allowed to cross the center of the page box.

  1775     <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>

  1776    </div>

  1778    <div class=example>

  1779     <p>The following is an example of a page with a centered header:

  1781     <pre>

  1782 @page {

  1783 @top-center { content: "Header in Center Cell (top-center)" }

  1784 }

  1785 </pre>

  1787     <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>

  1788    </div>

  1790    <div class=example>

  1791     <p>The following is an example of a page with a single header in the

  1792      top-right page-margin box:

  1794     <pre>

  1795 @page {

  1796 @top-right { content: "Header in Right Cell (top-right)" }

  1797 }

  1798 </pre>

  1800     <p>Because the content of the center cell is empty, the extent of the

  1801      top-right page-margin box is allowed to cross the center of the page

  1802      box.

  1804     <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>

  1805    </div>

  1807    <div class=example>

  1808     <p>The following is an example of a page with a top-center and a top-left

  1809      header:

  1811     <pre>

  1812 @page {

  1813 @top-left { content: "Left Cell (top-left)" }

  1814 @top-center { content: "Header in Center Cell (top-center)" }

  1815 }

  1816 </pre>

  1818     <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>

  1819    </div>

  1821    <div class=example>

  1822     <p>The following is an example of a page with a top-center and a

  1823      top-right header:

  1825     <pre>

  1826 @page {

  1827 @top-center { content: "Header in Center Cell (top-center)" }

  1828 @top-right { content: "Right Cell (top-right)" }

  1829 }

  1830 </pre>

  1832     <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>

  1833    </div>

  1835    <div class=example>

  1836     <p>The following is an example of a page with top-left and top-right

  1837      headers:

  1839     <pre>

  1840 @page {

  1841 @top-left { content: "Header in top-left with approx. "

  1842                    "twice as many words as right cell." }

  1843 @top-right { content: "Right cell (top-right)" }

  1844 }

  1845 </pre>

  1847     <p>Because there are no center cell contents, the extent of the top-left

  1848      is allowed to cross the center of the page box.

  1850     <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>

  1851    </div>

  1853    <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>

  1855    <div>

  1856     <p>The following properties, when used in the <a

  1857      href="#page-context">page context</a>, apply to the page box:

  1859     <ul>

  1860      <li><a

  1861       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  1862       properties</a>

  1864      <li><a

  1865       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  1866       properties</a>

  1868      <li><a

  1869       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  1871      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  1872       properties</a>

  1874      <li><a

  1875       href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>

  1877      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  1879      <li><a

  1880       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  1882      <li><a

  1883       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  1884       properties</a>

  1886      <li><a

  1887       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  1888       properties</a>

  1890      <li><a

  1891       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  1892       properties</a>

  1894      <li><a

  1895       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  1897      <li><a href="#page-size">size</a>

  1899      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  1901      <li><a

  1902       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  1903     </ul>

  1905     <p>The following properties, when used in a <a

  1906      href="#margin-at-rule">margin context</a>, apply to page-margin boxes

  1907      and their content:

  1909     <ul>

  1910      <li><a

  1911       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  1912       properties</a>

  1914      <li><a

  1915       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  1916       properties</a>

  1918      <li><a

  1919       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  1921      <li><a

  1922       href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>

  1924      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  1925       properties</a>

  1927      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  1929      <li><a

  1930       href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  1931       <a

  1932       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  1934      <li><a

  1935       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  1937      <li><a

  1938       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  1939       properties</a>

  1941      <li><a

  1942       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  1943       properties</a>

  1945      <li><a

  1946       href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  1948      <li><a

  1949       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  1950       properties</a>

  1952      <li><a

  1953       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  1955      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  1957      <li><a

  1958       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  1960      <li><a

  1961       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  1963      <li><a

  1964       href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  1965       <a

  1966       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  1968      <li><a

  1969       href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  1970     </ul>

  1972     <p>A detailed list of properties that <em class=RFC2119>MUST</em> be

  1973      supported within page and margin contexts by a conforming implementation

  1974      can be found in <a href="#properties-list">Appendix A</a>.

  1976     <p>Other properties defined by <a href="#CSS21"

  1977      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these

  1978      contexts. Behavior for properties not included in CSS 2.1 and not listed

  1979      here or in Appendix A is undefined.

  1981     <p class=note> Note: The intent of leaving other properties undefined is

  1982      to allow the gradual addition of appropriate CSS3 properties as they

  1983      emerge, without having to update this specification with each addition.

  1985     <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with

  1986      elements in the document</a>, both the page context and the margin

  1987      context have a computed value for every property, even if that property

  1988      does not apply to the page or page-margin box.

  1990     <p>The normal rules for CSS properties apply with the following

  1991      exceptions:

  1993     <ul>

  1994      <li>page-margin boxes inherit from the page context. The page context

  1995       inherits from the root element. However, since the previous revision of

  1996       CSS Paged Media Level 3 did not specify this point, an implementation

  1997       that sets inherited properties in the page context to their initial

  1998       values (as for the root element) is also conformant to CSS Paged Media

  1999       Level 3. Note that this exception will be removed in Level 4.

  2001      <li>Values in units of ‘<code class=css>em</code>’ and ‘<code

  2002       class=css>ex</code>’ are interpreted relative to the font associated

  2003       with their context. When used on the ‘<code

  2004       class=property>font-size</code>’ property in the margin context, they

  2005       are relative to the font of the page context. When used on the ‘<code

  2006       class=property>font-size</code>’ property in the page context, they

  2007       are relative to the ‘<code class=property>font-size</code>’ of the

  2008       root element. However, since a previous revision of CSS Paged Media

  2009       Level 3 was ambiguous on this point, an implementation that treats

  2010       ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on

  2011       ‘<code class=property>font-size</code>’ as relative to the initial

  2012       value is also conformant to CSS Paged Media Level 3. Note that this

  2013       exception will be removed in Level 4.

  2015      <li>Percentage values on the margin and padding properties are relative

  2016       to the dimensions of the containing block. For right and left values,

  2017       percentages are relative to the width of the containing block; for top

  2018       and bottom values, percentages are relative to the height of the

  2019       containing block.

  2021      <li>The used values of ‘<code class=property>width</code>’ and

  2022       ‘<code class=property>height</code>’ have special computation rules

  2023       for page boxes and page-margin boxes; see <a href="#page-size">Page

  2024       Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box

  2025       Dimensions</a>.

  2027      <li>The page background is positioned and painted <a href="#painting">as

  2028       described above</a>.

  2030      <li>The rules for counter scoping are modified <a

  2031       href=page-based-counters>as described below</a>.

  2033      <li> As on the ‘<code class=css>::before</code>’ and ‘<code

  2034       class=css>::after</code>’ pseudo-elements, the ‘<code

  2035       class=css>normal</code>’ value of the ‘<code

  2036       class=property>content</code>’ property computes to ‘<code

  2037       class=css>none</code>’ on page-margin boxes.

  2039      <li>On page-margin boxes, the ‘<code

  2040       class=property>vertical-align</code>’ property behaves <a

  2041       href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as

  2042       specified for table cells</a>. It <em>always</em> performs alignment in

  2043       the vertical dimension, regardless of writing mode.

  2044     </ul>

  2046     <p>It is <em class=RFC2119>recommended</em> that user agents establish a

  2047      default page margin via the user agent stylesheet that includes any

  2048      non-printable area. It is further <em class=RFC2119>recommended</em>

  2049      that authors assume that the default page area will not include

  2050      unprintable regions.

  2052     <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based

  2053      counters</h3>

  2055     <p>Counters can be defined and controlled within an <span

  2056      class=css>‘<code class=css>@page</code>’</span> rule, and used as

  2057      content in page-margin boxes. This is useful for maintaining a page

  2058      count.

  2060     <p>A ‘<code class=property>counter-increment</code>’ within either a

  2061      page or margin context causes the counter to increment with the

  2062      generation of each page box.

  2064     <p>If a counter is reset or incremented within the page context, it is in

  2065      scope for all page-margin boxes and obscures all counters of the same

  2066      name within the document.

  2068     <p>If a counter is reset or incremented within a margin context, it is in

  2069      scope for that page-margin box and obscures any counters of the same

  2070      name in both the page context and the document.

  2072     <p>If a counter that has not been reset or incremented within the margin

  2073      context or the page context is used by counter() or counters() in the

  2074      margin context, then the resultant value is exactly as if the

  2075      page-margin box were an element within the document at the start of the

  2076      page, inside the deepest element in the normal flow that spans the page

  2077      break. Use of the counter in this way does not affect the calculation of

  2078      the counter's value.

  2080     <p> A counter named ‘<a href="#page"><code class=css>page</code></a>’

  2081      is automatically created and incremented by 1 on every page of the

  2082      document, unless the ‘<code class=property>counter-increment</code>’

  2083      property in the <a href="#page-context"><i>page context</i></a>

  2084      explicitly specifies a different increment for the ‘<a

  2085      href="#page"><code class=css>page</code></a>’ counter. The implied

  2086      ‘<a href="#page"><code class=css>page</code></a>’ counter is a real

  2087      counter, and can be directly affected using the ‘<code

  2088      class=property>counter-increment</code>’ and ‘<code

  2089      class=property>counter-reset</code>’ properties when named explicitly

  2090      in those properties. It can also be used in the ‘<code

  2091      class=css>counter()</code>’ and ‘<code

  2092      class=css>counters()</code>’ function forms.

  2094     <div class=example>

  2095      <p>The following rules result in the placement of the current page

  2096       number in the middle of the outside margin of each page.

  2098      <pre>

  2099 @page {

  2100   margin: 10%;

  2102   @top-center {

  2103     font-family: sans-serif;

  2104     font-weight: bold;

  2105     font-size: 2em;

  2106     content: counter(page);

  2107   }

  2108 }

  2109 </pre>

  2111      <p>Adding the following rule will make all pages even-numbered.

  2113      <pre>

  2114 @page {

  2115   counter-increment: page 2;

  2116 }

  2117 </pre>

  2118     </div>

  2120     <p>Additionally, a counter named ‘<a href="#page"><code

  2121      class=css>pages</code></a>’ is automatically created by the UA. Its

  2122      value is always the total number of pages in the document. (In

  2123      continuous media this is always 1.) The value of ‘<a

  2124      href="#page"><code class=css>pages</code></a>’ cannot be manipulated:

  2125      while ‘<code class=property>counter-reset</code>’ and ‘<code

  2126      class=property>counter-increment</code>’ statements that set it are

  2127      valid, they have no effect.

  2129     <p>In all other respects, page-associated counters behave as described in

  2130      <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a

  2131      href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a

  2132      href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.

  2134     <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin

  2135      boxes and default values</h3>

  2137     <p>Properties used within page or margin contexts take their initial

  2138      values from their respective property definitions; however, user agents

  2139      must behave as though the values in the following table were established

  2140      by rules in the UA default style sheet.

  2142     <table class=data id=margin-values

  2143      summary="definition of page-margin box default properties">

  2144      <caption>Table 2. Default values for Page-Margin Boxes</caption>

  2146      <thead>

  2147       <tr>

  2148        <th>Page-margin box

  2150        <th><span class=property>‘<code

  2151         class=property>text-align</code>’</span>

  2153        <th><span class=property>‘<code

  2154         class=property>vertical-align</code>’</span>

  2156      <tbody>

  2157       <tr>

  2158        <td><a href="#top-left-corner-box-def">top-left-corner</a>

  2160        <td>right

  2162        <td>middle

  2164       <tr>

  2165        <td><a href="#top-left-box-def">top-left</a>

  2167        <td>left

  2169        <td>middle

  2171       <tr>

  2172        <td><a href="#top-center-box-def">top-center</a>

  2174        <td>center

  2176        <td>middle

  2178       <tr>

  2179        <td><a href="#top-right-box-def">top-right</a>

  2181        <td>right

  2183        <td>middle

  2185       <tr>

  2186        <td><a href="#top-right-corner-box-def">top-right-corner</a>

  2188        <td>left

  2190        <td>middle

  2192       <tr>

  2193        <td><a href="#left-top-box-def">left-top</a>

  2195        <td>center

  2197        <td>top

  2199       <tr>

  2200        <td><a href="#left-middle-box-def">left-middle</a>

  2202        <td>center

  2204        <td>middle

  2206       <tr>

  2207        <td><a href="#left-bottom-box-def">left-bottom</a>

  2209        <td>center

  2211        <td>bottom

  2213       <tr>

  2214        <td><a href="#right-top-box-def">right-top</a>

  2216        <td>center

  2218        <td>top

  2220       <tr>

  2221        <td><a href="#right-middle-box-def">right-middle</a>

  2223        <td>center

  2225        <td>middle

  2227       <tr>

  2228        <td><a href="#right-bottom-box-def">right-bottom</a>

  2230        <td>center

  2232        <td>bottom

  2234       <tr>

  2235        <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>

  2237        <td>right

  2239        <td>middle

  2241       <tr>

  2242        <td><a href="#bottom-left-box-def">bottom-left</a>

  2244        <td>left

  2246        <td>middle

  2248       <tr>

  2249        <td><a href="#bottom-center-box-def">bottom-center</a>

  2251        <td>center

  2253        <td>middle

  2255       <tr>

  2256        <td><a href="#bottom-right-box-def">bottom-right</a>

  2258        <td>right

  2260        <td>middle

  2262       <tr>

  2263        <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>

  2265        <td>left

  2267        <td>middle

  2268     </table>

  2270     <div class=example>

  2271      <p>This example style sheet could be used to create a centered header

  2272       with the current chapter name:

  2274      <pre>body {counter-reset: chapter;}

  2275 div.chapter {counter-increment: chapter;}

  2276 @page {

  2277 margin: 10%;

  2278 @top-center { content: "Chapter" counter(chapter) }

  2279 }

  2280 </pre>

  2281     </div>

  2283     <h2 id=page-size><span class=secno>8. </span>Page Size</h2>

  2285     <p>People around the world use many different paper sizes. It is a goal

  2286      of this specification that web content should be adaptable to a range of

  2287      different sizes without having to write a specific style sheet for each

  2288      paper size.

  2290     <p>However, in some situations it is important that a certain page size

  2291      achieves a certain style. One way to achieve this goal is to utilize the

  2292      ‘<a href="#size"><code class=property>size</code></a>’ property,

  2293      which indicates that the document should preferentially be displayed on

  2294      a surface of a certain size; another method is to use Media Queries <a

  2295      href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow

  2296      different style sheets to be applied to different page sizes.

  2298     <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a

  2299      href="#size"><code class=property>size</code></a>’ property</h3>

  2301     <table class=propdef summary="definition of the size property">

  2302      <tbody>

  2303       <tr>

  2304        <th>Name:

  2306        <td><dfn id=size>size</dfn>

  2308       <tr>

  2309        <th>Value:

  2311        <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |

  2312         landscape] ]

  2314       <tr>

  2315        <th>Initial:

  2317        <td>auto

  2319       <tr>

  2320        <td><em>Applies to:</em>

  2322        <td>page context

  2324       <tr>

  2325        <th>Inherited:

  2327        <td>N/A

  2329       <tr>

  2330        <th>Percentages:

  2332        <td>N/A

  2334       <tr>

  2335        <th>Media:

  2337        <td>paged

  2339       <tr>

  2340        <td><em>Computed value:</em>

  2342        <td>specified value

  2343     </table>

  2345     <p>This property specifies the target size and orientation of the <a

  2346      href="#page-box">page box</a>’s containing block. In the general case,

  2347      where one page box is rendered onto one <a href="#page-sheet">page

  2348      sheet</a>, the ‘<a href="#size"><code

  2349      class=property>size</code></a>’ property also indicates the size of

  2350      the destination page sheet.

  2352     <p>The size of a page box can either be "absolute" (fixed size) or

  2353      "scalable" (i.e., fitting available sheet sizes). The first three values

  2354      in the table below can be used to create scalable page boxes. Other

  2355      values define a fixed-size page box, and thereby indicate the preferred

  2356      output media size. When possible, output should be rendered on the media

  2357      size indicated. If the specified size is not available, the rules for <a

  2358      href="#renderingpages">transposing a page box to a different size</a>

  2359      apply.

  2361     <p>If a <a href="#size"><code>size</code></a> property declaration is

  2362      qualified by a ‘<code class=css>width</code>’, ‘<code

  2363      class=css>height</code>’, ‘<code class=css>device-width</code>’,

  2364      ‘<code class=css>device-height</code>’, ‘<code

  2365      class=css>aspect-ratio</code>’, ‘<code

  2366      class=css>device-aspect-ratio</code>’ or ‘<code

  2367      class=css>orientation</code>’ media query <a href="#MEDIAQ"

  2368      rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on

  2369      the size of the paper), then the declaration must be <a

  2370      href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media

  2371      queries do not honor ‘<a href="#size"><code

  2372      class=property>size</code></a>’: they assume the paper size that would

  2373      be chosen if no @page rules were specified.

  2375     <p class=issue>It would be useful if media queries could respond at least

  2376      to sizes specified on an unqualified @page.

  2378     <div class=example>

  2379      <p>In the following example

  2381      <pre>

  2382   @page {

  2383     size: 4in 6in;

  2384   }

  2386   @media (max-width: 6in) {

  2387     @page {

  2388       size: letter;

  2389     }

  2390   }

  2391   </pre>

  2393      <p>The second <a href="#size"><code>size</code></a> declaration is

  2394       ignored, i.e. the specified value of the <a

  2395       href="#size"><code>size</code></a> property is <code>4in 6in</code>.

  2396     </div>

  2398     <table class=page-sizes>

  2399      <tbody>

  2400       <tr>

  2401        <th>Value

  2403        <th>Description

  2405       <tr>

  2406        <td>auto

  2408        <td>The page box will be set to a size and orientation chosen by the

  2409         UA. In the usual case, the page box size and orientation is chosen to

  2410         match the target media sheet.

  2412       <tr>

  2413        <td>landscape

  2415        <td>Specifies that the page's content be printed in landscape

  2416         orientation. The longer sides of the page box are horizontal. If a

  2417         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>

  2418         is not specified, the size of the page sheet is chosen by the UA.

  2420       <tr>

  2421        <td>portrait

  2423        <td>Specifies that the page's content be printed in portrait

  2424         orientation. The shorter sides of the page box are horizontal. If a

  2425         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>

  2426         is not specified, the size of the page sheet is chosen by the UA.

  2428       <tr>

  2429        <td>&lt;length&gt;

  2431        <td>The page box will be set to the given absolute dimension(s). If

  2432         only one length value is specified, it sets both the width and height

  2433         of the page box (i.e., the box is a square). If two length values are

  2434         specified, the first establishes the page box width, and the second

  2435         the page box height. Values in units of <span class=css>‘<code

  2436         class=property>em</code>’</span> and <span class=css>‘<code

  2437         class=property>ex</code>’</span> refer to the page context's font.

  2438         Negative lengths are illegal.

  2440       <tr>

  2441        <td>&lt;page-size&gt;

  2443        <td>A page size can be specified using one of the following media

  2444         names. This is the equivalent of specifying the <span

  2445         class=css>‘<code class=css>&lt;page-size&gt;</code>’</span> using

  2446         length values. The definition of the the media names comes from

  2447         <cite>Media Standardized Names</cite> <a href="#PWGMSN"

  2448         rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.

  2449         <dl>

  2450          <dt>A5

  2452          <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm

  2453           high.

  2455          <dt>A4

  2457          <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm

  2458           high.

  2460          <dt>A3

  2462          <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm

  2463           high.

  2465          <dt>B5

  2467          <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm

  2468           high.

  2470          <dt>B4

  2472          <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm

  2473           high.

  2475          <dt>letter

  2477          <dd>Equivalent to the size of North American letter media: 8.5

  2478           inches wide and 11 inches high

  2480          <dt>legal

  2482          <dd>Equivalent to the size of North American legal: 8.5 inches wide

  2483           by 14 inches high.

  2485          <dt>ledger

  2487          <dd>Equivalent to the size of North American ledger: 11 inches wide

  2488           by 17 inches high.

  2489         </dl>

  2490     </table>

  2492     <p>The ‘<code class=css>&lt;page-size&gt;</code>’ names can be used

  2493      in conjunction with ‘<code class=property>landscape</code>’ or

  2494      ‘<code class=property>portrait</code>’ to indicate both size and

  2495      orientation.

  2497     <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>

  2499     <div class=example>

  2500      <pre>

  2501 @page {

  2502 size: A4 landscape;

  2503 }

  2504 </pre>

  2506      <p>The above example sets the width of the page box to be 297mm and the

  2507       height to be 210mm. The page box in this example should be rendered on

  2508       a page sheet size of 210 mm by 297 mm.

  2509     </div>

  2511     <div class=example>

  2512      <p>In the following example, the outer edges of the page box will align

  2513       with the page. The percentage value on the <span

  2514       class=property>‘<code class=property>margin</code>’</span> property

  2515       is relative to the page size so if the page sheet dimensions are 210mm

  2516       x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are

  2517       no page borders or padding set in the UA default style sheet, the

  2518       resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).

  2520      <pre>

  2521 @page {

  2522 size: auto;/* auto is the initial value */

  2523 margin: 10%;

  2524 }

  2525 </pre>

  2526     </div>

  2528     <div class=example>

  2529      <pre>

  2530 @page {

  2531 size: 8.5in 11in;/* width height */

  2532 }

  2533 </pre>

  2535      <p>The above example sets the width of the page box to be 8.5 inches and

  2536       the height to be 11 inches. This indicates that the page sheet size

  2537       should be 8.5"x11" and the orientation ‘<code

  2538       class=property>portrait</code>’.

  2539     </div>

  2541     <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media

  2542      Queries</h4>

  2544     <p>This section is informative.

  2546     <p>By using Media Queries <a href="#MEDIAQ"

  2547      rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can

  2548      express different stylistic preferences for different page sizes.

  2549      Consider this example:

  2551     <div class=example style="font-size: 10pt;">

  2552      <pre>

  2553  /* style sheet for "A4" printing */

  2554  @media print and (width: 21cm) and (height: 29.7cm) {

  2555     @page {

  2556        margin: 3cm;

  2557     }

  2558  }

  2560  /* style sheet for "letter" printing */

  2561  @media print and (width: 8.5in) and (height: 11in) {

  2562     @page {

  2563         margin: 1in;

  2564     }

  2565  }

  2566 </pre>

  2567     </div>

  2569     <p>In the example above, "A4" sheets are given a "3cm" page margin, and

  2570      "letter" sheets are given a "1in" page margin.

  2572     <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes

  2573      that do not fit a page sheet</h3>

  2575     <p>If a page box does not match the target page sheet dimensions, the

  2576      user agent should do one of the following (in order of preference):

  2578     <ol>

  2579      <li>Render the page box at the indicated size on a larger page sheet.

  2581      <li>Rotate the page box 90° if this will make the page box fit the page

  2582       sheet.

  2584      <li>Scale the page box to fit the page sheet. (The aspect ratio of the

  2585       page box <em class=RFC2119>should</em> be preserved.)

  2587      <li>Reformat the page contents, including ‘<code

  2588       class=property>spilling</code>’ onto other page sheets.

  2590      <li>Clip overflowed content (least preferred).

  2591     </ol>

  2593     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user

  2594      before performing these operations.

  2596     <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the

  2597      page box on the sheet</h3>

  2599     <p>When the page box is smaller than the page size, the user agent <em

  2600      class=RFC2119>SHOULD</em> either:

  2602     <ul>

  2603      <li>center the page box on the sheet since this will align double-sided

  2604       pages and avoid accidental loss of information that is printed near the

  2605       edge of the sheet; or

  2607      <li>position the page box in the upper left corner of the page sheet, as

  2608       this may minimize media consumption.

  2609     </ul>

  2611     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in

  2612      this regard.</p>

  2613     <!-- "Page selector and page context" -->

  2614     <h2 id=page-breaks><span class=secno>9. </span> <a

  2615      id=pg-br-before-after></a> <a id=page-break-before></a> <a

  2616      id=page-break-after></a> <a id=page-break-inside></a> <a

  2617      id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a

  2618      id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a

  2619      id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>

  2620      <a id=best-pg-brk></a> Page Breaks</h2>

  2622     <p> The CSS Fragmentation Module <a href="#CSS3-BREAK"

  2623      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines

  2624      how and where CSS boxes can be <i>fragmented</i>, including across page

  2625      breaks. It defines a few properties that indicate where the user agent

  2626      <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,

  2627      and on what page (left or right) the subsequent content resumes. Each

  2628      page break ends layout in the current <a href="#page-box">page box</a>

  2629      and causes remaining pieces of the document tree to be laid out in a new

  2630      page box.

  2632     <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:

  2633      ‘<a href="#page"><code class=property>page</code></a>’</h3>

  2635     <table class=propdef summary="property definition">

  2636      <tbody>

  2637       <tr>

  2638        <th>Name:

  2640        <td><dfn id=page>page</dfn>

  2642       <tr>

  2643        <th>Value:

  2645        <td>auto | &lt;identifier&gt;

  2647       <tr>

  2648        <th>Initial:

  2650        <td>auto

  2652       <tr>

  2653        <th>Applies to:

  2655        <td>boxes that create <a

  2656         href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break

  2657         points

  2659       <tr>

  2660        <th>Inherited:

  2662        <td>no (but see prose)

  2664       <tr>

  2665        <th>Percentages:

  2667        <td>N/A

  2669       <tr>

  2670        <th>Media:

  2672        <td>paged

  2674       <tr>

  2675        <th>Computed value:

  2677        <td>specified value

  2678     </table>

  2680     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2681      property is used to specify a particular type of page (called a <dfn

  2682      id=named-page>named page</dfn>) on which an element <em

  2683      class=RFC2119>MUST</em> be displayed. If necessary, a <i>forced page

  2684      break</i> is introduced and a new page generated of the specified type.

  2686     <p> Page names are case-sensitive identifiers. However the ‘<code

  2687      class=css>auto</code>’ value, being a CSS keyword, is <a

  2688      href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII

  2689      case-insensitive</a>.

  2691     <div class=example>

  2692      <p>This example will put all tables on a right-hand side landscape page

  2693       (named "rotated"):

  2695      <pre>

  2696 @page rotated { size: landscape }

  2697 table { page: rotated; break-before: right }

  2698 </pre>

  2699     </div>

  2701     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2702      property works as follows:

  2704     <ol>

  2705      <li> First, any ‘<code class=css>auto</code>’ values are resolved

  2706       against non-‘<code class=css>auto</code>’ ancestors (as specified

  2707       below).

  2709      <li> Next, a <dfn id=preceding-page-value>preceding ‘<code

  2710       class=property>page</code>’ value</dfn> and <dfn

  2711       id=succeeding-page-value>succeeding ‘<code

  2712       class=property>page</code>’ value</dfn> is determined for each box as

  2713       the value (if any) propagated from its last or first child

  2714       (respectively), else the used value on the box itself. A child

  2715       propagates its own <a href="#preceding-page-value"><i

  2716       title="preceding page value">preceding</i></a> or <a

  2717       href="#succeeding-page-value"><i>succeeding ‘<code

  2718       class=property>page</code>’ value</i></a> if and only if the ‘<a

  2719       href="#page"><code class=property>page</code></a>’ property applies

  2720       to it.

  2722      <li> If for any two boxes meeting at a <a

  2723       href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break

  2724       point, the <a href="#preceding-page-value"><i>preceding ‘<code

  2725       class=property>page</code>’ value</i></a> and <a

  2726       href="#succeeding-page-value"><i>succeeding ‘<code

  2727       class=property>page</code>’ value</i></a> do not match, then a page

  2728       break is forced between the two boxes, and content after the break

  2729       resumes on a page box of the named type.

  2730     </ol>

  2732     <p> Essentially, the two ‘<a href="#page"><code

  2733      class=property>page</code></a>’ values compared are those from the

  2734      deepest boxes meeting at the class 1 break point, ignoring any subtrees

  2735      rooted by boxes to which the ‘<a href="#page"><code

  2736      class=property>page</code></a>’ property does not apply.

  2738     <p> The ‘<a href="#page"><code class=property>page</code></a>’

  2739      property does not inherit. However, if the ‘<a href="#page"><code

  2740      class=property>page</code></a>’ value on an element is ‘<code

  2741      class=css>auto</code>’, then its used value is the value specified on

  2742      its nearest ancestor with a non-auto value. When specified on the root

  2743      element, the effective name is the empty string.

  2744      <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->

  2746     <p> Because a previous version of this specification indicated that the

  2747      ‘<a href="#page"><code class=property>page</code></a>’ property is

  2748      inherited, an implementation that inherits the ‘<a href="#page"><code

  2749      class=property>page</code></a>’ property and treats ‘<code

  2750      class=css>auto</code>’ as always naming the empty string remains

  2751      conformant to CSS3 Paged Media. Therefore authors should not explicitly

  2752      specify the ‘<code class=css>auto</code>’ value on a descendant of

  2753      an element with a non-‘<code class=css>auto</code>’ value, as the

  2754      resulting behavior will be unpredictable.

  2756     <p>See <a href="#CSS3-BREAK"

  2757      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> for additional

  2758      details on page breaks.

  2760     <div class=example>

  2761      <p>In this example, the two tables are rendered on landscape pages

  2762       (indeed, on the same page, if they fit). The page type "narrow" is used

  2763       for the &lt;p&gt; after the second table, as the page properties for

  2764       the table element are no longer in effect:

  2766      <pre>

  2767 @page narrow { size: 9cm 18cm }

  2768 @page rotated { size: landscape }

  2769 div { page: narrow }

  2770 table { page: rotated }

  2771 </pre>

  2772      with this document:

  2773      <pre>

  2774 &lt;div&gt;

  2775 &lt;table&gt;...&lt;/table&gt;

  2776 &lt;table&gt;...&lt;/table&gt;

  2777 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;

  2778 &lt;/div&gt;

  2779 </pre>

  2780     </div>

  2782     <div class=example>

  2783      <p>In Japanese documents, sometimes different parts of a single document

  2784       will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"

  2785       rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a

  2786       href="#page"><code class=property>page</code></a>’ property, together

  2787       with ‘<code class=css>@page</code>’ rules specifying different page

  2788       widths, can accomodate this type of layout:

  2790      <pre>

  2791 &lt;!DOCTYPE html>

  2792 &lt;html lang="ja">

  2793   &lt;style>

  2794     html   { writing-mode: vertical-rl;

  2795              line-height: 1.6; }

  2796     .main  { page: main;

  2797              columns: 2; column-gap: 1rem; }

  2798     .index { page: index;

  2799              columns: 3; column-gap: 1rem; }

  2800     @page       { margin: auto;    /* center kihon hanmen on page */

  2801                   width:  40rem; } /* 1.6 × 25 lines        */

  2802     @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */

  2803     @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */

  2804   &lt;/style>

  2805   &lt;section class="main"> ... &lt;/section>

  2806   &lt;section class="index"> ... &lt;/section>

  2807 &lt;/html>

  2808 </pre>

  2809     </div>

  2811     <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>

  2813     <p class=note>This section has been moved to <a href="#CSS3-IMAGES"

  2814      rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.

  2816     <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1

  2817      Properties</h2>

  2819     <h3 class=no-num id=properties-that-apply-within-the-page-co>Properties

  2820      that apply within the page context</h3>

  2822     <p>The following CSS 2.1 <a href="#CSS21"

  2823      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to the

  2824      page box. If a conforming user agent supports any of these properties on

  2825      block boxes, then it must also support that property for the page box.

  2827     <table class=property-list>

  2828      <tbody>

  2829       <tr>

  2830        <td rowspan=2><a

  2831         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi

  2832         properties</a>

  2834        <td>direction

  2836      <tbody>

  2837       <tr>

  2838        <td rowspan=6><a

  2839         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  2840         properties</a>

  2842        <td>background-color

  2844       <tr>

  2845        <td>background-image

  2847       <tr>

  2848        <td>background-repeat

  2850       <tr>

  2851        <td>background-attachment

  2853       <tr>

  2854        <td>background-position

  2856       <tr>

  2857        <td>background

  2859      <tbody>

  2860       <tr>

  2861        <td rowspan=20><a

  2862         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  2863         properties</a>

  2865        <td>border-top-width

  2867       <tr>

  2868        <td>border-right-width

  2870       <tr>

  2871        <td>border-bottom-width

  2873       <tr>

  2874        <td>border-left-width

  2876       <tr>

  2877        <td>border-width

  2879       <tr>

  2880        <td>border-top-color

  2882       <tr>

  2883        <td>border-right-color

  2885       <tr>

  2886        <td>border-bottom-color

  2888       <tr>

  2889        <td>border-left-color

  2891       <tr>

  2892        <td>border-color

  2894       <tr>

  2895        <td>border-top-style

  2897       <tr>

  2898        <td>border-right-style

  2900       <tr>

  2901        <td>border-bottom-style

  2903       <tr>

  2904        <td>border-left-style

  2906       <tr>

  2907        <td>border-short-style

  2909       <tr>

  2910        <td>border-top

  2912       <tr>

  2913        <td>border-right

  2915       <tr>

  2916        <td>border-bottom

  2918       <tr>

  2919        <td>border-left

  2921       <tr>

  2922        <td>border

  2924      <tbody>

  2925       <tr>

  2926        <td rowspan=2><a

  2927         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  2928         properties</a>

  2930        <td>counter-reset

  2932       <tr>

  2933        <td>counter-increment

  2935      <tbody>

  2936       <tr>

  2937        <td colspan=2><a

  2938         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2940      <tbody>

  2941       <tr>

  2942        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font

  2943         properties</a>

  2945        <td>font-family

  2947       <tr>

  2948        <td>font-size

  2950       <tr>

  2951        <td>font-style

  2953       <tr>

  2954        <td>font-variant

  2956       <tr>

  2957        <td>font-weight

  2959       <tr>

  2960        <td>font

  2962      <tbody>

  2963       <tr>

  2964        <td rowspan=3><a

  2965         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  2966         <a

  2967         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  2969        <td>height

  2971       <tr>

  2972        <td>min-height

  2974       <tr>

  2975        <td>max-height

  2977      <tbody>

  2978       <tr>

  2979        <td colspan=2><a

  2980         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2982      <tbody>

  2983       <tr>

  2984        <td rowspan=5><a

  2985         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  2986         properties</a>

  2988        <td>margin-top

  2990       <tr>

  2991        <td>margin-right

  2993       <tr>

  2994        <td>margin-bottom

  2996       <tr>

  2997        <td>margin-left

  2999       <tr>

  3000        <td>margin

  3002      <tbody>

  3003       <tr>

  3004        <td rowspan=5><a

  3005         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  3006         properties</a>

  3008        <td>outline-width

  3010       <tr>

  3011        <td>outline-style

  3013       <tr>

  3014        <td>outline-color

  3016       <tr>

  3017        <td>outline

  3019      <tbody>

  3020       <tr>

  3021        <td rowspan=5><a

  3022         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  3023         properties</a>

  3025        <td>padding-top

  3027       <tr>

  3028        <td>padding-right

  3030       <tr>

  3031        <td>padding-bottom

  3033       <tr>

  3034        <td>padding-left

  3036       <tr>

  3037        <td>padding

  3039      <tbody>

  3040       <tr>

  3041        <td colspan=2><a

  3042         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  3044      <tbody>

  3045       <tr>

  3046        <td rowspan=8><a href="http://www.w3.org/TR/CSS21/text.html">text

  3047         properties</a>

  3049        <td>direction

  3051       <tr>

  3052        <td>letter-spacing

  3054       <tr>

  3055        <td>text-align

  3057       <tr>

  3058        <td>text-decoration

  3060       <tr>

  3061        <td>text-indent

  3063       <tr>

  3064        <td>text-transform

  3066       <tr>

  3067        <td>white-space

  3069       <tr>

  3070        <td>word-spacing

  3072      <tbody>

  3073       <tr>

  3074        <td colspan=2><a

  3075         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  3077      <tbody>

  3078       <tr>

  3079        <td rowspan=3><a

  3080         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  3081         <a

  3082         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  3084        <td>width

  3086       <tr>

  3087        <td>min-width

  3089       <tr>

  3090        <td>max-width

  3091     </table>

  3093     <p>Properties that apply to the page-margin boxes can also be set within

  3094      the page context: if inheritable or explicitly inherited (with the

  3095      <code>inherit</code> keyword in the margin context), they will inherit

  3096      to the page-margin boxes.

  3098     <h3 class=no-num id=properties-that-apply-within-the-margin->Properties

  3099      that apply within the margin contexts</h3>

  3101     <p>The following CSS 2.1 <a href="#CSS21"

  3102      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to

  3103      page-margin boxes. If a conforming user agents supports any of these

  3104      properties on block boxes, then it must also support that property for

  3105      page-margin boxes (except for <code>z-index</code>, which is optional

  3106      for page-margin boxes).

  3108     <table class=property-list>

  3109      <tbody>

  3110       <tr>

  3111        <td rowspan=2><a

  3112         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi

  3113         properties</a>

  3115        <td>direction

  3117       <tr>

  3118        <td>unicode-bidi

  3120      <tbody>

  3121       <tr>

  3122        <td rowspan=6><a

  3123         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background

  3124         properties</a>

  3126        <td>background-color

  3128       <tr>

  3129        <td>background-image

  3131       <tr>

  3132        <td>background-repeat

  3134       <tr>

  3135        <td>background-attachment

  3137       <tr>

  3138        <td>background-position

  3140       <tr>

  3141        <td>background

  3143      <tbody>

  3144       <tr>

  3145        <td rowspan=20><a

  3146         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border

  3147         properties</a>

  3149        <td>border-top-width

  3151       <tr>

  3152        <td>border-right-width

  3154       <tr>

  3155        <td>border-bottom-width

  3157       <tr>

  3158        <td>border-left-width

  3160       <tr>

  3161        <td>border-width

  3163       <tr>

  3164        <td>border-top-color

  3166       <tr>

  3167        <td>border-right-color

  3169       <tr>

  3170        <td>border-bottom-color

  3172       <tr>

  3173        <td>border-left-color

  3175       <tr>

  3176        <td>border-color

  3178       <tr>

  3179        <td>border-top-style

  3181       <tr>

  3182        <td>border-right-style

  3184       <tr>

  3185        <td>border-bottom-style

  3187       <tr>

  3188        <td>border-left-style

  3190       <tr>

  3191        <td>border-short-style

  3193       <tr>

  3194        <td>border-top

  3196       <tr>

  3197        <td>border-right

  3199       <tr>

  3200        <td>border-bottom

  3202       <tr>

  3203        <td>border-left

  3205       <tr>

  3206        <td>border

  3208      <tbody>

  3209       <tr>

  3210        <td rowspan=2><a

  3211         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter

  3212         properties</a>

  3214        <td>counter-reset

  3216       <tr>

  3217        <td>counter-increment

  3219      <tbody>

  3220       <tr>

  3221        <td colspan=2><a href="">content</a>

  3223      <tbody>

  3224       <tr>

  3225        <td colspan=2><a

  3226         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  3228      <tbody>

  3229       <tr>

  3230        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font

  3231         properties</a>

  3233        <td>font-family

  3235       <tr>

  3236        <td>font-size

  3238       <tr>

  3239        <td>font-style

  3241       <tr>

  3242        <td>font-variant

  3244       <tr>

  3245        <td>font-weight

  3247       <tr>

  3248        <td>font

  3250      <tbody>

  3251       <tr>

  3252        <td rowspan=3><a

  3253         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>

  3254         <a

  3255         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  3257        <td>height

  3259       <tr>

  3260        <td>min-height

  3262       <tr>

  3263        <td>max-height

  3265      <tbody>

  3266       <tr>

  3267        <td colspan=2><a

  3268         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  3270      <tbody>

  3271       <tr>

  3272        <td rowspan=5><a

  3273         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin

  3274         properties</a>

  3276        <td>margin-top

  3278       <tr>

  3279        <td>margin-right

  3281       <tr>

  3282        <td>margin-bottom

  3284       <tr>

  3285        <td>margin-left

  3287       <tr>

  3288        <td>margin

  3290      <tbody>

  3291       <tr>

  3292        <td rowspan=5><a

  3293         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline

  3294         properties</a>

  3296        <td>outline-width

  3298       <tr>

  3299        <td>outline-style

  3301       <tr>

  3302        <td>outline-color

  3304       <tr>

  3305        <td>outline

  3307      <tbody>

  3308       <tr>

  3309        <td colspan=2><a

  3310         href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  3312      <tbody>

  3313       <tr>

  3314        <td rowspan=5><a

  3315         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding

  3316         properties</a>

  3318        <td>padding-top

  3320       <tr>

  3321        <td>padding-right

  3323       <tr>

  3324        <td>padding-bottom

  3326       <tr>

  3327        <td>padding-left

  3329       <tr>

  3330        <td>padding

  3332      <tbody>

  3333       <tr>

  3334        <td colspan=2><a

  3335         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  3337      <tbody>

  3338       <tr>

  3339        <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text

  3340         properties</a>

  3342        <td>letter-spacing

  3344       <tr>

  3345        <td>text-align

  3347       <tr>

  3348        <td>text-decoration

  3350       <tr>

  3351        <td>text-indent

  3353       <tr>

  3354        <td>text-transform

  3356       <tr>

  3357        <td>white-space

  3359       <tr>

  3360        <td>word-spacing

  3362      <tbody>

  3363       <tr>

  3364        <td colspan=2><a

  3365         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  3367      <tbody>

  3368       <tr>

  3369        <td colspan=2><a

  3370         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  3372      <tbody>

  3373       <tr>

  3374        <td rowspan=3><a

  3375         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>

  3376         <a

  3377         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  3379        <td>width

  3381       <tr>

  3382        <td>min-width

  3384       <tr>

  3385        <td>max-width

  3387      <tbody>

  3388       <tr>

  3389        <td colspan=2><a

  3390         href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  3391     </table>

  3393     <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer

  3394      Possibilities</h2>

  3396     <p>Often, but not always, the page box has a one-to-one correspondence to

  3397      the physical surface onto which the document is ultimately rendered. The

  3398      CSS3 page model specifies formatting within the page box, but it is the

  3399      user agent's responsibility to transfer the page box to the sheet. Some

  3400      user agent transfer possibilities that are not addressed by CSS3

  3401      include:

  3403     <ul id=complex-usecases>

  3404      <li>Transferring one page box to one sheet (e.g. single-sided printing);

  3406      <li>Transferring two page boxes to the front and back surfaces of the

  3407       same sheet (e.g. double-sided printing);

  3409      <li>Transferring N (small) page boxes to one sheet (called "N-up");

  3411      <li>Transferring one (large) page box to N x M sheets (called "tiling");

  3413      <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group

  3414       of pages printed on a sheet, which, when folded and trimmed like a

  3415       book, appear in their proper sequence;

  3417      <li>Printing one document to multiple output trays;

  3419      <li>Generating files containing print instructions.

  3420     </ul>

  3422     <h2 class=no-num id=changes>Changes</h2>

  3424     <p> Changes since the <a

  3425      href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006

  3426      Working Draft</a> are:

  3428     <ul>

  3429      <li>The ‘<code class=css>:blank</code>’ <a

  3430       href="#pseudo-classes">pseudo-class</a> was imported from the <a

  3431       href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged

  3432       Media</a> module.

  3434      <li>‘<code class=css>@page</code>’ rules can now take multiple comma

  3435       separated selectors, each selector can have multiple pseudo-classes.

  3436       <div class=example>

  3437        <pre>@page :first, :blank { @bottom-center { content: none } }</pre>

  3439        <pre>@page :first:left { @bottom-left { content: none } }</pre>

  3440       </div>

  3442      <li>Margin boxes are renamed <a href="#margin-boxes">page-margin

  3443       boxes</a>, to avoid confusion with the margin area of each box.

  3445      <li>The <a href="#variable-sizing">Variable Dimension</a> layout rules

  3446       for page-margin boxes have been much simplified to not require

  3447       quadratic optimization.

  3449      <li>The relative <a href="#painting">painting order</a> of page-margin

  3450       boxes and page content has changed.

  3452      <li>The description of page breaks and definition of related properties

  3453       (except for the ‘<a href="#page"><code

  3454       class=property>page</code></a>’ property) have been moved to the CSS

  3455       Fragmentation Module. <a href="#CSS3-BREAK"

  3456       rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>

  3458      <li>The ‘<code class=property>fit</code>’ and ‘<code

  3459       class=property>fit-position</code>’ properties are renamed to

  3460       ‘<code class=property>object-fit</code>’ and ‘<code

  3461       class=property>object-position</code>’, redefined to enable

  3462       additional use cases, and moved to the CSS3 Image Values and Replaced

  3463       Content module. <a href="#CSS3-IMAGES"

  3464       rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>

  3466      <li>Many miscellaneous clarifications and editorial improvements have

  3467       been incorporated.

  3468     </ul>

  3470     <h2 class=no-num id=references>References</h2>

  3472     <h3 class=no-num id=normative-references>Normative References</h3>

  3473     <!--begin-normative--> <!-- Sorted by label -->

  3474     <dl class=bibliography>

  3475      <dt

  3476       style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3477       <!---->

  3479      <dt id=CSS21>[CSS21]

  3481      <dd>Bert Bos; et al. <a

  3482       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading

  3483       Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7

  3484       June 2011. W3C Recommendation. URL: <a

  3485       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  3486      </dd>

  3487      <!---->

  3489      <dt id=CSS3-BREAK>[CSS3-BREAK]

  3491      <dd>Rossen Atanassov; Elika J. Etemad. <a

  3492       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS

  3493       Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working

  3494       Draft. (Work in progress.) URL: <a

  3495       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>

  3496      </dd>

  3497      <!---->

  3499      <dt id=CSS3-SIZING>[CSS3-SIZING]

  3501      <dd>Tab Atkins Jr.; Elika J. Etemad. <a

  3502       href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS

  3503       Intrinsic &amp; Extrinsic Sizing Module Level 3.</cite></a> 27

  3504       September 2012. W3C Working Draft. (Work in progress.) URL: <a

  3505       href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>

  3506      </dd>

  3507      <!---->

  3509      <dt id=CSS3BG>[CSS3BG]

  3511      <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a

  3512       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS

  3513       Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C

  3514       Candidate Recommendation. (Work in progress.) URL: <a

  3515       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>

  3516      </dd>

  3517      <!---->

  3519      <dt id=MEDIAQ>[MEDIAQ]

  3521      <dd>Florian Rivoal. <a

  3522       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media

  3523       Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a

  3524       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>

  3525      </dd>

  3526      <!---->

  3528      <dt id=PWGMSN>[PWGMSN]

  3530      <dd>Ron Bergman; Tom Hastings. <a

  3531       href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media

  3532       Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer

  3533       Working Group 5101.1-2002. URL: <a

  3534       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>

  3535      </dd>

  3536      <!---->

  3538      <dt id=RFC2119>[RFC2119]

  3540      <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  3541       words for use in RFCs to Indicate Requirement Levels.</cite></a>

  3542       Internet RFC 2119. URL: <a

  3543       href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  3544      </dd>

  3545      <!---->

  3546     </dl>

  3547     <!--end-normative-->

  3548     <h3 class=no-num id=informative-references>Informative References</h3>

  3549     <!--begin-informative--> <!-- Sorted by label -->

  3550     <dl class=bibliography>

  3551      <dt

  3552       style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3553       <!---->

  3555      <dt id=CSS3-IMAGES>[CSS3-IMAGES]

  3557      <dd>Elika J. Etemad; Tab Atkins Jr. <a

  3558       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS

  3559       Image Values and Replaced Content Module Level 3.</cite></a> 17 April

  3560       2012. W3C Candidate Recommendation. (Work in progress.) URL: <a

  3561       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>

  3562      </dd>

  3563      <!---->

  3565      <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]

  3567      <dd>Elika J. Etemad; Koji Ishii. <a

  3568       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS

  3569       Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working

  3570       Draft. (Work in progress.) URL: <a

  3571       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>

  3572      </dd>

  3573      <!---->

  3575      <dt id=JLREQ>[JLREQ]

  3577      <dd>Yasuhiro Anan; et al. <a

  3578       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements

  3579       for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group

  3580       Note. URL: <a

  3581       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>

  3582      </dd>

  3583      <!---->

  3584     </dl>

  3585     <!--end-informative--></div>

  3586   </div>

Mercurial > drafts / file revision

css3-page/Overview.html@0dff950123a2

css3-page/Overview.html