WD-css3-page-20061010 113 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS3 Module: Paged Media</title>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <link href="default.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 }
  #margin-values { border-collapse: collapse }
  #margin-values td, #margin-values th {
    padding: 0.2em; border: thin solid black }


  .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 }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet"
  type="text/css" />
 </head>

 <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-->
     </p>

    <h1 id="media">CSS3 Module: Paged Media</h1>

    <h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 10 October
     2006</h2>

    <dl>
     <dt>This version:</dt>

     <dd><a href="http://www.w3.org/TR/2006/WD-css3-page-20061010">
      http://www.w3.org/TR/2006/WD-css3-page-20061010</a></dd>

     <dt>Latest version:</dt>

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

     <dt>Previous version:</dt>

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

     <dt>Editors:</dt>

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

     <dd>Melinda Grant, Hewlett-Packard</dd>
    </dl>
    <!--begin-copyright-->
    <p class="copyright"><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
     &copy; 2006 <a href="http://www.w3.org/"><acronym title="World Wide Web
     Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
     href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
     of Technology">MIT</acronym></a>, <a
     href="http://www.ercim.org/"><acronym title="European Research
     Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
     href="http://www.keio.ac.jp/">Keio</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><em>This section describes the status of this document at the time of
    its publication. Other documents may supersede this document. A list of
    current W3C publications and the latest revision of this technical report
    can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
    index at http://www.w3.org/TR/.</a></em></p>

   <p>Publication as a Working Draft does not imply endorsement by the W3C
    Membership. This is a draft document and may be updated, replaced or
    obsoleted by other documents at any time. It is inappropriate to cite
    this document as other than work in progress.</p>

   <p>The (<a
    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
    public mailing list <a
    href="mailto:www-style@w3.org">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 &#8220;css3-page&#8221; in the subject, preferably like this:
    &#8220;[<!---->css3-page<!---->] <em>&hellip;summary of
    comment&hellip;</em>&#8221;</p>

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

   <p>This document was produced by a group operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
    2004 W3C Patent Policy</a>. W3C maintains a <a
    href="/Style/CSS/Disclosures" 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="http://www.w3.org/2005/10/Process-20051014/tr.html#RecsWD"> Working
    Draft</a> of 10 October 2006.&nbsp; The Last Call period ends on 3
    November 2006.</p>

   <p>Relative to the previous Candidate Recommendation, this version removes
    page-based floats, string-set, and page-policy features, which have been
    moved to <a href="http://www.w3.org/TR/2006/WD-css3-gcpm-20060612/">CSS3
    Generated Content for Paged Media</a>; adds two new features (<a
    class="property" href="#fit">'fit'</a> and <a class="property"
    href="#fit-position">'fit-position'</a>); and incorporates a new
    algorithm for determining margin box sizes as well as miscellaneous
    clarifications and editorial improvements.</p>
   <!-- "Table of contents" -->
   <h2 class="no-num no-toc" id="contents">Table of Contents</h2>
   <!--begin-toc-->
   <ul class="toc">
    <li><a href="#dependencies"><span class="secno">1. </span>Dependencies on
     other CSS Modules</a></li>

    <li><a href="#intro"><span class="secno">2. </span>Introduction</a>
     <ul class="toc">
      <li><a href="#terminology"><span class="secno">2.1.
       </span>Terminology</a></li>
     </ul>
    </li>

    <li><a href="#page-box-page-rule"><span class="secno">3. </span>Page
     Boxes: the @page Rule</a>
     <ul class="toc">
      <li><a href="#page-terms"><span class="secno">3.1. </span>Page
       Terminology and the Page Model</a></li>

      <li><a href="#page-type"><span class="secno">3.2. </span>Page types</a>
       </li>

      <li><a href="#page-size"><span class="secno">3.3. </span>Page size</a>
       <ul class="toc">
        <li><a href="#page-size-prop"><span class="secno">3.3.1. </span>Page
         size: the 'size' property</a></li>

        <li><a href="#page-size-media-query"><span class="secno">3.3.2.
         </span>Media Queries</a></li>

        <li><a href="#renderingpages"><span class="secno">3.3.3.
         </span>Rendering page boxes that do not fit a page sheet</a></li>

        <li><a href="#positioning-page-box"><span class="secno">3.3.4.
         </span>Positioning the page box on the sheet</a></li>
       </ul>
      </li>

      <li><a href="#page-selector-and-context"><span class="secno">3.4.
       </span>Page Selectors and the Page Context</a>
       <ul class="toc">
        <li><a href="#syntax-page-selector"><span class="secno">3.4.1.
         </span>Page selector grammar</a></li>

        <li><a href="#cascading-and-page-context"><span class="secno">3.4.2.
         </span>Cascading in the page context</a></li>
       </ul>
      </li>

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

      <li><a href="#left-right-first"><span class="secno">3.6. </span>Left,
       right, and first pages</a></li>

      <li><a href="#content-outside-box"><span class="secno">3.7.
       </span>Content outside the page box</a></li>
     </ul>
    </li>

    <li><a href="#margin-boxes"><span class="secno">4. </span>Margin
     Boxes</a>
     <ul class="toc">
      <li><a href="#margin-at-rules"><span class="secno">4.1. </span>At-rules
       for margin boxes</a></li>

      <li><a href="#max-margin-dimension"><span class="secno">4.2.
       </span>Maximum Dimension of margin boxes</a></li>

      <li><a href="#margin-dimension"><span class="secno">4.3.
       </span>Dimension of margin boxes</a></li>

      <li><a href="#margin-text-alignment"><span class="secno">4.4.
       </span>Margin boxes and default values</a>
       <ul class="toc">
        <li><a href="#margin-box-ex"><span class="secno">4.4.1. </span>Margin
         box examples</a></li>
       </ul>
      </li>

      <li><a href="#populating-margin-boxes"><span class="secno">4.5.
       </span>Populating margin boxes</a></li>
     </ul>
    </li>

    <li><a href="#page-breaks"><span class="secno">5. </span>Page Breaks</a>
     <ul class="toc">
      <li><a href="#pg-br-before-after"><span class="secno">5.1. </span>Break
       before/after elements: 'page-break-before', 'page-break-after',
       'page-break-inside'</a></li>

      <li><a href="#using-named-pages"><span class="secno">5.2. </span>Using
       named pages: 'page'</a></li>

      <li><a href="#breaks-inside"><span class="secno">5.3. </span>Breaks
       inside elements: 'orphans', 'widows'</a></li>

      <li><a href="#allowed-pg-brk"><span class="secno">5.4. </span>Allowed
       page breaks</a></li>

      <li><a href="#forced-pg-brk"><span class="secno">5.5. </span>Forced
       page breaks</a></li>

      <li><a href="#best-pg-brk"><span class="secno">5.6.
       </span>&quot;Best&quot; page breaks</a></li>
     </ul>
    </li>

    <li><a href="#pg-based-extensions"><span class="secno">6.
     </span>Page-based Extensions to Counters</a>
     <ul class="toc">
      <li><a href="#page-based-counters"><span class="secno">6.1.
       </span>Page-based counters</a></li>
     </ul>
    </li>

    <li><a href="#orienting"><span class="secno">7. </span>Orienting an Image
     on the Page</a></li>

    <li><a href="#the-fit"><span class="secno">8. </span>The 'fit' and
     'fit-position' Properties</a></li>

    <li class="no-num"><a href="#references">References</a>
     <ul class="toc">
      <li class="no-num"><a href="#normative-references">Normative
       References</a></li>

      <li class="no-num"><a href="#informative-references">Informative
       References</a></li>
     </ul>
    </li>
   </ul>
   <!--end-toc-->
   <h2 id="dependencies"><span class="secno">1. </span>Dependencies on other
    CSS Modules</h2>

   <p>This CSS3 module depends on Cascading Style Sheets Level 2 Revision 1
    <a href="#CSS21" rel="biblioentry">[CSS21]<!--{{!CSS21}}--></a> for all
    underlying requirements such as syntax, selectors, box model, fonts,
    etc.&nbsp; It may in the future be updated to depend on other CSS3
    modules rather than on CSS 2.1.</p>
   <!-- "Introduction" -->
   <h2 id="intro"><span class="secno">2. </span>Introduction</h2>

   <p>Paged media (e.g., paper, transparencies, pages that are displayed on
    computer screens, etc.) differ from <a
    href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">
    continuous media</a>
    <!-- update the link once there is a CSS3 module to define it? --> 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:
    </p>

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

    <li> the page properties such as size, orientation, margins, border, and
     padding are specified,</li>

    <li> headers and footers are established within the page margins,</li>

    <li> content such as page counters are placed in the headers and footers,
     and</li>

    <li> orphans and widows can be controlled.</li>
   </ul>

   <p>CSS3 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. Often, but not always, the page box has a one-to-one
    correspondence to a physical sheet onto which the document is ultimately
    rendered (paper, transparency, screen etc.). 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:</p>

   <ul id="complex-usecases">
    <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>

    <li>Transferring two page boxes to the front and back surfaces of the
     same sheet (e.g. double-sided printing);</li>

    <li>Transferring N (small) page boxes to one sheet (called
     &quot;N-up&quot;);</li>

    <li>Transferring one (large) page box to N x M sheets (called
     &quot;tiling&quot;);</li>

    <li>Creating signatures. A signature is a group of pages printed on a
     sheet, which, when folded and trimmed like a book, appear in their
     proper sequence;</li>

    <li>Printing one document to multiple output trays;</li>

    <li>Generating files containing print instructions.</li>
   </ul>

   <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>.&nbsp; In the general case, CSS3 assumes that one page
    box will be transferred to one surface of a sheet of similar size.</p>

   <h3 id="terminology"><span class="secno">2.1. </span>Terminology</h3>

   <p>The keywords &quot;<em class="RFC2119" title="MUST in RFC 2119
    context">MUST</em>&quot;, &quot;<em class="RFC2119" title="SHALL in RFC
    2119 context">SHALL</em>&quot;, &quot;<em class="RFC2119" title="MUST NOT
    in RFC 2119 context">MUST NOT</em>&quot;, &quot;<em class="RFC2119"
    title="SHALL NOT in RFC 2119 context">SHALL NOT</em>&quot;, &quot;<em
    class="RFC2119" title="REQUIRED in RFC 2119 context">REQUIRED</em>&quot;,
    &quot;<em class="RFC2119" title="SHOULD in RFC 2119
    context">SHOULD</em>&quot;, &quot;<em class="RFC2119" title="SHOULD NOT
    in RFC 2119 context">SHOULD NOT</em>&quot;, &quot;<em class="RFC2119"
    title="RECOMMENDED in RFC 2119 context">RECOMMENDED</em>&quot;, &quot;<em
    class="RFC2119" title="MAY in RFC 2119 context">MAY</em>&quot;, and
    &quot;<em class="RFC2119" title="OPTIONAL in RFC 2119
    context">OPTIONAL</em>&quot; when used in this document are to be
    interpreted as described in <cite>RFC 2119</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>
   <!-- @page -->
   <h2 id="page-box-page-rule"><span class="secno">3. </span>Page Boxes: the
    @page Rule</h2>

   <p>In the page model, the document is transferred into one or more page
    boxes. The <a name="ind-page-box"><span class="index-def" id="page-box2"
    title="page box"><dfn id="page-box0">page box</dfn></span></a> is a
    specialized CSS box that maps to a rectangular print media surface.&nbsp;
    It is roughly analogous to the viewport.&nbsp; As for other boxes, a page
    box consists of margin, border, padding, and content areas. The content
    and margin areas of a page box have special functions:</p>

   <ul>
    <li>The content area of a page box is called the <a class="index-def"
     href="#page-area0" id="x" title="page area"></a><a
     name="ind-page-area"><dfn id="page-area0"> page area</dfn></a>. The
     content of the document is flowed into the page area. 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>

    <li>The margin area of a page box is divided into 16 <dfn
     id="margin">margin boxes</dfn>. Each margin box has its own margin,
     border, padding and content areas. Margin boxed are typically used to
     display running headers and footers.</li>
   </ul>

   <p>The properties of a <dfn id="page-box1">page box</dfn> are determined
    by properties established within the <dfn id="page-context0"><a
    href="#page-context">page context</a></dfn>, which is the rule set of the
    @page rule. Page boxes differ from other boxes in that the <span
    class="property"> <span class="property">'width'</span></span> and <span
    class="property">'height'</span> properties do not apply to a page box.
    The size of the page box is specified using the <a class="property"
    href="#size">'size'</a> property in the page context.</p>

   <h3 id="page-terms"><span class="secno">3.1. </span>Page Terminology and
    the Page Model</h3>

   <p>The following terminology and accompanying diagrams help to describe
    the <dfn id="page-model"> page model</dfn>:</p>

   <dl>
    <dt id="page-sheet">Page sheet</dt>

    <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.</dd>

    <dt id="non-printable-area">Non-printable area</dt>

    <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 area along each edge of the page sheet.
     The unprintable region along the left and right edges of the page are
     usually the same size, as are the top and bottom areas.&nbsp; However,
     the top/bottom and left/right areas can be different. A user agent may
     not be aware of this area or how it varies from device to device.
     Printing devices <em class="RFC2119" title="MAY in RFC 2119 context">
     MAY</em> adjust the layout of the document so that content is not lost.
     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>.</dd>

    <dt id="printable-area">Printable area</dt>

    <dd>The printable area is the area of page sheet that a printer is
     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. This
     value is printing device dependent. A user agent may not be aware of
     this area or how it varies from printing device to printing device.
     Printing devices <em class="RFC2119" title="MAY in RFC 2119 context">
     MAY</em> adjust the layout 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>.</dd>

    <dt id="page-box">Page box</dt>

    <dd> <img alt="Illustration of the page box with page area nested within
     the page padding that is within page border that is within the page
     margin" height="266" src="PageBox.png" style="float: right;"
     width="267" /> A page box is derived from the <a
     href="http://www.w3.org/TR/css3-box/">box model</a> and contains
     portions of the document flow destined for rendering on a page sheet.
     The width and height of the page box are determined by the size
     property. Unlike other boxes, the margins of the page box are subdivided
     into <a href="#margin-box"> margin boxes</a>. In the simplest case, the
     page box is congruent with the page sheet. However, there are more
     complex use cases (see the <a href="#complex-usecases"> transfer
     possibilities</a> in the <a href="#intro">Introduction</a>) where the
     page box differs from the page sheet in values such as size or
     orientation.</dd>

    <dt id="page-area">Page area</dt>

    <dd>The page area is a synonym for the content area of the page box. The
     page area acts as a container for all the boxes laid out within a given
     page box.</dd>

    <dt id="margin-box">Margin box</dt>

    <dd>Margin boxes act as containing boxes for header/footer content. The
     following margin boxes are defined and illustrated in the diagram below:

     <table id="margin-box-def" style="width: 90%;" summary="defintion of
      each of the margin boxes">
      <caption>Table 1 Margin Box Definitions</caption>

      <thead>
       <tr>
        <th>Box</th>

        <th>Description</th>

        <th>Placement</th>
       </tr>

       <tr>
        <td colspan="3">
         <hr />
        </td>
       </tr>
      </thead>

      <tbody>
       <tr id="top-margin-boxes-def">
        <th id="top-left-corner-box-def">top-left-corner</th>

        <td> a fixed-size box filling the area defined by the intersection of
         the top and left margins of the page box</td>

        <td> <img alt="the top left corner box with margin, border, and
         padding, nested within intersection of the page&#39;s top and left
         margins" height="47" src="TopLeftCornerBox.png" width="181" /></td>
       </tr>

       <tr id="top-left-box-def">
        <th>top-left</th>

        <td> a variable-width box within the area defined by the top margin
         and adjoining the top-left-corner margin box</td>

        <td> <img alt="the top left box with margin, border, and padding,
         nested in the page&#39;s top margin next to the top left corner box"
         height="47" src="TopLeftMarginBox.png" width="181" /></td>
       </tr>

       <tr id="top-center-box-def">
        <th>top-center</th>

        <td>a variable-width box within the area defined by the top margin,
         centered on the page area, and between the top-left and top-right
         margin boxes</td>

        <td> <img alt="the top center box with margin, border, and padding,
         centered within the page&#39;s top margin" height="47"
         src="TopCenterMarginBox.png" width="181" /></td>
       </tr>

       <tr id="top-right-box-def">
        <th>top-right</th>

        <td>a variable-width box within the area defined by the top margin
         and adjoining the top-right-corner margin box</td>

        <td> <img alt="the top right box with margin, border, and padding,
         nested within the page&#39;s top margin" height="47"
         src="TopRightMarginBox.png" width="181" /></td>
       </tr>

       <tr>
        <th id="top-right-corner-box-def">top-right-corner</th>

        <td>a box filling the area defined by the intersection of the top and
         right margins of the page box</td>

        <td> <img alt="the top right corner box with margin, border, and
         padding, nested within the intersection of the page&#39;s top and
         right margin" height="47" src="TopRightCornerMarginBox.png"
         width="181" /></td>
       </tr>

       <tr id="left-margin-boxes-def">
        <th id="left-top-box-def">left-top</th>

        <td>a variable-height box within the area defined by the left margin
         and adjacent to the bottom of the top-left-corner.</td>

        <td rowspan="3"> <img alt="left-top, left-middle, and left-bottom
         margin boxes in the page box&#39;s left margin" height="226"
         src="LeftMarginBoxes.png" width="181" /></td>
       </tr>

       <tr id="left-middle-box-def">
        <th>left-middle</th>

        <td> a variable-height box in the area defined by the left margin,
         centered on the page area, and between the left-top and left-bottom
         margin boxes.</td>
       </tr>

       <tr id="left-bottom-box-def">
        <th>left-bottom</th>

        <td>a variable-height box within the area defined by the left margin
         and adjacent to the top of the bottom-left-corner.</td>
       </tr>

       <tr id="right-margin-boxes-def">
        <th id="right-top-box-def">right-top</th>

        <td>a variable-height box within the area defined by the right margin
         and adjacent to the bottom of the top-right-corner.</td>

        <td rowspan="3"> <img alt="right-top, right-middle, and right-bottom
         margin boxes in the page box&#39;s right margin" height="226"
         src="RightMarginBoxes.png" width="181" /></td>
       </tr>

       <tr id="right-middle-box-def">
        <th>right-middle</th>

        <td> a variable-height box in the area defined by the right margin,
         centered on the page area, and between the right-top and
         right-bottom margin boxes.</td>
       </tr>

       <tr id="right-bottom-box-def">
        <th>right-bottom</th>

        <td>a variable-height box within the area defined by the right margin
         and adjacent to the top of the bottom-right-corner.</td>
       </tr>

       <tr id="bottom-margin-boxes-def">
        <th id="bottom-left-corner-box-def">bottom-left-corner</th>

        <td>a box filling the area defined by the intersection of the bottom
         and left margins of the page box</td>

        <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" /></td>
       </tr>

       <tr id="bottom-left-box-def">
        <th>bottom-left</th>

        <td>a variable-width box within the area defined by the bottom margin
         and adjoining the bottom-left-corner margin box</td>

        <td> <img alt="bottom left margin box with margin, border, and
         padding, nested within the page&#39;s bottom margin next to the
         bottom-left-corner box" height="48" src="BottomLeftMarginBox.png"
         width="181" /></td>
       </tr>

       <tr id="bottom-center-box-def">
        <th>bottom-center</th>

        <td>a variable-width box within the area defined by the bottom
         margin, centered on the page area, and between the bottom-left and
         bottom-right margin boxes</td>

        <td style="vertical-align: middle;"> <img alt="bottom center box with
         margin, border, and padding, nested within the page&#39;s bottom
         margin and centered on the page" height="48"
         src="BottomCenterMarginBox.png" width="181" /></td>
       </tr>

       <tr id="bottom-right-box-def">
        <th>bottom-right</th>

        <td>a variable-width box within the area defined by the bottom margin
         and adjoining the bottom-right corner margin box</td>

        <td> <img alt="bottom right margin box with margin, border, and
         padding, nested within the page&#39;s bottom margin and next to the
         bottom-right-corner box" height="48" src="BottomRightMarginBox.png"
         width="181" /></td>
       </tr>

       <tr id="bottom-right-corner-box-def">
        <th>bottom-right-corner</th>

        <td>a box filling the area defined by the intersection of the bottom
         and right margins of the page box</td>

        <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" /></td>
       </tr>
      </tbody>
     </table>
    </dd>

    <dt id="content-empty">Content-empty Page</dt>

    <dd>a page surface whose page area contains no printable content other
     than backgrounds and/or borders. A page containing generated content or
     invisible content such as a zero-width space within the page area is not
     a content-empty page. On the other hand, a page containing only a
     background and/or borders and/or padding and/or margin-box content
     <em>is</em> a content-empty page.</dd>
   </dl>

   <h3 id="page-type"><span class="secno">3.2. </span>Page types</h3>

   <p>Page layouts have many possible realizations. Among the aspects of page
    layout that can vary are paper size, orientation of the layout with
    respect to the paper, order of the pages, how the document will be
    printed, and how the document will be bound. Some of these depend upon
    factors such as the major writing direction and the media type that are
    not specified by this module. The following terminology is used to
    describe pages and page treatments:</p>

   <dl>
    <dt id="page-orientation">Page Orientation</dt>

    <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.</dd>

    <dt id="portrait">Portrait Orientation</dt>

    <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.</dd>

    <dt id="landscape">Landscape Orientation</dt>

    <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.</dd>

    <dt id="front-side">Front Side</dt>

    <dd>Media used as a stack of sheets have two sides known as the front and
     the back. Typically, the user agent prints on the front side of the
     media when using only one side of the page sheet. Media used from a roll
     or continuous form will print only on the front side. <span
     class="note">CSS does not provide a mechanism to deal directly with the
     front and back sides, rather page layouts must be designed in terms of
     left and right pages. </span></dd>

    <dt id="back-side">Back Side</dt>

    <dd>The back side of a sheet medium is the side that cannot be seen when
     looking at the front side. Typically, the back side is only used when
     printing on both sides of the medium. Unless using special paper stock
     such as letterhead it does not usually matter which side is the front
     and which is the back.</dd>

    <dt id="duplex-printing">Duplex Printing</dt>

    <dd>Duplex printing uses 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 it actually is.</dd>

    <dt id="binding-edge">Binding Edge treatment</dt>

    <dd>The binding edge is the edge of the page box that is towards 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.</dd>

    <dt id="facing-pages">Facing Pages</dt>

    <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. It is up to the UA to
     determine whether the left page or the right page of a pair of facing
     pages is the earlier one of the sequence. How the UA makes this
     determination is implementation dependent but often depends upon the
     predominant writing direction of the document.</dd>

    <dt id="major-writing-direction">Major Writing Direction</dt>

    <dd>The major writing direction for the document is determined by the UA.
     If the UA supports the <span class="property">'direction'</span>
     property from CSS2 or the CSS 3 Text Module it <em class="RFC2119"
     title="MUST in RFC 2119 context">MUST</em> determine it using the value
     of that property on the root element.</dd>

    <dt id="left-page">Left Page</dt>

    <dd>A page that will 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 major writing direction have the earlier of the facing
     pages on the left. Rules for the left page can be specified using the
     <span class="css">':left'</span> page selector.</dd>

    <dt id="right-page">Right Page</dt>

    <dd>A page that will 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 major writing direction have the earlier of the facing
     pages on the right. Rules for the right page can be specified using the
     <span class="css">':right'</span> page selector.</dd>

    <dt id="first-page">First Page</dt>

    <dd>The first page in a document. The first page is generally printed on
     the front side of a medium. Rules for the first page can be specified
     using the <span class="css"> <code class="css">':first'</code></span>
     page selector. A first page can be either a left page or a right page
     but a UA <em class="RFC2119" title="MUST in RFC 2119 context">MUST</em>
     apply any rules defined for a first page in preference to those defined
     on a left page or a right page.</dd>
   </dl>
   <!-- "Page size: the &#39;size&#39; property" -->
   <h3 id="page-size"><span class="secno">3.3. </span>Page size</h3>

   <p>Different parts of the world use 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>

   <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 class="property" href="#size">'size'</a> property, which requests that
    the document is printed on a page which has 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.</p>

   <h4 id="page-size-prop"><span class="secno">3.3.1. </span>Page size: the
    <a class="property" href="#size">'size'</a> property</h4>

   <table class="propdef" id="namesize" summary="definition of the size
    property">
    <tbody>
     <tr>
      <td><em>Name:</em></td>

      <td><dfn id="size">size</dfn></td>
     </tr>

     <tr>
      <td><em>Value:</em></td>

      <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |
       landscape] ]</td>
     </tr>

     <tr>
      <td><em>Initial:</em></td>

      <td>auto</td>
     </tr>

     <tr>
      <td><em>Applies to:</em></td>

      <td>page context</td>
     </tr>

     <tr>
      <td><em>Inherited:</em></td>

      <td>N/A</td>
     </tr>

     <tr>
      <td><em>Percentages:</em></td>

      <td>N/A</td>
     </tr>

     <tr>
      <td><em>Media:</em></td>

      <td>paged</td>
     </tr>

     <tr>
      <td><em>Computed value:</em></td>

      <td>specified value</td>
     </tr>
    </tbody>
   </table>

   <p>This property specifies the size and orientation of the containing box
    for page content, the <a href="#page-box">page box</a>. In the general
    case, where one page box is rendered onto one <a href="#page-sheet">page
    sheet</a>, the <a class="property" href="#size"> <span
    class="property">'size'</span></a> property also indicates the size of
    the destination page sheet.</p>

   <p>The size of a page box <em class="RFC2119" title="MAY in RFC 2119
    context"> MAY</em> either be &quot;absolute&quot; (fixed size) or
    &quot;relative&quot; (scalable, i.e., fitting available sheet sizes).
    Relative page boxes allow user agents to scale a document and make
    optimal use of the page size.</p>

   <p>Three values for the <a class="property" href="#size">'size'</a>
    property create a relative page box:</p>

   <dl>
    <dt>auto</dt>

    <dd>The page box will be set to the size and orientation of the page
     sheet chosen by the UA.</dd>

    <dt>landscape</dt>

    <dd>Specifies that the page's content be printed in landscape
     orientation. The page box is the same size as the page, and the longer
     sides are horizontal. If a <span class="css"> <code
     class="css">'&lt;length&gt;'</code></span> or <span
     class="css">'&lt;page-size&gt;'</span> is not specified, the size of the
     page sheet is chosen by the UA.</dd>

    <dt>portrait</dt>

    <dd>Specifies that the page's content be printed in portrait orientation.
     The page box is the same size as the page, and the shorter sides are
     horizontal. If a <span class="css">'&lt;length&gt;'</span> or <span
     class="css">'&lt;page-size&gt;'</span> is not specified, the size of the
     page sheet is chosen by the UA.</dd>
   </dl>

   <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">'margin'</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.</p>

    <pre>@page {
  size: auto;/* auto is the initial value */
  margin: 10%;
}</pre>
   </div>

   <p>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 not available, a larger size should be used;
    if not available, the contents of the page box should be scaled down to
    fit the smaller page sheet.</p>

   <dl>
    <dt>&lt;length&gt;</dt>

    <dd> The page box will be set to the given absolute length. 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). The <a href="#page-context">page
     context</a> has a font associated with it either by an explicit use of
     the <span class="property">'font-family'</span> and <span
     class="property">'font-size'</span> properties or from the UA's default
     style sheet. Therefore, values in units of <span class="css">'em'</span>
     and <span class="css">'ex'</span> refer to the page context's font.</dd>
   </dl>

   <div class="example">
    <p>For example:</p>

    <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. The page box in this example requires a page
     sheet size of 8.5&quot;x11&quot; or larger.</p>
   </div>

   <dl>
    <dt>&lt;page-size&gt;</dt>

    <dd>A page size can be specified using one of the following media names.
     This is the equivalent of specifying the <span
     class="css">'&lt;page-size&gt;'</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</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of ISO A5 media: 148mm wide
       and 210 mm high.</dd>

      <dt>A4</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of IS0 A4 media: 210 mm wide
       and 297 mm high.</dd>

      <dt>A3</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of ISO A3 media: 297mm wide
       and 420mm high.</dd>

      <dt>B5</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of ISO B3 media: 176mm wide by
       250mm high.</dd>

      <dt>B4</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of ISO B4 media: 250mm wide by
       353mm high.</dd>

      <dt>letter</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of North American letter
       media: 8.5 inches wide and 11 inches high</dd>

      <dt>legal</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of North American legal: 8.5
       inches wide by 14 inches high.</dd>

      <dt>ledger</dt>

      <dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
       context">SHOULD</em> be set to the size of North American ledger: 11
       inches wide by 17 inches high.</dd>
     </dl>
    </dd>
   </dl>

   <p>These media size names can be used in conjunction with <span
    class="property">'landscape'</span> or <span
    class="property">'portrait'</span> to indicate size and orientation.</p>

   <div class="example">
    <p>For example:</p>

    <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.</p>
   </div>

   <p>User agents <em class="RFC2119" title="SHOULD in RFC2119
    context">SHOULD</em> also support Media Size Self-Describing Names as
    defined in Section 5 of <a href="#PWGMSN"
    rel="biblioentry">[PWGMSN]<!--{{!PWGMSN}}--></a>.</p>

   <h4 id="page-size-media-query"><span class="secno">3.3.2. </span>Media
    Queries</h4>

   <p>This section is informative.</p>

   <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:</p>

   <div class="example" style="font-size: 10pt;">
    <pre>   /* style sheet for &quot;A4&quot; printing */
   @media print and (width: 21cm) and (height: 29.7cm) {
      @page {
         margin: 3cm;
      }
   }

   /* style sheet for &quot;letter&quot; printing */
   @media print and (width: 8.5in) and (height: 11in) {
      @page {
          margin: 1in;
      }
   }
</pre>
   </div>

   <p> In the example above, &quot;A4&quot; sheets are given a
    &quot;3cm&quot; page margin, and &quot;letter&quot; sheets are given a
    &quot;1in&quot; page margin.</p>

   <p>In Media Queries, the page is always considered to be in Portrait
    Orientation. That is, it is not necessary to write Media Queries that
    swap the width and height values to make sure the style sheet is applied.
    </p>

   <h4 id="renderingpages"><span class="secno">3.3.3. </span>Rendering page
    boxes that do not fit a page sheet</h4>

   <p>If a page box does not match the target page sheet dimensions, the user
    agent <em class="RFC2119" title="MAY in RFC 2119 context"> MAY</em>
    choose (in order of preference) to:</p>

   <ul>
    <li>Render the page box at the indicated size on a larger page sheet.</li>

    <li>Rotate the page box 90° if this will make the page box fit the page
     sheet.</li>

    <li>Scale the page box to fit the page sheet. (There is no requirement to
     maintain the aspect ratio of the page or of any elements on the page
     when scaling; however, preservation of the aspect ratio is preferred.)</li>

    <li>Reformat the page contents, including <span
     class="property">'spilling'</span> onto other page sheets.</li>

    <li>Clip overflowed content (least preferred).</li>
   </ul>

   <p>The user agent <em class="RFC2119" title="SHOULD in RFC 2119
    context">SHOULD</em> consult the user before performing these operations.</p>

   <h4 id="positioning-page-box"><span class="secno">3.3.4.
    </span>Positioning the page box on the sheet</h4>

   <p> When the page box is smaller than the page size, the user agent <em
    class="RFC2119" title="SHOULD in RFC 2119 context">SHOULD</em> 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.</p>
   <!-- "Page selector and page context" -->
   <h3 id="page-selector-and-context"><span class="secno">3.4. </span>Page
    Selectors and the Page Context</h3>

   <p>Authors specify the dimensions, orientation, margins, etc. of a page
    box within an <a class="css" href="#page">@page</a> rule. An <a
    class="css" href="#page">@page</a> rule consists of the keyword <a
    class="css" href="#page">'@page'</a>, an <em class="RFC2119"
    title="OPTIONAL in RFC 2119 context"> OPTIONAL</em> page name followed
    with no intervening space by an <em class="RFC2119" title="OPTIONAL in
    RFC 2119 context"> OPTIONAL</em> page pseudo-class and a block of
    declarations and margin rules (said to be in the <dfn
    id="page-context">page context</dfn>).</p>

   <p>The <em class="RFC2119" title="OPTIONAL in RFC 2119
    context">OPTIONAL</em> page name and <em class="RFC2119" title="OPTIONAL
    in RFC 2119 context">OPTIONAL</em> page pseudo-class constitutes the <dfn
    id="page-selector">page selector</dfn>. The page selector specifies for
    which pages the declarations apply. In CSS3, page selectors <em
    class="RFC2119" title="MAY in RFC 2119 context">MAY</em> designate the
    first page of a document, all left pages, all right pages, or pages with
    specific names.</p>

   <p>Properties for the <a href="#page-box">page box</a> are specified
    within the page context.</p>

   <h4 id="syntax-page-selector"><span class="secno">3.4.1. </span>Page
    selector grammar</h4>

   <p>The syntax for a page selector is a specialization of the generic
    at-rule and <em class="RFC2119" title="MUST in RFC 2119 context">
    MUST</em> adhere to the following (more strict) grammar:</p>

   <p>See <a href="#CSS21" rel="biblioentry">[CSS21]<!--{{!CSS21}}--></a>,
    Section 4.1.1 and Appendix G for the expansion of missing productions:</p>

   <p id="specializatons-of-ATKEYWORD">All new lexical tokens are
    specializations of the ATKEYWORD lexical token:</p>

   <pre class="lexical">PAGE_SYM              ::= &quot;@page&quot;
TOPLEFTCORNER_SYM     ::= &quot;@top-left-corner&quot;
TOPLEFT_SYM           ::= &quot;@top-left&quot;
TOPCENTER_SYM         ::= &quot;@top-center&quot;
TOPRIGHT_SYM          ::= &quot;@top-right&quot;
TOPRIGHTCORNER_SYM    ::= &quot;@top-right-corner&quot;
BOTTOMLEFTCORNER_SYM  ::= &quot;@bottom-left-corner&quot;
BOTTOMLEFT_SYM        ::= &quot;@bottom-left&quot;
BOTTOMCENTER_SYM      ::= &quot;@bottom-center&quot;
BOTTOMRIGHT_SYM       ::= &quot;@bottom-right&quot;
BOTTOMRIGHTCORNER_SYM ::= &quot;@bottom-right-corner&quot;
LEFTTOP_SYM           ::= &quot;@left-top&quot;
LEFTMIDDLE_SYM        ::= &quot;@left-middle&quot;
LEFTBOTTOM_SYM       ::= &quot;@right-bottom&quot;
RIGHTTOP_SYM          ::= &quot;@right-top&quot;
RIGHTMIDDLE_SYM       ::= &quot;@right-middle&quot;
RIGHTBOTTOM_SYM       ::= &quot;@right-bottom&quot;


<a href="#page" id="syntax-prod-page">page</a> :
       PAGE_SYM S* IDENT? pseudo_page? S*
       <code class="css">'{'</code> S* [ declaration | margin ]? [ <code class="css">';'</code> S* [ declaration | margin ]? ]* <code class="css">'}'</code> S*
       ;

<span id="syntax-prod-pseudo-page">pseudo_page</span> :
       <code class="css">':'</code> [ &quot;left&quot; | &quot;right&quot; | &quot;first&quot; ]
       ;

<span id="syntax-prod-margin">margin</span> :
       margin_sym S* <code class="css">'{'</code> declaration [ <code class="css">';'</code> S* declaration? ]* <code class="css">'}'</code> 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 following restrictions and
    relaxations are made to the syntax above:</p>

   <ul>
    <li>The value <span class="property">'auto'</span> <em class="RFC2119"
     title="MAY NOT in RFC 2119 context">may not</em> be used as a page name
     and <em class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be
     treated as a syntax error.</li>
   </ul>

   <div class="example">
    <p>The following are examples of page selectors (declaration block
     intentionally left blank)</p>

    <pre>@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
@page:first { ... };
</pre>

    <p>The following are examples of margin boxes where the declaration
     blocks are intentionally left blank.</p>

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

   <h4 id="cascading-and-page-context"><span class="secno">3.4.2.
    </span>Cascading in the page context</h4>

   <p>Optionally, @page rules can have one pseudo-class (':first',':left', or
    <span class="property">'right'</span>) and/or one named page. The
    specificity of @page rules are computed in an analogous manner to the
    computations defined in the <a
    href="http://www.w3.org/TR/CSS21/selector.html"> Selectors</a> module:</p>

   <ul>
    <li>if an @page rule has a named page, f=1</li>

    <li>if an @page rule has a <code class="css">':first'</code>
     pseudo-class, g=1</li>

    <li>if an @page rule has a <code class="css">':left'</code> or <code
     class="css">':right'</code> pseudo-class, h=1</li>
   </ul>

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

   <div class="example">
    <p>Some page specificity calculation examples follow:</p>

    <pre>        @page { } /* f=0 g=0 h=0 -&gt; specificity = 0 */
        @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 1 */
        @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 10 */
        @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:</p>

    <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 <span class="css">4 centimeters</span> and
     all other pages (i.e., the right pages) will have a left margin of <span
     class="css">3 centimeters</span>.</p>
   </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 margin box and green text in the top-right margin box, while
     subsequent pages will have red text in the margin boxes.</p>

    <pre>@page :first {
  color: green;

  @top-left {
    content: &quot;foo&quot;;
    color: blue;
  }
  @top-right {
    content: &quot;bar&quot;;
  }
}

@page { color: red;
  @top-center {
    content: &quot;Page &quot; 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 margin boxes:</p>

    <pre>@page { margin: 25mm;}
@page { font-size: 14pt;}</pre>
   </div>

   <h3 id="page-properties"><span class="secno">3.5. </span>Page Properties</h3>

   <div>
    <p>The following properties can be used in the <a
     href="#page-context">page context</a> to style the appearance of the
     page box:</p>

    <ul>
     <li><a href="#page-size">size</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
      background properties</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
      properties</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
      properties</a>, and</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
      properties</a>.</li>
    </ul>

    <p>These properties can be used in the page context to set counters:</p>

    <ul>
     <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">
      counter-reset, counter-increment</a>,</li>
    </ul>

    <p>These properties can be used in the page context to style the content
     of margin boxes:</p>

    <ul>
     <li><a
      href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>,</li>

     <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>,</li>

     <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
    </ul>

    <p>That is, when set in the page context, the values become the initial
     values for the margin boxes.</p>

    <p>These properties can be used in the margin context to style margin
     boxes and their content:</p>

    <ul>
     <li><a
      href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
      background properties</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
      properties</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
      properties</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
      properties</a>,</li>

     <li><a
      href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>,</li>

     <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>,</li>

     <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>

     <li><a
      href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>,</li>
    </ul>

    <p>The normal rules for box properties apply with the following
     exceptions:</p>

    <ul>
     <li>Values in units of <span class="css">'em'</span> and <span
      class="css">'ex'</span> refer to the page context's font. The <a
      href="#page-context">page context</a> has a font associated with it
      either by an explicit use of the <span class="property"> <span
      class="property">'font-family'</span></span> and <span
      class="property">'font-size'</span> properties or from their initial
      values.</li>

     <li> Percentage values on the margin, padding and border properties are
      relative to the dimensions of the containing box (defined by the <a
      class="property" href="#size">'size'</a> property in the page context).
      For left and right, the margin, border and padding percentages are
      relative to the width of the containing box; for top and bottom, the
      margin, border and padding percentages are relative to the height of
      the containing box.</li>

     <li>The <span class="property">'width'</span> and <span
      class="property"> <span class="property">'height'</span></span>
      properties do not apply to the page box (and <em class="RFC2119"
      title="SHOULD in RFC 2119 context"> SHOULD</em> be treated as if they
      were set to <span class="css">'auto'</span>).</li>

     <li>The page background applies to the entire page box, including the
      page margins.</li>
    </ul>

    <p>The page background is painted first, and covers the entire <a
     href="#page-box">page box</a>.&nbsp; A margin-box background is painted
     over (on top of) the page background.&nbsp; The root element then paints
     the canvas within the <a href="#page-area">page area</a>, which contains
     the portions of the root element formatted for a single page (including
     the margins of the root element).&nbsp;</p>

    <p>The origin of the page background is the upper-left corner of the page
     area.</p>

    <p>When a box is interrupted at the bottom of one page and continued on
     the top of the next, the box's margins, borders, and padding are not
     rendered at the bottom and top of the respective pages. Properties in
     other modules may modify this behavior. (At the time of writing, a
     property <span class="property">'border-break'</span> <a href="#CSS3BG"
     rel="biblioentry">[CSS3BG]<!--{{CSS3BG}}--></a> is under consideration.)</p>

    <p>It is <em class="RFC2119" title="SHOULD in RFC2119
     context">recommended</em> that user agents with a <a
     href="#non-printable-area">non-printable area</a> (that is, user agents
     which cannot print over the entire sheet surface) establish a default
     page margin via the user agent stylesheet that includes the
     non-printable area. It is further <em class="RFC2119" title="SHOULD in
     RFC2119 context"> recommended</em> that authors assume that the default
     page area will not include unprintable regions.</p>

    <h3 id="left-right-first"><span class="secno">3.6. </span>Left, right,
     and first pages</h3>

    <p>When printing double-sided documents, the <a href="#page-box">page
     boxes</a> on left and right pages <em class="RFC2119" title="MAY in RFC
     2119 context">MAY</em> be different. This can be expressed through CSS
     pseudo-classes defined in the <a href="#page-context"> page context</a>.</p>

    <p>All pages are automatically classified by user agents into either the
     <span class="css">':left'</span> or <span class="css">':right'</span>
     pseudo-class. The following example creates left and right binding edges
     using these pseudo-classes.</p>

    <div class="example">
     <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" title="MUST in RFC 2119
     context">MUST</em> honor these declarations even if the user agent does
     not transfer the page boxes to left and right sheets (e.g., a printer
     that only prints single-sided).</p>

    <p>Authors <em class="RFC2119" title="MAY in RFC 2119 context">MAY</em>
     also specify style for the first page of a document with the <span
     class="css">':first'</span> pseudo-class:</p>

    <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>Whether the first page of a document is <span
     class="css">':left'</span> or <span class="css"> <code
     class="css">':right'</code></span> depends on the major writing
     direction of the document and is outside the scope of this document.
     However, to force a <span class="css"> <code
     class="css">':left'</code></span> or <span class="css">':right'</span>
     first page, authors <em class="RFC2119" title="MAY in RFC 2119 context">
     MAY</em> insert a page break before the first generated box (e.g., in
     HTML, specify this for the BODY element).</p>

    <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">':right'</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></p>
    </div>

    <div class="note">
     <p><em><strong>Note.</strong> Future versions of CSS may include other
      page pseudo-classes.</em></p>
    </div>

    <h3 id="content-outside-box"><span class="secno">3.7. </span>Content
     outside the page box</h3>

    <p>When formatting content in the page model, some content <em
     class="RFC2119" title="MAY in RFC 2119 context"> MAY</em> end up outside
     the page box. For example, an element whose <span class="property">
     <span class="property">'white-space'</span></span> property has the
     value <span class="css">'pre'</span> <em class="RFC2119" title="MAY in
     RFC 2119 context"> MAY</em> generate a box that is wider than the page
     box. Also, when boxes are positioned absolutely, they <em
     class="RFC2119" title="MAY in RFC 2119 context"> MAY</em> end up in
     &quot;inconvenient&quot; locations. For example, images <em
     class="RFC2119" title="MAY in RFC 2119 context"> MAY</em> be placed on
     the edge of the page box. Similarly when boxes use fixed or relative
     positioning, they <em class="RFC2119" title="MAY in RFC 2119 context">
     MAY</em> also end up outside of the page box.</p>

    <p>A specification for the exact formatting of such elements lies outside
     the scope of this document. However, we recommend that authors and user
     agents observe the following general principles concerning content
     outside the page box:</p>

    <ul>
     <li>User agents <em class="RFC2119" title="SHOULD in RFC 2119
      context">SHOULD</em> avoid generating a large number of empty page
      boxes to honor the positioning of elements (e.g., you don't want to
      print 100 blank pages). Note, however, that generating a small number
      of empty page boxes <em class="RFC2119" title="MAY in RFC 2119
      context"> MAY</em> be necessary to honor the <span
      class="css">'left'</span> and <span class="css"> <span
      class="property">'right'</span></span> values for <a class="property"
      href="#page-break-before">'page-break-before'</a> and <a
      class="property" href="#page-break-after"> <span
      class="property">'page-break-after'</span></a>.</li>

     <li>Authors <em class="RFC2119" title="SHOULD in RFC 2119
      context">SHOULD</em> not position elements in inconvenient locations
      just to avoid rendering them. Instead:
      <ul>
       <li>To suppress box generation entirely, set the <span
        class="property"> <span class="property">'display'</span></span>
        property to <span class="css">'none'</span>.</li>

       <li>To make a box invisible, set the <span
        class="property">'visibility'</span> property.</li>
      </ul>
     </li>

     <li>User agents <em class="RFC2119" title="MAY in RFC 2119
      context">MAY</em> handle boxes positioned outside the page box in
      several ways, including discarding them or creating page boxes for them
      at the end of the document.</li>
    </ul>
    <!-- "Margin boxes" -->
    <h2 id="margin-boxes"><span class="secno">4. </span>Margin Boxes</h2>

    <p>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. The location of page headers and footer
     is one of the many graphic design choices a document's author makes.</p>

    <dl>
     <dt>Page Header</dt>

     <dd>Typically, a page header 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">'top-left-corner'</span>, <span
      class="css">'top-left'</span>, <span class="css">'top-center'</span>,
      <span class="css">'top-right'</span> and <span
      class="css">'top-right-corner'</span> margin boxes. Another design, for
      vertically written documents, could use the <span
      class="css">'right-top'</span>, <span
      class="css">'right-middle'</span>, and <span
      class="css">'right-bottom'</span> margin boxes for <a
      href="#right-page">right facing pages</a> and <span
      class="css">'left-top'</span>, <span class="css">'left-middle'</span>,
      and <span class="css">'left-bottom'</span> for <a
      href="#left-page">left facing pages</a>. However, there are no
      constraints placed on the use of margin boxes for page headers, other
      than those expressed in the discussion of <a
      href="#page-selector-syntax-restrict">restrictions to the grammar of
      the page selector</a></dd>

     <dt>Page Footer</dt>

     <dd>Typically, the page footer is 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">'bottom-left-corner'</span>, <span
      class="css">'bottom-left'</span>, <span
      class="css">'bottom-center'</span>, <span
      class="css">'bottom-right'</span> and <span
      class="css">'bottom-right-corner'</span> margin boxes as the page
      footer. The design of a vertically written document could use the
      margin boxes of the binding edge of the page for the page footer.
      However, there are no constraints placed on the use of margin boxes for
      page footers, other than those expressed in the discussion of <a
      href="#page-selector-syntax-restrict">restrictions to the grammar of
      the page selector</a></dd>
    </dl>

    <p>Please note that the margin boxes are oriented with respect to the
     content and are independent of page orientation, for example the top
     margin boxes are above the page box in both portrait and landscape
     orientation.</p>

    <p>Margin boxes are created through <a href="#margin-at-rules">margin
     at-rules</a> inside the <a href="#page-context">page context</a>.</p>
    <!-- "Margin at-rules" -->
    <h3 id="margin-at-rules"><span class="secno">4.1. </span>At-rules for
     margin boxes</h3>

    <p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an <a
     href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the
     margin box (e.g. <span class="css">'@top-left'</span>) and a block of
     declarations (said to be in the <dfn id="margin-context">margin
     context</dfn>).</p>

    <div class="example">
     <p>The following style sheet establishes a page header containing the
      title (&quot;Hamlet&quot;) on the left side and the page number,
      preceded by &quot;Page &quot;, on the right side:</p>

     <pre>@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: &quot;Hamlet&quot;;
  }
  @top-right {
    content: &quot;Page &quot; counter(page);
  }
}</pre>
    </div>

    <h3 id="max-margin-dimension"><span class="secno">4.2. </span>Maximum
     Dimension of margin boxes</h3>

    <p>The maximum potential width and height of each margin box is
     determined by establishing the containing box for the margin box in the
     steps shown below.&nbsp; There are two quantities used in the following
     calculations:</p>

    <ul>
     <li> <dfn id="MaxBoxWidth">max box width</dfn>, which is the sum of the
      width of the page's left padding area, the width of the <a
      href="#page-box">page area</a>, and the width of the page's right
      padding area. In other words, it is the distance between the <a
      href="#page-box">left page border and the right page border</a>. This
      quantity is used when calculating dimensions of the top and bottom
      margin boxes.</li>

     <li> <dfn id="MaxBoxHeight">max box height</dfn>, which is the sum of
      the height of the page's top padding area, the height of the <a
      href="#page-box">page area</a>, and the height of the page's right
      padding area. In other words, it is the distance between the <a
      href="#page-box">top page border and the bottom page border</a>.&nbsp;
      This quantity is used when calculating dimensions of the left and right
      margin boxes.</li>
    </ul>

    <h3 id="margin-dimension"><span class="secno">4.3. </span>Dimension of
     margin boxes</h3>

    <p>Definitions: The &quot;outer width&quot; of a margin box is the sum of
     its used left and right margin, used left and right border, used left
     and right padding, and used width. The &quot;outer height&quot; of a
     margin box is the sum of its used top and bottom margin, used top and
     bottom border, used top and bottom padding and used height.</p>

    <p>The following rules apply to <span class="property">'top-left'</span>,
     <span class="property">'top-center'</span> and <span
     class="property">'top-right'</span> margin boxes, which are referred to
     as [1], [2], and [3], respectively, in the expression below.</p>

    <p>Rules:</p>

    <ul>
     <li>The UA chooses used values for each box's width, left and right
      margin, left and right border thickness, and left and right padding. It
      chooses them in such a way that the value of:
      <div>
       <pre>
    left-margin[1]² + left-margin[2]² + left-margin[3]² +
    right-margin[1]² + 	right-margin[2]² + right-margin[3]²
</pre>
      </div>
      is as small as possible under the constraints below.
      (&quot;foo[n]&quot; stands for the used value of property foo of the
      n'th box and &quot;x²&quot; for the square of x.)
      <ol>
       <li>The sum of the outer widths of the three boxes is equal to max box
        width.</li>

       <li>If the center box is not empty or if its computed width is not
        <span class="property">'auto'</span>, then the outer widths of the
        other two boxes are equal to each other (i.e., the center box is
        centered in that case).</li>

       <li>If a box is empty and its computed width is <span
        class="property">'auto'</span>, then the used values of its left and
        right padding and left and right border are all 0. (This makes such a
        box invisible, because, by item 5, its width is also 0.)</li>

       <li>If a box is empty and its computed width is <span
        class="property">'auto'</span>, then the used values of its left and
        right padding and left and right border are all 0. (This makes such a
        box invisible, because, by item 5, its width is also 0.)</li>

       <li>If a box's computed width is <span class="property">'auto'</span>,
        then: min intrinsic width &lt;= used width &lt;= max intrinsic width.
        </li>

       <li>The used values of the left box's left margin, the center box's
        left and right margin and the right box's right margin are their
        respective computed values, unless that computed value is <span
        class="property">'auto'</span>.</li>

       <li>The used values of the left box's right margin and the right box's
        left margin are their respective computed values, unless that
        computed value is <span class="property">'auto'</span>.</li>
      </ol>
     </li>

     <li>If the above constraints are contradictory
      (&quot;over-constrained&quot;), then constraint 7 is replaced by 7a:
      <ol>
       <li style="list-style-type: none;">7a. If the computed values of the
        left box&#39;s left and right margins are &#39;auto and not
        &#39;auto&#39;, respectively, then the used value of the right margin
        is its computed value. If the computed values of the right box&#39;s
        left and right margins are not &#39;auto&#39; and &#39;auto&#39;,
        respectively, then the used value of the left margin is its computed
        value. This effectively means that the specified right margin of the
        left box is ignored if necessary, and ditto for the left margin of
        the right box.</li>
      </ol>
     </li>

     <li>Note that, by their definitions, margins <em class="RFC2119"
      title="MAY in RFC2119 context">may</em> be negative, but widths <em
      class="RFC2119" title="MAY NOT in RFC2119 context">may not.</em></li>
    </ul>

    <p>The used values for bottom-left, bottom-center and bottom-right are
     established by the same rules.</p>

    <p>The used values for left-top, left-middle and left-bottom boxes are
     established by the same rules, with &quot;width&quot; replaced by
     &quot;height&quot;, &quot;left&quot; by &quot;top&quot;,
     &quot;right&quot; by &quot;bottom&quot; and &quot;center&quot; by
     &quot;middle&quot;.</p>

    <p>The used values for right-top, right-middle and right-bottom boxes are
     established by the same rules as for left-top, left-middle and
     left-bottom.</p>

    <h3 id="margin-text-alignment"><span class="secno">4.4. </span>Margin
     boxes and default values</h3>

    <p>Margin boxes have an initial value of zero for padding, border and
     margin. The default height of top boxes is the value of the page box's
     top margin. The default height of the bottom boxes is the value of the
     page box's bottom margin.</p>

    <p>The initial value for <span class="property">'content'</span> is <span
     class="css"> <span class="property">'none'</span></span>. The initial
     <span class="property">'width'</span> and <span
     class="property">'height'</span> of margin boxes is <span class="css">
     <span class="property">'auto'</span></span>. The initial value of
     text-align and vertical-align is defined below:</p>

    <table id="margin-values" style="border-collapse: collapse;"
     summary="definition of margin box default properties">
     <caption>Table 2. Initial values for Margin Boxes</caption>

     <thead>
      <tr>
       <th>Margin box</th>

       <th><span class="property">'text-align'</span></th>

       <th><span class="property">'vertical-align'</span></th>
      </tr>
     </thead>

     <tbody>
      <tr>
       <td><a href="#top-left-corner-box-def">top-left-corner</a></td>

       <td align="center">right</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#top-left-box-def">top-left</a></td>

       <td align="center">left</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#top-center-box-def">top-center</a></td>

       <td align="center">center</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#top-right-box-def">top-right</a></td>

       <td align="center">right</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#top-right-corner-box-def">top-right-corner</a></td>

       <td align="center">left</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#left-top-box-def">left-top</a></td>

       <td align="center">center</td>

       <td align="center">top</td>
      </tr>

      <tr>
       <td><a href="#left-middle-box-def">left-middle</a></td>

       <td align="center">center</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#left-bottom-box-def">left-bottom</a></td>

       <td align="center">center</td>

       <td align="center">bottom</td>
      </tr>

      <tr>
       <td><a href="#right-top-box-def">right-top</a></td>

       <td align="center">center</td>

       <td align="center">top</td>
      </tr>

      <tr>
       <td><a href="#right-middle-box-def">right-middle</a></td>

       <td align="center">center</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#right-bottom-box-def">right-bottom</a></td>

       <td align="center">center</td>

       <td align="center">bottom</td>
      </tr>

      <tr>
       <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a></td>

       <td align="center">right</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#bottom-left-box-def">bottom-left</a></td>

       <td align="center">left</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#bottom-center-box-def">bottom-center</a></td>

       <td align="center">center</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#bottom-right-box-def">bottom-right</a></td>

       <td align="center">right</td>

       <td align="center">middle</td>
      </tr>

      <tr>
       <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a></td>

       <td align="center">left</td>

       <td align="center">middle</td>
      </tr>
     </tbody>
    </table>

    <h4 id="margin-box-ex"><span class="secno">4.4.1. </span>Margin box
     examples</h4>

    <p>The following is a collection of examples of margin box usage.</p>

    <div class="example">
     <p>Here is an example of a page with only a top-left header:</p>

     <pre>@page {
  @top-left { content: &quot;Header in Left Cell (top-left)&quot; }
}</pre>

     <p>Because there are no contents defined for the top-center or the
      top-right margin boxes, the extent of the top-left margin box is
      allowed to cross the center of the page box.</p>

     <p><img alt="Header Example 1" height="177" src="header-ex-1.png"
      width="737" /></p>
    </div>

    <div class="example">
     <p>The following is an example of a page with a centered header:</p>

     <pre>@page {
  @top-center { content: &quot;Header in Center Cell (top-center)&quot; }
}</pre>

     <p><img alt="Header Example 2" height="177" src="header-ex-2.png"
      width="737" /></p>
    </div>

    <div class="example">
     <p>The following is an example of a page with a single header in the
      top-right margin box:</p>

     <pre>@page {
  @top-right { content: &quot;Header in Right Cell (top-right)&quot; }
}</pre>

     <p>Because the content of the center cell is empty, the extent of the
      top-right margin box is allowed to cross the center of the page box.</p>

     <p><img alt="Header Example 3" height="177" src="header-ex-3.png"
      width="737" /></p>
    </div>

    <div class="example">
     <p>The following is an example of a page with a top-center and a
      top-left header:</p>

     <pre>@page {
  @top-left { content: &quot;Left Cell (top-left)&quot; }
  @top-center { content: &quot;Header in Center Cell (top-center)&quot; }
}</pre>

     <p><img alt="Header Example 4" height="177" src="header-ex-4.png"
      width="737" /></p>
    </div>

    <div class="example">
     <p>The following is an example of a page with a top-center and a
      top-right header:</p>

     <pre>@page {
  @top-center { content: &quot;Header in Center Cell (top-center)&quot; }
  @top-right { content: &quot;Right Cell (top-right)&quot; }
}</pre>

     <p><img alt="Header Example 5" height="177" src="header-ex-5.png"
      width="737" /></p>
    </div>

    <div class="example">
     <p>The following is an example of a page with top-left and top-right
      headers:</p>

     <pre>@page {
  @top-left { content: &quot;Header in top-left with approx. &quot;
                     &quot;twice as many words as right cell.&quot; }
  @top-right { content: &quot;Right cell (top-right)&quot; }
}</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. As the intrinsic width
      of the top-left contents is approximately twice the intrinsic width of
      that of the top-right, the top-left margin box is approximately twice
      as wide as the top-right margin box.</p>

     <p><img alt="Header Example 6" height="177" src="header-ex-6.png"
      width="737" /></p>
    </div>

    <h3 id="populating-margin-boxes"><span class="secno">4.5.
     </span>Populating margin boxes</h3>

    <p>A margin box is instantiated if a margin context is established and
     one of the following conditions holds:</p>

    <ul>
     <li>The computed value of <span class="property">'content'</span> is not
      <span class="css"> <span class="property">'none'</span></span>.</li>

     <li>The properties <span class="css">'width'</span> and <span
      class="css"> <span class="property">'height'</span></span> are set in
      the <a href="#margin-context">margin context</a>.</li>
    </ul>

    <div class="example">
     <p>This example style sheet could be used to create a centered header
      with the current chapter name:</p>

     <pre>body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
  margin: 10%;
  @top-center { content: &quot;Chapter&quot; counter(chapter) }
}</pre>
    </div>

    <p>Note that a counter value could be updated many times on a given page.
     The value of the counter at the beginning of page processing <em
     class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be used by
     default.</p>

    <h2 id="page-breaks"><span class="secno">5. </span>Page Breaks</h2>

    <p>The following sections explain page formatting in CSS3 paged media.
     Five properties indicate where the user agent <em class="RFC2119"
     title="MAY in RFC 2119 context">MAY</em> or <em class="RFC2119"
     title="SHOULD in RFC 2119 context">SHOULD</em> break pages, and on what
     page (left or right) the subsequent content <em class="RFC2119"
     title="SHOULD in RFC 2119 context">SHOULD</em> resume. 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.</p>

    <h3 id="pg-br-before-after"><span class="secno">5.1. </span>Break
     before/after elements: <a class="property"
     href="#page-break-before">'page-break-before'</a>, <a class="property"
     href="#page-break-after">'page-break-after'</a>, <a class="property"
     href="#page-break-inside">'page-break-inside'</a></h3>

    <table class="propdef" id="namepage-break-before" summary="property
     definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="page-break-before">page-break-before</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>auto | always | avoid | left | right</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>auto</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>block-level elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>no</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>paged</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <table class="propdef" id="namepage-break-after" summary="property
     definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="page-break-after">page-break-after</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>auto | always | avoid | left | right</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>auto</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>block-level elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>no</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>paged</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <table class="propdef" id="namepage-break-inside" summary="property
     definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="page-break-inside">page-break-inside</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>auto | avoid</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>auto</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>block-level elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>yes</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>paged</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <p>Values for these properties have the following meanings:</p>

    <dl>
     <dt>auto</dt>

     <dd>Neither force nor forbid a page break before (after, inside) the
      generated box.</dd>

     <dt>always</dt>

     <dd>Always force a page break before (after) the generated box.</dd>

     <dt>avoid</dt>

     <dd>Avoid a page break before (after, inside) the generated box.</dd>

     <dt>left</dt>

     <dd>Force one or two page breaks before (after) the generated box so
      that the next page is formatted as a left page.</dd>

     <dt>right</dt>

     <dd>Force one or two page breaks before (after) the generated box so
      that the next page is formatted as a right page.</dd>
    </dl>

    <p>A potential page break location is typically under the influence of
     the parent element's <a class="property"
     href="#page-break-inside">'page-break-inside'</a> property, the <a
     class="property" href="#page-break-after"> <span
     class="property">'page-break-after'</span></a> property of the preceding
     element, and the <a class="property" href="#page-break-before"> <span
     class="property">'page-break-before'</span></a> property of the
     following element. When these properties have values other than <span
     class="css">'auto'</span>, the values <span class="css"> <span
     class="property">'always'</span></span>, <span
     class="css">'left'</span>, and <span class="css">'right'</span> take
     precedence over <span class="css">'avoid'</span>. See the section on <a
     href="#allowed-pg-brk"> allowed page breaks</a> for the exact rules on
     how these properties <em class="RFC2119" title="MAY in RFC 2119
     context"> MAY</em> force or suppress a page break.</p>

    <h3 id="using-named-pages"><span class="secno">5.2. </span>Using named
     pages: <a class="property" href="#page">'page'</a></h3>

    <table class="propdef" id="namepage" summary="property definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="page">page</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>auto | &lt;identifier&gt;</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>auto</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>block-level elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>yes</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>paged</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <p>The <a class="property" href="#page">'page'</a> property can be used
     to specify a particular type of page where an element <em
     class="RFC2119" title="SHOULD in RFC 2119 context"> SHOULD</em> be
     displayed.</p>

    <div class="example">
     <p>This example will put all tables on a right-hand side landscape page
      (named &quot;rotated&quot;):</p>

     <pre>@page rotated { size: landscape }
table { page: rotated; page-break-before: right }</pre>
    </div>

    <p>The <a class="property" href="#page">'page'</a> property works as
     follows: If a block box with inline content has a <a class="property"
     href="#page">'page'</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. See <a href="#forced-pg-brk">&quot;Forced page
     breaks&quot; below</a>.</p>

    <div class="example">
     <p>In this example, the two tables are rendered on landscape pages
      (indeed, on the same page, if they fit).&nbsp; The page type
      &quot;narrow&quot; is used for the &lt;p&gt; after the second table, as
      the page properties for the table element are no longer in effect:</p>

     <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 <span class="property">'narrow'</span> page&lt;/p&gt;
&lt;/div&gt;</pre>
    </div>

    <h3 id="breaks-inside"><span class="secno">5.3. </span>Breaks inside
     elements: <a class="property" href="#orphans">'orphans'</a>, <a
     class="property" href="#widows">'widows'</a></h3>

    <table class="propdef" id="nameorphans" summary="property definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="orphans">orphans</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>&lt;integer&gt;</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>2</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>block-level elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>yes</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>visual</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <table class="propdef" id="namewidows" summary="property definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="widows">widows</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>&lt;integer&gt;</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>2</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>block-level elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>yes</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>visual</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <p>The <a class="property" href="#orphans">'orphans'</a> property
     specifies the minimum number of lines of a paragraph that <em
     class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be left at
     the bottom of a page. The <a class="property"
     href="#widows">'widows'</a> property specifies the minimum number of
     lines of a paragraph that <em class="RFC2119" title="MUST in RFC 2119
     context"> MUST</em> be left at the top of a page. Examples of how they
     are used to control page breaks are given below.</p>

    <p>If a paragraph contains fewer lines than the value of <a
     class="property" href="#widows">'widows'</a> or <a class="property"
     href="#orphans">'orphans'</a>, the rule is relaxed.</p>

    <h3 id="allowed-pg-brk"><span class="secno">5.4. </span>Allowed page
     breaks</h3>

    <p>In the normal flow, page breaks <em class="RFC2119" title="MAY in RFC
     2119 context"> may</em> occur at the following places:</p>

    <ol>
     <li>In the vertical margin between block boxes (or rows in a table).
      When a page break occurs here, the computed values of the relevant
      <span class="property"> <span
      class="property">'margin-top'</span></span> and <span
      class="property">'margin-bottom'</span> properties are set to <span
      class="css"> <code class="css">'0'</code></span>.</li>

     <li>Between line boxes inside a block box.</li>
    </ol>

    <p>These breaks are subject to the following rules:</p>

    <ul>
     <li><strong>Rule A:</strong> Breaking at (1) is allowed only if the <a
      class="property" href="#page-break-after">'page-break-after'</a> and <a
      class="property" href="#page-break-before"> <span
      class="property">'page-break-before'</span></a> properties of all the
      elements generating boxes that meet at this margin allow it, which is
      when at least one of them has the value <span class="css"> <span
      class="property">'always'</span></span>, <span
      class="css">'left'</span>, or <span class="css">'right'</span>, or when
      all of them are <span class="css">'auto'</span>.</li>

     <li><strong>Rule B:</strong> However, if all of them are <span
      class="css"> <span class="property">'auto'</span></span> and the
      nearest common ancestor of all the elements has a <a class="property"
      href="#page-break-inside"> <span
      class="property">'page-break-inside'</span></a> value of <span
      class="css">'avoid'</span>, then breaking here is not allowed.</li>

     <li><strong>Rule C:</strong> Breaking at (2) is allowed only if the
      number of line boxes between the break and the start of the enclosing
      block box is the value of <a class="property"
      href="#orphans">'orphans'</a> or more, and the number of line boxes
      between the break and the end of the box is the value of <a
      class="property" href="#widows"> <span
      class="property">'widows'</span></a> or more.</li>

     <li><strong>Rule D:</strong> In addition, breaking at (2) is allowed
      only if the <a class="property" href="#page-break-inside"> <span
      class="property">'page-break-inside'</span></a> property is <span
      class="css">'auto'</span>.</li>
    </ul>

    <p>If the above doesn't provide enough break points to keep content from
     overflowing the page boxes, then rules B and D are dropped in order to
     find additional breakpoints.</p>

    <p>If that still does not lead to sufficient break points, rules A and C
     are dropped as well, to find still more break points.</p>

    <h3 id="forced-pg-brk"><span class="secno">5.5. </span>Forced page breaks</h3>

    <p>A page break <em class="RFC2119" title="MUST in RFC 2119
     context">MUST</em> occur at (1) if, among the <a class="property"
     href="#page-break-after">'page-break-after'</a> and <a class="property"
     href="#page-break-before">'page-break-before'</a> properties of all the
     elements generating boxes that meet at this margin, there is at least
     one with the value <span class="css">'always'</span>, <span
     class="css">'left'</span>, or <span class="css"> <span
     class="property">'right'</span></span>.</p>

    <p>When multiple <a class="property"
     href="#page-break-before">'page-break-before'</a> and/or <code
     class="css">'page-break-after; properties with values of "always",
     "left" or "right" apply at a margin, only one of them should generate
     page breaks. That is, no content-empty pages are generated by page-break
     properties, except for at most one content-empty page as may be required
     by :right and :left values to position ensuing content on a right- or
     left-facing page.</code></p>

    <p>A page break <em class="RFC2119" title="MUST in RFC 2119
     context">MUST</em> also occur at (1) if the last line box above this
     margin and the first one below it do not have the same value for <a
     class="property" href="#page">'page'</a>.</p>

    <h3 id="best-pg-brk"><span class="secno">5.6. </span>&quot;Best&quot;
     page breaks</h3>

    <p>CSS3 does <em>not</em> define which of a set of allowed page breaks
     <em class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be used;
     except as defined earlier in the section, CSS3 does not forbid a user
     agent to break at every possible break point, or to not break at all.
     But CSS3 does recommend that user agents observe the following
     heuristics (while recognizing that they are sometimes contradictory):</p>

    <ul>
     <li>Break as few times as possible.</li>

     <li>Make all pages that don't end with a forced break appear to have
      about the same height.</li>

     <li>Avoid breaking inside a block that has a border.</li>

     <li>Avoid breaking inside a table.</li>

     <li>Avoid breaking inside a floated element.</li>
    </ul>

    <div class="example">
     <p>Suppose, for example, that the style sheet contains <span
      class="css"> <code class="css">'orphans : 4'</code></span>, <span
      class="css">'widows : 2'</span>, and there are 20 lines (line boxes)
      available at the bottom of the current page:</p>

     <ul>
      <li>If a paragraph at the end of the current page contains 20 lines or
       fewer, it <em class="RFC2119" title="SHOULD in RFC 2119 context">
       SHOULD</em> be placed on the current page.</li>

      <li>If the paragraph contains 21 or 22 lines, the second part of the
       paragraph <em class="RFC2119" title="MUST in RFC 2119 context">
       MUST</em> not violate the <a class="property"
       href="#widows">'widows'</a> constraint, and so the second part <em
       class="RFC2119" title="MUST in RFC 2119 context">MUST</em> contain
       exactly two lines.</li>

      <li>If the paragraph contains 23 lines or more, the first part <em
       class="RFC2119" title="SHOULD in RFC 2119 context"> SHOULD</em>
       contain 20 lines and the second part the remaining lines.</li>
     </ul>

     <p>Now suppose that <a class="property" href="#orphans">'orphans'</a> is
      <span class="css"> <code class="css">'10'</code></span>, <a
      class="property" href="#widows">'widows'</a> is <span
      class="css">'20'</span>, and there are 8 lines available at the bottom
      of the current page:</p>

     <ul>
      <li>If a paragraph at the end of the current page contains 8 lines or
       fewer, it <em class="RFC2119" title="SHOULD in RFC 2119 context">
       SHOULD</em> be placed on the current page.</li>

      <li>If the paragraph contains 9 lines or more, it cannot be split (that
       would violate the orphan constraint), so it <em class="RFC2119"
       title="SHOULD in RFC 2119 context"> SHOULD</em> move as a block to the
       next page.</li>
     </ul>
    </div>

    <h2 id="pg-based-extensions"><span class="secno">6. </span>Page-based
     Extensions to Counters</h2>

    <h3 id="page-based-counters"><span class="secno">6.1. </span>Page-based
     counters</h3>

    <p>Counters apply to page contexts defined by means of the <a class="css"
     href="#page"> <code class="css">'@page'</code></a> rule. This is useful
     for maintaining a page count.</p>

    <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.</p>

     <pre>@page {
  margin: 10%;
  counter-increment: page;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}</pre>
    </div>

    <h2 id="orienting"><span class="secno">7. </span>Orienting an Image on
     the Page</h2>

    <p>Images from camera phones, digital cameras or scanners may be encoded
     sideways.&nbsp;For example, the first row of image data may represent
     the leftmost or rightmost column of image pixels. Furthermore, often
     such devices have limited resources, and do not have the capability to
     rotate the image into an upright orientation.&nbsp; However, this type
     of device may have internal knowledge or can accept input from its user
     on the rotational correction to perform.&nbsp;</p>

    <p>The image-orientation property provides a way to specify a rotation to
     be applied to an image.&nbsp; This facility is not intended to specify
     other image transformations such as flipping the image in the horizontal
     or vertical direction.&nbsp; Also, this facility is not needed to
     correctly orient an image when printing in landscape versus portrait
     orientation.</p>

    <table class="propdef" id="nameimage-orientation"
     summary="image-orientation property definition">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="image-orientation">image-orientation</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>auto | &lt;angle&gt;</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>auto</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>images</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>paged</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value modulo full circle value</td>
      </tr>
     </tbody>
    </table>

    <p> <a class="property" href="#image-orientation">'image-orientation'</a>
     specifies a rotation in the right or clockwise direction that a user
     agent applies to an image.&nbsp; In terms of the order of
     transformations, the image is first rotated, then sized, then
     positioned.&nbsp; Thus height and width properties apply to the rotated
     rather than the original image dimensions.</p>

    <p>Two values for the <a class="property"
     href="#image-orientation">'image-orientation'</a> property apply to an
     image:</p>

    <dl>
     <dt>auto</dt>

     <dd>The image will be set to the orientation of the page.&nbsp; That is,
      for a pixelated image consisting of rows and columns of pixels, a row
      is displayed across the width of the display surface and a column along
      the height.</dd>

     <dt>&lt;angle&gt;</dt>

     <dd> A positive value rotates the image to the right (in a clockwise
      direction) by the given number of degrees. Negative values rotate to
      the left or in a counter-clockwise direction. Specified values outside
      the range of ]-360, 360[ degrees are moduloed by 360 to produce a
      computed value within that range. User agents <em class="RFC2119"
      title="Must in RFC 2119 context">MUST</em> support values which compute
      to 0, 90, 180, and 270 degrees. Support for other values is optional.</dd>
    </dl>

    <pre
     class="example">The following examples rotate the image in four major orientations:
img.original   { image-orientation: auto  }
img.zero       { image-orientation: 0 }
img.ninety     { image-orientation: 90deg }
img.tilt       { image-orientation: -1deg }
...
&lt;img class=&quot;ninety&quot; src=... /&gt;
</pre>

    <h2 id="the-fit"><span class="secno">8. </span>The <a class="property"
     href="#fit">'fit'</a> and <a class="property"
     href="#fit-position">'fit-position'</a> Properties</h2>

    <table class="propdef" id="namefit">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="fit">fit</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>fill | hidden | meet | slice</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>fill</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>replaced elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>yes</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>N/A</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>visual</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <p>&nbsp;</p>

    <table class="propdef" id="namefit-position">
     <tbody>
      <tr>
       <td><em>Name:</em></td>

       <td><dfn id="fit-position">fit-position</dfn></td>
      </tr>

      <tr>
       <td><em>Value:</em></td>

       <td>[ [<var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var>
        ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |
        auto</td>
      </tr>

      <tr>
       <td><em>Initial:</em></td>

       <td>0% 0%</td>
      </tr>

      <tr>
       <td><em>Applies to:</em></td>

       <td>replaced elements</td>
      </tr>

      <tr>
       <td><em>Inherited:</em></td>

       <td>yes</td>
      </tr>

      <tr>
       <td><em>Percentages:</em></td>

       <td>refer to width and height of box itself</td>
      </tr>

      <tr>
       <td><em>Media:</em></td>

       <td>visual</td>
      </tr>

      <tr>
       <td><em>Computed value:</em></td>

       <td>specified value</td>
      </tr>
     </tbody>
    </table>

    <p>The <a class="property" href="#fit">'fit'</a> property gives a hint
     for how to scale a replaced element if neither its <span
     class="property">'width'</span> nor its <span
     class="property">'height'</span> property is <code
     class="css">'auto'</code>. Not all replaced objects can be scaled, but
     images typically can.</p>

    <dl>
     <dt>fill</dt>

     <dd>Scale the object's height and width independently so that the
      content just touches all edges of the containing box.</dd>

     <dt>hidden</dt>

     <dd>Do not scale the object.</dd>

     <dt>meet</dt>

     <dd>Make the object as large as possible with its width &lt;= <span
      class="property">'width'</span> and height &lt;= <span
      class="property">'height'</span>, while preserving its aspect ratio.
      Position the object as for the <code class="css">'hidden'</code> value.</dd>

     <dt>slice</dt>

     <dd>Make the object as small as possible with its width &gt;= <span
      class="property">'width'</span> and height &gt;= <span
      class="property">'height'</span>, while preserving its aspect ratio.
      Position the object as for the <code class="css">'hidden'</code> value.</dd>
    </dl>

    <p class="issue">'Hidden' is not really an intuitive name, <span
     class="property">'none'</span> might be better. But SMIL already uses
     <span class="property">'hidden'</span>...</p>

    <p>See the <span class="property">'overflow'</span> property for how to
     render parts of the object that extend beyond the edges of the box.</p>

    <p class="note">The keywords are intended to convey the visual effect in
     the case that <span class="property">'overflow'</span> is <code
     class="css">'hidden'</code>, which is expected to be the most common
     case.</p>

    <div class="figure">
     <p><img alt="Illustration of the four values" src="fit.png" /></p>

     <p class="caption">An example showing how each of the four values of <a
      class="property" href="#fit">'fit'</a> causes the object (gray
      rectangle) to be scaled to fit the given box (red dotted outline).</p>
    </div>

    <p>The <a class="property" href="#fit-position">'fit-position'</a>
     determines the alignment of the object inside the box. The values have
     the same meaning as the values on <span
     class="property">'background-position'</span>, with the addition of the
     value <code class="css">'auto'</code>, specifically:</p>

    <dl>
     <dt>&lt;percentage&gt; &lt;percentage&gt;</dt>

     <dd>With a value pair of <code class="css">'0% 0%'</code>, the upper
      left corner of the image is aligned with the upper left corner of the
      box's padding edge. A value pair of <code class="css">'100%
      100%'</code> places the lower right corner of the image in the lower
      right corner of padding area. With a value pair of <code
      class="css">'14% 84%'</code>, the point 14% across and 84% down the
      image is to be placed at the point 14% across and 84% down the padding
      area.</dd>

     <dt>&lt;length&gt; &lt;length&gt;</dt>

     <dd>With a value pair of <code class="css">'2cm 2cm'</code>, the upper
      left corner of the image is placed 2cm to the right and 2cm below the
      upper left corner of the padding area.</dd>

     <dt>'top left', <code class="css">'left top'</code></dt>

     <dd>Same as <code class="css">'0% 0%'</code>.</dd>

     <dt>'top', <code class="css">'top center'</code>, <code
      class="css">'center top'</code></dt>

     <dd>Same as <code class="css">'50% 0%'</code>.</dd>

     <dt>'right top', <code class="css">'top right'</code></dt>

     <dd>Same as <code class="css">'100% 0%'</code>.</dd>

     <dt>'left', <code class="css">'left center'</code>, <code
      class="css">'center left'</code></dt>

     <dd>Same as <code class="css">'0% 50%'</code>.</dd>

     <dt>'center', <code class="css">'center center'</code></dt>

     <dd>Same as <code class="css">'50% 50%'</code>.</dd>

     <dt>'right', <code class="css">'right center'</code>, <code
      class="css">'center right'</code></dt>

     <dd>Same as <code class="css">'100% 50%'</code>.</dd>

     <dt>'bottom left', <code class="css">'left bottom'</code></dt>

     <dd>Same as <code class="css">'0% 100%'</code>.</dd>

     <dt>'bottom', <code class="css">'bottom center'</code>, <code
      class="css">'center bottom'</code></dt>

     <dd>Same as <code class="css">'50% 100%'</code>.</dd>

     <dt>'bottom right', <code class="css">'right bottom'</code></dt>

     <dd>Same as <code class="css">'100% 100%'</code>.</dd>

     <dt><dfn id="auto" title="auto!!value of
      &#39;fit-position&#39;">auto</dfn></dt>

     <dd>Put the object's top left corner in the top left corner of the
      box.&nbsp; Properties in other modules may modify this behavior. (At
      the time of writing, a property <span
      class="property">'writing-mode'</span> is under consideration.)</dd>
    </dl>

    <p>The computed value is the same as the specified value, i.e., the
     keywords are not replaced by percentages and the percentages are not
     replaced by something else. (This is an exception to the general rule
     that percentages are computed to some other value before being
     inherited.)</p>

    <p class="note">Note: areas of the box not covered by the replaced
     element will show the element's <span
     class="property">'background'</span>.</p>

    <p class="note">Note: the <a class="property" href="#fit">'fit'</a>
     property has the same meaning as the <a class="html" href="#fit">
     fit</a> attribute in <a href="#SMIL10"
     rel="biblioentry">[SMIL10]<!--{{SMIL10}}--></a>, except that the value
     <span class="property">'scroll'</span> is not available, because the
     <span class="property">'overflow'</span> property can be used instead.</p>

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

     <dt id="CSS21">[CSS21]</dt>

     <dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 revision
      1.</cite> 11 April 2006. W3C Working Draft. (Work in progress.) URL: <a
      href="http://www.w3.org/TR/2006/WD-CSS21-20060411">http://www.w3.org/TR/2006/WD-CSS21-20060411</a>
      </dd>
     <!---->

     <dt id="PWGMSN">[PWGMSN]</dt>

     <dd>Ron Bergman; Tom Hastings. <cite>Media Standardized Names.</cite> 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]</dt>

     <dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
      Levels.</cite> 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>

     <dt id="CSS3BG">[CSS3BG]</dt>

     <dd>Tim Boland; Bert Bos. <cite>CSS3 Backgrounds and Borders
      Module.</cite> 16 February 2005. W3C Working Draft. (Work in progress.)
      URL: <a
      href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://www.w3.org/TR/2005/WD-css3-background-20050216</a>
      </dd>
     <!---->

     <dt id="MEDIAQ">[MEDIAQ]</dt>

     <dd>H&#229;kon Wium Lie; Tantek &#199;elik; Daniel Glazman. <cite>Media
      Queries.</cite> 8 July 2002. W3C Candidate Recommendation. (Work in
      progress.) URL: <a
      href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708">http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708</a>
      </dd>
     <!---->

     <dt id="SMIL10">[SMIL10]</dt>

     <dd>Philipp Hoschka (ed). <cite>Synchronized Multimedia Integration
      Language (SMIL) 1.0 Specification.</cite> 15 June 1998. W3C
      Recommendation. URL: <a
      href="http://www.w3.org/TR/1998/REC-smil-19980615">http://www.w3.org/TR/1998/REC-smil-19980615</a>
      </dd>
     <!---->
    </dl>
    <!--end-informative--></div>
  </div>
 </body>
</html>