drafts: css3-page/Overview.src.html@2a3f835f72e3

[css3-page] Define the default stacking order of page-margin boxes.

WG resolution:
http://lists.w3.org/Archives/Public/www-style/2013Mar/0157.html
http://lists.w3.org/Archives/Public/www-style/2013Mar/0163.html

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

     2 <html lang="en">

     3 <head>

     4 <title>

     5 CSS Paged Media Module Level 3

     6 </title>

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

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

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

    10 <style type="text/css">

    11   .keyword { font-weight:bold }

    12   .equation { padding: 2% }

    13   table.equation {text-align:center}

    14   td, th { vertical-align: top }

    15   pre { font-size: 1em; }

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

    18   #margin-values td,

    19   #margin-values th

    20   {

    21                 padding: 0.2em;

    22                 border: thin solid black;

    23   }

    25   .property-list

    26   {

    27                 border: 1px solid black;

    28                 padding: .2em;

    29                 margin-top: 2em;

    30   }

    32   .property-list td

    33   {

    34                 border: 1px solid black;

    35                 padding: .1em;

    36   }

    38   .editorial

    39   {

    40                 display: block;

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

    42       font-size: 80%;

    43       margin-left: .5in;

    44       margin-right: 1in ;

    45       padding: 0.125in;

    46       background: #FFFFDD ;

    47   }

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

    50   .RFC2119

    51   {

    52                 text-transform: lowercase;

    53                 font-style: italic

    54   }

    56   em em.RFC2119

    57   {

    58                 text-transform: lowercase;

    59                 font-style: normal

    60   }

    62   table.page-sizes

    63   {

    64                 border: thin solid;

    65                 margin-top: 1.5em;

    66   }

    67   table.page-sizes td

    68   {

    69                 border: thin solid;

    70                 padding: .5em;

    71   }

    72   table.page-sizes th

    73   {

    74                 border: thin solid;

    75                 padding: .5em;

    76                 background: #ffffaa;

    77   }

    79 </style>

    80 </head>

    81 <body class="h-entry">

    82 <div>

    83 <div class="head">

    84 <!--logo-->

    85 <h1 class="p-name">CSS Paged Media Module Level 3</h1>

    86 <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] <span class="dt-updated"><span class="value-title" title="[CDATE]">[DATE]</span></span></h2>

    87 <dl>

    88   <dt>This version:</dt>    <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>

    89     <!-- <dd><a class="u-url" href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->

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

    91   <dt>Previous version:</dt>    <dd><a rel="previous" href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">http://www.w3.org/TR/2006/WD-css3-page-20061010/</a></dd>

    92   <dt>Issue Tracking:</dt>

    93     <dd><a rel="issues" href="http://www.w3.org/Style/CSS/Tracker/products/13">http://www.w3.org/Style/CSS/Tracker/products/13</a>

    94 <!-- or use the wiki:

    95     <dd><a rel="issues" href="http://wiki.csswg.org/spec/css3-page"

    96            >http://wiki.csswg.org/spec/css3-page</a></dd>

    97 -->

    98   <dt>Feedback:</dt>

    99     <dd><a href="mailto:www-style@w3.org?subject=%5B[SHORTNAME]%5D%20feedback"

   100          >www-style@w3.org</a>

   101          with subject line &ldquo;<kbd>[[SHORTNAME]]

   102          <var>&hellip; message topic &hellip;</var></kbd>&rdquo;

   103          (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"

   104            >archives</a>)

   106   <dt>Editors:</dt>

   107     <dd class="p-author h-card vcard">

   108      <span class="p-name fn">Melinda Grant</span>,

   109      <span class="p-org org">Hewlett-Packard</span></dd>

   110     <dd class="p-author h-card vcard">

   111      <span class="p-name fn">H&aring;kon Wium Lie</span>,

   112      <span class="p-org org">Opera Software</span></dd>

   113     <dd class="p-author h-card vcard">

   114      <span class="p-name fn">Elika J. Etemad</span>,

   115      <span class="p-org org">Mozilla</span></dd>

   116     <dd class="p-author h-card vcard">

   117      <span class="p-name fn">Simon Sapin</span>,

   118      <span class="p-org org">Kozea</span></dd>

   119 </dl>

   121 <!--copyright-->

   123 </div>

   124 <hr title="Separator for header">

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

   128 <p>

   129   <span class="p-summary">

   130 This module describes the page model that partitions a flow into pages. It

   131 builds on the <a href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> and introduces

   132 and defines the page model and paged media. It adds functionality for

   133 pagination, page margins, page size and orientation, headers and footers,

   134 widows and orphans, and image orientation. Finally it extends generated content

   135 to enable page numbering and running headers / footers.  </span>

   136 </p>

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

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

   142 <!--status-->

   144 <p>This document contains the <abbr title="Cascading Style Sheets">CSS3</abbr>

   145 Paged Media Module W3C Last Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a> of [DATE]. The

   146 Last Call period ends on <span class="fudge">TBD</span>.</p>

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

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

   150 specified with more precision.</p>

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

   153 document contains the current issues list and responses to input received

   154 during this Last Call period.</p>

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

   157 <!--end-toc-->

   158 <!-- "Introduction" -->

   159 <h2 id="intro">Introduction</h2>

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

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

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

   164 in that the content of the document is split into one or more discrete

   165 static display surfaces. To handle pages, CSS3 Paged Media describes how:</p>

   167 <ul>

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

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

   170   padding are specified;</li>

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

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

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

   174 </ul>

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

   177 document is formatted within a rectangular area, called the

   178 <a href="#page-box-page-rule">page box</a>, that has finite width and height.

   180 <p>Although CSS3 does not specify how user agents transfer page boxes to sheets,

   181 it does include certain mechanisms for telling user agents about the intended

   182 page sheet <a href="#page-size">size and orientation</a>. In the general case,

   183 CSS3 assumes that one page box will be transferred to one surface of similar

   184 size.</p>

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

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

   188 keyword as their value, but for readability it has not been listed explicitly.

   190 <h2 id="conformance">Conformance</h2>

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

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

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

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

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

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

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

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

   200 2119</cite> [[!RFC2119]]. However, for readability, these words do not appear

   201 in all uppercase letters in this specification.</p>

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

   204   or are set apart from the normative text with <code>class="example"</code>,

   205   like this:

   207 <div class="example">

   208   <p>This is an example of an informative example.</p>

   209 </div>

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

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

   214 <p class="note">Note, this is an informative note.</p>

   216 <h2 id="page-terms">Page Terminology</h2>

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

   219 page model:</p>

   221 <dl>

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

   223   <dd><img src="PageSheet.png" style="float: right;" alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"

   224   height="148" width="194">The page sheet is one surface of the physical

   225   medium. The illustration to the right shows a representation of the upper-left

   226   corner of a page sheet.</dd>

   228   <dt id="printable-area">Printable and non-printable areas</dt>

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

   230   as a printer is not capable of marking reliably, usually due to the printer's

   231   paper handling mechanism. This value is printer dependent and is usually a

   232   small region along each edge of the page sheet. The printable area is the area

   233   of page sheet that a printer <em>is</em> capable of marking reliably. The size

   234   of the printable area is the size of the page sheet reduced by the size of the

   235   non-printable area. A user agent may not know the dimensions of this area for a

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

   237   <em class="RFC2119">MAY</em> adjust the formatting of the document so that

   238   content falls within the printable area. How this adjustment is accomplished is

   239   device dependent within the constraints expressed in the sections

   240   <a href="#renderingpages">Rendering page boxes that do not fit a page sheet</a> and

   241   <a href="#content-outside-box">Content outside the page box</a>.</dd>

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

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

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

   246   perpendicular edges called the long edge and the short edge. The length of the

   247   long edge is always greater than or equal to the length of the short edge. When

   248   the page box is square, the two edges are of the same length and either can be

   249   used as the long edge with the other being the short edge. This specification

   250   defines page orientations of 'portrait' and 'landscape'.</dd>

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

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

   254   elements are parallel to the short edge and vertical elements to the long edge.</dd>

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

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

   258   elements are parallel to the long edge and vertical elements to the short edge.

   259   <span class="note">Note that CSS3 makes no distinction between landscape and

   260   reverse-landscape orientations. However, future versions of CSS may do so.

   261   UAs should consider, when formatting for duplexed printing, the binding edge,

   262   page progression, and ease of reading when choosing between landscape and

   263   reverse-landscape renderings.</span>

   264   </dd>

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

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

   268   sides of the page sheet. This module provides no ability to specify whether a

   269   document is duplex printed, but the concept of left and right pages is based on

   270   the assumption that the document is duplex printed, regardless of whether or

   271   not it actually is.</dd>

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

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

   275   material is bound. The binding edge often has a larger margin than the opposite

   276   edge to provide for the space used by the binding. The binding edge can be any

   277   of the four edges. However, page sheets are customarily bound so that the

   278   binding edge of page boxes with portrait orientation is vertical. This module

   279   provides no method to specify the binding edge. In duplex printing, the binding

   280   edge is on opposite sides of the page box for the left and right pages.</dd>

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

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

   284   printed they are on separate sheets of paper. Typically, the earlier page will

   285   be the back side of one sheet and the later page will be the front side of

   286   another. They are usually laid out so that the binding edges of facing pages

   287   are vertical and adjacent when the pages are placed in their normal reading

   288   orientation.</dd>

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

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

   292   typically laid out. Page layouts for documents using a left-to-right page

   293   progression have the earlier of the facing pages on the left. Rules specific to

   294   the left page can be specified using the <span class="css">':left'</span>

   295   <i>page selector</i>.

   296   </dd>

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

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

   300   typically laid out. Page layouts for documents using a right-to-left page

   301   progression have the earlier of the facing pages on the right. Rules specific

   302   to the right page can be specified using the <span class="css">':right'</span>

   303   <i>page selector</i>.

   304   </dd>

   305 </dl>

   308 <h2 id="page-box-page-rule">The Page Model</h2>

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

   311 or more page boxes. The <dfn id="page-box">page box</dfn> is a specialized CSS

   312 box that maps to a rectangular print media surface, such as a page of paper.

   313 It is roughly analogous to the <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.

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

   316 <p>As with other CSS <a href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box

   317 consists of margin, border, padding, and content areas. The content and

   318 margin areas of a page box have special functions:</p>

   320 <ul>

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

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

   323   The page area acts as a container for all the boxes generated by the root

   324   element and its descendants that are laid out within a given page box. The

   325   edges of the page area on the first page establish the rectangle that is the

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

   327   of the document.</li>

   328   <li>The margin area of a page box is divided into

   329   16 <dfn>page-margin boxes</dfn>.

   330   Each page-margin box has its own margin, border, padding and content areas.

   331   Page-margin boxes are typically used to display running headers and footers.</li>

   332 </ul>

   334 <p>The properties of a <i>page box</i> are determined by properties

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

   336 <i>page context</i>, which is the

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

   338 <code>@page</code> rule. Similarly the properties of a <i>page-margin box</i>

   339 are determined by properties declared within its <i>margin context</i>.

   340 Declarations in the page context can affect the page box and/or inherit

   341 to the page-margin boxes, but they do not apply to or inherit into the

   342 document's root element or other content.</p>

   344 <p>The <i>containing block</i> of the page box is specified using the 'size'

   345 property in the <i>page context</i>. The width and horizontal margins

   346 of the page box are then calculated exactly as for a

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

   348 block element in normal flow</a>. [[!CSS21]] The height and vertical margins

   349 of the page box are calculated analogously (instead of using the block height

   350 formulas). In both cases if the values are over-constrained, instead of

   351 ignoring any margins, the containing block is resized to coincide with the

   352 margin edges of the page box.

   354 <h3 id="painting">

   355 Page Backgrounds and Painting Order</h3>

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

   358   following painting order (bottommost first):

   360   <ol>

   361     <li>page background

   362     <li>document canvas

   363     <li>page borders

   364     <li>document contents

   365     <li>page-margin boxes

   366   </ol>

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

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

   370   is the entire page box, including its margins (regardless of 'background-clip').

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

   372   (and honor 'background-origin' if the UA supports [[!CSS3BG]]).

   373   However if 'background-attachment' is ''fixed''

   374   then the image is positioned relative to the page box including its margins

   375   (i.e. the <a href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background positioning area</i></a>,

   376   like the <i>background painting area</i>, is the page's margin box).

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

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

   380   and for UAs that support [[!CSS3BG]], follows the 'background-clip' value specified on the root element.

   381   It remains, however, positioned with respect to the root element

   382   or page area as usual.

   384   <p>The 'z-index' property applies to page-margin boxes.

   385   With respect to the page-margin boxes,

   386   the document canvas, page borders, and all of the document contents

   387   are treated as a single element with a <code>z-index</code> value of '0':

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

   389   or between the content and the canvas.

   390   They may only paint in front of the document content or behind the document canvas.

   391   The page background is always painted underneath everything else.

   392   Since the <code>position</code> property does not apply to page-margin boxes,

   393   <code>z-index</code> always affects page-margin boxes

   394   as if they were positioned elements

   395   regardless of the <code>position</code> property's value.

   397   <p>The default painting order,

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

   399   of page-margin boxes with respect to each other is as follows:

   401   <ol>

   402     <li>''@top-left-corner''

   403     <li>''@top-left''

   404     <li>''@top-center''

   405     <li>''@top-right''

   406     <li>''@top-right-corner''

   408     <li>''@right-top''

   409     <li>''@right-middle''

   410     <li>''@right-bottom''

   412     <li>''@bottom-right-corner''

   413     <li>''@bottom-right''

   414     <li>''@bottom-center''

   415     <li>''@bottom-left''

   416     <li>''@bottom-left-corner''

   418     <li>''@left-bottom''

   419     <li>''@left-middle''

   420     <li>''@left-top''

   421   </ol>

   423   <p class=note>

   424     Start with ''@top-left-corner'', then go clockwise.

   425     This order is arbitrary but can be overridden with 'z-index'.

   426     It only has a visible effect when page-margin boxes overlap,

   427     which should not happen in most cases.

   429 <h3 id="content-outside-box">Content outside the page box</h3>

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

   432 page box. For example, an element whose 'white-space' property has the value

   433 'pre' can generate a box that is wider than the page box. As another example,

   434 when boxes are positioned absolutely or relatively, they may end up in

   435 "inconvenient" locations. For example, images may be placed on the edge of

   436 the page box or 100,000 meters below the page box. </p>

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

   439 scope of this document. However, it is recommended that authors and user agents

   440 observe the following general principles concerning content outside the page

   441 box:</p>

   443 <ul>

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

   445   to "bleed".

   446   <li><p>User agents <em class="RFC2119">SHOULD</em> avoid generating a large

   447   number of content-empty pages to honor the positioning of elements (e.g.,

   448   printing 100 blank pages is probably neither the author's nor the user's

   449   intent).

   450   A <dfn id="content-empty">Content-empty page</dfn> is a page box whose page

   451   area contains no printable content other than backgrounds and/or borders. A

   452   page box whose page area contains generated content, or content whose

   453   visibility is 'hidden', or invisible content such as a zero-width space is

   454   not a content-empty page. On the other hand, a page containing only a

   455   background and/or borders and/or page-margin box content <em>is</em> a

   456   content-empty page.

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

   458   boxes is sometimes necessary to honor the <span class="css">'left'</span> and

   459   <span class="css">'right'</span> values for <span class="property">'break-before'</span>

   460   and <span class="property">'break-after'</span>.</li>

   462   <li><p>Authors <em class="RFC2119">SHOULD NOT</em> position elements in

   463   inconvenient locations just to avoid rendering them. Instead:

   464   <ul>

   465     <li>To suppress box generation entirely, set the <span class="property">'display'</span> property to <span class="css">'none'</span>.</li>

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

   467     property.</li>

   468     </ul></li>

   469     <li><p>This specification does not define how boxes positioned outside the page

   470     box are handled. Possibilities include discarding them or creating page boxes

   471     for them at the end of the document.</li>

   472 </ul>

   474 <h3 id="progression">Page Progression</h3>

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

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

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

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

   480 pseudo-classes</a>.

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

   483 depends on the page progression of the document. The <dfn>page progression</dfn>

   484 is the direction in which the printed pages of a document would be sequenced

   485 when laid out side-to-side. For example, English and horizontally-set Japanese

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

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

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

   489 page, and vice versa.</p>

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

   493 <ul>

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

   495   same as the inline progression.</li>

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

   497   same as the block progression.</li>

   498 </ul>

   500 <p>If the UA supports the 'direction' and 'writing-mode' properties

   501 from the CSS 3 Writing Modes Module [[CSS3-WRITING-MODES]], it must

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

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

   504 properties on the root element.</p>

   506 <p>

   507   To explicitly force a document to begin printing on a left or right page,

   508   authors can specify a <a href="http://www.w3.org/TR/css3-break/#break-before">'break-before'</a> value

   509   that that propagates a page break to the root. [[!CSS3-BREAK]]

   510   The UA must suppress the first (empty) page(s) in this case

   511   (and the <code>:first</code> pseudo-class matches the first printed page).

   513 <div class="example">

   514 <pre>

   515 html { break-before: always }

   516 </pre>

   518 <p>

   519   For an HTML document with a left-to-right page progression,

   520   the above style rule will cause the first page of the document

   521   to print on a ':left' page

   522 </p>

   524 <pre>

   525 html { break-before: left }

   526 </pre>

   528 <p>

   529   For an HTML document,

   530   the above style rule will cause the first page of the document

   531   to print on a ':left' page,

   532   regardless of the page progression.

   533 </p>

   534 </div>

   536 <h2 id="page-selector-and-context">Page Selectors and the Page Context</h2>

   538 <h3 id="at-page-rule">The @page Rule</h3>

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

   541 orientation, and margins, within an <span class="css">@page</span> rule.

   542 ''@page'' rules are allowed at the top-level of a stylesheet,

   543 as well as wherever

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

   545 are allowed.

   546 An <span class="css">@page</span> rule consists of

   547 the keyword <span class="css">'@page'</span>,

   548 an <em class="RFC2119">OPTIONAL</em> comma-separated list of

   549 <a href="#page-selectors">page selectors</a>

   550 and a block of declarations

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

   552 An ''@page'' rule can also contain other at-rules,

   553 interleaved between declarations.

   554 The current level of this specification

   555 only allows <a href="#margin-at-rules">margin at-rules</a> inside ''@page''.

   557 <p>''@page'' rules without a selector list

   558   are considered to have a single, empty selector.

   559   ''@page'' rules apply to pages that <i>match</i>

   560   at least one of their selectors.

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

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

   565 a page or a margin context, the <a href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for handling parsing errors</a>

   566 apply; that is, valid declarations within the block are applied.</p>

   569 <h3 id="page-selectors">Page selectors</h3>

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

   573 <ul>

   574   <li>one or more

   575     <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>

   576     <a href="#pseudo-classes">pseudo-classes</a>,

   577   <li>a <a href="#using-named-pages">page type</a>

   578     (a case-sensitive identifier)

   579     followed by zero or more pseudo-classes.

   580 </ul>

   582 <p>

   583   No whitespace is allowed between components of a selector.

   584   The <i title="page_selector">page selector grammar</i>

   585   and examples can be found below.

   587 <p>A selector is said to <dfn>match</dfn> a given page if and only if

   588   all of its components match the page.

   589   Empty selectors (ie. ''@page'' rules without a selector) match every page.

   590   <span class="note">Empty selectors have the weakest <i>specificity</i>.</span>

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

   593   pages of the named type generated by the 'page' property.

   594   <span id="page-selector-syntax-restrict">

   595     A page type name of ''auto''

   596     (<a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>)

   597     does not make the rule invalid,

   598     but <em class="RFC2119">MUST</em> never match.

   599   </span>

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

   602 <h4 id="pseudo-classes">

   603   <a id="left-right-first"></a>

   604   Page pseudo-classes: :left, :right, :first, and :blank

   605 </h4>

   607 <p>

   608   In addition to the optional <i>page name</i>,

   609   ''@page'' rules can restrict which pages they apply to

   610   with CSS pseudo-classes in their <i>page selector</i>.

   612 <p>

   613   When printing double-sided documents,

   614   left and right pages are often formatted differently.

   615   All pages are automatically classified by user agents

   616   as either left pages or right pages,

   617   based on <a href="#progression">page progression</a>.

   618   The '':left'' and '':right'' pseudo-classes only <i>match</i>

   619   left or right pages, respectively.

   621 <div class="example">

   622 The following example creates left and right binding edges using these pseudo-classes:

   623 <pre>

   624 @page :left {

   625 margin-left: 3cm;

   626 margin-right: 4cm;

   627 }

   629 @page :right {

   630 margin-left: 4cm;

   631 margin-right: 3cm;

   632 }

   633 </pre>

   634 </div>

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

   637 agent <em class="RFC2119">MUST</em> honor these declarations even if the user

   638 agent does not transfer the page boxes to left and right sheets (i.e., a

   639 printer that only prints on one side of the medium must nevertheless produce

   640 correctly formatted output).</p>

   642 <div class="note">

   643 <p>

   644   <em><strong>Note.</strong>

   645   Adding declarations to the <span class="css">':left'</span> or

   646   <span class="css">':right'</span> pseudo-class

   647   does not necessarily influence whether the document

   648   comes out of the printer double- or single-sided

   649   (which is outside the scope of this specification).</em>

   650 </p>

   651 </div>

   653 <p>

   654   The '':first'' pseudo-class only <i title="match">matches</i>

   655   the first printed page of a document.

   657 <div class="example">

   658 <pre>

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

   661 @page :first {

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

   663 }

   664 </pre>

   665 </div>

   667 <p>

   668   The '':blank'' pseudo-class only <i title="match">matches</i>

   669   <i title="content-empty page">content-empty pages</i>

   670   that appear as a result of

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

   673 <div class="note">

   674   <p>Only the ''left'', ''right'', ''recto'' and ''verso'' values

   675     of the 'break-before' and 'break-after' properties

   676     can generate pages that match '':blank''.

   677 </div>

   679 <div class="example">

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

   681 <pre>

   682 h1 { break-before: left }

   684 @page :blank {

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

   686 }

   687 </pre>

   688 </div>

   690 <p>

   691   A page matched by '':blank'' can also be matched

   692   by other page pseudo-classes.

   694 <div class="example">

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

   697 page will be matched by both <code>:blank</code>

   698 and <code>:right</code>. Therefore, margin boxes set on right pages

   699 will have to be removed unless they are wanted on blank pages. Here is

   700 an example where the top center header is removed from blank pages,

   701 while the page number remains:

   703 <pre>

   704 h1 { break-before: left }

   706 @page :blank {

   707   @top-center { content: none }

   708 }

   710 @page :right {

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

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

   713 }

   714 </pre>

   716 <p>Due to the higher <i>specificity</i> of <code>:blank</code>

   717 over <code>:right</code>, the top center header is removed even

   718 if <code>content: none</code> comes before <code>content: "Preliminary

   719 edition"</code>.

   721 </div>

   723 <div class="note">

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

   725 pseudo-classes.</em></p>

   726 </div>

   728 <h3 id="syntax-page-selector">@page rule grammar</h3>

   730 <p>The syntax for the @page rule is a specialization of the generic at-rule

   731 defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules

   732 nested inside @media rules. User agents <em class="RFC2119">MUST</em> adhere

   733 to the following grammar:</p>

   735 <p>See [[!CSS21]], Section 4.1.1 and Appendix G for the expansion of missing

   736 productions:</p>

   737 <p id="specializatons-of-ATKEYWORD">

   738 All new lexical tokens are specializations of the ATKEYWORD lexical token:</p>

   739 <pre class="lexical">

   740 PAGE_SYM              ::= "@page"

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

   742 TOPLEFT_SYM           ::= "@top-left"

   743 TOPCENTER_SYM         ::= "@top-center"

   744 TOPRIGHT_SYM          ::= "@top-right"

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

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

   747 BOTTOMLEFT_SYM        ::= "@bottom-left"

   748 BOTTOMCENTER_SYM      ::= "@bottom-center"

   749 BOTTOMRIGHT_SYM       ::= "@bottom-right"

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

   751 LEFTTOP_SYM           ::= "@left-top"

   752 LEFTMIDDLE_SYM        ::= "@left-middle"

   753 LEFTBOTTOM_SYM        ::= "@left-bottom"

   754 RIGHTTOP_SYM          ::= "@right-top"

   755 RIGHTMIDDLE_SYM       ::= "@right-middle"

   756 RIGHTBOTTOM_SYM       ::= "@right-bottom"

   758 <dfn>media</dfn> :

   759      MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <i>page_rule</i> | ruleset ]* '}' S*

   760      ;

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

   763      PAGE_SYM S* <i>page_selector_list</i> '{' S* <i>page_body</i> '}' S*

   764      ;

   766 <dfn>page_selector_list</dfn> :

   767      [ <i>page_selector</i> S* [ ',' <i>page_selector</i> S* ]* ]?

   768      ;

   770 <dfn>page_selector</dfn> :

   771      <i>pseudo_page</i>+ | IDENT <i>pseudo_page</i>*

   772      ;

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

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

   776      ;

   778 <dfn>page_body</dfn> :  /* Can be empty */

   779      declaration? [ ';' S* <i>page_body</i> ]? |

   780      <i>page_margin_box</i> <i>page_body</i>

   781      ;

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

   784      <i>margin_sym</i> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*

   785      ;

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

   788      TOPLEFTCORNER_SYM |

   789      TOPLEFT_SYM |

   790      TOPCENTER_SYM |

   791      TOPRIGHT_SYM |

   792      TOPRIGHTCORNER_SYM |

   793      BOTTOMLEFTCORNER_SYM |

   794      BOTTOMLEFT_SYM |

   795      BOTTOMCENTER_SYM |

   796      BOTTOMRIGHT_SYM |

   797      BOTTOMRIGHTCORNER_SYM |

   798      LEFTTOP_SYM |

   799      LEFTMIDDLE_SYM |

   800      LEFTBOTTOM_SYM |

   801      RIGHTTOP_SYM |

   802      RIGHTMIDDLE_SYM |

   803      RIGHTBOTTOM_SYM

   804      ;

   805 </pre>

   807 <div class="example">

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

   809 left blank)</p>

   810 <pre>

   811 @page { ... }

   812 @page :left { ... }

   813 @page :right { ... }

   814 @page LandscapeTable { ... }

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

   816 @page:first { ... }

   817 @page toc, index { ... }

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

   819 </pre>

   821 <p>The following are examples of page-margin boxes

   822 where the declaration blocks are intentionally left blank.</p>

   823 <pre>

   824 @page {

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

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

   827 }

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

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

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

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

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

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

   835 </pre>

   836 </div>

   838 <h3 id="cascading-and-page-context">Cascading in the page context</h3>

   840 <p>Declarations in page and margin contexts <a href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like declarations in <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.</p>

   842 <p>The <dfn>specificity</dfn> of page a selector is computed in a manner

   843 analogous to the computations defined in

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

   846 <ul>

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

   848     <p class="note">

   849       Given the syntax of page seletors, <var>f</var> can only ever be 0 or 1.

   850   <li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)

   851   <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)

   852 </ul>

   854 <p>

   855   Specificities are compared by comparing the three components in order:

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

   857   if the two <var>f</var> values are tied,

   858   then the specificity with a larger <var>g</var> value is more specific;

   859   if the two <var>g</var> values are also tied,

   860   then the specificity with a larger <var>h</var> value is more specific;

   861   if all the values are tied, the two specifities are equal.

   863 <p>

   864   Due to storage limitations,

   865   implementations may have limitations on

   866   the size of <var>f</var>, <var>g</var>, or <var>h</var>.

   867   If so, values higher than the limit must be clamped to that limit,

   868   and not overflow.

   870 <p class="note">

   871   Note: Each comma-separated selectors in the same ''@page'' rule

   872   has its own specificity.

   874 <p class="note">

   875   Note: Repeated occurrances of the same pseudo-classes are allowed

   876   and do increase specificity.

   878 <div class="example">

   880 <p>Some page specificity calculation examples follow:</p>

   881 <pre>

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

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

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

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

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

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

   888 </pre>

   889 </div>

   891 <div class="example">

   893 <p>Consider the following usage example:</p>

   894 <pre>

   895 @page {

   896   margin-left: 3cm;

   897 }

   899 @page :left {

   900   margin-left: 4cm;

   901 }

   902 </pre>

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

   905 the left margin on left pages will be 4cm and all other pages

   906 (the right-facing pages) will have a left margin of 3cm.

   907 </div>

   909 <div class="example">

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

   911 rule.

   912 Therefore the first page will have blue text in the top-left page-margin box

   913 and green text in the top-right page-margin box,

   914 while subsequent pages will have red text in the page-margin boxes.</p>

   915 <pre>

   916 @page :first {

   917   color: green;

   919   @top-left {

   920     content: "foo";

   921     color: blue;

   922   }

   923   @top-right {

   924     content: "bar";

   925   }

   926 }

   928 @page { color: red;

   929   @top-center {

   930     content: "Page " counter(page);

   931   }

   932 }

   933 </pre>

   934 </div>

   936 <div class="example">

   938 <p>Page contexts cascade, so the following stylesheet would style pages with 25

   939 millimeter margins and 14 point type in the page-margin boxes:</p>

   940 <pre>

   941 @page { margin: 25mm;}

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

   943 </pre>

   944 </div>

   946 <h2 id="margin-boxes">Page-Margin Boxes</h2>

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

   949   like pseudo-elements, can contain generated content.

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

   952   which are portions of the page set aside for supplementary information

   953   such as the page number or document title.

   955   <div class="example">

   956     <p>Typically, a <dfn>page header</dfn> is located at the top of the page

   957     in documents with a predominately horizontal writing direction

   958     and on the side opposite the <a href="#binding-edge">binding edge</a>

   959     for documents with a predominately vertical writing direction.

   960     One possible design of page headers for horizontally written documents uses the

   961     ''@top-left-corner'', ''@top-left'', ''@top-center'', ''@top-right'' and ''@top-right-corner''

   962     page-margin boxes.

   963     Another design, for vertically written documents, could use the

   964     ''@right-top'', ''@right-middle'', and ''@right-bottom'' page-margin boxes

   965     for <a href="#right-page">right facing pages</a> and

   966     ''@left-top'', ''@left-middle'', and ''@left-bottom''

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

   969     <p>The <dfn>page footer</dfn> is typically at

   970     the opposite end of the page from the page header.

   971     For example, the design of a horizontally written document with a page header

   972     at the top of the page could use the

   973     ''@bottom-left-corner'', ''@bottom-left'', ''@bottom-center'', ''@bottom-right'' and ''@bottom-right-corner''

   974     page-margin boxes as the page footer.

   975     The design of a vertically written document could use

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

   977   </div>

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

   980   and are independent of page orientation,

   981   for example the top page-margin boxes are above the page area

   982   in both portrait and landscape orientation.

   983   The various page-margin boxes are defined

   984   and illustrated in the diagram below:

   986   <table id="margin-box-def" class="data" summary="defintion of each of the page-margin boxes">

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

   988     <thead>

   989       <tr>

   990         <th>Box</th>

   991         <th>Description</th>

   992         <th>Placement</th>

   993       </tr>

   994     </thead>

   995     <tbody>

   996       <tr id="top-margin-boxes-def">

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

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

   999         page box</td>

  1000         <td><img src="TopLeftCornerBox.png" alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"

  1001         height="47" width="181"></td>

  1002       </tr>

  1003       <tr id="top-left-box-def">

  1004         <th>top-left</th>

  1005         <td>a variable-width box filling the top page margin between the top-left-corner

  1006         and top-center page-margin boxes</td>

  1007         <td><img src="TopLeftMarginBox.png" alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"

  1008         height="47" width="181"></td>

  1009       </tr>

  1010       <tr id="top-center-box-def">

  1011         <th>top-center</th>

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

  1013         border edges and filling the page top margin between the top-left and top-right

  1014         page-margin boxes</td>

  1015         <td><img src="TopCenterMarginBox.png" alt="the top center box with margin, border, and padding, centered within the page's top margin"

  1016         height="47" width="181"></td>

  1017       </tr>

  1018       <tr id="top-right-box-def">

  1019         <th>top-right</th>

  1020         <td>a variable-width box filling the top page margin between the top-center and

  1021         top-right-corner page-margin boxes</td>

  1022         <td><img src="TopRightMarginBox.png" alt="the top right box with margin, border, and padding, nested within the page's top margin"

  1023         height="47" width="181"></td>

  1024       </tr>

  1025       <tr>

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

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

  1028         the page box</td>

  1029         <td><img src="TopRightCornerMarginBox.png" alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"

  1030         height="47" width="181"></td>

  1031       </tr>

  1032       <tr id="left-margin-boxes-def">

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

  1034         <td>a variable-height box filling the left page margin between the top-left-corner

  1035         and left-middle page-margin boxes</td>

  1036         <td rowspan="3"><img src="LeftMarginBoxes.png" alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"

  1037         height="226" width="181"></td>

  1038       </tr>

  1039       <tr id="left-middle-box-def">

  1040         <th>left-middle</th>

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

  1042         border edges and filling the left page margin between the left-top and

  1043         left-bottom page-margin boxes</td>

  1044       </tr>

  1045       <tr id="left-bottom-box-def">

  1046         <th>left-bottom</th>

  1047         <td>a variable-height box filling the left page margin between the left-middle and

  1048         bottom-left-corner page-margin boxes</td>

  1049       </tr>

  1050       <tr id="right-margin-boxes-def">

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

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

  1053         top-right-corner and right-middle page-margin boxes</td>

  1054         <td rowspan="3"><img src="RightMarginBoxes.png" alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"

  1055         height="226" width="181"></td>

  1056       </tr>

  1057       <tr id="right-middle-box-def">

  1058         <th>right-middle</th>

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

  1060         border edges and filling the right page margin between the right-top and

  1061         right-bottom page-margin boxes</td>

  1062       </tr>

  1063       <tr id="right-bottom-box-def">

  1064         <th>right-bottom</th>

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

  1066         and bottom-right-corner page-margin boxes</td>

  1067       </tr>

  1068       <tr id="bottom-margin-boxes-def">

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

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

  1071         the page box</td>

  1072         <td><img src="BottomLeftCornerBox.png" 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"

  1073         height="48" width="181"></td>

  1074       </tr>

  1075       <tr id="bottom-left-box-def">

  1076         <th>bottom-left</th>

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

  1078         bottom-left-corner and bottom-center page-margin boxes</td>

  1079         <td><img src="BottomLeftMarginBox.png" alt="bottom left page-margin box with margin, border, and padding, nested within the page's bottom margin next to the bottom-left-corner box"

  1080         height="48" width="181"></td>

  1081       </tr>

  1082       <tr id="bottom-center-box-def">

  1083         <th>bottom-center</th>

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

  1085         border edges and filling the bottom page margin between the bottom-left and

  1086         bottom-right page-margin boxes</td>

  1087         <td style="vertical-align: middle;"><img src="BottomCenterMarginBox.png" alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"

  1088         height="48" width="181"></td>

  1089       </tr>

  1090       <tr id="bottom-right-box-def">

  1091         <th>bottom-right</th>

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

  1093         and bottom-right-corner page-margin boxes</td>

  1094         <td><img src="BottomRightMarginBox.png" alt="bottom right page-margin box with margin, border, and padding, nested within the page's bottom margin and next to the bottom-right-corner box"

  1095         height="48" width="181"></td>

  1096       </tr>

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

  1098         <th>bottom-right-corner</th>

  1099         <td>a fixed-size box defined by the intersection of the bottom and right margins of

  1100         the page box</td>

  1101         <td><img src="BottomRightCornerBox.png" 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"

  1102         height="48" width="181"></td>

  1103       </tr>

  1104     </tbody>

  1105   </table>

  1107 <h3 id="margin-at-rules">At-rules for page-margin boxes</h3>

  1109 <p>Page-margin boxes are created by

  1110 <a href="#margin-at-rules">margin at-rules</a>

  1111 inside the <a href="#page-context">page context</a>.

  1112 Authors should put these rules after any declarations in the page context

  1113 as legacy clients may not handle declarations

  1114 after margin at-rules correctly.

  1115 </p>

  1117 <p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an

  1118 <a href="#specializatons-of-ATKEYWORD">ATKEYWORD</a>

  1119 that identifies the page-margin box

  1120 (e.g. <span class="css">'@top-left'</span>) and a block of declarations (said

  1121 to be in the <dfn id="margin-context">margin context</dfn>).</p>

  1123 <div class="example">

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

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

  1127 right side:</p>

  1128 <pre>

  1129 @page {

  1130   size: 8.5in 11in;

  1131   margin: 10%;

  1133   @top-left {

  1134     content: "Hamlet";

  1135   }

  1136   @top-right {

  1137     content: "Page " counter(page);

  1138   }

  1139 }

  1140 </pre>

  1141 </div>

  1144 <h3 id="populating-margin-boxes">Populating page-margin boxes</h3>

  1146 <p>As with the '':before'' and '':after'' pseudo-elements,

  1147 a specified 'content: normal' on a page-margin box computes to ''none''.

  1148 A page-margin box is <dfn>generated</dfn>

  1149 if and only if the computed value of its 'content' property is not 'none'.

  1150 Otherwise, no box is generated, as for elements with ''display: none''.

  1152 <p class=note>

  1153   The 'display' property does not apply to page-margin boxes.

  1155 <div class="example">

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

  1157 except the bottom-left corner.</p>

  1158 <pre>

  1159   @page {

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

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

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

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

  1164   }

  1165 </pre>

  1166 </div>

  1168 <h3 id="margin-dimension">Computing Page-margin Box Dimensions</h3>

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

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

  1172 10.6 for page-margin boxes.</p>

  1174 <p>The rules for applying 'min-height', 'max-height', 'min-width', and

  1175 'max-width' [[!CSS21]] do apply to page-margin boxes and may imply

  1176 a recalculation of the width, height, and/or margins

  1177 if the dimensions resulting from the specified 'width' or 'height'

  1178 violate their constraints.

  1179 If the UA does not support the 'min-height' or 'min-width' properties

  1180 then it must behave as if 'min-height' and 'min-width' were always zero.

  1182 <h4 id="margin-box-terms"><a id="max-margin-dimension"></a>Page-Margin Box Layout Terminology</h4>

  1184   <p>In addition to the box model definitions in CSS2.1 [[!CSS21]],

  1185   and the sizing terms in CSS Intrinsic Sizing [[!CSS3-SIZING]],

  1186   the following terms are defined for use

  1187   in the subsequent page-margin box calculations:

  1189   <dl>

  1191     <dt><dfn>available width</dfn></dt>

  1192     <dd>The sum of the page’s

  1193       left border width, left padding, <a href="#page-box">page area</a> width,

  1194       right padding, and right border width.

  1195       In other words, it is the distance between

  1196       the <a href="#page-box">page box</a>’s left right border edges.

  1197       This quantity is used  when calculating dimensions

  1198       of the top and bottom page-margin boxes.

  1200     <dt><dfn>available height</dfn></dt>

  1201     <dd>The sum of the page’s

  1202       top border width, top padding, <a href="#page-box">page area</a> height,

  1203       bottom padding, and bottom border width.

  1204       In other words, it is the distance between

  1205       the <a href="#page-box">page box</a>’s top bottom border edges.

  1206       This quantity is used when calculating dimensions

  1207       of the left and right page-margin boxes.

  1209     <dt><dfn>outer width</dfn></dt>

  1210     <dd>The width of the

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

  1212       as defined in [[!CSS21]].

  1214     <dt><dfn>outer min width</dfn></dt>

  1215     <dd>Like the <i>outer width</i>, except that

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

  1217     is used when the width is ''auto''.

  1219     <dt><dfn>outer max width</dfn></dt>

  1220     <dd>Like the <i>outer width</i>, except that

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

  1222     is used when 'width' is ''auto''.

  1223   </dl>

  1225   <p>The <dfn>containing block</dfn> for a corner page-margin box is

  1226   the rectangle defined by the intersection of the two page margins meeting at that corner.

  1228   <p>For all other page-margin boxes,

  1229   the <dfn>containing block</dfn> is the rectangle

  1230   formed by the encapsulating page margin minus the containing blocks of the

  1231   adjacent corners' page-margin boxes.

  1232   This means that the size of this containing block is given

  1233   in one dimension by the used page margin and in the other dimension

  1234   by the <i>available width</i>

  1235   (for top and bottom page-margin boxes) or

  1236   <i>available height</i>

  1237   (for left and right page-margin boxes).</p>

  1239 <h4 id="variable-sizing">

  1240 Page-Margin Box Variable Dimension Computation Rules</h4>

  1242 <p>The following rules apply to 'top-left', 'top-center' and 'top-right'

  1243 page-margin boxes,

  1244 which are referred to as A, B, and C, respectively, in this section.</p>

  1246 <h5 id="variable-auto-margins">Margins</h5>

  1248 <p>If the 'margin-left' or 'margin-right' property of any of the three boxes

  1249 computes to ''auto'', the used value is zero.</p>

  1251 <h5 id="variable-auto-sizing">Resolving ''auto'' widths</h5>

  1253 <p>The following algorithm determines the used width of each box.

  1254 For this purpose, boxes that are not <i>generated</i>

  1255 are assumed to have a 'width' and an <i>outer width</i> of zero.

  1256 </p>

  1258 <p class="note">

  1259 Note: The high-level goals are (in order of priority) to center the middle

  1260 box (B) if it is generated, to minimize overflow and overlap, and to

  1261 distribute space proportionally to the amount of content.</p>

  1263   <p>If the middle box (B) is not <i>generated</i>,

  1264   distribute the <i>available width</i> to A and C as follows:

  1266   <ul>

  1267     <li>

  1268       If only one box has 'width: auto',

  1269       its used width is resolved so that

  1270       the sum of the <i>outer width</i>s equals <i>available width</i>.

  1271     </li>

  1273     <li id="flex-fit">

  1274       If A and C both have 'width: auto', distribute the space to each box as follows:

  1275       <ol>

  1276         <li>If the sum of the outer <i>max-content widths</i> is less than the <i>available width</i>,

  1277             call that difference the <i>flex space</i>.

  1278             Calculate each box's <i>flex factor</i> as proportional to

  1279             its outer <i>max-content width</i>,

  1280             and set its used outer width to:

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

  1282         <li>Otherwise if the sum of the outer <i>min-content widths</i> is less than the <i>available width</i>,

  1283             call that difference the <i>flex space</i>

  1284             calculate each box's <i>flex factor</i> as proportional to

  1285             its <i>max-content</i> minus <i>min-content</i>,

  1286             and set its used outer width to:

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

  1288         <li>Otherwise,

  1289             calculate its outer size as in the previous case,

  1290             but set each box's <i>flex factor</i> as proportional to

  1291             its outer <i>min-content width</i>.

  1292       </ol>

  1293       In each case, both <i>flex factors</i> are assumed to be ''1'' if their sum is equal to zero.

  1294     </li>

  1295   </ul>

  1297   <p>If the middle box (B) is <i>generated</i>,

  1298   determine the ''auto'' widths of A, B, and C as follows:

  1300   <ol>

  1301     <li>

  1302       First, resolve any ''auto'' width of the middle box (B):

  1303       Assume there are two boxes, B and AC,

  1304       where each of AC's dimensions is double the maximum of A and C.

  1305       (This preserves B's centering.)

  1306       Distribute the space to these two boxes (B and the imaginary AC)

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

  1308     <li>

  1309       Then, resolve any ''auto'' widths of the side boxes (A and C)

  1310       by setting that box's outer width to

  1311       <pre>(<i>available width</i> &minus; <i>used outer size of B</i>) ÷ 2<pre>

  1312     </li>

  1313   </ol>

  1315 <h5 id="variable-minmax">Handling 'min-width' and 'max-width'</h5>

  1317 <p>

  1318   The 'min-width' and 'max-width' properties [[CSS21]] apply to page-margin

  1319   boxes in the variable dimension like on normal elements, except that the

  1320   three boxes on the same side are considered together.

  1321 </p>

  1323 <p>

  1324   More precisely:

  1325 </p>

  1327 <ol>

  1328   <li>

  1329     The tentative used widths are calculated

  1330     (without 'min-width' and 'max-width') following the rules under

  1331     <a href="#marginbox-variabledim-with">Resolving ''auto'' widths</a>

  1332     above.

  1333   </li>

  1334   <li>

  1335     If the tentative used width of any of the three boxes

  1336     is greater than 'max-width', the rules above are applied again,

  1337     but this time using the computed value of 'max-width'

  1338     as the computed value for 'width'.

  1339   </li>

  1340   <li>

  1341     If the resulting width of any of the three boxes

  1342     is smaller than 'min-width', the rules above are applied again,

  1343     but this time using the value of 'min-width'

  1344     as the computed value for 'width'.

  1345   </li>

  1346 </ol>

  1348 <h5 id="variable-position">Positioning</h5>

  1350 <p>

  1351   Once the dimensions of the boxes are determined,

  1352   they are positioned as follows:

  1353 </p>

  1355 <ul>

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

  1357       containing block</li>

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

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

  1360       containing block.</li>

  1361 </ul>

  1363 <h5 id="variable-mapping">Boxes on other sides</h5>

  1365 <p>The used values for 'bottom-left', 'bottom-center' and 'bottom-right'

  1366 page-margin boxes are established by the same rules as

  1367 for 'top-left', 'top-center', and 'top-right', respectively.</p>

  1369 <p>The used values for 'left-top', 'left-middle' and 'left-bottom' boxes are

  1370 established by the same rules, with "width" replaced by "height", "left" by

  1371 "top", "right" by "bottom" and "center" by "middle".</p>

  1373 <p>The used values for 'right-top', 'right-middle' and 'right-bottom'

  1374 page-margin boxes

  1375 are established by the same rules as for 'left-top', 'left-middle' and

  1376 'left-bottom', respectively.</p>

  1378 <h4 id="fixed-sizing">Page-Margin Box Fixed Dimension Computation Rules</h4>

  1380 <p>The rules below are used to calculate the used values of each

  1381 'top-left-corner', 'top-left', 'top-center', 'top-right', and

  1382 'top-right-corner' page-margin box's 'height', 'margin-top', and 'margin-bottom'

  1383 properties:</p>

  1385 <ol>

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

  1387   box's properties:

  1388   <p>'margin-top' + 'border-top-width' + 'padding-top' + 'height' +

  1389   'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = top page margin

  1391   <li>If 'border-top-width' + 'padding-top' + 'height' (if it is not ''auto'')

  1392   + 'padding-bottom' + 'border-bottom-width', plus 'margin-top' and/or

  1393   'margin-bottom' if not ''auto'', is larger than the height of the top page

  1394   margin, then any ''auto'' values for 'margin-top' or 'margin-bottom' are, for

  1395   the following rules, treated as zero.

  1397   <li>If at this point all of 'height', 'margin-top', and 'margin-bottom'

  1398   have a computed value other than ''auto'', the values are said to be

  1399   "over-constrained". In this case, the specified value of 'margin-top' is

  1400   treated as 'auto'.

  1402   <li>If there is now exactly one value specified as 'auto', its used value

  1403   follows from the equality.

  1405   <li>If 'height' is set to 'auto', any other 'auto' values become '0' and

  1406   'height' follows from the resulting equality

  1408   <li>If both 'margin-top' and 'margin-bottom' are 'auto',

  1409   their used values are equal.

  1410   This vertically centers the page-margin box content

  1411   within the top page margin.

  1412 </ol>

  1414 <p>The same rules apply to the bottom page-margin boxes (bottom-left-corner,

  1415 bottom-left, bottom-center, bottom-right, and bottom-right-corner), except that

  1416 in the overconstrained case, the 'margin-bottom' is ignored rather than the

  1417 'margin-top'.</p>

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

  1420 page-margin boxes with respect to 'width'

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

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

  1423 bottom-right-corner), with 'top' replaced by 'left', 'bottom' replaced by

  1424 'right', and 'height' replaced by 'width'.

  1425 In the overconstrained case for left (right) page-margin boxes,

  1426 the specified value of 'margin-left' ('margin-right') is ignored.</p>

  1428 <h3 id="margin-box-ex">Page-margin box examples</h3>

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

  1432 <div class="example">

  1434 <p>Here is an example of a page with only a top-left header:</p>

  1435 <pre>

  1436 @page {

  1437 @top-left { content: "Header in Left Cell (top-left)" }

  1438 }

  1439 </pre>

  1441 <p>Because there are no contents defined for the top-center or the top-right

  1442 page-margin boxes, the extent of the top-left page-margin box

  1443 is allowed to cross the center of the page box.</p>

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

  1446 </div>

  1448 <div class="example">

  1450 <p>The following is an example of a page with a centered header:</p>

  1451 <pre>

  1452 @page {

  1453 @top-center { content: "Header in Center Cell (top-center)" }

  1454 }

  1455 </pre>

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

  1458 </div>

  1460 <div class="example">

  1462 <p>The following is an example of a page with a single header in the top-right

  1463 page-margin box:</p>

  1464 <pre>

  1465 @page {

  1466 @top-right { content: "Header in Right Cell (top-right)" }

  1467 }

  1468 </pre>

  1470 <p>Because the content of the center cell is empty, the extent of the top-right

  1471 page-margin box is allowed to cross the center of the page box.</p>

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

  1474 </div>

  1476 <div class="example">

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

  1479 <pre>

  1480 @page {

  1481 @top-left { content: "Left Cell (top-left)" }

  1482 @top-center { content: "Header in Center Cell (top-center)" }

  1483 }

  1484 </pre>

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

  1487 </div>

  1489 <div class="example">

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

  1492 <pre>

  1493 @page {

  1494 @top-center { content: "Header in Center Cell (top-center)" }

  1495 @top-right { content: "Right Cell (top-right)" }

  1496 }

  1497 </pre>

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

  1500 </div>

  1502 <div class="example">

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

  1505 <pre>

  1506 @page {

  1507 @top-left { content: "Header in top-left with approx. "

  1508                    "twice as many words as right cell." }

  1509 @top-right { content: "Right cell (top-right)" }

  1510 }

  1511 </pre>

  1513 <p>Because there are no center cell contents, the extent of the top-left is

  1514 allowed to cross the center of the page box.</p>

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

  1517 </div>

  1519 <h2 id="page-properties">Page Properties</h2>

  1520 <div>

  1522 <p>

  1523   <a href="#properties-list">Appendix A</a> defines the normative list of

  1524   CSS 2.1 [[!CSS21]]

  1525   <a href="#page-property-list">properties that apply to page boxes</a>.

  1526   If a conforming user agent supports any of these properties on block boxes,

  1527   then it <em class="RFC2119">MUST</em> also support that property

  1528   in the <i>page context</i>.

  1529   This specification additionally defines the 'size' property

  1530   that only applies in the page context.

  1532 <p>

  1533   Properties that apply to the page-margin boxes can also be set

  1534   within the page context:

  1535   if inheritable or explicitly inherited

  1536   (with the ''inherit'' keyword in the margin context),

  1537   they will inherit to the page-margin boxes.

  1539 <p>

  1540   The same appendix defines the normative list of

  1541   CSS 2.1 [[!CSS21]]

  1542   <a href="#page-property-list">properties that apply to page-margin boxes</a>.

  1543   If a conforming user agent supports any of these properties on block boxes,

  1544   then it <em class="RFC2119">MUST</em> also support that property

  1545   in the <i>margin context</i>.

  1547 <p>

  1548   Other properties defined by [[!CSS21]] do not apply in these contexts.

  1549   Behavior for properties not included in CSS 2.1 is undefined.

  1551 <p class="note">

  1552 Note: The intent of leaving other properties undefined is to allow the gradual

  1553 addition of appropriate CSS3 properties as they emerge, without having to

  1554 update this specification with each addition.</p>

  1556 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with

  1557 elements in the document</a>, both the page context and the margin context

  1558 have a computed value for every property, even if that property does not

  1559 apply to the page or page-margin box.</p>

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

  1563 <ul>

  1564   <li>page-margin boxes inherit from the page context.

  1565   The page context inherits from the root element.

  1566   However, since the previous revision of CSS Paged

  1567   Media Level 3 did not specify this point, an implementation that sets

  1568   inherited properties in the page context to their initial values (as for the

  1569   root element) is also conformant to CSS Paged Media Level 3. Note that this

  1570   exception will be removed in Level 4.

  1571   <li>Values in units of ''em'' and ''ex'' are interpreted relative to the font

  1572   associated with their context. When used on the 'font-size' property in the

  1573   margin context, they are relative to the font of the page context. When used

  1574   on the 'font-size' property in the page context, they are relative to the

  1575   'font-size' of the root element. However, since a previous revision of CSS

  1576   Paged Media Level 3 was ambiguous on this point, an implementation that

  1577   treats ''em'' and ''ex'' on 'font-size' as relative to the initial value is

  1578   also conformant to CSS Paged Media Level 3. Note that this exception will

  1579   be removed in Level 4.

  1580   <li>Percentage values on the margin and padding properties are relative to the

  1581   dimensions of the containing block. For right and left values, percentages are

  1582   relative to the width of the containing block; for top and bottom values,

  1583   percentages are relative to the height of the containing block.</li>

  1584   <li>The used values of 'width' and 'height' have special computation rules

  1585   for page boxes and page-margin boxes; see <a href="#page-size">Page Size</a>

  1586   and <a href="#margin-box-dimensions">Computing Page-Margin Box Dimensions</a>.

  1587   <li>The page background is positioned and painted

  1588     <a href="#painting">as described above</a>.

  1589   <li>The rules for counter scoping are modified <a href="page-based-counters">as

  1590   described below</a>.</li>

  1591   <li>

  1592     As on the '::before' and '::after' pseudo-elements,

  1593     the ''normal'' value of the 'content' property computes to ''none''

  1594     on page-margin boxes.

  1595   </li>

  1596   <li>On page-margin boxes, the 'vertical-align' property behaves

  1597   <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as specified for table cells</a>.

  1598   It <em>always</em> performs alignment in the vertical dimension,

  1599   regardless of writing mode.

  1600 </ul>

  1602 <p>It is <em class="RFC2119">recommended</em> that user agents establish a default

  1603 page margin via the user agent stylesheet that includes any non-printable area.

  1604 It is further <em class="RFC2119">recommended</em> that authors assume that the

  1605 default page area will not include unprintable regions.</p>

  1607 <h3 id="page-based-counters">Page-based counters</h3>

  1609 <p>Counters can be defined and controlled within an <span class="css">'@page'</span>

  1610 rule, and used as content in page-margin boxes.

  1611 This is useful for maintaining a page count.</p>

  1613 <p>A 'counter-increment' within either a page or margin context causes the counter

  1614 to increment with the generation of each page box.</p>

  1616 <p>If a counter is reset or incremented within the page context, it is in scope

  1617 for all page-margin boxes and obscures all counters of the same name within the

  1618 document.</p>

  1620 <p>If a counter is reset or incremented within a margin context, it is in scope

  1621 for that page-margin box and obscures any counters of the same name

  1622 in both the page context and the document.</p>

  1624 <p>If a counter that has not been reset or incremented within the margin context

  1625 or the page context is used by counter() or counters() in the margin context,

  1626 then the resultant value is exactly

  1627 as if the page-margin box were an element within

  1628 the document at the start of the page, inside the deepest element in the normal

  1629 flow that spans the page break. Use of the counter in this way does not affect

  1630 the calculation of the counter's value.</p>

  1632 <p>

  1633   A counter named ''page'' is automatically created

  1634   and incremented by 1 on every page of the document,

  1635   unless the 'counter-increment' property in the <i>page context</i>

  1636   explicitly specifies a different increment for the ''page'' counter.

  1637   The implied ''page'' counter is a real counter,

  1638   and can be directly affected using the 'counter-increment' and 'counter-reset' properties

  1639   when named explicitly in those properties.

  1640   It can also be used in the 'counter()' and 'counters()' function forms.

  1641 </p>

  1643 <div class="example">

  1644 <p>The following rules result in the placement of the current page number in the

  1645 middle of the outside margin of each page.</p>

  1646 <pre>

  1647 @page {

  1648   margin: 10%;

  1650   @top-center {

  1651     font-family: sans-serif;

  1652     font-weight: bold;

  1653     font-size: 2em;

  1654     content: counter(page);

  1655   }

  1656 }

  1657 </pre>

  1659 <p>Adding the following rule will make all pages even-numbered.</p>

  1660 <pre>

  1661 @page {

  1662   counter-increment: page 2;

  1663 }

  1664 </pre>

  1665 </div>

  1667 <p>Additionally, a counter named ''pages'' is automatically created by the UA.

  1668 Its value is always the total number of pages in the document. (In continuous

  1669 media this is always 1.) The value of ''pages'' cannot be manipulated: while

  1670 'counter-reset' and 'counter-increment' statements that set it are valid, they

  1671 have no effect.

  1673 <p>In all other respects, page-associated counters behave as described in

  1674 [[!CSS21]], <a href="TR/CSS21/generate.html#scope">Nested Counters and

  1675 Scope</a> and <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.</p>

  1677 <h3 id="margin-text-alignment">Page-margin boxes and default values</h3>

  1679 <p>Properties used within page or margin contexts take their initial values from

  1680 their respective property definitions; however, user agents must behave as

  1681 though the values in the following table were established by rules in the UA

  1682 default style sheet.</p>

  1683 <table id="margin-values" class="data" summary="definition of page-margin box default properties">

  1684   <caption>Table 2. Default values for Page-Margin Boxes</caption>

  1685   <thead>

  1686     <tr>

  1687       <th>Page-margin box</th>

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

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

  1690     </tr>

  1691   </thead>

  1692   <tbody>

  1693     <tr>

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

  1695       <td>right</td>

  1696       <td>middle</td>

  1697       </tr>

  1698     <tr>

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

  1700       <td>left</td>

  1701       <td>middle</td>

  1702       </tr>

  1703     <tr>

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

  1705       <td>center</td>

  1706       <td>middle</td>

  1707       </tr>

  1708     <tr>

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

  1710       <td>right</td>

  1711       <td>middle</td>

  1712       </tr>

  1713     <tr>

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

  1715       <td>left</td>

  1716       <td>middle</td>

  1717       </tr>

  1718     <tr>

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

  1720       <td>center</td>

  1721       <td>top</td>

  1722       </tr>

  1723     <tr>

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

  1725       <td>center</td>

  1726       <td>middle</td>

  1727       </tr>

  1728     <tr>

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

  1730       <td>center</td>

  1731       <td>bottom</td>

  1732       </tr>

  1733     <tr>

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

  1735       <td>center</td>

  1736       <td>top</td>

  1737       </tr>

  1738     <tr>

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

  1740       <td>center</td>

  1741       <td>middle</td>

  1742       </tr>

  1743     <tr>

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

  1745       <td>center</td>

  1746       <td>bottom</td>

  1747       </tr>

  1748     <tr>

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

  1750       <td>right</td>

  1751       <td>middle</td>

  1752       </tr>

  1753     <tr>

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

  1755       <td>left</td>

  1756       <td>middle</td>

  1757       </tr>

  1758     <tr>

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

  1760       <td>center</td>

  1761       <td>middle</td>

  1762       </tr>

  1763     <tr>

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

  1765       <td>right</td>

  1766       <td>middle</td>

  1767       </tr>

  1768     <tr>

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

  1770       <td>left</td>

  1771       <td>middle</td>

  1772     </tr>

  1773   </tbody>

  1774 </table>

  1776 <div class="example">

  1778 <p>This example style sheet could be used to create a centered header with the

  1779 current chapter name:</p>

  1780 <pre>body {counter-reset: chapter;}

  1781 div.chapter {counter-increment: chapter;}

  1782 @page {

  1783 margin: 10%;

  1784 @top-center { content: "Chapter" counter(chapter) }

  1785 }

  1786 </pre>

  1787 </div>

  1789 <h2 id="page-size">Page Size</h2>

  1791 <p>People around the world use many different paper sizes. It is a goal of this

  1792 specification that web content should be adaptable to a range of different

  1793 sizes without having to write a specific style sheet for each paper size.</p>

  1795 <p>However, in some situations it is important that a certain page size achieves a

  1796 certain style. One way to achieve this goal is to utilize the 'size' property,

  1797 which indicates that the document should preferentially be displayed on a

  1798 surface of a certain size; another method is to use Media Queries [[MEDIAQ]]

  1799 which allow different style sheets to be applied to different page sizes.</p>

  1801 <h3 id="page-size-prop">Page size: the 'size' property</h3>

  1803 <table class="propdef" summary="definition of the size property">

  1804   <tr>

  1805     <th>Name:

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

  1807   <tr>

  1808     <th>Value:

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

  1810   <tr>

  1811     <th>Initial:

  1812     <td>auto

  1813   <tr>

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

  1815     <td>page context

  1816   <tr>

  1817     <th>Inherited:

  1818     <td>N/A

  1819   <tr>

  1820     <th>Percentages:

  1821     <td>N/A

  1822   <tr>

  1823     <th>Media:

  1824     <td>paged

  1825   <tr>

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

  1827     <td>specified value

  1828 </table>

  1830 <p>This property specifies the target size and orientation of the

  1831 <a href="#page-box">page box</a>’s containing block.

  1832 In the general case, where one page box is rendered onto one <a href="#page-sheet">page sheet</a>,

  1833 the 'size' property also indicates the size of the destination page sheet.

  1835 <p>The size of a page box can either be "absolute" (fixed size) or "scalable"

  1836 (i.e., fitting available sheet sizes).

  1837 The first three values in the table below can be used to create scalable page

  1838 boxes.

  1839 Other values define a fixed-size page box, and thereby indicate the preferred

  1840 output media size. When possible, output should be rendered on the media size

  1841 indicated.

  1842 If the specified size is not available, the rules for

  1843 <a href="#renderingpages">transposing a page box to a different size</a>

  1844 apply.</p>

  1846 <p>If a <code>size</code> property declaration is qualified by a ''width'',

  1847 ''height'', ''device-width'', ''device-height'', ''aspect-ratio'',

  1848 ''device-aspect-ratio'' or ''orientation''

  1849 media query [[!MEDIAQ]] (or other conditional on the size of the paper), then

  1850 the declaration must be

  1851 <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media

  1852 queries do not honor 'size': they assume the paper size that would be chosen

  1853 if no @page rules were specified.</p>

  1855 <p class=issue>It would be useful if media queries could respond at least

  1856 to sizes specified on an unqualified @page.

  1858 <div class="example">

  1859   <p>In the following example

  1860   <pre>

  1861   @page {

  1862     size: 4in 6in;

  1863   }

  1865   @media (max-width: 6in) {

  1866     @page {

  1867       size: letter;

  1868     }

  1869   }

  1870   </pre>

  1871   <p>The second <code>size</code> declaration is ignored, i.e. the specified value

  1872   of the <code>size</code> property is <code>4in 6in</code>.

  1873 </div>

  1875 <table class="page-sizes">

  1876 <tr>

  1877 <th>Value</th>

  1878 <th>Description</th>

  1879 </tr>

  1880 <tr>

  1881 <td>auto</td>

  1882 <td>The page box will be set to a size and orientation chosen by the UA. In the

  1883 usual case, the page box size and orientation is chosen to match the target

  1884 media sheet.</td>

  1885 </tr>

  1886 <tr>

  1887 <td>landscape</td>

  1888 <td>Specifies that the page's content be printed in landscape orientation. The

  1889 longer sides of the page box are horizontal. If a <span class="css">'&lt;page-size&gt;'</span> is not specified, the size of the page sheet

  1890 is chosen by the UA.</td>

  1891 </tr>

  1892 <tr>

  1893 <td>portrait</td>

  1894 <td>Specifies that the page's content be printed in portrait orientation. The

  1895 shorter sides of the page box are horizontal. If a <span class="css">'&lt;page-size&gt;'</span> is not specified, the size of the page sheet

  1896 is chosen by the UA.</td>

  1897 </tr>

  1898 <tr>

  1899 <td>&lt;length&gt;</td>

  1900 <td>The page box will be set to the given absolute dimension(s). If only one length

  1901 value is specified, it sets both the width and height of the page box (i.e.,

  1902 the box is a square). If two length values are specified, the first establishes

  1903 the page box width, and the second the page box height. Values in units of

  1904 <span class="css">'em'</span> and <span class="css">'ex'</span> refer to the

  1905 page context's font. Negative lengths are illegal.</td>

  1906 </tr>

  1907 <tr>

  1908 <td>&lt;page-size&gt;</td>

  1909 <td>A page size can be specified using one of the following media names. This is

  1910 the equivalent of specifying the <span class="css">'&lt;page-size&gt;'</span>

  1911 using length values. The definition of the the media names comes from

  1912 <cite>Media Standardized Names</cite> [[!PWGMSN]].

  1914 <dl>

  1916 <dt>A5</dt>

  1917 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>

  1919 <dt>A4</dt>

  1920 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.</dd>

  1922 <dt>A3</dt>

  1923 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>

  1925 <dt>B5</dt>

  1926 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>

  1928 <dt>B4</dt>

  1929 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>

  1931 <dt>letter</dt>

  1932 <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11

  1933 inches high</dd>

  1935 <dt>legal</dt>

  1936 <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches

  1937 high.</dd>

  1939 <dt>ledger</dt>

  1940 <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches

  1941 high.</dd>

  1942 </dl></td>

  1943 </tr>

  1944 </table>

  1946 <p>The '&lt;page-size&gt;' names can be used in conjunction with 'landscape' or

  1947 'portrait' to indicate both size and orientation.</p>

  1949 <h4>Some examples:</h4>

  1951 <div class="example">

  1952 <pre>

  1953 @page {

  1954 size: A4 landscape;

  1955 }

  1956 </pre>

  1958 <p>The above example sets the width of the page box to be 297mm and the height to

  1959 be 210mm. The page box in this example should be rendered on a page sheet size

  1960 of 210 mm by 297 mm.</p>

  1961 </div>

  1963 <div class="example">

  1965 <p>In the following example, the outer edges of the page box will align with the

  1966 page. The percentage value on the <span class="property">'margin'</span>

  1967 property is relative to the page size so if the page sheet dimensions are 210mm

  1968 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page

  1969 borders or padding set in the UA default style sheet, the resulting page area

  1970 is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>

  1971 <pre>

  1972 @page {

  1973 size: auto;/* auto is the initial value */

  1974 margin: 10%;

  1975 }

  1976 </pre>

  1977 </div>

  1979 <div class="example">

  1980 <pre>

  1981 @page {

  1982 size: 8.5in 11in;/* width height */

  1983 }

  1984 </pre>

  1986 <p>The above example sets the width of the page box to be 8.5 inches and the

  1987 height to be 11 inches. This indicates that the page sheet size should be

  1988 8.5"x11" and the orientation 'portrait'.</p>

  1989 </div>

  1991 <h4 id="page-size-media-query">Media Queries</h4>

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

  1995 <p>By using Media Queries [[MEDIAQ]], one style sheet can express different

  1996 stylistic preferences for different page sizes. Consider this example:</p>

  1998 <div class="example" style="font-size: 10pt;">

  1999 <pre>

  2000  /* style sheet for "A4" printing */

  2001  @media print and (width: 21cm) and (height: 29.7cm) {

  2002     @page {

  2003        margin: 3cm;

  2004     }

  2005  }

  2007  /* style sheet for "letter" printing */

  2008  @media print and (width: 8.5in) and (height: 11in) {

  2009     @page {

  2010         margin: 1in;

  2011     }

  2012  }

  2013 </pre>

  2014 </div>

  2016 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"

  2017 sheets are given a "1in" page margin.</p>

  2019 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>

  2021 <p>If a page box does not match the target page sheet dimensions, the user agent

  2022 should do one of the following (in order of preference):</p>

  2024 <ol>

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

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

  2027   <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box

  2028   <em class="RFC2119">should</em> be preserved.)</li>

  2029   <li>Graphically "slice" the page box onto multiple page sheets.</li>

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

  2031 </ol>

  2033 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before

  2034 performing these operations.</p>

  2036 <h3 id="positioning-page-box">Positioning the page box on the sheet</h3>

  2038 <p>When the page box is smaller than the page sheet, the user agent <em class="RFC2119">SHOULD</em> either:</p>

  2040 <ul>

  2041   <li>center the page box on the sheet since this will align double-sided pages

  2042   and avoid accidental loss of information that is printed near the edge of the

  2043   sheet; or</li>

  2044   <li>position the page box in the upper left corner of the page sheet

  2045   (or another corner,

  2046   based on the 'direction' and 'writing-mode' properties of the page box)

  2047   as this may minimize media consumption.</li>

  2048 </ul>

  2050 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this

  2051 regard.</p><!-- "Page selector and page context" -->

  2053 <h2 id="page-breaks">

  2054     <a id="pg-br-before-after"></a>

  2055     <a id="page-break-before"></a>

  2056     <a id="page-break-after"></a>

  2057     <a id="page-break-inside"></a>

  2058     <a id="breaks-inside"></a>

  2059     <a id="orphans"></a>

  2060     <a id="widows"></a>

  2061     <a id="allowed-pg-brk"></a>

  2062     <a id="brk-btw-blocks"></a>

  2063     <a id="brk-btw-lines"></a>

  2064     <a id="brk-end-block"></a>

  2065     <a id="forced-pg-brk"></a>

  2066     <a id="best-pg-brk"></a>

  2067     Page Breaks

  2068 </h2>

  2070 <p>

  2071   The CSS Fragmentation Module [[!CSS3-BREAK]] module

  2072   defines how and where CSS boxes

  2073   can be <i>fragmented</i>, including across page breaks.

  2074   It defines a few properties that indicate where the user agent

  2075   <em class="RFC2119">MAY</em> or <em class="RFC2119">MUST</em> break pages,

  2076   and on what page (left or right) the subsequent content resumes.

  2077   Each page break ends layout in the current <a href="#page-box">page box</a>

  2078   and causes remaining pieces of the document tree to be laid out

  2079   in a new page box.

  2080 </p>

  2082 <h3 id="using-named-pages">Using named pages: 'page'</h3>

  2083 <table class="propdef" summary="property definition">

  2084   <tr>

  2085     <th>Name:

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

  2087   <tr>

  2088     <th>Value:

  2089     <td>auto | &lt;identifier&gt;

  2090   <tr>

  2091     <th>Initial:

  2092     <td>auto

  2093   <tr>

  2094     <th>Applies to:

  2095     <td>boxes that create <a href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break points

  2096   <tr>

  2097     <th>Inherited:

  2098     <td>no (but see prose)

  2099   <tr>

  2100     <th>Percentages:

  2101     <td>N/A

  2102   <tr>

  2103     <th>Media:

  2104     <td>paged

  2105   <tr>

  2106     <th>Computed value:

  2107     <td>specified value

  2108 </table>

  2110 <p>

  2111   The 'page' property is used to specify a particular type of page (called a <dfn>named page</dfn>)

  2112   on which an element <em class="RFC2119">MUST</em> be displayed.

  2113   If necessary, a <i>forced page break</i> is introduced

  2114   and a new page generated of the specified type.

  2116 <p class="note">

  2117   This page can be styled by using the same type name

  2118   in a <a href="#page-selectors">page selector</a>.

  2120 <p>

  2121   Page type names are case-sensitive identifiers.

  2122   However the ''auto'' value, being a CSS keyword, is

  2123   <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>.

  2125 <p>

  2126   The 'page' property does not inherit.

  2127   However, if the 'page' value on an element is ''auto'',

  2128   then its used value is the value specified

  2129   on its nearest ancestor with a non-auto value.

  2130   When specified on the root element,

  2131   the used value for ''auto'' is the empty string.

  2133   <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->

  2135 <p>

  2136   Because a previous version of this specification

  2137   indicated that the 'page' property is inherited,

  2138   an implementation that inherits the 'page' property

  2139   and treats ''auto'' as always naming the empty string

  2140   remains conformant to CSS Paged Media Level 3.

  2141   Note that this exception will be removed in Level 4.

  2142   Therefore authors should not explicitly specify the ''auto'' value

  2143   on a descendant of an element with a non-''auto'' value,

  2144   as the resulting behavior will be unpredictable.

  2146 <p>

  2147   The 'page' property works as follows:

  2149 <ol>

  2151   <li>

  2152     First, any ''auto'' values are resolved against non-''auto'' ancestors

  2153     (as specified above).

  2155   <li>

  2156     Next,

  2157     a <dfn>start 'page' value</dfn> and <dfn>end 'page' value</dfn>

  2158     is determined for each box

  2159     as the value (if any) propagated from

  2160     its first or last child box (respectively),

  2161     else the used value on the box itself.

  2162     A child propagates its own

  2163     <i title="start page value">start</i> or <i>end 'page' value</i>

  2164     if and only if the 'page' property applies to it.

  2166     <p class="note">

  2167       Note:

  2168       A first or last child <em>box</em> is not always generated by

  2169       a first or last child <em>element</em>.

  2170       For example,

  2171       an element could only have a previous sibling with 'display: none'

  2172       which does not generate any box.

  2174   <li>

  2175     The first printed page’s type is the <i>start 'page' value</i> of the root.

  2177   <li>

  2178     If for any two boxes meeting at a <a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break point,

  2179     the <i>end 'page' value</i> of the box preceding the break

  2180     and <i>start 'page' value</i> of the box succeeding the break

  2181     do not match,

  2182     then a page break is forced between the two boxes,

  2183     and content after the break resumes on a page box of the named type.

  2184 </ol>

  2186 <p class="note">

  2187   Essentially, the two 'page' values compared are those from the deepest boxes

  2188   meeting at the class 1 break point,

  2189   ignoring any subtrees rooted by boxes to which the 'page' property does not apply.

  2191 <p>See [[!CSS3-BREAK]] for additional details on page breaks.

  2193 <div class="example">

  2195 <p>In this example, the two tables are rendered on landscape pages (indeed, on the

  2196 same page, if they fit). The page type "narrow" is used for the &lt;p&gt; after

  2197 the second table, as the page properties for the table element are no longer in

  2198 effect:</p>

  2199 <pre>

  2200 @page narrow { size: 9cm 18cm }

  2201 @page rotated { size: landscape }

  2202 div { page: narrow }

  2203 table { page: rotated }

  2204 </pre>with this document:

  2205 <pre>

  2206 &lt;div&gt;

  2207 &lt;table&gt;...&lt;/table&gt;

  2208 &lt;table&gt;...&lt;/table&gt;

  2209 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;

  2210 &lt;/div&gt;

  2211 </pre>

  2212 </div>

  2214 <div class="example">

  2215   <p>In Japanese documents, sometimes different parts of a single document

  2216   will have different <i lang="ja-Latn">kihon hanmen</i>. [[JLREQ]]

  2217   The 'page' property, together with ''@page'' rules specifying different page widths,

  2218   can accomodate this type of layout:

  2219   <pre>

  2220 &lt;!DOCTYPE html>

  2221 &lt;html lang="ja">

  2222   &lt;style>

  2223     html   { writing-mode: vertical-rl;

  2224              line-height: 1.6; }

  2225     .main  { page: main;

  2226              columns: 2; column-gap: 1rem; }

  2227     .index { page: index;

  2228              columns: 3; column-gap: 1rem; }

  2229     @page       { margin: auto;    /* center kihon hanmen on page */

  2230                   width:  40rem; } /* 1.6 &times; 25 lines        */

  2231     @page main  { height: 61rem; } /* 2 &times; 30 chars + 1 &times; gap */

  2232     @page index { height: 62rem; } /* 3 &times; 20 chars + 2 &times; gap */

  2233   &lt;/style>

  2234   &lt;section class="main"> ... &lt;/section>

  2235   &lt;section class="index"> ... &lt;/section>

  2236 &lt;/html>

  2237 </pre>

  2238 </div>

  2241 <h2 id="image-properties">Image Properties</h2>

  2243 <p class="note">This section has been moved to [[CSS3-IMAGES]].</p>

  2245 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>

  2247 <h3 class="no-num" id="page-property-list">

  2248   CSS 2.1 Properties that apply within the page context</h3>

  2250 <p>

  2251   This list is described in the

  2252   <a href="#page-properties">Page Properties</a> section.

  2254 <table class="property-list">

  2255   <tbody>

  2256     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>

  2257         <td>direction

  2258   <tbody>

  2259     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>

  2260         <td>background-color

  2261     <tr><td>background-image

  2262     <tr><td>background-repeat

  2263     <tr><td>background-attachment

  2264     <tr><td>background-position

  2265     <tr><td>background

  2266   <tbody>

  2267     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>

  2268         <td>border-top-width

  2269     <tr><td>border-right-width

  2270     <tr><td>border-bottom-width

  2271     <tr><td>border-left-width

  2272     <tr><td>border-width

  2273     <tr><td>border-top-color

  2274     <tr><td>border-right-color

  2275     <tr><td>border-bottom-color

  2276     <tr><td>border-left-color

  2277     <tr><td>border-color

  2278     <tr><td>border-top-style

  2279     <tr><td>border-right-style

  2280     <tr><td>border-bottom-style

  2281     <tr><td>border-left-style

  2282     <tr><td>border-short-style

  2283     <tr><td>border-top

  2284     <tr><td>border-right

  2285     <tr><td>border-bottom

  2286     <tr><td>border-left

  2287     <tr><td>border

  2288   <tbody>

  2289     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>

  2290         <td>counter-reset

  2291     <tr><td>counter-increment

  2292   <tbody>

  2293     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2294   <tbody>

  2295     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  2296         <td>font-family

  2297     <tr><td>font-size

  2298     <tr><td>font-style

  2299     <tr><td>font-variant

  2300     <tr><td>font-weight

  2301     <tr><td>font

  2302   <tbody>

  2303     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  2304         <td>height

  2305     <tr><td>min-height

  2306     <tr><td>max-height

  2307   <tbody>

  2308     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2309   <tbody>

  2310     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>

  2311         <td>margin-top

  2312     <tr><td>margin-right

  2313     <tr><td>margin-bottom

  2314     <tr><td>margin-left

  2315     <tr><td>margin

  2316   <tbody>

  2317     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>

  2318         <td>outline-width

  2319     <tr><td>outline-style

  2320     <tr><td>outline-color

  2321     <tr><td>outline

  2322   <tbody>

  2323     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>

  2324         <td>padding-top

  2325     <tr><td>padding-right

  2326     <tr><td>padding-bottom

  2327     <tr><td>padding-left

  2328     <tr><td>padding

  2329   <tbody>

  2330     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  2331   <tbody>

  2332     <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  2333         <td>letter-spacing

  2334     <tr><td>text-align

  2335     <tr><td>text-decoration

  2336     <tr><td>text-indent

  2337     <tr><td>text-transform

  2338     <tr><td>white-space

  2339     <tr><td>word-spacing

  2340   <tbody>

  2341     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  2342   <tbody>

  2343     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  2344         <td>width

  2345     <tr><td>min-width

  2346     <tr><td>max-width

  2347 </table>

  2350 <h3 class="no-num" id="margin-property-list">

  2351   CSS 2.1 properties that apply within the margin contexts</h3>

  2353 <p>

  2354   This list is described in the

  2355   <a href="#page-properties">Page Properties</a> section.

  2357 <table class="property-list">

  2358   <tbody>

  2359     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>

  2360         <td>direction

  2361     <tr><td>unicode-bidi

  2362   <tbody>

  2363     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>

  2364         <td>background-color

  2365     <tr><td>background-image

  2366     <tr><td>background-repeat

  2367     <tr><td>background-attachment

  2368     <tr><td>background-position

  2369     <tr><td>background

  2370   <tbody>

  2371     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>

  2372         <td>border-top-width

  2373     <tr><td>border-right-width

  2374     <tr><td>border-bottom-width

  2375     <tr><td>border-left-width

  2376     <tr><td>border-width

  2377     <tr><td>border-top-color

  2378     <tr><td>border-right-color

  2379     <tr><td>border-bottom-color

  2380     <tr><td>border-left-color

  2381     <tr><td>border-color

  2382     <tr><td>border-top-style

  2383     <tr><td>border-right-style

  2384     <tr><td>border-bottom-style

  2385     <tr><td>border-left-style

  2386     <tr><td>border-short-style

  2387     <tr><td>border-top

  2388     <tr><td>border-right

  2389     <tr><td>border-bottom

  2390     <tr><td>border-left

  2391     <tr><td>border

  2392   <tbody>

  2393     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>

  2394         <td>counter-reset

  2395     <tr><td>counter-increment

  2396   <tbody>

  2397     <tr><td colspan="2"><a href="">content</a>

  2398   <tbody>

  2399     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2400   <tbody>

  2401     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  2402         <td>font-family

  2403     <tr><td>font-size

  2404     <tr><td>font-style

  2405     <tr><td>font-variant

  2406     <tr><td>font-weight

  2407     <tr><td>font

  2408   <tbody>

  2409     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  2410         <td>height

  2411     <tr><td>min-height

  2412     <tr><td>max-height

  2413   <tbody>

  2414     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2415   <tbody>

  2416     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>

  2417         <td>margin-top

  2418     <tr><td>margin-right

  2419     <tr><td>margin-bottom

  2420     <tr><td>margin-left

  2421     <tr><td>margin

  2422   <tbody>

  2423     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>

  2424         <td>outline-width

  2425     <tr><td>outline-style

  2426     <tr><td>outline-color

  2427     <tr><td>outline

  2428   <tbody>

  2429     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  2430   <tbody>

  2431     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>

  2432         <td>padding-top

  2433     <tr><td>padding-right

  2434     <tr><td>padding-bottom

  2435     <tr><td>padding-left

  2436     <tr><td>padding

  2437   <tbody>

  2438     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  2439   <tbody>

  2440     <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  2441         <td>letter-spacing

  2442     <tr><td>text-align

  2443     <tr><td>text-decoration

  2444     <tr><td>text-indent

  2445     <tr><td>text-transform

  2446     <tr><td>white-space

  2447     <tr><td>word-spacing

  2448   <tbody>

  2449     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  2450   <tbody>

  2451     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  2452   <tbody>

  2453     <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  2454         <td>width

  2455     <tr><td>min-width

  2456     <tr><td>max-width

  2457   <tbody>

  2458     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  2459 </table>

  2461 <h2 class="no-num" id="transfer-possibilities">Appendix B: Transfer Possibilities</h2>

  2463 <p>Often, but not always, the page box has a one-to-one correspondence to the

  2464 physical surface onto which the document is ultimately rendered. The CSS3 page

  2465 model specifies formatting within the page box, but it is the user agent's

  2466 responsibility to transfer the page box to the sheet. Some user agent transfer

  2467 possibilities that are not addressed by CSS3 include:</p>

  2469 <ul id="complex-usecases">

  2470   <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>

  2471   <li>Transferring two page boxes to the front and back surfaces of the same

  2472   sheet (e.g. double-sided printing);</li>

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

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

  2475   <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on

  2476   a sheet, which, when folded and trimmed like a book, appear in their proper

  2477   sequence;</li>

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

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

  2480 </ul>

  2482 <h2 class="no-num" id="changes">Changes</h2>

  2484 <p>

  2485   Changes since the <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006 Working Draft</a> are:

  2486 </p>

  2488 <ul>

  2489   <li>The first printed page can be <a href="#using-named-pages">named</a>.

  2491   <li>The '':blank'' <a href="#pseudo-classes">pseudo-class</a> was imported

  2492     from the <a href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged Media</a> module.

  2494   <li>''@page'' rules can now take multiple comma separated selectors,

  2495     each selector can have multiple pseudo-classes.

  2497     <div class="example">

  2498       <pre>@page :first, :blank { @bottom-center { content: none } }</pre>

  2499       <pre>@page :first:left { @bottom-left { content: none } }</pre>

  2500     </div>

  2502   <li>Margin boxes are renamed <a href="#margin-boxes">page-margin boxes</a>,

  2503     to avoid confusion with the margin area of each box.

  2505   <li>The <a href="#variable-sizing">Variable Dimension</a>

  2506     layout rules for page-margin boxes have been much simplified

  2507     to not require quadratic optimization.

  2509   <li>The relative <a href="#painting">painting order</a>

  2510     of page-margin boxes and page content has changed.

  2512   <li>The description of page breaks and definition of related properties

  2513     (except for the 'page' property)

  2514     have been moved to the CSS Fragmentation Module. [[!CSS3-BREAK]]

  2516   <li>The 'fit' and 'fit-position' properties

  2517     are renamed to 'object-fit' and 'object-position',

  2518     redefined to enable additional use cases,

  2519     and moved to the CSS3 Image Values and Replaced Content module.

  2520     [[CSS3-IMAGES]]

  2522   <li>Many miscellaneous clarifications

  2523     and editorial improvements have been incorporated.

  2525 </ul>

  2528 <h2 class="no-num" id="references">References</h2>

  2530 <h3 class="no-num" id="normative-references">Normative References</h3><!--normative-->

  2532 <h3 class="no-num" id="informative-references">Informative References</h3><!--informative-->

  2533 </div>

  2534 </div>

  2535 </body>

  2536 </html>

Mercurial > drafts / file revision

css3-page/Overview.src.html@2a3f835f72e3

css3-page/Overview.src.html