drafts: css3-page/Overview.html@2fa0f76c392e (annotated)

css3-page/Overview.html@2fa0f76c392e (annotated)

css3-page/Overview.html

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

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

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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html lang=en>
  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
   <title> CSS Paged Media Module Level 3</title>
   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=dcterms.rights>
   <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
   <meta content=2013-02-11 name=dcterms.issued>
   <meta content="Melinda Grant" name=dcterms.creator>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Simon Sapin" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://www.w3.org/TR/2013/ED-css3-page-20130211/"
    name=dcterms.identifier>
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <link href="../default.css" rel=stylesheet type="text/css">
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    type="text/css">
   <style type="text/css">
   .keyword { font-weight:bold }
   .equation { padding: 2% }
   table.equation {text-align:center}
   td, th { vertical-align: top }
   pre { font-size: 1em; }
   #margin-values { border-collapse: collapse; }
   #margin-values td,
   #margin-values th
   {
                 padding: 0.2em;
                 border: thin solid black;
   }
   .property-list
   {
                 border: 1px solid black;
                 padding: .2em;
                 margin-top: 2em;
   }
   .property-list td
   {
                 border: 1px solid black;
                 padding: .1em;
   }
   .editorial
   {
                 display: block;
                 font-family: arial, helvetica, sans-serif;
       font-size: 80%;
       margin-left: .5in;
       margin-right: 1in ;
       padding: 0.125in;
       background: #FFFFDD ;
   }
   .editorial:after { content: "Ed."}
   .RFC2119
   {
                 text-transform: lowercase;
                 font-style: italic
   }
   em em.RFC2119
   {
                 text-transform: lowercase;
                 font-style: normal
   }
   table.page-sizes
   {
                 border: thin solid;
                 margin-top: 1.5em;
   }
   table.page-sizes td
   {
                 border: thin solid;
                 padding: .5em;
   }
   table.page-sizes th
   {
                 border: thin solid;
                 padding: .5em;
                 background: #ffffaa;
   }
 </style>
  <body>
   <div>
    <div class=head> <!--begin-logo-->
     <p><a href="http://www.w3.org/"><img alt=W3C height=48
      src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
     <h1>CSS Paged Media Module Level 3</h1>
     <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 11 February 2013</h2>
     <dl>
      <dt>This version:
      <dd><a
       href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
      <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-page-20130211/">http://www.w3.org/TR/2013/WD-css3-page-20130211</a></dd> -->
      <dt>Latest version:
      <dd><a
       href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a>
      <dt>Previous version:
      <dd><a
       href="http://www.w3.org/TR/2004/CR-css3-page-20040225/">http://www.w3.org/TR/2004/CR-css3-page-20040225/</a>
      <dt>Editors:
      <dd>Melinda Grant, Hewlett-Packard
      <dd>Håkon Wium Lie, Opera Software
      <dd>Elika J. Etemad, Hewlett-Packard
      <dd>Simon Sapin, Kozea
     </dl>
     <!--begin-copyright-->
     <p class=copyright><a
      href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
      rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
      title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
      href="http://www.csail.mit.edu/"><abbr
      title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
      href="http://www.ercim.eu/"><abbr
      title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
      <a href="http://www.keio.ac.jp/">Keio</a>, <a
      href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
      href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
      <a
      href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
      and <a
      href="http://www.w3.org/Consortium/Legal/copyright-documents">document
      use</a> rules apply.</p>
     <!--end-copyright--></div>
    <hr title="Separator for header">
    <h2 class="no-num no-toc" id=abstract>Abstract</h2>
    <p>This module describes the page model that partitions a flow into pages.
     It builds on the <a href="http://www.w3.org/TR/CSS21/box.html">Box model
     module</a> and introduces and defines the page model and paged media. It
     adds functionality for pagination, page margins, page size and
     orientation, headers and footers, widows and orphans, and image
     orientation. Finally it extends generated content to enable page
     numbering and running headers / footers.</p>
    <!-- "Status of this document" -->
    <h2 class="no-num no-toc" id=status>Status of this Document</h2>
    <!--begin-status-->
    <p>This is a public copy of the editors' draft. It is provided for
     discussion only and may change at any moment. Its publication here does
     not imply endorsement of its contents by W3C. Don't cite this document
     other than as work in progress.
    <p>The (<a
     href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
     public mailing list <a
     href="mailto:www-style@w3.org?Subject=%5Bcss3-page%5D%20PUT%20SUBJECT%20HERE">
     www-style@w3.org</a> (see <a
     href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
     discussion of this specification. When sending e-mail, please put the
     text “css3-page” in the subject, preferably like this:
     “[<!---->css3-page<!---->] <em>…summary of comment…</em>”
    <p>This document was produced by the <a href="/Style/CSS/members">CSS
     Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
    <p>This document was produced by a group operating under the <a
     href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
     Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
     rel=disclosure>public list of any patent disclosures</a> made in
     connection with the deliverables of the group; that page also includes
     instructions for disclosing a patent. An individual who has actual
     knowledge of a patent which the individual believes contains <a
     href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
     Claim(s)</a> must disclose the information in accordance with <a
     href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of
     the W3C Patent Policy</a>.</p>
    <!--end-status-->
    <p>This document contains the <abbr
     title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
     Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
     of 11 February 2013. The Last Call period ends on <span
     class=fudge>TBD</span>.
    <p>Relative to the previous Last Call Working Draft, this version has
     dropped the formerly named ‘<code class=property>fit</code>’ and
     ‘<code class=property>fit-position</code>’ properties; they are
     renamed to ‘<code class=property>object-fit</code>’ and ‘<code
     class=property>object-position</code>’, redefined to enable additional
     use cases, and moved to the <a
     href="http://www.w3.org/TR/css3-images/">CSS3 Image Values and Replaced
     Content module</a>. The page-page-margin box sizing algorithm has been
     reworded to be a bit simpler, and many miscellaneous clarifications and
     editorial improvements have been incorporated.
    <p>Features at-risk (may be removed if they lack implementor interest):
    <ul>
     <li>comma-separated page selectors
    </ul>
    <p>Expected next revision to this document is another LCWD, due to the
     substantive changes to page-margin box sizing and other areas that are
     now specified with more precision.
    <p>The <a href="lc2_issues.htm">Disposition of Comments</a> document
     contains the current issues list and responses to input received during
     this Last Call period.
    <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
    <!--begin-toc-->
    <ul class=toc>
     <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
     <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>
     <li><a href="#page-terms"><span class=secno>3. </span>Page
      Terminology</a>
     <li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page
      Model</a>
      <ul class=toc>
       <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
        and Painting Order</a>
       <li><a href="#content-outside-box"><span class=secno>4.2.
        </span>Content outside the page box</a>
       <li><a href="#progression"><span class=secno>4.3. </span>Page
        Progression</a>
      </ul>
     <li><a href="#page-selector-and-context"><span class=secno>5. </span>Page
      Selectors and the Page Context</a>
      <ul class=toc>
       <li><a href="#at-page-rule"><span class=secno>5.1. </span>The @page
        Rule</a>
       <li><a href="#pseudo-classes"><span class=secno>5.2. </span> Page
        pseudo-classes: :left, :right, :first, and :blank </a>
       <li><a href="#syntax-page-selector"><span class=secno>5.3. </span>@page
        rule grammar</a>
       <li><a href="#cascading-and-page-context"><span class=secno>5.4.
        </span>Cascading in the page context</a>
      </ul>
     <li><a href="#margin-boxes"><span class=secno>6. </span>Page-Margin
      Boxes</a>
      <ul class=toc>
       <li><a href="#margin-at-rules"><span class=secno>6.1. </span>At-rules
        for page-margin boxes</a>
       <li><a href="#populating-margin-boxes"><span class=secno>6.2.
        </span>Populating page-margin boxes</a>
       <li><a href="#margin-box-dimensions"><span class=secno>6.3.
        </span>Computing Page-margin Box Dimensions</a>
        <ul class=toc>
         <li><a href="#max-margin-dimension"><span class=secno>6.3.1.
          </span>Page-Margin Box Layout Terminology</a>
         <li><a href="#margin-dimension"><span class=secno>6.3.2.
          </span>Page-Margin Box Variable Dimension Computation Rules</a>
          <ul class=toc>
           <li><a href="#marginbox-variabledim-margins"><span
            class=secno>6.3.2.1. </span>Margins</a>
           <li><a href="#marginbox-variabledim-with"><span
            class=secno>6.3.2.2. </span>Resolving ‘<code
            class=css>auto</code>’ widths</a>
           <li><a href="#marginbox-variabledim-minmax"><span
            class=secno>6.3.2.3. </span>Handling ‘<code
            class=property>min-width</code>’ and ‘<code
            class=property>max-width</code>’</a>
           <li><a href="#marginbox-variabledim-positioning"><span
            class=secno>6.3.2.4. </span>Positioning</a>
           <li><a href="#marginbox-variabledim-others"><span
            class=secno>6.3.2.5. </span>Boxes on other sides</a>
          </ul>
         <li><a href="#margin-constraints"><span class=secno>6.3.3.
          </span>Page-Margin Box Fixed Dimension Computation Rules</a>
        </ul>
       <li><a href="#margin-box-ex"><span class=secno>6.4. </span>Page-margin
        box examples</a>
      </ul>
     <li><a href="#page-properties"><span class=secno>7. </span>Page
      Properties</a>
      <ul class=toc>
       <li><a href="#page-based-counters"><span class=secno>7.1.
        </span>Page-based counters</a>
       <li><a href="#margin-text-alignment"><span class=secno>7.2.
        </span>Page-margin boxes and default values</a>
      </ul>
     <li><a href="#page-size"><span class=secno>8. </span>Page Size</a>
      <ul class=toc>
       <li><a href="#page-size-prop"><span class=secno>8.1. </span>Page size:
        the ‘<code class=property>size</code>’ property</a>
        <ul class=toc>
         <li><a href="#some-examples"><span class=secno>8.1.1. </span>Some
          examples:</a>
         <li><a href="#page-size-media-query"><span class=secno>8.1.2.
          </span>Media Queries</a>
        </ul>
       <li><a href="#renderingpages"><span class=secno>8.2. </span>Rendering
        page boxes that do not fit a page sheet</a>
       <li><a href="#positioning-page-box"><span class=secno>8.3.
        </span>Positioning the page box on the sheet</a>
      </ul>
     <li><a href="#page-breaks"><span class=secno>9. </span> Page Breaks </a>
      <ul class=toc>
       <li><a href="#using-named-pages"><span class=secno>9.1. </span>Using
        named pages: ‘<code class=property>page</code>’</a>
      </ul>
     <li><a href="#image-properties"><span class=secno>10. </span>Image
      Properties</a>
     <li class=no-num><a href="#properties-list">Appendix A: Applicable CSS2.1
      Properties</a>
      <ul class=toc>
       <li class=no-num><a
        href="#properties-that-apply-within-the-page-co">Properties that apply
        within the page context</a>
       <li class=no-num><a
        href="#properties-that-apply-within-the-margin-">Properties that apply
        within the margin contexts</a>
      </ul>
     <li class=no-num><a href="#transfer-possibilities">Appendix B: Transfer
      Possibilities</a>
     <li class=no-num><a href="#references">References</a>
      <ul class=toc>
       <li class=no-num><a href="#normative-references">Normative
        References</a>
       <li class=no-num><a href="#informative-references">Informative
        References</a>
      </ul>
    </ul>
    <!--end-toc--> <!-- "Introduction" -->
    <h2 id=intro><span class=secno>1. </span>Introduction</h2>
    <p>Paged media (e.g., paper, transparencies, photo album pages, pages
     displayed on computer screens as printed output simulations) differ from
     <a
     href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous
     media</a> in that the content of the document is split into one or more
     discrete static display surfaces. To handle pages, CSS3 Paged Media
     describes how:
    <ul>
     <li><a href="#page-breaks">page breaks</a> are created and avoided;
     <li>the page properties such as size, orientation, margins, border, and
      padding are specified;
     <li>headers and footers are established within the page margins;
     <li>content such as page counters are placed in the headers and footers;
      and
     <li>orphans and widows can be controlled.
    </ul>
    <p>This module defines a <a href="#page-model">page model</a> that
     specifies how a document is formatted within a rectangular area, called
     the <a href="#page-box-page-rule">page box</a>, that has finite width and
     height.
    <p>Although CSS3 does not specify how user agents transfer page boxes to
     sheets, it does include certain mechanisms for telling user agents about
     the intended page sheet <a href="#page-size">size and orientation</a>. In
     the general case, CSS3 assumes that one page box will be transferred to
     one surface of similar size.
    <p>All properties defined in this specification also accept the <a
     href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
     keyword as their value, but for readability it has not been listed
     explicitly.
    <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
    <p>All of the text in this specification is normative except sections
     explicitly marked as non-normative, examples, and notes. The keywords
     "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em
     class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em
     class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em
     class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>",
     "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when
     used in this document are to be interpreted as described in <cite>RFC
 </cite> <a href="#RFC2119"
     rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>. However, for
     readability, these words do not appear in all uppercase letters in this
     specification.
    <p>Examples in this specification are introduced with the words "for
     example" or are set apart from the normative text with
     <code>class="example"</code>, like this:
    <div class=example>
     <p>This is an example of an informative example.
    </div>
    <p>Informative notes begin with the word "Note" and are set apart from the
     normative text with <code>class="note"</code>, like this:
    <p class=note>Note, this is an informative note.
    <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
    <p>The following terminology and accompanying diagrams help to describe
     the page model:
    <dl>
     <dt id=page-sheet>Page sheet
     <dd><img
      alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"
      height=148 src=PageSheet.png style="float: right;" width=194>The page
      sheet is one surface of the physical medium. The illustration to the
      right shows a representation of the upper-left corner of a page sheet.
     <dt id=printable-area>Printable and non-printable areas
     <dd>The non-printable area is the area of a page sheet that a physical
      device such as a printer is not capable of marking reliably, usually due
      to the printer's paper handling mechanism. This value is printer
      dependent and is usually a small region along each edge of the page
      sheet. The printable area is the area of page sheet that a printer
      <em>is</em> capable of marking reliably. The size of the printable area
      is the size of the page sheet reduced by the size of the non-printable
      area. A user agent may not know the dimensions of this area for a
      particular printing device; but when its dimensions are known, user
      agents <em class=RFC2119>MAY</em> adjust the formatting of the document
      so that content falls within the printable area. How this adjustment is
      accomplished is device dependent within the constraints expressed in the
      sections <a href="#renderingpages">Rendering page boxes that do not fit
      a page sheet</a> and <a href="#content-outside-box">Content outside the
      page box</a>.
     <dt id=page-orientation>Page Orientation
     <dd>The page orientation is defined by comparing the length of the edges
      of a <a href="#page-box">page box</a>. The page box is a rectangle with
      two perpendicular edges called the long edge and the short edge. The
      length of the long edge is always greater than or equal to the length of
      the short edge. When the page box is square, the two edges are of the
      same length and either can be used as the long edge with the other being
      the short edge. This specification defines page orientations of ‘<code
      class=property>portrait</code>’ and ‘<code
      class=property>landscape</code>’.
     <dt id=portrait>Portrait Orientation
     <dd>A portrait page's height is greater than or equal to its width.
      Horizontal elements are parallel to the short edge and vertical elements
      to the long edge.
     <dt id=landscape>Landscape Orientation
     <dd>A landscape page's width is greater than or equal to its height.
      Horizontal elements are parallel to the long edge and vertical elements
      to the short edge. <span class=note>Note that CSS3 makes no distinction
      between landscape and reverse-landscape orientations. However, future
      versions of CSS may do so. UAs should consider, when formatting for
      duplexed printing, the binding edge, page progression, and ease of
      reading when choosing between landscape and reverse-landscape
      renderings.</span>
     <dt id=duplex-printing>Duplex Printing
     <dd>Duplex printing prints one page box per side of a page sheet and uses
      both sides of the page sheet. This module provides no ability to specify
      whether a document is duplex printed, but the concept of left and right
      pages is based on the assumption that the document is duplex printed,
      regardless of whether or not it actually is.
     <dt id=binding-edge>Binding Edge
     <dd>The binding edge is the edge of the page box that is toward the
      binding if the material is bound. The binding edge often has a larger
      margin than the opposite edge to provide for the space used by the
      binding. The binding edge can be any of the four edges. However, page
      sheets are customarily bound so that the binding edge of page boxes with
      portrait orientation is vertical. This module provides no method to
      specify the binding edge. In duplex printing, the binding edge is on
      opposite sides of the page box for the left and right pages.
     <dt id=facing-pages>Facing Pages
     <dd>Facing pages are two sequential pages such that when the document is
      duplex printed they are on separate sheets of paper. Typically, the
      earlier page will be the back side of one sheet and the later page will
      be the front side of another. They are usually laid out so that the
      binding edges of facing pages are vertical and adjacent when the pages
      are placed in their normal reading orientation.
     <dt id=left-page>Left Page
     <dd>A page that would be on the left if it is part of a pair of facing
      pages as typically laid out. Page layouts for documents using a
      left-to-right page progression have the earlier of the facing pages on
      the left. Rules specific to the left page can be specified using the
      <span class=css>‘<code class=css>:left</code>’</span> page selector.
     <dt id=right-page>Right Page
     <dd>A page that would be on the right if it is part of a pair of facing
      pages as typically laid out. Page layouts for documents using a
      right-to-left page progression have the earlier of the facing pages on
      the right. Rules specific to the right page can be specified using the
      <span class=css>‘<code class=css>:right</code>’</span> page
      selector.
    </dl>
    <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>
    <p>In the paged media formatting model, the document is transferred into
     one or more page boxes. The <dfn id=page-box>page box</dfn> is a
     specialized CSS box that maps to a rectangular print media surface, such
     as a page of paper. It is roughly analogous to the <a
     href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
     <img alt="" height=266 src=PageBox.png style="float: right;" width=267>
    <p>As with other CSS <a
     href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box consists
     of margin, border, padding, and content areas. The content and margin
     areas of a page box have special functions:
    <ul>
     <li>The content area of a page box is called the <dfn id=page-area>page
      area</dfn>. The content of the document is flowed into one or more page
      boxes. The page area acts as a container for all the boxes generated by
      the root element and its descendants that are laid out within a given
      page box. The edges of the page area on the first page establish the
      rectangle that is the initial <a
      href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing
      block</a> of the document.
     <li>The margin area of a page box is divided into 16 <dfn
      id=page-margin-boxes>page-margin boxes</dfn>. Each page-margin box has
      its own margin, border, padding and content areas. Page-margin boxes are
      typically used to display running headers and footers.
    </ul>
    <p>The properties of a <a href="#page-box"><i>page box</i></a> are
     determined by properties <a
     href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a>
     within the <a href="#page-context"><i>page context</i></a>, which is the
     <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration
     block</a> of the <code>@page</code> rule. Similarly the properties of a
     <i>page-margin box</i> are determined by properties declared within its
     <a href="#margin-context"><i>margin context</i></a>. Declarations in the
     page context can affect the page box and/or inherit to the page-margin
     boxes, but they do not apply to or inherit into the document's root
     element or other content.
    <p>The <a href="#containing-block0"><i>containing block</i></a> of the
     page box is specified using the ‘<a href="#size"><code
     class=property>size</code></a>’ property in the <a
     href="#page-context"><i>page context</i></a>. The width and horizontal
     margins of the page box are then calculated exactly as for a <a
     href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
     block element in normal flow</a>. <a href="#CSS21"
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The height and vertical
     margins of the page box are calculated analogously (instead of using the
     block height formulas). In both cases if the values are over-constrained,
     instead of ignoring any margins, the containing block is resized to
     coincide with the margin edges of the page box.
    <h3 id=painting><span class=secno>4.1. </span> Page Backgrounds and
     Painting Order</h3>
    <p>When drawing a page of content, the page layers are painted in the
     following painting order (bottommost first):
    <ol>
     <li>page background
     <li>document canvas
     <li>page borders
     <li>document contents
     <li>page-margin boxes
    </ol>
    <p>In the page model, the page background behaves similar to the root
     background: its <a
     href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background
     painting area</i></a> is the entire page box, including its margins. Page
     backgrounds are anchored within the page box's padding area by default
     (and honor ‘<code class=property>background-origin</code>’ if the UA
     supports <a href="#CSS3BG"
     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code
     class=property>background-attachment</code>’ is ‘<code
     class=css>fixed</code>’ then the image is positioned relative to the
     page box including its margins (i.e. the <a
     href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background
     positioning area</i></a>, like the <i>background painting area</i>, is
     the page's margin box).
    <p>The document canvas background is drawn as the page box's background:
     by default its <i>background painting area</i> covers the page box's
     border box, and for UAs that support <a href="#CSS3BG"
     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, follows the ‘<code
     class=property>background-clip</code>’ value specified on the root
     element. It remains, however, positioned with respect to the root element
     or page area as usual.
    <p>The UA may support the <code>z-index</code> property for page-margin
     boxes. With respect to the page-margin boxes, the document canvas, page
     borders, and all of the document contents are treated as a single element
     with a <code>z-index</code> value of ‘<code class=css>0</code>’: the
     page-margin boxes never interleave with parts of the document content or
     between the content and the canvas. They may only paint in front of the
     document content or behind the document canvas. The page background is
     always painted underneath everything else. Since the
     <code>position</code> property does not apply to page-margin boxes,
     <code>z-index</code> always affects page-margin boxes as if they were
     positioned elements regardless of the <code>position</code> property's
     value.
    <p>The default painting order, or <a
     href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree
     order", of page-margin boxes with respect to each other is not specified.
     However, the page-margin boxes are defined to come after the page box and
     its contents. <span class=issue>Suggestions here are welcome.</span>
    <h3 id=content-outside-box><span class=secno>4.2. </span>Content outside
     the page box</h3>
    <p>When formatting content in the page model, some content may end up
     outside the page box. For example, an element whose ‘<code
     class=property>white-space</code>’ property has the value ‘<code
     class=property>pre</code>’ can generate a box that is wider than the
     page box. As another example, when boxes are positioned absolutely or
     relatively, they may end up in "inconvenient" locations. For example,
     images may be placed on the edge of the page box or 100,000 meters below
     the page box.
    <p>A specification for the exact formatting of such elements lies outside
     the scope of this document. However, it is recommended that authors and
     user agents observe the following general principles concerning content
     outside the page box:
    <ul>
     <li>
      <p>Content should be allowed slightly beyond the page box to allow pages
       to "bleed".
     <li>
      <p>User agents <em class=RFC2119>SHOULD</em> avoid generating a large
       number of content-empty pages to honor the positioning of elements
       (e.g., printing 100 blank pages is probably neither the author's nor
       the user's intent). A <dfn id=content-empty>Content-empty page</dfn> is
       a page box whose page area contains no printable content other than
       backgrounds and/or borders. A page box whose page area contains
       generated content, or content whose visibility is ‘<code
       class=property>hidden</code>’, or invisible content such as a
       zero-width space is not a content-empty page. On the other hand, a page
       containing only a background and/or borders and/or page-margin box
       content <em>is</em> a content-empty page.
      <p class=note>Note, however, that generating a small number of empty
       page boxes is sometimes necessary to honor the <span class=css>‘<code
       class=property>left</code>’</span> and <span class=css>‘<code
       class=property>right</code>’</span> values for <span
       class=property>‘<code
       class=property>page-break-before</code>’</span> and <span
       class=property>‘<code
       class=property>page-break-after</code>’</span>.
     <li>
      <p>Authors <em class=RFC2119>SHOULD NOT</em> position elements in
       inconvenient locations just to avoid rendering them. Instead:
      <ul>
       <li>To suppress box generation entirely, set the <span
        class=property>‘<code class=property>display</code>’</span>
        property to <span class=css>‘<code
        class=property>none</code>’</span>.
       <li>To make a box invisible, set the <span class=property>‘<code
        class=property>visibility</code>’</span> property.
      </ul>
     <li>
      <p>This specification does not define how boxes positioned outside the
       page box are handled. Possibilities include discarding them or creating
       page boxes for them at the end of the document.
    </ul>
    <h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>
    <p>CSS distinguishes between left pages and right pages on all documents,
     whether they are printed duplex or not. Each left page is followed by a
     right page and vice versa. Left and right pages can be styled differently
     with the <a href="#left-right-first"><code>:left</code> and
     <code>:right</code> pseudo-classes</a>.
    <p>Whether the first page of a document is a left page or a right page
     depends on the page progression of the document. The <dfn
     id=page-progression>page progression</dfn> is the direction in which the
     printed pages of a document would be sequenced when laid out
     side-to-side. For example, English and horizontally-set Japanese
     typically progress from left to right, whereas Arabic and vertically-set
     Japanese pages typically progress from right to left. In documents with a
     left-to-right page progression the first page of the document is a right
     page, and vice versa.
    <p>The page progression direction is determined as follows:
    <ul>
     <li>If text is laid out in horizontal lines, the page progression is the
      same as the inline progression.
     <li>If text is laid out in vertical lines, the page progression is the
      same as the block progression.
    </ul>
    <p>If the UA supports the ‘<code class=property>direction</code>’ and
     ‘<code class=property>writing-mode</code>’ properties from the CSS 3
     Writing Modes Module <a href="#CSS3-WRITING-MODES"
     rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>, it
     must <a
     href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
     whether the first page is a left or right page from the values of those
     properties on the root element.
    <p>To explicitly force a document to begin printing on a left or right
     page, authors can <a href="#page-break-before">insert a page break
     before</a> the first generated box. The UA must suppress the first
     (empty) page(s) in this case (and the <code>:first</code> selector
     applies to the first printed page).
    <div class=example>
     <pre>
 html { page-break-before: always }
 </pre>
     <p> For an HTML document with a left-to-right page progression, the above
      style rule will cause the first page of the document to print on a
      ‘<code class=css>:left</code>’ page
     <pre>
 html { page-break-before: left }
 </pre>
     <p> For an HTML document, the above style rule will cause the first page
      of the document to print on a ‘<code class=css>:left</code>’ page,
      regardless of the page progression.
    </div>
    <h2 id=page-selector-and-context><span class=secno>5. </span>Page
     Selectors and the Page Context</h2>
    <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>
    <p>Authors can specify various aspects of a page box, such as its
     dimensions, orientation, and margins, within an <span
     class=css>@page</span> rule. An <span class=css>@page</span> rule
     consists of the keyword <span class=css>‘<code
     class=css>@page</code>’</span>, an <em class=RFC2119>OPTIONAL</em>
     comma-separated list of <a href="#page-selector"><i
     title="page selector">page selectors</i></a> and a block of declarations
     (said to be in the <dfn id=page-context>page context</dfn>). <a
     href="#margin-at-rules">Margin at-rules</a> may be interleaved with the
     declarations in the page context.
    <p>A <dfn id=page-selector>page selector</dfn> is either a page
     pseudo-class, or a page name followed with no intervening whitespace by
     an <em class=RFC2119>OPTIONAL</em> page pseudo-class. The page selector
     specifies for which pages the declarations apply. In CSS3, page selectors
     can designate the first page of a document, all left pages, all right
     pages, or <a href="#using-named-pages">pages with specific names</a>.
     Multiple selectors may be combined with a comma (which may be preceded
     and/or followed by white space); in this case the ‘<code
     class=css>@page</code>’ rule applies to pages that match any of the
     page selectors. (Note: this feature is at-risk.) If no page selector is
     given, then the ‘<code class=css>@page</code>’ rule applies to all
     pages.
    <p>Properties declared within the page context apply to the page box.
    <p>If an error is encountered during the processing of a declaration block
     within a page or a margin context, the <a
     href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for
     handling parsing errors</a> apply; that is, valid declarations within the
     block are applied.
    <h3 id=pseudo-classes><span class=secno>5.2. </span> <a
     id=left-right-first></a> Page pseudo-classes: :left, :right, :first, and
     :blank</h3>
    <p> When printing double-sided documents, left and right pages are often
     formatted differently. This can be expressed through CSS pseudo-classes
     defined in the <a href="#page-context">page context</a>.
    <p> All pages are automatically classified by user agents as either left
     pages or right pages, based on <a href="#progression">page
     progression</a>. The <span class=css>‘<code
     class=css>:left</code>’</span> and <span class=css>‘<code
     class=css>:right</code>’</span> page pseudo-classes can be used to
     selectively apply rules to only the left or right pages, respectively.
    <div class=example> The following example creates left and right binding
     edges using these pseudo-classes:
     <pre>
 @page :left {
 margin-left: 3cm;
 margin-right: 4cm;
 }
 @page :right {
 margin-left: 4cm;
 margin-right: 3cm;
 }
 </pre>
    </div>
    <p>If different declarations have been given for left and right pages, the
     user agent <em class=RFC2119>MUST</em> honor these declarations even if
     the user agent does not transfer the page boxes to left and right sheets
     (i.e., a printer that only prints on one side of the medium must
     nevertheless produce correctly formatted output).
    <div class=note>
     <p> <em><strong>Note.</strong> Adding declarations to the <span
      class=css>‘<code class=css>:left</code>’</span> or <span
      class=css>‘<code class=css>:right</code>’</span> pseudo-class does
      not necessarily influence whether the document comes out of the printer
      double- or single-sided (which is outside the scope of this
      specification).</em>
    </div>
    <p>Authors can also specify style for the first page of a document with
     the <span class=css>‘<code class=css>:first</code>’</span>
     pseudo-class. Such style rules are applied only to the first printed page
     of a document.
    <div class=example>
     <pre>
 @page { margin: 2cm } /* All margins set to 2cm */
 @page :first {
 margin-top: 10cm /* Top margin on first page 10cm */
 }
 </pre>
    </div>
    <p> Blank pages that appear as a result of <a
     href="http://www.w3.org/TR/css3-break/#forced-breaks">forced page
     breaks</a> can be styled with the <code>:blank</code> pseudo-class.
    <div class=example>
     <p>In this example, forced page break may occur before <code>h1</code>
      elements.
     <pre>
 h1 { page-break-before: left }
 @page :blank {
   @top-center { content: "This page is intentionally left blank" }
 }
 </pre>
    </div>
    <p> A page matched by <code>:blank</code> can also be matched by other
     page pseudo-classes.
    <div class=example>
     <p>If headers have been specified on all right pages, a blank right page
      will be matched by both <code>:blank</code> and <code>:right</code>.
      Therefore, margin boxes set on right pages will have to be removed
      unless they are wanted on blank pages. Here is an example where the top
      center header is removed from blank pages, while the page number
      remains:
     <pre>
 h1 { page-break-before: left }
 @page :blank {
   @top-center { content: none }
 }
 @page :right {
   @top-center { content: "Preliminary edition" }
   @bottom-center { content: counter(page) }
 }
 </pre>
     <p>Due to the higher specificity of <code>:blank</code> over
      <code>:right</code>, the top center header is removed even if
      <code>content: none</code> comes before <code>content: "Preliminary
      edition"</code>.
    </div>
    <div class=note>
     <p><em><strong>Note.</strong> Future versions of CSS may include other
      page pseudo-classes.</em>
    </div>
    <h3 id=syntax-page-selector><span class=secno>5.3. </span>@page rule
     grammar</h3>
    <p>The syntax for the @page rule is a specialization of the generic
     at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to
     allow @page rules nested inside @media rules. User agents <em
     class=RFC2119>MUST</em> adhere to the following grammar:
    <p>See <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
     Section 4.1.1 and Appendix G for the expansion of missing productions:
    <p id=specializatons-of-ATKEYWORD> All new lexical tokens are
     specializations of the ATKEYWORD lexical token:
    <pre class=lexical>
 PAGE_SYM              ::= "@page"
 TOPLEFTCORNER_SYM     ::= "@top-left-corner"
 TOPLEFT_SYM           ::= "@top-left"
 TOPCENTER_SYM         ::= "@top-center"
 TOPRIGHT_SYM          ::= "@top-right"
 TOPRIGHTCORNER_SYM    ::= "@top-right-corner"
 BOTTOMLEFTCORNER_SYM  ::= "@bottom-left-corner"
 BOTTOMLEFT_SYM        ::= "@bottom-left"
 BOTTOMCENTER_SYM      ::= "@bottom-center"
 BOTTOMRIGHT_SYM       ::= "@bottom-right"
 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
 LEFTTOP_SYM           ::= "@left-top"
 LEFTMIDDLE_SYM        ::= "@left-middle"
 LEFTBOTTOM_SYM        ::= "@left-bottom"
 RIGHTTOP_SYM          ::= "@right-top"
 RIGHTMIDDLE_SYM       ::= "@right-middle"
 RIGHTBOTTOM_SYM       ::= "@right-bottom"
 <span
     id=syntax-prod-media>media</span> :
      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
      ;
 <a
     href="#page" id=syntax-prod-page>page</a> :
      PAGE_SYM S* [ page_selector S* [ ',' page_selector S* ]* ]?
      '{' S* [ [ declaration? ';' S* ] | page_margin_box ]* [ declaration ]? '}'  S*
      ;
 <span
     id=syntax-prod-page-selector>page_selector</span> :
      pseudo_page | IDENT pseudo_page?
      ;
 <span
     id=syntax-prod-pseudo-page>pseudo_page</span> :
      ':' [ "left" | "right" | "first" | "blank" ]
      ;
 <span
     id=syntax-prod-margin>page_margin_box</span> :
      margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
      ;
 <span
     id=syntax-prod-margin-sym>margin_sym</span> :
      TOPLEFTCORNER_SYM |
      TOPLEFT_SYM |
      TOPCENTER_SYM |
      TOPRIGHT_SYM |
      TOPRIGHTCORNER_SYM |
      BOTTOMLEFTCORNER_SYM |
      BOTTOMLEFT_SYM |
      BOTTOMCENTER_SYM |
      BOTTOMRIGHT_SYM |
      BOTTOMRIGHTCORNER_SYM |
      LEFTTOP_SYM |
      LEFTMIDDLE_SYM |
      LEFTBOTTOM_SYM |
      RIGHTTOP_SYM |
      RIGHTMIDDLE_SYM |
      RIGHTBOTTOM_SYM
      ;
 </pre>
    <p id=page-selector-syntax-restrict> The value ‘<code
     class=property>auto</code>’ is not a valid page name and must be
     treated as matching nothing.
    <div class=example>
     <p>The following are examples of page selectors (declaration block
      intentionally left blank)
     <pre>
 @page { ... }
 @page :left { ... }
 @page :right { ... }
 @page LandscapeTable { ... }
 @page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
 @page:first { ... };
 </pre>
     <p>The following are examples of page-margin boxes where the declaration
      blocks are intentionally left blank.
     <pre>
 @page {
  @top-left { ... /* document name */ }
  @bottom-center { ... /* page number */}
 }
 @page :left { @left-middle { ... /* page number in left margin */ }}
 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
              @bottom-right-corner { ... /* empty footer */ } }
 </pre>
    </div>
    <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading
     in the page context</h3>
    <p>Declarations in page and margin contexts <a
     href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like
     declarations in <a
     href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.
    <p>The specificity of page selectors is computed in a manner analogous to
     the computations defined in the <a
     href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:
    <ul>
     <li>if the page selector has a named page, f=1; else f=0
     <li>if the page selector has a ‘<code class=css>:first</code>’ or
      ‘<code class=css>:blank</code>’ pseudo-class, g=1; else g=0
     <li>if the page selector has a ‘<code class=css>:left</code>’ or
      ‘<code class=css>:right</code>’ pseudo-class, h=1; else h=0
    </ul>
    <p>Concatenating the three numbers f-g-h gives the specificity.
    <div class=example>
     <p>Some page specificity calculation examples follow:
     <pre>
       @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
       @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
       @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
       @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
       @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
       @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
 </pre>
    </div>
    <div class=example>
     <p>Consider the following usage example:
     <pre>
 @page {
 margin-left: 3cm;
 }
 @page :left {
 margin-left: 4cm;
 }
 </pre>
     <p>Due to the higher specificity of the pseudo-class selector, the left
      margin on left pages will be 4cm and all other pages (the right-facing
      pages) will have a left margin of 3cm.
    </div>
    <div class=example>
     <p>In this example, the higher specificity of the green rules wins over
      the red rule. Therefore the first page will have blue text in the
      top-left page-margin box and green text in the top-right page-margin
      box, while subsequent pages will have red text in the page-margin boxes.
     <pre>
 @page :first {
 color: green;
 @top-left {
   content: "foo";
   color: blue;
 }
 @top-right {
   content: "bar";
 }
 }
 @page { color: red;
 @top-center {
   content: "Page " counter(page);
   }
 }
 </pre>
    </div>
    <div class=example>
     <p>Page contexts cascade, so the following stylesheet would style pages
      with 25 millimeter margins and 14 point type in the page-margin boxes:
     <pre>
 @page { margin: 25mm;}
 @page { font-size: 14pt;}
 </pre>
    </div>
    <h2 id=margin-boxes><span class=secno>6. </span>Page-Margin Boxes</h2>
    <p>Page-margin boxes are boxes within the page margin that, like
     pseudo-elements, can contain generated content.
    <p>Page-margin boxes can be used to create page headers and footers, which
     are portions of the page set aside for supplementary information such as
     the page number or document title.
    <div class=example>
     <p>Typically, a <dfn id=page-header>page header</dfn> is located at the
      top of the page in documents with a predominately horizontal writing
      direction and on the side opposite the <a href="#binding-edge">binding
      edge</a> for documents with a predominately vertical writing direction.
      One possible design of page headers for horizontally written documents
      uses the <span class=css>‘<code
      class=property>top-left-corner</code>’</span>, <span
      class=css>‘<code class=property>top-left</code>’</span>, <span
      class=css>‘<code class=property>top-center</code>’</span>, <span
      class=css>‘<code class=property>top-right</code>’</span> and <span
      class=css>‘<code class=property>top-right-corner</code>’</span>
      page-margin boxes. Another design, for vertically written documents,
      could use the <span class=css>‘<code
      class=property>right-top</code>’</span>, <span class=css>‘<code
      class=property>right-middle</code>’</span>, and <span
      class=css>‘<code class=property>right-bottom</code>’</span>
      page-margin boxes for <a href="#right-page">right facing pages</a> and
      <span class=css>‘<code class=property>left-top</code>’</span>, <span
      class=css>‘<code class=property>left-middle</code>’</span>, and
      <span class=css>‘<code class=property>left-bottom</code>’</span> for
      <a href="#left-page">left facing pages</a>.
     <p>The <dfn id=page-footer>page footer</dfn> is typically at the opposite
      end of the page from the page header. For example, the design of a
      horizontally written document with a page header at the top of the page
      could use the <span class=css>‘<code
      class=property>bottom-left-corner</code>’</span>, <span
      class=css>‘<code class=property>bottom-left</code>’</span>, <span
      class=css>‘<code class=property>bottom-center</code>’</span>, <span
      class=css>‘<code class=property>bottom-right</code>’</span> and
      <span class=css>‘<code
      class=property>bottom-right-corner</code>’</span> page-margin boxes as
      the page footer. The design of a vertically written document could use
      the page-margin boxes of the binding edge of the page for the page
      footer.
    </div>
    <p>Page-margin boxes are positioned with respect to the page area and are
     independent of page orientation, for example the top page-margin boxes
     are above the page area in both portrait and landscape orientation. The
     various page-margin boxes are defined and illustrated in the diagram
     below:
    <table class=data id=margin-box-def
     summary="defintion of each of the page-margin boxes">
     <caption>Table 1 Page-Margin Box Definitions</caption>
     <thead>
      <tr>
       <th>Box
       <th>Description
       <th>Placement
     <tbody>
      <tr id=top-margin-boxes-def>
       <th id=top-left-corner-box-def>top-left-corner
       <td>a fixed-size box defined by the intersection of the top and left
        margins of the page box
       <td><img
        alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
        height=47 src=TopLeftCornerBox.png width=181>
      <tr id=top-left-box-def>
       <th>top-left
       <td>a variable-width box filling the top page margin between the
        top-left-corner and top-center page-margin boxes
       <td><img
        alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"
        height=47 src=TopLeftMarginBox.png width=181>
      <tr id=top-center-box-def>
       <th>top-center
       <td>a variable-width box centered horizontally between the page's left
        and right border edges and filling the page top margin between the
        top-left and top-right page-margin boxes
       <td><img
        alt="the top center box with margin, border, and padding, centered within the page's top margin"
        height=47 src=TopCenterMarginBox.png width=181>
      <tr id=top-right-box-def>
       <th>top-right
       <td>a variable-width box filling the top page margin between the
        top-center and top-right-corner page-margin boxes
       <td><img
        alt="the top right box with margin, border, and padding, nested within the page's top margin"
        height=47 src=TopRightMarginBox.png width=181>
      <tr>
       <th id=top-right-corner-box-def>top-right-corner
       <td>a fixed-size box defined by the intersection of the top and right
        margins of the page box
       <td><img
        alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
        height=47 src=TopRightCornerMarginBox.png width=181>
      <tr id=left-margin-boxes-def>
       <th id=left-top-box-def>left-top
       <td>a variable-height box filling the left page margin between the
        top-left-corner and left-middle page-margin boxes
       <td rowspan=3><img
        alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"
        height=226 src=LeftMarginBoxes.png width=181>
      <tr id=left-middle-box-def>
       <th>left-middle
       <td>a variable-height box centered vertically between the page's top
        and bottom border edges and filling the left page margin between the
        left-top and left-bottom page-margin boxes
      <tr id=left-bottom-box-def>
       <th>left-bottom
       <td>a variable-height box filling the left page margin between the
        left-middle and bottom-left-corner page-margin boxes
      <tr id=right-margin-boxes-def>
       <th id=right-top-box-def>right-top
       <td>a variable-height box filling the right page margin between the
        top-right-corner and right-middle page-margin boxes
       <td rowspan=3><img
        alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"
        height=226 src=RightMarginBoxes.png width=181>
      <tr id=right-middle-box-def>
       <th>right-middle
       <td>a variable-height box centered vertically between the page's top
        and bottom border edges and filling the right page margin between the
        right-top and right-bottom page-margin boxes
      <tr id=right-bottom-box-def>
       <th>right-bottom
       <td>a variable-height box filling the right page margin between the
        right-middle and bottom-right-corner page-margin boxes
      <tr id=bottom-margin-boxes-def>
       <th id=bottom-left-corner-box-def>bottom-left-corner
       <td>a fixed-size box defined by the intersection of the bottom and left
        margins of the page box
       <td><img
        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"
        height=48 src=BottomLeftCornerBox.png width=181>
      <tr id=bottom-left-box-def>
       <th>bottom-left
       <td>a variable-width box filling the bottom page margin between the
        bottom-left-corner and bottom-center page-margin boxes
       <td><img
        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"
        height=48 src=BottomLeftMarginBox.png width=181>
      <tr id=bottom-center-box-def>
       <th>bottom-center
       <td>a variable-width box centered horizontally between the page's left
        and right border edges and filling the bottom page margin between the
        bottom-left and bottom-right page-margin boxes
       <td style="vertical-align: middle;"><img
        alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
        height=48 src=BottomCenterMarginBox.png width=181>
      <tr id=bottom-right-box-def>
       <th>bottom-right
       <td>a variable-width box filling the bottom page margin between the
        bottom-center and bottom-right-corner page-margin boxes
       <td><img
        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"
        height=48 src=BottomRightMarginBox.png width=181>
      <tr id=bottom-right-corner-box-def>
       <th>bottom-right-corner
       <td>a fixed-size box defined by the intersection of the bottom and
        right margins of the page box
       <td><img
        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"
        height=48 src=BottomRightCornerBox.png width=181>
    </table>
    <h3 id=margin-at-rules><span class=secno>6.1. </span>At-rules for
     page-margin boxes</h3>
    <p>Page-margin boxes are created by <a href="#margin-at-rules">margin
     at-rules</a> inside the <a href="#page-context">page context</a>. These
     rules should come after any declarations in the page context as legacy
     clients may not handle declarations after margin at-rules correctly.
    <p>A <dfn id=margin-at-rule>margin at-rule</dfn> consists of an <a
     href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the
     page-margin box (e.g. <span class=css>‘<code
     class=css>@top-left</code>’</span>) and a block of declarations (said
     to be in the <dfn id=margin-context>margin context</dfn>).
    <div class=example>
     <p>The following style sheet establishes a page header containing the
      title ("Hamlet") on the left side and the page number, preceded by "Page
      ", on the right side:
     <pre>
 @page {
   size: 8.5in 11in;
   margin: 10%;
   @top-left {
     content: "Hamlet";
   }
   @top-right {
     content: "Page " counter(page);
   }
 }
 </pre>
    </div>
    <h3 id=populating-margin-boxes><span class=secno>6.2. </span>Populating
     page-margin boxes</h3>
    <p>As with the ‘<code class=css>:before</code>’ and ‘<code
     class=css>:after</code>’ pseudo-elements, a specified ‘<code
     class=property>content</code>’ of ‘<code class=css>normal</code>’
     on a page-margin box computes to ‘<code class=css>none</code>’, and
     the page-margin box is <dfn id=generated>generated</dfn> if and only if
     the computed value of its ‘<code class=property>content</code>’
     property is not ‘<code class=property>none</code>’. Otherwise it
     behaves as if it had ‘<code class=css>display: none</code>’.
    <div class=example>
     <p>The following style sheet creates a green box in each corner of the
      page except the bottom-left corner.
     <pre>
   @page {
     @top-left-corner { content: " "; border: solid green; }
     @top-right-corner { content: url(foo.png); border: solid green; }
     @bottom-right-corner { content: counter(page); border: solid green; }
     @bottom-left-corner { content: normal; border: solid green; }
   }
 </pre>
    </div>
    <h3 id=margin-box-dimensions><span class=secno>6.3. </span>Computing
     Page-margin Box Dimensions</h3>
    <p>The width and height of each page-margin box is determined by the rules
     below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6
     for page-margin boxes.
    <p>The rules for applying ‘<code class=property>min-height</code>’,
     ‘<code class=property>max-height</code>’, ‘<code
     class=property>min-width</code>’, and ‘<code
     class=property>max-width</code>’ <a href="#CSS21"
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do apply to page-margin
     boxes and may imply a recalculation of the width, height, and/or margins
     if the dimensions resulting from the specified ‘<code
     class=property>width</code>’ or ‘<code
     class=property>height</code>’ violate their constraints. If the UA does
     not support the ‘<code class=property>min-height</code>’ or ‘<code
     class=property>min-width</code>’ properties then it must behave as if
     ‘<code class=property>min-height</code>’ and ‘<code
     class=property>min-width</code>’ were always zero.
    <h4 id=max-margin-dimension><span class=secno>6.3.1. </span>Page-Margin
     Box Layout Terminology</h4>
    <p>In addition to the box model definitions in CSS2.1 <a href="#CSS21"
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, the following terms are
     defined for use in the subsequent page-margin box calculations:
    <dl>
     <dt id=MaxBoxWidth><dfn id=max-box-width>max box width</dfn>
     <dd>the sum of the page’s left border width, left padding, <a
      href="#page-box">page area</a> width, right padding, and right border
      width. In other words, it is the distance between the <a
      href="#page-box">page box</a>’s left border edge and right border
      edge. This quantity is used when calculating dimensions of the top and
      bottom page-margin boxes.
     <dt id=MaxBoxHeight><dfn id=max-box-height>max box height</dfn>
     <dd>the sum of the page’s top border width, top padding, <a
      href="#page-box">page area</a> height, bottom padding, and bottom border
      width. In other words, it is the distance between the <a
      href="#page-box">page box</a>’s top border edge and bottom border
      edge. This quantity is used when calculating dimensions of the left and
      right page-margin boxes.
     <dt><dfn id=outer-width>outer width</dfn>
     <dd>the sum of a page-margin box's left and right margins, left and right
      border widths, left and right padding, and content-box width.
     <dt><dfn id=outer-height>outer height</dfn>
     <dd>the sum of a page-margin box's top and bottom margins, top and bottom
      border widths, top and bottom padding, and content-box height.
    </dl>
    <dl>
     <dt><dfn id=outer-min-content>outer min-content</dfn> width
     <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
      <a href="http://www.w3.org/TR/css3-sizing/#min-content">‘<code
      class=css>min-content</code>’</a> is used when ‘<code
      class=property>width</code>’ is ‘<code class=css>auto</code>’.
     <dt><dfn id=outer-max-content>outer max-content</dfn> width
     <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
      <a href="http://www.w3.org/TR/css3-sizing/#max-content">‘<code
      class=css>max-content</code>’</a> is used when ‘<code
      class=property>width</code>’ is ‘<code class=css>auto</code>’.
    </dl>
    <p>The <dfn id=containing-block>containing block</dfn> for a corner
     page-margin box is the rectangle defined by the intersection of the two
     page margins meeting at that corner.
    <p>For all other page-margin boxes, the <dfn
     id=containing-block0>containing block</dfn> is the rectangle formed by
     the encapsulating page margin minus the containing blocks of the adjacent
     corners' page-margin boxes. This means that the size of this containing
     block is given in one dimension by the used page margin and in the other
     dimension by the <a href="#MaxBoxWidth">max box width</a> (for top and
     bottom page-margin boxes) or <a href="#MaxBoxHeight">max box height</a>
     (for left and right page-margin boxes).
    <h4 id=margin-dimension><span class=secno>6.3.2. </span>Page-Margin Box
     Variable Dimension Computation Rules</h4>
    <p>The following rules apply to ‘<code
     class=property>top-left</code>’, ‘<code
     class=property>top-center</code>’ and ‘<code
     class=property>top-right</code>’ page-margin boxes, which are referred
     to as A, B, and C, respectively, in this section.
    <h5 id=marginbox-variabledim-margins><span class=secno>6.3.2.1.
     </span>Margins</h5>
    <p>If the ‘<code class=property>margin-left</code>’ or ‘<code
     class=property>margin-right</code>’ property of any of the three boxes
     computes to ‘<code class=css>auto</code>’, the used value is zero.
    <h5 id=marginbox-variabledim-with><span class=secno>6.3.2.2.
     </span>Resolving ‘<code class=css>auto</code>’ widths</h5>
    <p>The following algorithm determines the used width of each box. For this
     purpose, boxes that are not <a href="#generated"><i>generated</i></a> are
     assumed to have a ‘<code class=property>width</code>’ and an <a
     href="#outer-width"><i>outer width</i></a> of zero.
    <p class=note> Note: The high-level goals are (in order of priority) to
     center the middle box (B) if it is generated, to minimize overflow and
     overlap, and to distribute space proportionally to the amount of content.
    <ol>
     <li> If B is not <a href="#generated"><i>generated</i></a>:
      <ol>
       <li> If only box has ‘<code class=css>width: auto</code>’, its used
        width is resolved so that the sum of the <a
        href="#outer-width"><i>outer width</i></a>s equals <a
        href="#max-box-width"><i>max box width</i></a>.
       <li> If A and C both have ‘<code class=css>width: auto</code>’:
        <ol>
         <li> Let <i>free space</i> be <a href="#max-box-width"><i>max box
          width</i></a> minus A’s and C’s <i>outer min-content width</i>.
         <li> If <i>free space</i> is positive, let the respective
          <i>weight</i> for A and C be <i>max-content</i> minus
          <i>min-content</i>. If it is negative or zero, let the weights be
          <i>min-content</i>. In either case if both weights are zero, let
          them be ‘<code class=css>1px</code>’ instead. <span class=note>
          The ‘<code class=css>1px</code>’ value is arbitrary as long as
          the weights are equal. </span>
         <li> The respective used width is <i>min-content</i> + <i>free
          space</i> × <i>weight</i> ÷ sum of both weights
        </ol>
      </ol>
     <li> If B is <a href="#generated"><i>generated</i></a>:
      <ol>
       <li> If B has ‘<code class=css>width: auto</code>’:
        <ol>
         <li> Let <i>free space</i> be <a href="#max-box-width"><i>max box
          width</i></a> - 2 × max(<i>min<sub>A</sub></i>,
          <i>min<sub>C</sub></i>) - <i>min<sub>B</sub></i>, where <i>min</i>
          is a box’s <i>outer min-content width</i> if ‘<code
          class=property>width</code>’ is ‘<code class=css>auto</code>’,
          zero otherwise.
         <li> Let <i>upper limit</i> be <a href="#max-box-width"><i>max box
          width</i></a> - 2 × max(<i>fixed<sub>A</sub></i>,
          <i>fixed<sub>C</sub></i>), where <i>fixed</i> is a box’s <a
          href="#outer-width"><i>outer width</i></a> if ‘<code
          class=property>width</code>’ is not ‘<code
          class=css>auto</code>’, zero otherwise.
         <li> If <i>free space</i> is positive, let the <i>weight</i> of a box
          be <i>max-content</i> minus <i>min-content</i>. If it is negative or
          zero, let the weights be <i>min-content</i>.
         <li> Let <i>weight<sub>AC</sub></i> be max(<i>weight<sub>A</sub></i>,
          <i>weight<sub>C</sub></i>)
         <li> If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>
          are zero, let them be ‘<code class=css>1px</code>’ instead.
         <li> B’s used width is min(<i>upper limit</i>, <i>min-content</i> +
          <i>free space</i> × <i>weight<sub>B</sub></i> ÷
          (<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))
        </ol>
       <li> Then, if A or C has ‘<code class=css>width: auto</code>’, the
        respective used widths are resolved so that <a
        href="#outer-width"><i>outer width</i></a> equals (<a
        href="#max-box-width"><i>max box width</i></a> - B’s <a
        href="#outer-width"><i>outer width</i></a>) ÷ 2
      </ol>
    </ol>
    <h5 id=marginbox-variabledim-minmax><span class=secno>6.3.2.3.
     </span>Handling ‘<code class=property>min-width</code>’ and ‘<code
     class=property>max-width</code>’</h5>
    <p> The ‘<code class=property>min-width</code>’ and ‘<code
     class=property>max-width</code>’ properties <a href="#CSS21"
     rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> apply to page-margin boxes in
     the variable dimension like on normal elements, except that the three
     boxes on the same side are considered together.
    <p> More precisely:
    <ol>
     <li> The tentative used widths are calculated (without ‘<code
      class=property>min-width</code>’ and ‘<code
      class=property>max-width</code>’) following the rules under <a
      href="#marginbox-variabledim-with">Resolving ‘<code
      class=css>auto</code>’ widths</a> above.
     <li> If the tentative used width of any of the three boxes is greater
      than ‘<code class=property>max-width</code>’, the rules above are
      applied again, but this time using the computed value of ‘<code
      class=property>max-width</code>’ as the computed value for ‘<code
      class=property>width</code>’.
     <li> If the resulting width of any of the three boxes is smaller than
      ‘<code class=property>min-width</code>’, the rules above are applied
      again, but this time using the value of ‘<code
      class=property>min-width</code>’ as the computed value for ‘<code
      class=property>width</code>’.
    </ol>
    <h5 id=marginbox-variabledim-positioning><span class=secno>6.3.2.4.
     </span>Positioning</h5>
    <p> Once the dimensions of the boxes are determined, they are positioned
     as follows:
    <ul>
     <li>The left outer edge of A is flush with the left edge of the
      containing block
     <li>The outer area of B is centered in the containing block.
     <li>The right outer edge of C is flush with the right edge of the
      containing block.
    </ul>
    <h5 id=marginbox-variabledim-others><span class=secno>6.3.2.5.
     </span>Boxes on other sides</h5>
    <p>The used values for ‘<code class=property>bottom-left</code>’,
     ‘<code class=property>bottom-center</code>’ and ‘<code
     class=property>bottom-right</code>’ page-margin boxes are established
     by the same rules as for ‘<code class=property>top-left</code>’,
     ‘<code class=property>top-center</code>’, and ‘<code
     class=property>top-right</code>’, respectively.
    <p>The used values for ‘<code class=property>left-top</code>’,
     ‘<code class=property>left-middle</code>’ and ‘<code
     class=property>left-bottom</code>’ boxes are established by the same
     rules, with "width" replaced by "height", "left" by "top", "right" by
     "bottom" and "center" by "middle".
    <p>The used values for ‘<code class=property>right-top</code>’,
     ‘<code class=property>right-middle</code>’ and ‘<code
     class=property>right-bottom</code>’ page-margin boxes are established
     by the same rules as for ‘<code class=property>left-top</code>’,
     ‘<code class=property>left-middle</code>’ and ‘<code
     class=property>left-bottom</code>’, respectively.
    <h4 id=margin-constraints><span class=secno>6.3.3. </span>Page-Margin Box
     Fixed Dimension Computation Rules</h4>
    <p>The rules below are used to calculate the used values of each ‘<code
     class=property>top-left-corner</code>’, ‘<code
     class=property>top-left</code>’, ‘<code
     class=property>top-center</code>’, ‘<code
     class=property>top-right</code>’, and ‘<code
     class=property>top-right-corner</code>’ page-margin box's ‘<code
     class=property>height</code>’, ‘<code
     class=property>margin-top</code>’, and ‘<code
     class=property>margin-bottom</code>’ properties:
    <ol>
     <li>The following constraint must hold among the used values of the
      margin box's properties:
      <p>‘<code class=property>margin-top</code>’ + ‘<code
       class=property>border-top-width</code>’ + ‘<code
       class=property>padding-top</code>’ + ‘<code
       class=property>height</code>’ + ‘<code
       class=property>padding-bottom</code>’ + ‘<code
       class=property>border-bottom-width</code>’ + ‘<code
       class=property>margin-bottom</code>’ = top page margin
     <li>If ‘<code class=property>border-top-width</code>’ + ‘<code
      class=property>padding-top</code>’ + ‘<code
      class=property>height</code>’ (if it is not ‘<code
      class=css>auto</code>’) + ‘<code
      class=property>padding-bottom</code>’ + ‘<code
      class=property>border-bottom-width</code>’, plus ‘<code
      class=property>margin-top</code>’ and/or ‘<code
      class=property>margin-bottom</code>’ if not ‘<code
      class=css>auto</code>’, is larger than the height of the top page
      margin, then any ‘<code class=css>auto</code>’ values for ‘<code
      class=property>margin-top</code>’ or ‘<code
      class=property>margin-bottom</code>’ are, for the following rules,
      treated as zero.
     <li>If at this point all of ‘<code class=property>height</code>’,
      ‘<code class=property>margin-top</code>’, and ‘<code
      class=property>margin-bottom</code>’ have a computed value other than
      ‘<code class=css>auto</code>’, the values are said to be
      "over-constrained". In this case, the specified value of ‘<code
      class=property>margin-top</code>’ is treated as ‘<code
      class=property>auto</code>’.
     <li>If there is now exactly one value specified as ‘<code
      class=property>auto</code>’, its used value follows from the equality.
     <li>If ‘<code class=property>height</code>’ is set to ‘<code
      class=property>auto</code>’, any other ‘<code
      class=property>auto</code>’ values become ‘<code
      class=css>0</code>’ and ‘<code class=property>height</code>’
      follows from the resulting equality
     <li>If both ‘<code class=property>margin-top</code>’ and ‘<code
      class=property>margin-bottom</code>’ are ‘<code
      class=property>auto</code>’, their used values are equal. This
      vertically centers the page-margin box content within the top page
      margin.
    </ol>
    <p>The same rules apply to the bottom page-margin boxes
     (bottom-left-corner, bottom-left, bottom-center, bottom-right, and
     bottom-right-corner), except that in the overconstrained case, the
     ‘<code class=property>margin-bottom</code>’ is ignored rather than
     the ‘<code class=property>margin-top</code>’.
    <p>Analogous rules govern the properties for the left and right
     page-margin boxes with respect to ‘<code class=property>width</code>’
     (top-left-corner, left-top, left-middle, left-bottom, and
     bottom-left-corner; top-right-corner, right-top, right-middle,
     right-bottom, bottom-right-corner), with ‘<code
     class=property>top</code>’ replaced by ‘<code
     class=property>left</code>’, ‘<code class=property>bottom</code>’
     replaced by ‘<code class=property>right</code>’, and ‘<code
     class=property>height</code>’ replaced by ‘<code
     class=property>width</code>’. In the overconstrained case for left
     (right) page-margin boxes, the specified value of ‘<code
     class=property>margin-left</code>’ (‘<code
     class=property>margin-right</code>’) is ignored.
    <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box
     examples</h3>
    <p>The following is a collection of examples of page-margin box usage.
    <div class=example>
     <p>Here is an example of a page with only a top-left header:
     <pre>
 @page {
 @top-left { content: "Header in Left Cell (top-left)" }
 }
 </pre>
     <p>Because there are no contents defined for the top-center or the
      top-right page-margin boxes, the extent of the top-left page-margin box
      is allowed to cross the center of the page box.
     <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>
    </div>
    <div class=example>
     <p>The following is an example of a page with a centered header:
     <pre>
 @page {
 @top-center { content: "Header in Center Cell (top-center)" }
 }
 </pre>
     <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>
    </div>
    <div class=example>
     <p>The following is an example of a page with a single header in the
      top-right page-margin box:
     <pre>
 @page {
 @top-right { content: "Header in Right Cell (top-right)" }
 }
 </pre>
     <p>Because the content of the center cell is empty, the extent of the
      top-right page-margin box is allowed to cross the center of the page
      box.
     <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>
    </div>
    <div class=example>
     <p>The following is an example of a page with a top-center and a top-left
      header:
     <pre>
 @page {
 @top-left { content: "Left Cell (top-left)" }
 @top-center { content: "Header in Center Cell (top-center)" }
 }
 </pre>
     <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>
    </div>
    <div class=example>
     <p>The following is an example of a page with a top-center and a
      top-right header:
     <pre>
 @page {
 @top-center { content: "Header in Center Cell (top-center)" }
 @top-right { content: "Right Cell (top-right)" }
 }
 </pre>
     <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>
    </div>
    <div class=example>
     <p>The following is an example of a page with top-left and top-right
      headers:
     <pre>
 @page {
 @top-left { content: "Header in top-left with approx. "
                    "twice as many words as right cell." }
 @top-right { content: "Right cell (top-right)" }
 }
 </pre>
     <p>Because there are no center cell contents, the extent of the top-left
      is allowed to cross the center of the page box.
     <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>
    </div>
    <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>
    <div>
     <p>The following properties, when used in the <a
      href="#page-context">page context</a>, apply to the page box:
     <ul>
      <li><a
       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>
      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
      <li><a href="#page-size">size</a>
      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
     </ul>
     <p>The following properties, when used in a <a
      href="#margin-at-rule">margin context</a>, apply to page-margin boxes
      and their content:
     <ul>
      <li><a
       href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
      <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
       properties</a>
      <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
       <a
       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
       properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
      <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
       <a
       href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
      <li><a
       href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
     </ul>
     <p>A detailed list of properties that <em class=RFC2119>MUST</em> be
      supported within page and margin contexts by a conforming implementation
      can be found in <a href="#properties-list">Appendix A</a>.
     <p>Other properties defined by <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these
      contexts. Behavior for properties not included in CSS 2.1 and not listed
      here or in Appendix A is undefined.
     <p class=note> Note: The intent of leaving other properties undefined is
      to allow the gradual addition of appropriate CSS3 properties as they
      emerge, without having to update this specification with each addition.
     <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
      elements in the document</a>, both the page context and the margin
      context have a computed value for every property, even if that property
      does not apply to the page or page-margin box.
     <p>The normal rules for CSS properties apply with the following
      exceptions:
     <ul>
      <li>page-margin boxes inherit from the page context. The page context
       inherits from the root element. However, since the previous revision of
       CSS Paged Media Level 3 did not specify this point, an implementation
       that sets inherited properties in the page context to their initial
       values (as for the root element) is also conformant to CSS Paged Media
       Level 3. Note that this exception will be removed in Level 4.
      <li>Values in units of ‘<code class=css>em</code>’ and ‘<code
       class=css>ex</code>’ are interpreted relative to the font associated
       with their context. When used on the ‘<code
       class=property>font-size</code>’ property in the margin context, they
       are relative to the font of the page context. When used on the ‘<code
       class=property>font-size</code>’ property in the page context, they
       are relative to the ‘<code class=property>font-size</code>’ of the
       root element. However, since a previous revision of CSS Paged Media
       Level 3 was ambiguous on this point, an implementation that treats
       ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on
       ‘<code class=property>font-size</code>’ as relative to the initial
       value is also conformant to CSS Paged Media Level 3. Note that this
       exception will be removed in Level 4.
      <li>Percentage values on the margin and padding properties are relative
       to the dimensions of the containing block. For right and left values,
       percentages are relative to the width of the containing block; for top
       and bottom values, percentages are relative to the height of the
       containing block.
      <li>The used values of ‘<code class=property>width</code>’ and
       ‘<code class=property>height</code>’ have special computation rules
       for page boxes and page-margin boxes; see <a href="#page-size">Page
       Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box
       Dimensions</a>.
      <li>The page background is positioned and painted <a href="#painting">as
       described above</a>.
      <li>The rules for counter scoping are modified <a
       href=page-based-counters>as described below</a>.
      <li> As on the ‘<code class=css>::before</code>’ and ‘<code
       class=css>::after</code>’ pseudo-elements, the ‘<code
       class=css>normal</code>’ value of the ‘<code
       class=property>content</code>’ property computes to ‘<code
       class=css>none</code>’ on page-margin boxes.
      <li>On page-margin boxes, the ‘<code
       class=property>vertical-align</code>’ property behaves <a
       href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as
       specified for table cells</a>. It <em>always</em> performs alignment in
       the vertical dimension, regardless of writing mode.
     </ul>
     <p>It is <em class=RFC2119>recommended</em> that user agents establish a
      default page margin via the user agent stylesheet that includes any
      non-printable area. It is further <em class=RFC2119>recommended</em>
      that authors assume that the default page area will not include
      unprintable regions.
     <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based
      counters</h3>
     <p>Counters can be defined and controlled within an <span
      class=css>‘<code class=css>@page</code>’</span> rule, and used as
      content in page-margin boxes. This is useful for maintaining a page
      count.
     <div class=example>
      <p>The following rules result in the placement of the current page
       number in the middle of the outside margin of each page.
      <pre>
 @page {
 margin: 10%;
 counter-increment: page;
 @top-center {
   font-family: sans-serif;
   font-weight: bold;
   font-size: 2em;
   content: counter(page);
 }
 }
 </pre>
     </div>
     <p>A ‘<code class=property>counter-increment</code>’ within either a
      page or margin context causes the counter to increment with the
      generation of each page box.
     <p>If a counter is reset or incremented within the page context, it is in
      scope for all page-margin boxes and obscures all counters of the same
      name within the document.
     <p>If a counter is reset or incremented within a margin context, it is in
      scope for that page-margin box and obscures any counters of the same
      name in both the page context and the document.
     <p>If a counter that has not been reset or incremented within the margin
      context or the page context is used by counter() or counters() in the
      margin context, then the resultant value is exactly as if the
      page-margin box were an element within the document at the start of the
      page, inside the deepest element in the normal flow that spans the page
      break. Use of the counter in this way does not affect the calculation of
      the counter's value.
     <p>A counter named ‘<a href="#page"><code class=css>page</code></a>’
      is automatically created and incremented on every page of the document.
      Specifically, the UA must automatically create and increment such a
      counter as if ‘<code class=css>@page { counter-increment: page;
      }</code>’ were specified. The implied ‘<a href="#page"><code
      class=css>page</code></a>’ counter is a real counter, and can be
      directly affected using the ‘<code
      class=property>counter-increment</code>’ and ‘<code
      class=property>counter-reset</code>’ properties when named explicitly
      in those properties. It can also be used in the ‘<code
      class=css>counter()</code>’ and ‘<code
      class=css>counters()</code>’ function forms.
     <p>Additionally, a counter named ‘<a href="#page"><code
      class=css>pages</code></a>’ is automatically created by the UA. Its
      value is always the total number of pages in the document. (In
      continuous media this is always 1.) The value of ‘<a
      href="#page"><code class=css>pages</code></a>’ cannot be manipulated:
      while ‘<code class=property>counter-reset</code>’ and ‘<code
      class=property>counter-increment</code>’ statements that set it are
      valid, they have no effect.
     <p>In all other respects, page-associated counters behave as described in
      <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a
      href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a
      href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.
     <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin
      boxes and default values</h3>
     <p>Properties used within page or margin contexts take their initial
      values from their respective property definitions; however, user agents
      must behave as though the values in the following table were established
      by rules in the UA default style sheet.
     <table class=data id=margin-values
      summary="definition of page-margin box default properties">
      <caption>Table 2. Default values for Page-Margin Boxes</caption>
      <thead>
       <tr>
        <th>Page-margin box
        <th><span class=property>‘<code
         class=property>text-align</code>’</span>
        <th><span class=property>‘<code
         class=property>vertical-align</code>’</span>
      <tbody>
       <tr>
        <td><a href="#top-left-corner-box-def">top-left-corner</a>
        <td>right
        <td>middle
       <tr>
        <td><a href="#top-left-box-def">top-left</a>
        <td>left
        <td>middle
       <tr>
        <td><a href="#top-center-box-def">top-center</a>
        <td>center
        <td>middle
       <tr>
        <td><a href="#top-right-box-def">top-right</a>
        <td>right
        <td>middle
       <tr>
        <td><a href="#top-right-corner-box-def">top-right-corner</a>
        <td>left
        <td>middle
       <tr>
        <td><a href="#left-top-box-def">left-top</a>
        <td>center
        <td>top
       <tr>
        <td><a href="#left-middle-box-def">left-middle</a>
        <td>center
        <td>middle
       <tr>
        <td><a href="#left-bottom-box-def">left-bottom</a>
        <td>center
        <td>bottom
       <tr>
        <td><a href="#right-top-box-def">right-top</a>
        <td>center
        <td>top
       <tr>
        <td><a href="#right-middle-box-def">right-middle</a>
        <td>center
        <td>middle
       <tr>
        <td><a href="#right-bottom-box-def">right-bottom</a>
        <td>center
        <td>bottom
       <tr>
        <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>
        <td>right
        <td>middle
       <tr>
        <td><a href="#bottom-left-box-def">bottom-left</a>
        <td>left
        <td>middle
       <tr>
        <td><a href="#bottom-center-box-def">bottom-center</a>
        <td>center
        <td>middle
       <tr>
        <td><a href="#bottom-right-box-def">bottom-right</a>
        <td>right
        <td>middle
       <tr>
        <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>
        <td>left
        <td>middle
     </table>
     <div class=example>
      <p>This example style sheet could be used to create a centered header
       with the current chapter name:
      <pre>body {counter-reset: chapter;}
 div.chapter {counter-increment: chapter;}
 @page {
 margin: 10%;
 @top-center { content: "Chapter" counter(chapter) }
 }
 </pre>
     </div>
     <h2 id=page-size><span class=secno>8. </span>Page Size</h2>
     <p>People around the world use many different paper sizes. It is a goal
      of this specification that web content should be adaptable to a range of
      different sizes without having to write a specific style sheet for each
      paper size.
     <p>However, in some situations it is important that a certain page size
      achieves a certain style. One way to achieve this goal is to utilize the
      ‘<a href="#size"><code class=property>size</code></a>’ property,
      which indicates that the document should preferentially be displayed on
      a surface of a certain size; another method is to use Media Queries <a
      href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow
      different style sheets to be applied to different page sizes.
     <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a
      href="#size"><code class=property>size</code></a>’ property</h3>
     <table class=propdef summary="definition of the size property">
      <tbody>
       <tr>
        <th>Name:
        <td><dfn id=size>size</dfn>
       <tr>
        <th>Value:
        <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |
         landscape] ]
       <tr>
        <th>Initial:
        <td>auto
       <tr>
        <td><em>Applies to:</em>
        <td>page context
       <tr>
        <th>Inherited:
        <td>N/A
       <tr>
        <th>Percentages:
        <td>N/A
       <tr>
        <th>Media:
        <td>paged
       <tr>
        <td><em>Computed value:</em>
        <td>specified value
     </table>
     <p>This property specifies the target size and orientation of the <a
      href="#page-box">page box</a>‘<code class=css>s containing block. In
      the general case, where one page box is rendered onto one <a
      href="#page-sheet">page sheet</a>, the </code>’size' property also
      indicates the size of the destination page sheet.
     <p>The size of a page box can either be "absolute" (fixed size) or
      "scalable" (i.e., fitting available sheet sizes). The first three values
      in the table below can be used to create scalable page boxes. Other
      values define a fixed-size page box, and thereby indicate the preferred
      output media size. When possible, output should be rendered on the media
      size indicated. If the specified size is not available, the rules for <a
      href="#renderingpages">transposing a page box to a different size</a>
      apply.
     <p>If a <a href="#size"><code>size</code></a> property declaration is
      qualified by a ‘<code class=css>width</code>’, ‘<code
      class=css>height</code>’, ‘<code class=css>device-width</code>’,
      ‘<code class=css>device-height</code>’, ‘<code
      class=css>aspect-ratio</code>’, ‘<code
      class=css>device-aspect-ratio</code>’ or ‘<code
      class=css>orientation</code>’ media query <a href="#MEDIAQ"
      rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on
      the size of the paper), then the declaration must be <a
      href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
      queries do not honor ‘<a href="#size"><code
      class=property>size</code></a>’: they assume the paper size that would
      be chosen if no @page rules were specified.
     <p class=issue>It would be useful if media queries could respond at least
      to sizes specified on an unqualified @page.
     <div class=example>
      <p>In the following example
      <pre>
   @page {
     size: 4in 6in;
   }
   @media (max-width: 6in) {
     @page {
       size: letter;
     }
   }
   </pre>
      <p>The second <a href="#size"><code>size</code></a> declaration is
       ignored, i.e. the specified value of the <a
       href="#size"><code>size</code></a> property is <code>4in 6in</code>.
     </div>
     <table class=page-sizes>
      <tbody>
       <tr>
        <th>Value
        <th>Description
       <tr>
        <td>auto
        <td>The page box will be set to a size and orientation chosen by the
         UA. In the usual case, the page box size and orientation is chosen to
         match the target media sheet.
       <tr>
        <td>landscape
        <td>Specifies that the page's content be printed in landscape
         orientation. The longer sides of the page box are horizontal. If a
         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>
         is not specified, the size of the page sheet is chosen by the UA.
       <tr>
        <td>portrait
        <td>Specifies that the page's content be printed in portrait
         orientation. The shorter sides of the page box are horizontal. If a
         <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>
         is not specified, the size of the page sheet is chosen by the UA.
       <tr>
        <td>&lt;length&gt;
        <td>The page box will be set to the given absolute dimension(s). If
         only one length value is specified, it sets both the width and height
         of the page box (i.e., the box is a square). If two length values are
         specified, the first establishes the page box width, and the second
         the page box height. Values in units of <span class=css>‘<code
         class=property>em</code>’</span> and <span class=css>‘<code
         class=property>ex</code>’</span> refer to the page context's font.
         Negative lengths are illegal.
       <tr>
        <td>&lt;page-size&gt;
        <td>A page size can be specified using one of the following media
         names. This is the equivalent of specifying the <span
         class=css>‘<code class=css>&lt;page-size&gt;</code>’</span> using
         length values. The definition of the the media names comes from
         <cite>Media Standardized Names</cite> <a href="#PWGMSN"
         rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.
         <dl>
          <dt>A5
          <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm
           high.
          <dt>A4
          <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm
           high.
          <dt>A3
          <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm
           high.
          <dt>B5
          <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm
           high.
          <dt>B4
          <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm
           high.
          <dt>letter
          <dd>Equivalent to the size of North American letter media: 8.5
           inches wide and 11 inches high
          <dt>legal
          <dd>Equivalent to the size of North American legal: 8.5 inches wide
           by 14 inches high.
          <dt>ledger
          <dd>Equivalent to the size of North American ledger: 11 inches wide
           by 17 inches high.
         </dl>
     </table>
     <p>The ‘<code class=css>&lt;page-size&gt;</code>’ names can be used
      in conjunction with ‘<code class=property>landscape</code>’ or
      ‘<code class=property>portrait</code>’ to indicate both size and
      orientation.
     <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>
     <div class=example>
      <pre>
 @page {
 size: A4 landscape;
 }
 </pre>
      <p>The above example sets the width of the page box to be 297mm and the
       height to be 210mm. The page box in this example should be rendered on
       a page sheet size of 210 mm by 297 mm.
     </div>
     <div class=example>
      <p>In the following example, the outer edges of the page box will align
       with the page. The percentage value on the <span
       class=property>‘<code class=property>margin</code>’</span> property
       is relative to the page size so if the page sheet dimensions are 210mm
       x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are
       no page borders or padding set in the UA default style sheet, the
       resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).
      <pre>
 @page {
 size: auto;/* auto is the initial value */
 margin: 10%;
 }
 </pre>
     </div>
     <div class=example>
      <pre>
 @page {
 size: 8.5in 11in;/* width height */
 }
 </pre>
      <p>The above example sets the width of the page box to be 8.5 inches and
       the height to be 11 inches. This indicates that the page sheet size
       should be 8.5"x11" and the orientation ‘<code
       class=property>portrait</code>’.
     </div>
     <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media
      Queries</h4>
     <p>This section is informative.
     <p>By using Media Queries <a href="#MEDIAQ"
      rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can
      express different stylistic preferences for different page sizes.
      Consider this example:
     <div class=example style="font-size: 10pt;">
      <pre>
  /* style sheet for "A4" printing */
  @media print and (width: 21cm) and (height: 29.7cm) {
     @page {
        margin: 3cm;
     }
  }
  /* style sheet for "letter" printing */
  @media print and (width: 8.5in) and (height: 11in) {
     @page {
         margin: 1in;
     }
  }
 </pre>
     </div>
     <p>In the example above, "A4" sheets are given a "3cm" page margin, and
      "letter" sheets are given a "1in" page margin.
     <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes
      that do not fit a page sheet</h3>
     <p>If a page box does not match the target page sheet dimensions, the
      user agent should do one of the following (in order of preference):
     <ol>
      <li>Render the page box at the indicated size on a larger page sheet.
      <li>Rotate the page box 90° if this will make the page box fit the page
       sheet.
      <li>Scale the page box to fit the page sheet. (The aspect ratio of the
       page box <em class=RFC2119>should</em> be preserved.)
      <li>Reformat the page contents, including ‘<code
       class=property>spilling</code>’ onto other page sheets.
      <li>Clip overflowed content (least preferred).
     </ol>
     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user
      before performing these operations.
     <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the
      page box on the sheet</h3>
     <p>When the page box is smaller than the page size, the user agent <em
      class=RFC2119>SHOULD</em> either:
     <ul>
      <li>center the page box on the sheet since this will align double-sided
       pages and avoid accidental loss of information that is printed near the
       edge of the sheet; or
      <li>position the page box in the upper left corner of the page sheet, as
       this may minimize media consumption.
     </ul>
     <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in
      this regard.</p>
     <!-- "Page selector and page context" -->
     <h2 id=page-breaks><span class=secno>9. </span> <a
      id=pg-br-before-after></a> <a id=page-break-before></a> <a
      id=page-break-after></a> <a id=page-break-inside></a> <a
      id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a
      id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a
      id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>
      <a id=best-pg-brk></a> Page Breaks</h2>
     <p> The <a href="#CSS3-BREAK"
      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines
      how and where CSS boxes can be <i>fragmented</i>, including across page
      breaks. It defines a few properties that indicate where the user agent
      <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,
      and on what page (left or right) the subsequent content resumes. Each
      page break ends layout in the current <a href="#page-box">page box</a>
      and causes remaining pieces of the document tree to be laid out in a new
      page box.
     <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:
      ‘<a href="#page"><code class=property>page</code></a>’</h3>
     <table class=propdef summary="property definition">
      <tbody>
       <tr>
        <th>Name:
        <td><dfn id=page>page</dfn>
       <tr>
        <th>Value:
        <td>auto | &lt;identifier&gt;
       <tr>
        <th>Initial:
        <td>auto
       <tr>
        <th>Applies to:
        <td>block-level elements
       <tr>
        <th>Inherited:
        <td>no (but see prose)
       <tr>
        <th>Percentages:
        <td>N/A
       <tr>
        <th>Media:
        <td>paged
       <tr>
        <th>Computed value:
        <td>specified value
     </table>
     <p>The ‘<a href="#page"><code class=property>page</code></a>’
      property is used to specify a particular type of page on which an
      element <em class=RFC2119>MUST</em> be displayed.
     <div class=example>
      <p>This example will put all tables on a right-hand side landscape page
       (named "rotated"):
      <pre>
 @page rotated { size: landscape }
 table { page: rotated; page-break-before: right }
 </pre>
     </div>
     <p> The ‘<a href="#page"><code class=property>page</code></a>’
      property works as follows: If a block box with inline content has a
      ‘<a href="#page"><code class=property>page</code></a>’ property that
      is different from the preceding block box with inline content, then one
      or two page breaks are inserted between them, and the boxes after the
      break are rendered on a page box of the named type.
     <p> In addition to breaks defined in <a href="#CSS3-BREAK"
      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>, a <a
      href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> page
      break <em class=RFC2119>MUST</em> also occur in the margin between
      sibling boxes if the last line box before this margin and the first one
      after it do not have the same value for ‘<a href="#page"><code
      class=property>page</code></a>’.
     <p>The ‘<a href="#page"><code class=property>page</code></a>’
      property does not inherit. However, if the ‘<a href="#page"><code
      class=property>page</code></a>’ value on an element is ‘<code
      class=css>auto</code>’, then it is treated as having the same name as
      its nearest ancestor with a non-auto value. When indicated on the root
      element, the effective name is the empty string.
     <p>Because a previous version of this specification indicated that the
      ‘<a href="#page"><code class=property>page</code></a>’ property is
      inherited, an implementation that inherits the ‘<a href="#page"><code
      class=property>page</code></a>’ property and treats ‘<code
      class=css>auto</code>’ as always naming the empty string remains
      conformant to CSS3 Paged Media. Therefore authors should not explicitly
      specify the ‘<code class=css>auto</code>’ value on a descendant of
      an element with a non-‘<code class=css>auto</code>’ ‘<a
      href="#page"><code class=property>page</code></a>’ value as the
      resulting behavior will be unpredictable.
     <p>Page names are case-sensitive identifiers. However the ‘<code
      class=css>auto</code>’ value, being a CSS keyword, is <a
      href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
      case-insensitive</a>.
     <div class=example>
      <p>In this example, the two tables are rendered on landscape pages
       (indeed, on the same page, if they fit). The page type "narrow" is used
       for the &lt;p&gt; after the second table, as the page properties for
       the table element are no longer in effect:
      <pre>
 @page narrow { size: 9cm 18cm }
 @page rotated { size: landscape }
 div { page: narrow }
 table { page: rotated }
 </pre>
      with this document:
      <pre>
 &lt;div&gt;
 &lt;table&gt;...&lt;/table&gt;
 &lt;table&gt;...&lt;/table&gt;
 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;
 &lt;/div&gt;
 </pre>
     </div>
     <div class=example>
      <p>In Japanese documents, sometimes different parts of a single document
       will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"
       rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a
       href="#page"><code class=property>page</code></a>’ property, together
       with ‘<code class=css>@page</code>’ rules specifying different page
       widths, can accomodate this type of layout:
      <pre>
 &lt;!DOCTYPE html>
 &lt;html lang="ja">
   &lt;style>
     html   { writing-mode: vertical-rl;
              line-height: 1.6; }
     .main  { page: main;
              columns: 2; column-gap: 1rem; }
     .index { page: index;
              columns: 3; column-gap: 1rem; }
     @page       { margin: auto;    /* center kihon hanmen on page */
                   width:  40rem; } /* 1.6 × 25 lines        */
     @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */
     @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
   &lt;/style>
   &lt;section class="main"> ... &lt;/section>
   &lt;section class="index"> ... &lt;/section>
 &lt;/html>
 </pre>
     </div>
     <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>
     <p class=note>This section has been moved to <a href="#CSS3-IMAGES"
      rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.
     <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1
      Properties</h2>
     <h3 class=no-num id=properties-that-apply-within-the-page-co>Properties
      that apply within the page context</h3>
     <p>The following CSS 2.1 <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to the
      page box. If a conforming user agent supports any of these properties on
      block boxes, then it must also support that property for the page box.
     <table class=property-list>
      <tbody>
       <tr>
        <td rowspan=2><a
         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
         properties</a>
        <td>direction
      <tbody>
       <tr>
        <td rowspan=6><a
         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
         properties</a>
        <td>background-color
       <tr>
        <td>background-image
       <tr>
        <td>background-repeat
       <tr>
        <td>background-attachment
       <tr>
        <td>background-position
       <tr>
        <td>background
      <tbody>
       <tr>
        <td rowspan=20><a
         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
         properties</a>
        <td>border-top-width
       <tr>
        <td>border-right-width
       <tr>
        <td>border-bottom-width
       <tr>
        <td>border-left-width
       <tr>
        <td>border-width
       <tr>
        <td>border-top-color
       <tr>
        <td>border-right-color
       <tr>
        <td>border-bottom-color
       <tr>
        <td>border-left-color
       <tr>
        <td>border-color
       <tr>
        <td>border-top-style
       <tr>
        <td>border-right-style
       <tr>
        <td>border-bottom-style
       <tr>
        <td>border-left-style
       <tr>
        <td>border-short-style
       <tr>
        <td>border-top
       <tr>
        <td>border-right
       <tr>
        <td>border-bottom
       <tr>
        <td>border-left
       <tr>
        <td>border
      <tbody>
       <tr>
        <td rowspan=2><a
         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
         properties</a>
        <td>counter-reset
       <tr>
        <td>counter-increment
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
      <tbody>
       <tr>
        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
         properties</a>
        <td>font-family
       <tr>
        <td>font-size
       <tr>
        <td>font-style
       <tr>
        <td>font-variant
       <tr>
        <td>font-weight
       <tr>
        <td>font
      <tbody>
       <tr>
        <td rowspan=3><a
         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
         <a
         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
        <td>height
       <tr>
        <td>min-height
       <tr>
        <td>max-height
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
      <tbody>
       <tr>
        <td rowspan=5><a
         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
         properties</a>
        <td>margin-top
       <tr>
        <td>margin-right
       <tr>
        <td>margin-bottom
       <tr>
        <td>margin-left
       <tr>
        <td>margin
      <tbody>
       <tr>
        <td rowspan=5><a
         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
         properties</a>
        <td>outline-width
       <tr>
        <td>outline-style
       <tr>
        <td>outline-color
       <tr>
        <td>outline
      <tbody>
       <tr>
        <td rowspan=5><a
         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
         properties</a>
        <td>padding-top
       <tr>
        <td>padding-right
       <tr>
        <td>padding-bottom
       <tr>
        <td>padding-left
       <tr>
        <td>padding
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
      <tbody>
       <tr>
        <td rowspan=8><a href="http://www.w3.org/TR/CSS21/text.html">text
         properties</a>
        <td>direction
       <tr>
        <td>letter-spacing
       <tr>
        <td>text-align
       <tr>
        <td>text-decoration
       <tr>
        <td>text-indent
       <tr>
        <td>text-transform
       <tr>
        <td>white-space
       <tr>
        <td>word-spacing
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
      <tbody>
       <tr>
        <td rowspan=3><a
         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
         <a
         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
        <td>width
       <tr>
        <td>min-width
       <tr>
        <td>max-width
     </table>
     <p>Properties that apply to the page-margin boxes can also be set within
      the page context: if inheritable or explicitly inherited (with the
      <code>inherit</code> keyword in the margin context), they will inherit
      to the page-margin boxes.
     <h3 class=no-num id=properties-that-apply-within-the-margin->Properties
      that apply within the margin contexts</h3>
     <p>The following CSS 2.1 <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> properties apply to
      page-margin boxes. If a conforming user agents supports any of these
      properties on block boxes, then it must also support that property for
      page-margin boxes (except for <code>z-index</code>, which is optional
      for page-margin boxes).
     <table class=property-list>
      <tbody>
       <tr>
        <td rowspan=2><a
         href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
         properties</a>
        <td>direction
       <tr>
        <td>unicode-bidi
      <tbody>
       <tr>
        <td rowspan=6><a
         href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
         properties</a>
        <td>background-color
       <tr>
        <td>background-image
       <tr>
        <td>background-repeat
       <tr>
        <td>background-attachment
       <tr>
        <td>background-position
       <tr>
        <td>background
      <tbody>
       <tr>
        <td rowspan=20><a
         href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
         properties</a>
        <td>border-top-width
       <tr>
        <td>border-right-width
       <tr>
        <td>border-bottom-width
       <tr>
        <td>border-left-width
       <tr>
        <td>border-width
       <tr>
        <td>border-top-color
       <tr>
        <td>border-right-color
       <tr>
        <td>border-bottom-color
       <tr>
        <td>border-left-color
       <tr>
        <td>border-color
       <tr>
        <td>border-top-style
       <tr>
        <td>border-right-style
       <tr>
        <td>border-bottom-style
       <tr>
        <td>border-left-style
       <tr>
        <td>border-short-style
       <tr>
        <td>border-top
       <tr>
        <td>border-right
       <tr>
        <td>border-bottom
       <tr>
        <td>border-left
       <tr>
        <td>border
      <tbody>
       <tr>
        <td rowspan=2><a
         href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
         properties</a>
        <td>counter-reset
       <tr>
        <td>counter-increment
      <tbody>
       <tr>
        <td colspan=2><a href="">content</a>
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
      <tbody>
       <tr>
        <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
         properties</a>
        <td>font-family
       <tr>
        <td>font-size
       <tr>
        <td>font-style
       <tr>
        <td>font-variant
       <tr>
        <td>font-weight
       <tr>
        <td>font
      <tbody>
       <tr>
        <td rowspan=3><a
         href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
         <a
         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
        <td>height
       <tr>
        <td>min-height
       <tr>
        <td>max-height
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
      <tbody>
       <tr>
        <td rowspan=5><a
         href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
         properties</a>
        <td>margin-top
       <tr>
        <td>margin-right
       <tr>
        <td>margin-bottom
       <tr>
        <td>margin-left
       <tr>
        <td>margin
      <tbody>
       <tr>
        <td rowspan=5><a
         href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
         properties</a>
        <td>outline-width
       <tr>
        <td>outline-style
       <tr>
        <td>outline-color
       <tr>
        <td>outline
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
      <tbody>
       <tr>
        <td rowspan=5><a
         href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
         properties</a>
        <td>padding-top
       <tr>
        <td>padding-right
       <tr>
        <td>padding-bottom
       <tr>
        <td>padding-left
       <tr>
        <td>padding
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
      <tbody>
       <tr>
        <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
         properties</a>
        <td>letter-spacing
       <tr>
        <td>text-align
       <tr>
        <td>text-decoration
       <tr>
        <td>text-indent
       <tr>
        <td>text-transform
       <tr>
        <td>white-space
       <tr>
        <td>word-spacing
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
      <tbody>
       <tr>
        <td rowspan=3><a
         href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
         <a
         href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
        <td>width
       <tr>
        <td>min-width
       <tr>
        <td>max-width
      <tbody>
       <tr>
        <td colspan=2><a
         href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
     </table>
     <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer
      Possibilities</h2>
     <p>Often, but not always, the page box has a one-to-one correspondence to
      the physical surface onto which the document is ultimately rendered. The
      CSS3 page model specifies formatting within the page box, but it is the
      user agent's responsibility to transfer the page box to the sheet. Some
      user agent transfer possibilities that are not addressed by CSS3
      include:
     <ul id=complex-usecases>
      <li>Transferring one page box to one sheet (e.g. single-sided printing);
      <li>Transferring two page boxes to the front and back surfaces of the
       same sheet (e.g. double-sided printing);
      <li>Transferring N (small) page boxes to one sheet (called "N-up");
      <li>Transferring one (large) page box to N x M sheets (called "tiling");
      <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group
       of pages printed on a sheet, which, when folded and trimmed like a
       book, appear in their proper sequence;
      <li>Printing one document to multiple output trays;
      <li>Generating files containing print instructions.
     </ul>
     <h2 class=no-num id=references>References</h2>
     <h3 class=no-num id=normative-references>Normative References</h3>
     <!--begin-normative--> <!-- Sorted by label -->
     <dl class=bibliography>
      <dt
       style="display: none"><!-- keeps the doc valid if the DL is empty -->
       <!---->
      <dt id=CSS21>[CSS21]
      <dd>Bert Bos; et al. <a
       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading
       Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7
       June 2011. W3C Recommendation. URL: <a
       href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
      </dd>
      <!---->
      <dt id=CSS3-BREAK>[CSS3-BREAK]
      <dd>Rossen Atanassov; Elika J. Etemad. <a
       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
       Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
       Draft. (Work in progress.) URL: <a
       href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
      </dd>
      <!---->
      <dt id=CSS3BG>[CSS3BG]
      <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
       Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
       Candidate Recommendation. (Work in progress.) URL: <a
       href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
      </dd>
      <!---->
      <dt id=MEDIAQ>[MEDIAQ]
      <dd>Florian Rivoal. <a
       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
       Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
       href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
      </dd>
      <!---->
      <dt id=PWGMSN>[PWGMSN]
      <dd>Ron Bergman; Tom Hastings. <a
       href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media
       Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer
       Working Group 5101.1-2002. URL: <a
       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>
      </dd>
      <!---->
      <dt id=RFC2119>[RFC2119]
      <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
       words for use in RFCs to Indicate Requirement Levels.</cite></a>
       Internet RFC 2119. URL: <a
       href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
      </dd>
      <!---->
     </dl>
     <!--end-normative-->
     <h3 class=no-num id=informative-references>Informative References</h3>
     <!--begin-informative--> <!-- Sorted by label -->
     <dl class=bibliography>
      <dt
       style="display: none"><!-- keeps the doc valid if the DL is empty -->
       <!---->
      <dt id=CSS3-IMAGES>[CSS3-IMAGES]
      <dd>Elika J. Etemad; Tab Atkins Jr. <a
       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS
       Image Values and Replaced Content Module Level 3.</cite></a> 17 April
 . W3C Candidate Recommendation. (Work in progress.) URL: <a
       href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
      </dd>
      <!---->
      <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
      <dd>Elika J. Etemad; Koji Ishii. <a
       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
       Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
       Draft. (Work in progress.) URL: <a
       href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
      </dd>
      <!---->
      <dt id=JLREQ>[JLREQ]
      <dd>Yasuhiro Anan; et al. <a
       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements
       for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group
       Note. URL: <a
       href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>
      </dd>
      <!---->
     </dl>
     <!--end-informative--></div>
   </div>

Mercurial > drafts / annotate

css3-page/Overview.html@2fa0f76c392e (annotated)

css3-page/Overview.html