drafts: css3-page/Overview.src.html@3a33dc6c4f9c

     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>

    82 <div>

    83 <div class="head">

    84 <!--logo-->

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

    86 <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>

    87 <dl>

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

    89     <!-- <dd><a 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 href="http://www.w3.org/TR/2004/CR-css3-page-20040225/">http://www.w3.org/TR/2004/CR-css3-page-20040225/</a></dd>

    92   <dt>Editors:</dt>    <dd>Melinda Grant, Hewlett-Packard</dd>

    93     <dd>H&aring;kon Wium Lie, Opera Software</dd>

    94     <dd>Elika J. Etemad, Hewlett-Packard</dd>

    95     <dd>Simon Sapin, Kozea</dd>

    96 </dl>

    98 <!--copyright-->

   100 </div>

   101 <hr title="Separator for header">

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

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

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

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

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

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

   110 to enable page numbering and running headers / footers.</p>

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

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

   116 <!--status-->

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

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

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

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

   123 the formerly named 'fit' and 'fit-position' properties; they are

   124 renamed to 'object-fit' and 'object-position', redefined to enable additional

   125 use cases, and moved to the

   126   <a href="http://www.w3.org/TR/css3-images/">CSS3 Image Values and Replaced Content module</a>.

   127 The page-page-margin box sizing algorithm has been reworded to be a bit simpler,

   128 and many miscellaneous clarifications and editorial improvements have

   129 been incorporated.</p>

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

   132 <ul>

   133   <li>comma-separated page selectors

   134 </ul>

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

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

   138 specified with more precision.</p>

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

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

   142 during this Last Call period.</p>

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

   145 <!--end-toc-->

   146 <!-- "Introduction" -->

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

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

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

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

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

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

   155 <ul>

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

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

   158   padding are specified;</li>

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

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

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

   162 </ul>

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

   165 document is formatted within a rectangular area, called the

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

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

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

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

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

   172 size.</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   193   like this:

   195 <div class="example">

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

   197 </div>

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

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

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

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

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

   207 page model:</p>

   209 <dl>

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

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

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

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

   214   corner of a page sheet.</dd>

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

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

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

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

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

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

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

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

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

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

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

   227   device dependent within the constraints expressed in the sections

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   251   reverse-landscape renderings.</span>

   252   </dd>

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

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

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

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

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

   259   not it actually is.</dd>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   276   orientation.</dd>

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

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

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

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

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

   283   selector.</dd>

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

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

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

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

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

   290   page selector.</dd>

   291 </dl>

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

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

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

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

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

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

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

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

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

   306 <ul>

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

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

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

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

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

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

   313   of the document.</li>

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

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

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

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

   318 </ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   338 margin edges of the page box.

   340 <h3 id="painting">

   341 Page Backgrounds and Painting Order</h3>

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

   344   following painting order (bottommost first):

   346   <ol>

   347     <li>page background

   348     <li>document canvas

   349     <li>page borders

   350     <li>document contents

   351     <li>page-margin boxes

   352   </ol>

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

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

   356   is the entire page box, including its margins.

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

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

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

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

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

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

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

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

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

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

   368   or page area as usual.

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

   371   With respect to the page-margin boxes,

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

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

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

   375   or between the content and the canvas.

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

   377   The page background is always painted underneath everything else.

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

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

   380   as if they were positioned elements

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

   383   <p>The default painting order,

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

   385   of page-margin boxes with respect to each other is not specified.

   386   However, the page-margin boxes are defined to come

   387   after the page box and its contents.

   388   <span class="issue">Suggestions here are welcome.</span>

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

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

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

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

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

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

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

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

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

   401 observe the following general principles concerning content outside the page

   402 box:</p>

   404 <ul>

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

   406   to "bleed".

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

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

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

   410   intent).

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

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

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

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

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

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

   417   content-empty page.

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

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

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

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

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

   424   inconvenient locations just to avoid rendering them. Instead:

   425   <ul>

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

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

   428     property.</li>

   429     </ul></li>

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

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

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

   433 </ul>

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

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

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

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

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

   441 pseudo-classes</a>.

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

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

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

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

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

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

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

   450 page, and vice versa.</p>

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

   454 <ul>

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

   456   same as the inline progression.</li>

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

   458   same as the block progression.</li>

   459 </ul>

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

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

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

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

   465 properties on the root element.</p>

   467 <p>

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

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

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

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

   472   (and the <code>:first</code> selector applies to the first printed page).

   474 <div class="example">

   475 <pre>

   476 html { page-break-before: always }

   477 </pre>

   479 <p>

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

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

   482   to print on a ':left' page

   483 </p>

   485 <pre>

   486 html { page-break-before: left }

   487 </pre>

   489 <p>

   490   For an HTML document,

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

   492   to print on a ':left' page,

   493   regardless of the page progression.

   494 </p>

   495 </div>

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

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

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

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

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

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

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

   506 <i title="page selector">page selectors</i>

   507 and a block of declarations

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

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

   510 declarations in the page context.

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

   513 a page pseudo-class, or

   514 a page name followed with no intervening whitespace

   515 by an <em class="RFC2119">OPTIONAL</em> page pseudo-class.

   516 The page selector specifies for which pages the declarations apply.

   517 In CSS3, page selectors can designate the first page of a document,

   518 all left pages, all right pages, or

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

   520 Multiple selectors may be combined with a comma (which may be preceded and/or

   521 followed by white space); in this case the ''@page'' rule applies to pages

   522 that match any of the page selectors. (Note: this feature is at-risk.)

   523 If no page selector is given, then the ''@page'' rule applies to all pages.</p>

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

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

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

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

   531 <h3 id="pseudo-classes">

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

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

   534 </h3>

   536 <p>

   537   When printing double-sided documents,

   538   left and right pages are often formatted differently.

   539   This can be expressed through CSS pseudo-classes defined

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

   541 </p>

   543 <p>

   544   All pages are automatically classified by user agents

   545   as either left pages or right pages,

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

   547   The <span class="css">':left'</span> and <span class="css">':right'</span>

   548   page pseudo-classes can be used to selectively apply rules

   549   to only the left or right pages, respectively.

   550 </p>

   552 <div class="example">

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

   554 <pre>

   555 @page :left {

   556 margin-left: 3cm;

   557 margin-right: 4cm;

   558 }

   560 @page :right {

   561 margin-left: 4cm;

   562 margin-right: 3cm;

   563 }

   564 </pre>

   565 </div>

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

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

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

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

   571 correctly formatted output).</p>

   573 <div class="note">

   574 <p>

   575   <em><strong>Note.</strong>

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

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

   578   does not necessarily influence whether the document

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

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

   581 </p>

   582 </div>

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

   585 <span class="css">':first'</span> pseudo-class. Such style rules are applied only

   586 to the first printed page of a document.</p>

   588 <div class="example">

   589 <pre>

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

   592 @page :first {

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

   594 }

   595 </pre>

   596 </div>

   598 <p>

   599   Blank pages that appear as a result of

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

   601   can be styled with the <code>:blank</code> pseudo-class.

   603 <div class="example">

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

   605 <pre>

   606 h1 { page-break-before: left }

   608 @page :blank {

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

   610 }

   611 </pre>

   612 </div>

   614 <p>

   615   A page matched by <code>:blank</code> can also be matched

   616   by other page pseudo-classes.

   618 <div class="example">

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

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

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

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

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

   625 while the page number remains:

   627 <pre>

   628 h1 { page-break-before: left }

   630 @page :blank {

   631   @top-center { content: none }

   632 }

   634 @page :right {

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

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

   637 }

   638 </pre>

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

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

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

   643 edition"</code>.

   645 </div>

   647 <div class="note">

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

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

   650 </div>

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

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

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

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

   657 to the following grammar:</p>

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

   660 productions:</p>

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

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

   663 <pre class="lexical">

   664 PAGE_SYM              ::= "@page"

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

   666 TOPLEFT_SYM           ::= "@top-left"

   667 TOPCENTER_SYM         ::= "@top-center"

   668 TOPRIGHT_SYM          ::= "@top-right"

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

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

   671 BOTTOMLEFT_SYM        ::= "@bottom-left"

   672 BOTTOMCENTER_SYM      ::= "@bottom-center"

   673 BOTTOMRIGHT_SYM       ::= "@bottom-right"

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

   675 LEFTTOP_SYM           ::= "@left-top"

   676 LEFTMIDDLE_SYM        ::= "@left-middle"

   677 LEFTBOTTOM_SYM        ::= "@left-bottom"

   678 RIGHTTOP_SYM          ::= "@right-top"

   679 RIGHTMIDDLE_SYM       ::= "@right-middle"

   680 RIGHTBOTTOM_SYM       ::= "@right-bottom"

   682 <span id="syntax-prod-media">media</span> :

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

   684      ;

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

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

   688      '{' S* [ [ declaration? ';' S* ] | page_margin_box ]* [ declaration ]? '}'  S*

   689      ;

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

   691      pseudo_page | IDENT pseudo_page?

   692      ;

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

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

   695      ;

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

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

   699      ;

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

   702      TOPLEFTCORNER_SYM |

   703      TOPLEFT_SYM |

   704      TOPCENTER_SYM |

   705      TOPRIGHT_SYM |

   706      TOPRIGHTCORNER_SYM |

   707      BOTTOMLEFTCORNER_SYM |

   708      BOTTOMLEFT_SYM |

   709      BOTTOMCENTER_SYM |

   710      BOTTOMRIGHT_SYM |

   711      BOTTOMRIGHTCORNER_SYM |

   712      LEFTTOP_SYM |

   713      LEFTMIDDLE_SYM |

   714      LEFTBOTTOM_SYM |

   715      RIGHTTOP_SYM |

   716      RIGHTMIDDLE_SYM |

   717      RIGHTBOTTOM_SYM

   718      ;

   719 </pre>

   721 <p id="page-selector-syntax-restrict">

   722 The value 'auto' is not a valid page name and must be treated as matching

   723 nothing.

   725 <div class="example">

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

   728 left blank)</p>

   729 <pre>

   730 @page { ... }

   731 @page :left { ... }

   732 @page :right { ... }

   733 @page LandscapeTable { ... }

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

   735 @page:first { ... };

   736 </pre>

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

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

   740 <pre>

   741 @page {

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

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

   744 }

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

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

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

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

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

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

   752 </pre>

   753 </div>

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

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

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

   760 computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>

   761 module:</p>

   763 <ul>

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

   765   <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>

   766   <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>

   767 </ul>

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

   771 <div class="example">

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

   774 <pre>

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

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

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

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

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

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

   781 </pre>

   782 </div>

   784 <div class="example">

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

   787 <pre>

   788 @page {

   789 margin-left: 3cm;

   790 }

   792 @page :left {

   793 margin-left: 4cm;

   794 }

   795 </pre>

   797 <p>Due to the higher specificity of the pseudo-class selector, the left margin on

   798 left pages will be 4cm and all other pages

   799 (the right-facing pages) will have a left margin of 3cm.</p>

   800 </div>

   802 <div class="example">

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

   805 rule.

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

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

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

   809 <pre>

   810 @page :first {

   811 color: green;

   813 @top-left {

   814   content: "foo";

   815   color: blue;

   816 }

   817 @top-right {

   818   content: "bar";

   819 }

   820 }

   822 @page { color: red;

   823 @top-center {

   824   content: "Page " counter(page);

   825   }

   826 }

   827 </pre>

   828 </div>

   830 <div class="example">

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

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

   834 <pre>

   835 @page { margin: 25mm;}

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

   837 </pre>

   838 </div>

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

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

   843 like pseudo-elements, can contain generated content.</p>

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

   846 which are portions of the page set aside for supplementary

   847 information such as the page number or document title.</p>

   849 <div class="example">

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

   851 documents with a predominately horizontal writing direction and on the side

   852 opposite the <a href="#binding-edge">binding edge</a> for documents with a

   853 predominately vertical writing direction. One possible design of page headers

   854 for horizontally written documents uses the

   855 <span class="css">'top-left-corner'</span>, <span class="css">'top-left'</span>,

   856 <span class="css">'top-center'</span>, <span class="css">'top-right'</span> and

   857 <span class="css">'top-right-corner'</span> page-margin boxes.

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

   859 <span class="css">'right-top'</span>, <span class="css">'right-middle'</span>,

   860 and <span class="css">'right-bottom'</span> page-margin boxes for

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

   862 <span class="css">'left-top'</span>,

   863 <span class="css">'left-middle'</span>, and <span class="css">'left-bottom'</span> for <a href="#left-page">left facing pages</a>.</p>

   865 <p>The <dfn>page footer</dfn> is typically at the opposite end of the page from

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

   867 a page header at the top of the page could use the <span class="css">'bottom-left-corner'</span>, <span class="css">'bottom-left'</span>,

   868 <span class="css">'bottom-center'</span>,

   869 <span class="css">'bottom-right'</span> and

   870 <span class="css">'bottom-right-corner'</span>

   871 page-margin boxes as the page footer.

   872 The design of a vertically written document could use the page-margin boxes

   873 of the binding edge of the page for the page footer.</p>

   874 </div>

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

   877 and are independent of page orientation,

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

   879 in both portrait and landscape orientation.

   880 The various page-margin boxes are defined

   881 and illustrated in the diagram below:

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

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

   885     <thead>

   886       <tr>

   887         <th>Box</th>

   888         <th>Description</th>

   889         <th>Placement</th>

   890       </tr>

   891     </thead>

   892     <tbody>

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

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

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

   896         page box</td>

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

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

   899       </tr>

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

   901         <th>top-left</th>

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

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

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

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

   906       </tr>

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

   908         <th>top-center</th>

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

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

   911         page-margin boxes</td>

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

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

   914       </tr>

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

   916         <th>top-right</th>

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

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

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

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

   921       </tr>

   922       <tr>

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

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

   925         the page box</td>

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

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

   928       </tr>

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

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

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

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

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

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

   935       </tr>

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

   937         <th>left-middle</th>

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

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

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

   941       </tr>

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

   943         <th>left-bottom</th>

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

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

   946       </tr>

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

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

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

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

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

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

   953       </tr>

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

   955         <th>right-middle</th>

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

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

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

   959       </tr>

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

   961         <th>right-bottom</th>

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

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

   964       </tr>

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

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

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

   968         the page box</td>

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

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

   971       </tr>

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

   973         <th>bottom-left</th>

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

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

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

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

   978       </tr>

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

   980         <th>bottom-center</th>

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

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

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

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

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

   986       </tr>

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

   988         <th>bottom-right</th>

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

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

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

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

   993       </tr>

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

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

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

   997         the page box</td>

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

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

  1000       </tr>

  1001     </tbody>

  1002   </table>

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

  1006 <p>Page-margin boxes are created by

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

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

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

  1010 clients may not handle declarations after margin at-rules correctly.</p>

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

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

  1014 that identifies the page-margin box

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

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

  1018 <div class="example">

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

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

  1022 right side:</p>

  1023 <pre>

  1024 @page {

  1025   size: 8.5in 11in;

  1026   margin: 10%;

  1028   @top-left {

  1029     content: "Hamlet";

  1030   }

  1031   @top-right {

  1032     content: "Page " counter(page);

  1033   }

  1034 }

  1035 </pre>

  1036 </div>

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

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

  1042 a specified 'content' of ''normal'' on a page-margin box computes to ''none'',

  1043 and the page-margin box is <dfn>generated</dfn>

  1044 if and only if the computed value

  1045 of its 'content' property is not 'none'.

  1046 Otherwise it behaves as if it had ''display: none''.

  1048 <div class="example">

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

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

  1051 <pre>

  1052   @page {

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

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

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

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

  1057   }

  1058 </pre>

  1059 </div>

  1061 <h3 id="margin-box-dimensions">Computing Page-margin Box Dimensions</h3>

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

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

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

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

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

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

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

  1071 violate their constraints.

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

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

  1075 <h4 id="max-margin-dimension">Page-Margin Box Layout Terminology</h4>

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

  1078 terms are defined for use in the subsequent page-margin box calculations:</p>

  1080 <dl>

  1082 <dt id="MaxBoxWidth"><dfn>max box width</dfn></dt>

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

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

  1085 In other words, it is the distance between the <a href="#page-box">page

  1086 box</a>’s left border edge and right border edge</a>. This quantity is used

  1087 when calculating dimensions of the top and bottom page-margin boxes.</dd>

  1089 <dt id="MaxBoxHeight"><dfn>max box height</dfn></dt>

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

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

  1092 width. In other words, it is the distance between the <a href="#page-box">page

  1093 box</a>’s top border edge and bottom border edge. This quantity is used when

  1094 calculating dimensions of the left and right page-margin boxes.</dd>

  1096 <dt><dfn>outer width</dfn></dt>

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

  1098 widths, left and right padding, and content-box width.</dd>

  1100 <dt><dfn>outer height</dfn></dt>

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

  1102 widths, top and bottom padding, and content-box height.</dd>

  1103 </dl>

  1105 <dt><dfn>outer min-content</dfn> width</dt>

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

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

  1108 is used when 'width' is ''auto''.</dd>

  1110 <dt><dfn>outer max-content</dfn> width</dt>

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

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

  1113 is used when 'width' is ''auto''.</dd>

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

  1116 defined by the intersection of the two page margins meeting at that corner.</p>

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

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

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

  1121 adjacent corners' page-margin boxes.

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

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

  1124 by the <a href="#MaxBoxWidth">max box width</a>

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

  1126 <a href="#MaxBoxHeight">max box height</a>

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

  1129 <h4 id="margin-dimension">Page-Margin Box Variable Dimension Computation Rules</h4>

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

  1132 page-margin boxes,

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

  1135 <h5 id="marginbox-variabledim-margins">Margins</h5>

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

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

  1140 <h5 id="marginbox-variabledim-with">Resolving ''auto'' widths</h5>

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

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

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

  1145 </p>

  1147 <p class="note">

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

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

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

  1152 <ol>

  1153   <li>

  1154     If B is not <i>generated</i>:

  1155     <ol>

  1156       <li>

  1157         If only box has 'width: auto', its used width is resolved so that

  1158         the sum of the <i>outer width</i>s equals <i>max box width</i>.

  1159       </li>

  1161       <li>

  1162         If A and C both have 'width: auto':

  1163         <ol>

  1164           <li>

  1165             Let <i>free space</i> be <i>max box width</i> minus

  1166             A’s and C’s <i>outer min-content width</i>.

  1167           </li>

  1169           <li>

  1170             If <i>free space</i> is positive,

  1171             let the respective <i>weight</i> for A and C be

  1172             <i>max-content</i> minus <i>min-content</i>.

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

  1174             In either case if both weights are zero, let them be '1px' instead.

  1175             <span class="note">

  1176               The '1px' value is arbitrary as long as the weights are equal.

  1177             </span>

  1178           </li>

  1180           <li>

  1181             The respective used width is

  1182             <i>min-content</i> + <i>free space</i> × <i>weight</i>

  1183             ÷ sum of both weights

  1184           </li>

  1185         </ol>

  1186       </li>

  1187     </ol>

  1188   </li>

  1190   <li>

  1191     If B is <i>generated</i>:

  1192     <ol>

  1193       <li>

  1194         If B has 'width: auto':

  1195         <ol>

  1196           <li>

  1197             Let <i>free space</i> be <i>max box width</i>

  1198             - 2 × max(<i>min<sub>A</sub></i>, <i>min<sub>C</sub></i>)

  1199             - <i>min<sub>B</sub></i>,

  1200             where <i>min</i> is a box’s <i>outer min-content width</i>

  1201             if 'width' is ''auto'', zero otherwise.

  1202           </li>

  1203           <li>

  1204             Let <i>upper limit</i> be <i>max box width</i>

  1205             - 2 × max(<i>fixed<sub>A</sub></i>, <i>fixed<sub>C</sub></i>),

  1206             where <i>fixed</i> is a box’s <i>outer width</i>

  1207             if 'width' is not ''auto'', zero otherwise.

  1208           </li>

  1209           <li>

  1210             If <i>free space</i> is positive,

  1211             let the <i>weight</i> of a box be

  1212             <i>max-content</i> minus <i>min-content</i>.

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

  1214           </li>

  1215           <li>

  1216             Let <i>weight<sub>AC</sub></i> be

  1217             max(<i>weight<sub>A</sub></i>, <i>weight<sub>C</sub></i>)

  1218           </li>

  1219           <li>

  1220             If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>

  1221             are zero, let them be '1px' instead.

  1222           </li>

  1223           <li>

  1224             B’s used width is

  1225             min(<i>upper limit</i>,

  1226                 <i>min-content</i> +

  1227                   <i>free space</i> × <i>weight<sub>B</sub></i>

  1228                   ÷ (<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))

  1229           </li>

  1230         </ol>

  1231       </li>

  1232       <li>

  1233         Then, if A or C has 'width: auto',

  1234         the respective used widths are resolved so that <i>outer width</i>

  1235         equals (<i>max box width</i> - B’s <i>outer width</i>) ÷ 2

  1236       </li>

  1237     </ol>

  1238   </li>

  1239 </ol>

  1241 <h5 id="marginbox-variabledim-minmax">Handling 'min-width' and 'max-width'</h5>

  1243 <p>

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

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

  1246   three boxes on the same side are considered together.

  1247 </p>

  1249 <p>

  1250   More precisely:

  1251 </p>

  1253 <ol>

  1254   <li>

  1255     The tentative used widths are calculated

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

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

  1258     above.

  1259   </li>

  1260   <li>

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

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

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

  1264     as the computed value for 'width'.

  1265   </li>

  1266   <li>

  1267     If the resulting width of any of the three boxes

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

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

  1270     as the computed value for 'width'.

  1271   </li>

  1272 </ol>

  1274 <h5 id="marginbox-variabledim-positioning">Positioning</h5>

  1276 <p>

  1277   Once the dimensions of the boxes are determined,

  1278   they are positioned as follows:

  1279 </p>

  1281 <ul>

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

  1283       containing block</li>

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

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

  1286       containing block.</li>

  1287 </ul>

  1289 <h5 id="marginbox-variabledim-others">Boxes on other sides</h5>

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

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

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

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

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

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

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

  1300 page-margin boxes

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

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

  1304 <h4 id="margin-constraints">Page-Margin Box Fixed Dimension Computation Rules</h4>

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

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

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

  1309 properties:</p>

  1311 <ol>

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

  1313   box's properties:

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

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

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

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

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

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

  1321   the following rules, treated as zero.

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

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

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

  1326   treated as 'auto'.

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

  1329   follows from the equality.

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

  1332   'height' follows from the resulting equality

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

  1335   their used values are equal.

  1336   This vertically centers the page-margin box content

  1337   within the top page margin.

  1338 </ol>

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

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

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

  1343 'margin-top'.</p>

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

  1346 page-margin boxes with respect to 'width'

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

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

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

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

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

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

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

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

  1358 <div class="example">

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

  1361 <pre>

  1362 @page {

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

  1364 }

  1365 </pre>

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

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

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

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

  1372 </div>

  1374 <div class="example">

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

  1377 <pre>

  1378 @page {

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

  1380 }

  1381 </pre>

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

  1384 </div>

  1386 <div class="example">

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

  1389 page-margin box:</p>

  1390 <pre>

  1391 @page {

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

  1393 }

  1394 </pre>

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

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

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

  1400 </div>

  1402 <div class="example">

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

  1405 <pre>

  1406 @page {

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

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

  1409 }

  1410 </pre>

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

  1413 </div>

  1415 <div class="example">

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

  1418 <pre>

  1419 @page {

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

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

  1422 }

  1423 </pre>

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

  1426 </div>

  1428 <div class="example">

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

  1431 <pre>

  1432 @page {

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

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

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

  1436 }

  1437 </pre>

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

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

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

  1443 </div>

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

  1446 <div>

  1448 <p>The following properties, when used in the <a href="#page-context">page

  1449 context</a>, apply to the page box:</p>

  1451 <ul>

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

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

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

  1455   <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>

  1456   <li><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>

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

  1458   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a></li>

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

  1460   <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>

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

  1462   <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

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

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

  1465   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a></li>

  1466 </ul>

  1468 <p>The following properties, when used in a <a href="#margin-at-rule">margin

  1469 context</a>, apply to page-margin boxes and their content:</p>

  1471 <ul>

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

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

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

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

  1476   <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>

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

  1478   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>

  1479   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

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

  1481   <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>

  1482   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

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

  1484   <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

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

  1486   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  1487   <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  1488   <li><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>

  1489   <li><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  1490 </ul>

  1492 <p>A detailed list of properties that <em class="RFC2119">MUST</em> be supported

  1493 within page and margin contexts by a conforming implementation can be found in

  1494 <a href="#properties-list">Appendix A</a>.</p>

  1496 <p>Other properties defined by [[!CSS21]] do not apply in these contexts. Behavior

  1497 for properties not included in CSS 2.1 and not listed here or in Appendix A is

  1498 undefined.</p>

  1500 <p class="note">

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

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

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

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

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

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

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

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

  1512 <ul>

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

  1514   The page context inherits from the root element.

  1515   However, since the previous revision of CSS Paged

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

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

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

  1519   exception will be removed in Level 4.

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

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

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

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

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

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

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

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

  1528   be removed in Level 4.

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

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

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

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

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

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

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

  1536   <li>The page background is positioned and painted

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

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

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

  1540   <li>

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

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

  1543     on page-margin boxes.

  1544   </li>

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

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

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

  1548   regardless of writing mode.

  1549 </ul>

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

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

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

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

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

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

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

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

  1562 <div class="example">

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

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

  1566 <pre>

  1567 @page {

  1568 margin: 10%;

  1569 counter-increment: page;

  1571 @top-center {

  1572   font-family: sans-serif;

  1573   font-weight: bold;

  1574   font-size: 2em;

  1575   content: counter(page);

  1576 }

  1577 }

  1578 </pre>

  1579 </div>

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

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

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

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

  1586 document.</p>

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

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

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

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

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

  1594 then the resultant value is exactly

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

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

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

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

  1600 <p>A counter named ''page'' is automatically created and incremented on every

  1601 page of the document. Specifically, the UA must automatically create and

  1602 increment such a counter as if ''@page { counter-increment: page; }'' were

  1603 specified. The implied ''page'' counter is a real counter, and can be directly

  1604 affected using the 'counter-increment' and 'counter-reset' properties when

  1605 named explicitly in those properties. It can also be used in the 'counter()'

  1606 and 'counters()' function forms.</p>

  1608 <p>Additionally, a counter named ''pages'' is automatically created by the UA.

  1609 Its value is always the total number of pages in the document. (In continuous

  1610 media this is always 1.) The value of ''pages'' cannot be manipulated: while

  1611 'counter-reset' and 'counter-increment' statements that set it are valid, they

  1612 have no effect.

  1614 <p>In all other respects, page-associated counters behave as described in

  1615 [[!CSS21]], <a href="TR/CSS21/generate.html#scope">Nested Counters and

  1616 Scope</a> and <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.</p>

  1618 <h3 id="margin-text-alignment">Page-margin boxes and default values</h3>

  1620 <p>Properties used within page or margin contexts take their initial values from

  1621 their respective property definitions; however, user agents must behave as

  1622 though the values in the following table were established by rules in the UA

  1623 default style sheet.</p>

  1624 <table id="margin-values" class="data" summary="definition of page-margin box default properties">

  1625   <caption>Table 2. Default values for Page-Margin Boxes</caption>

  1626   <thead>

  1627     <tr>

  1628       <th>Page-margin box</th>

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

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

  1631     </tr>

  1632   </thead>

  1633   <tbody>

  1634     <tr>

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

  1636       <td>right</td>

  1637       <td>middle</td>

  1638       </tr>

  1639     <tr>

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

  1641       <td>left</td>

  1642       <td>middle</td>

  1643       </tr>

  1644     <tr>

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

  1646       <td>center</td>

  1647       <td>middle</td>

  1648       </tr>

  1649     <tr>

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

  1651       <td>right</td>

  1652       <td>middle</td>

  1653       </tr>

  1654     <tr>

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

  1656       <td>left</td>

  1657       <td>middle</td>

  1658       </tr>

  1659     <tr>

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

  1661       <td>center</td>

  1662       <td>top</td>

  1663       </tr>

  1664     <tr>

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

  1666       <td>center</td>

  1667       <td>middle</td>

  1668       </tr>

  1669     <tr>

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

  1671       <td>center</td>

  1672       <td>bottom</td>

  1673       </tr>

  1674     <tr>

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

  1676       <td>center</td>

  1677       <td>top</td>

  1678       </tr>

  1679     <tr>

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

  1681       <td>center</td>

  1682       <td>middle</td>

  1683       </tr>

  1684     <tr>

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

  1686       <td>center</td>

  1687       <td>bottom</td>

  1688       </tr>

  1689     <tr>

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

  1691       <td>right</td>

  1692       <td>middle</td>

  1693       </tr>

  1694     <tr>

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

  1696       <td>left</td>

  1697       <td>middle</td>

  1698       </tr>

  1699     <tr>

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

  1701       <td>center</td>

  1702       <td>middle</td>

  1703       </tr>

  1704     <tr>

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

  1706       <td>right</td>

  1707       <td>middle</td>

  1708       </tr>

  1709     <tr>

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

  1711       <td>left</td>

  1712       <td>middle</td>

  1713     </tr>

  1714   </tbody>

  1715 </table>

  1717 <div class="example">

  1719 <p>This example style sheet could be used to create a centered header with the

  1720 current chapter name:</p>

  1721 <pre>body {counter-reset: chapter;}

  1722 div.chapter {counter-increment: chapter;}

  1723 @page {

  1724 margin: 10%;

  1725 @top-center { content: "Chapter" counter(chapter) }

  1726 }

  1727 </pre>

  1728 </div>

  1730 <h2 id="page-size">Page Size</h2>

  1732 <p>People around the world use many different paper sizes. It is a goal of this

  1733 specification that web content should be adaptable to a range of different

  1734 sizes without having to write a specific style sheet for each paper size.</p>

  1736 <p>However, in some situations it is important that a certain page size achieves a

  1737 certain style. One way to achieve this goal is to utilize the 'size' property,

  1738 which indicates that the document should preferentially be displayed on a

  1739 surface of a certain size; another method is to use Media Queries [[MEDIAQ]]

  1740 which allow different style sheets to be applied to different page sizes.</p>

  1742 <h3 id="page-size-prop">Page size: the 'size' property</h3>

  1744 <table class="propdef" summary="definition of the size property">

  1745   <tr>

  1746     <th>Name:

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

  1748   <tr>

  1749     <th>Value:

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

  1751   <tr>

  1752     <th>Initial:

  1753     <td>auto

  1754   <tr>

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

  1756     <td>page context

  1757   <tr>

  1758     <th>Inherited:

  1759     <td>N/A

  1760   <tr>

  1761     <th>Percentages:

  1762     <td>N/A

  1763   <tr>

  1764     <th>Media:

  1765     <td>paged

  1766   <tr>

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

  1768     <td>specified value

  1769 </table>

  1771 <p>This property specifies the target size and orientation of the

  1772 <a href="#page-box">page box</a>'s containing block.

  1773 In the general case, where one page box is rendered onto one <a href="#page-sheet">page sheet</a>,

  1774 the 'size' property also indicates the size of the destination page sheet.

  1776 <p>The size of a page box can either be "absolute" (fixed size) or "scalable"

  1777 (i.e., fitting available sheet sizes).

  1778 The first three values in the table below can be used to create scalable page

  1779 boxes.

  1780 Other values define a fixed-size page box, and thereby indicate the preferred

  1781 output media size. When possible, output should be rendered on the media size

  1782 indicated.

  1783 If the specified size is not available, the rules for

  1784 <a href="#renderingpages">transposing a page box to a different size</a>

  1785 apply.</p>

  1787 <p>If a <code>size</code> property declaration is qualified by a ''width'',

  1788 ''height'', ''device-width'', ''device-height'', ''aspect-ratio'',

  1789 ''device-aspect-ratio'' or ''orientation''

  1790 media query [[!MEDIAQ]] (or other conditional on the size of the paper), then

  1791 the declaration must be

  1792 <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media

  1793 queries do not honor 'size': they assume the paper size that would be chosen

  1794 if no @page rules were specified.</p>

  1796 <p class=issue>It would be useful if media queries could respond at least

  1797 to sizes specified on an unqualified @page.

  1799 <div class="example">

  1800   <p>In the following example

  1801   <pre>

  1802   @page {

  1803     size: 4in 6in;

  1804   }

  1806   @media (max-width: 6in) {

  1807     @page {

  1808       size: letter;

  1809     }

  1810   }

  1811   </pre>

  1812   <p>The second <code>size</code> declaration is ignored, i.e. the specified value

  1813   of the <code>size</code> property is <code>4in 6in</code>.

  1814 </div>

  1816 <table class="page-sizes">

  1817 <tr>

  1818 <th>Value</th>

  1819 <th>Description</th>

  1820 </tr>

  1821 <tr>

  1822 <td>auto</td>

  1823 <td>The page box will be set to a size and orientation chosen by the UA. In the

  1824 usual case, the page box size and orientation is chosen to match the target

  1825 media sheet.</td>

  1826 </tr>

  1827 <tr>

  1828 <td>landscape</td>

  1829 <td>Specifies that the page's content be printed in landscape orientation. The

  1830 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

  1831 is chosen by the UA.</td>

  1832 </tr>

  1833 <tr>

  1834 <td>portrait</td>

  1835 <td>Specifies that the page's content be printed in portrait orientation. The

  1836 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

  1837 is chosen by the UA.</td>

  1838 </tr>

  1839 <tr>

  1840 <td>&lt;length&gt;</td>

  1841 <td>The page box will be set to the given absolute dimension(s). If only one length

  1842 value is specified, it sets both the width and height of the page box (i.e.,

  1843 the box is a square). If two length values are specified, the first establishes

  1844 the page box width, and the second the page box height. Values in units of

  1845 <span class="css">'em'</span> and <span class="css">'ex'</span> refer to the

  1846 page context's font. Negative lengths are illegal.</td>

  1847 </tr>

  1848 <tr>

  1849 <td>&lt;page-size&gt;</td>

  1850 <td>A page size can be specified using one of the following media names. This is

  1851 the equivalent of specifying the <span class="css">'&lt;page-size&gt;'</span>

  1852 using length values. The definition of the the media names comes from

  1853 <cite>Media Standardized Names</cite> [[!PWGMSN]].

  1855 <dl>

  1857 <dt>A5</dt>

  1858 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>

  1860 <dt>A4</dt>

  1861 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.</dd>

  1863 <dt>A3</dt>

  1864 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>

  1866 <dt>B5</dt>

  1867 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>

  1869 <dt>B4</dt>

  1870 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>

  1872 <dt>letter</dt>

  1873 <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11

  1874 inches high</dd>

  1876 <dt>legal</dt>

  1877 <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches

  1878 high.</dd>

  1880 <dt>ledger</dt>

  1881 <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches

  1882 high.</dd>

  1883 </dl></td>

  1884 </tr>

  1885 </table>

  1887 <p>The '&lt;page-size&gt;' names can be used in conjunction with 'landscape' or

  1888 'portrait' to indicate both size and orientation.</p>

  1890 <h4>Some examples:</h4>

  1892 <div class="example">

  1893 <pre>

  1894 @page {

  1895 size: A4 landscape;

  1896 }

  1897 </pre>

  1899 <p>The above example sets the width of the page box to be 297mm and the height to

  1900 be 210mm. The page box in this example should be rendered on a page sheet size

  1901 of 210 mm by 297 mm.</p>

  1902 </div>

  1904 <div class="example">

  1906 <p>In the following example, the outer edges of the page box will align with the

  1907 page. The percentage value on the <span class="property">'margin'</span>

  1908 property is relative to the page size so if the page sheet dimensions are 210mm

  1909 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page

  1910 borders or padding set in the UA default style sheet, the resulting page area

  1911 is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>

  1912 <pre>

  1913 @page {

  1914 size: auto;/* auto is the initial value */

  1915 margin: 10%;

  1916 }

  1917 </pre>

  1918 </div>

  1920 <div class="example">

  1921 <pre>

  1922 @page {

  1923 size: 8.5in 11in;/* width height */

  1924 }

  1925 </pre>

  1927 <p>The above example sets the width of the page box to be 8.5 inches and the

  1928 height to be 11 inches. This indicates that the page sheet size should be

  1929 8.5"x11" and the orientation 'portrait'.</p>

  1930 </div>

  1932 <h4 id="page-size-media-query">Media Queries</h4>

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

  1936 <p>By using Media Queries [[MEDIAQ]], one style sheet can express different

  1937 stylistic preferences for different page sizes. Consider this example:</p>

  1939 <div class="example" style="font-size: 10pt;">

  1940 <pre>

  1941  /* style sheet for "A4" printing */

  1942  @media print and (width: 21cm) and (height: 29.7cm) {

  1943     @page {

  1944        margin: 3cm;

  1945     }

  1946  }

  1948  /* style sheet for "letter" printing */

  1949  @media print and (width: 8.5in) and (height: 11in) {

  1950     @page {

  1951         margin: 1in;

  1952     }

  1953  }

  1954 </pre>

  1955 </div>

  1957 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"

  1958 sheets are given a "1in" page margin.</p>

  1960 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>

  1962 <p>If a page box does not match the target page sheet dimensions, the user agent

  1963 should do one of the following (in order of preference):</p>

  1965 <ol>

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

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

  1968   <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box

  1969   <em class="RFC2119">should</em> be preserved.)</li>

  1970   <li>Reformat the page contents, including 'spilling' onto other page sheets.</li>

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

  1972 </ol>

  1974 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before

  1975 performing these operations.</p>

  1977 <h3 id="positioning-page-box">Positioning the page box on the sheet</h3>

  1979 <p>When the page box is smaller than the page size, the user agent <em class="RFC2119">SHOULD</em> either:</p>

  1981 <ul>

  1982   <li>center the page box on the sheet since this will align double-sided pages

  1983   and avoid accidental loss of information that is printed near the edge of the

  1984   sheet; or</li>

  1985   <li>position the page box in the upper left corner of the page sheet, as this

  1986   may minimize media consumption.</li>

  1987 </ul>

  1989 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this

  1990 regard.</p><!-- "Page selector and page context" -->

  1992 <h2 id="page-breaks">

  1993     <a id="pg-br-before-after"></a>

  1994     <a id="page-break-before"></a>

  1995     <a id="page-break-after"></a>

  1996     <a id="page-break-inside"></a>

  1997     <a id="breaks-inside"></a>

  1998     <a id="orphans"></a>

  1999     <a id="widows"></a>

  2000     <a id="allowed-pg-brk"></a>

  2001     <a id="brk-btw-blocks"></a>

  2002     <a id="brk-btw-lines"></a>

  2003     <a id="brk-end-block"></a>

  2004     <a id="forced-pg-brk"></a>

  2005     <a id="best-pg-brk"></a>

  2006     Page Breaks

  2007 </h2>

  2009 <p>

  2010   The [[!CSS3-BREAK]] module defines how and where CSS boxes

  2011   can be <i>fragmented</i>, including across page breaks.

  2012   It defines a few properties that indicate where the user agent

  2013   <em class="RFC2119">MAY</em> or <em class="RFC2119">MUST</em> break pages,

  2014   and on what page (left or right) the subsequent content resumes.

  2015   Each page break ends layout in the current <a href="#page-box">page box</a>

  2016   and causes remaining pieces of the document tree to be laid out

  2017   in a new page box.

  2018 </p>

  2020 <h3 id="using-named-pages">Using named pages: 'page'</h3>

  2021 <table class="propdef" summary="property definition">

  2022   <tr>

  2023     <th>Name:

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

  2025   <tr>

  2026     <th>Value:

  2027     <td>auto | &lt;identifier&gt;

  2028   <tr>

  2029     <th>Initial:

  2030     <td>auto

  2031   <tr>

  2032     <th>Applies to:

  2033     <td>boxes that create <a href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break points

  2034   <tr>

  2035     <th>Inherited:

  2036     <td>no (but see prose)

  2037   <tr>

  2038     <th>Percentages:

  2039     <td>N/A

  2040   <tr>

  2041     <th>Media:

  2042     <td>paged

  2043   <tr>

  2044     <th>Computed value:

  2045     <td>specified value

  2046 </table>

  2048 <p>

  2049   The 'page' property is used to specify a particular type of page (called a <dfn>named page</dfn>)

  2050   on which an element <em class="RFC2119">MUST</em> be displayed.

  2051   If necessary, a <i>forced page break</i> is introduced

  2052   and a new page generated of the specified type.

  2054 <p>

  2055   Page names are case-sensitive identifiers.

  2056   However the ''auto'' value, being a CSS keyword, is

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

  2059 <div class="example">

  2061 <p>This example will put all tables on a right-hand side landscape page (named

  2062 "rotated"):</p>

  2063 <pre>

  2064 @page rotated { size: landscape }

  2065 table { page: rotated; page-break-before: right }

  2066 </pre>

  2067 </div>

  2069 <p>

  2070   The 'page' property works as follows:

  2072 <ol>

  2074   <li>

  2075     First, any ''auto'' values are resolved against non-''auto'' ancestors

  2076     (as specified below).

  2078   <li>

  2079     Next,

  2080     a <dfn>preceding 'page' value</dfn> and <dfn>succeeding 'page' value</dfn>

  2081     is determined for each box

  2082     as the value (if any) propagated from its last or first child (respectively),

  2083     else the used value on the box itself.

  2084     A child propagates its own <i title="preceding page value">preceding</i> or <i>succeeding 'page' value</i>

  2085     <em>iff</em> the 'page' property applies to it.

  2087   <li>

  2088     If for any two boxes meeting at a <a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break point,

  2089     the <i>preceding 'page' value</i> and <i>succeeding 'page' value</i> do not match,

  2090     then a page break is forced between the two boxes,

  2091     and content after the break resumes on a page box of the named type.

  2092 </ol>

  2094 <p>

  2095   Essentially, the two 'page' values compared are those from the deepest boxes

  2096   meeting at the class 1 break point,

  2097   ignoring any subtrees rooted by boxes to which the 'page' property does not apply.

  2099 <p>

  2100   The 'page' property does not inherit.

  2101   However, if the 'page' value on an element is ''auto'',

  2102   then its used value is the value specified on its nearest ancestor with a non-auto value.

  2103   When specified on the root element, the effective name is the empty string.

  2105   <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->

  2107 <p>

  2108   Because a previous version of this specification indicated that the 'page' property is inherited,

  2109   an implementation that inherits the 'page' property

  2110   and treats ''auto'' as always naming the empty string

  2111   remains conformant to CSS3 Paged Media.

  2112   Therefore authors should not explicitly specify the ''auto'' value

  2113   on a descendant of an element with a non-''auto'' value,

  2114   as the resulting behavior will be unpredictable.

  2116 <p>See [[!CSS3-BREAK]] for additional details on page breaks.

  2118 <div class="example">

  2120 <p>In this example, the two tables are rendered on landscape pages (indeed, on the

  2121 same page, if they fit). The page type "narrow" is used for the &lt;p&gt; after

  2122 the second table, as the page properties for the table element are no longer in

  2123 effect:</p>

  2124 <pre>

  2125 @page narrow { size: 9cm 18cm }

  2126 @page rotated { size: landscape }

  2127 div { page: narrow }

  2128 table { page: rotated }

  2129 </pre>with this document:

  2130 <pre>

  2131 &lt;div&gt;

  2132 &lt;table&gt;...&lt;/table&gt;

  2133 &lt;table&gt;...&lt;/table&gt;

  2134 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;

  2135 &lt;/div&gt;

  2136 </pre>

  2137 </div>

  2139 <div class="example">

  2140   <p>In Japanese documents, sometimes different parts of a single document

  2141   will have different <i lang="ja-Latn">kihon hanmen</i>. [[JLREQ]]

  2142   The 'page' property, together with ''@page'' rules specifying different page widths,

  2143   can accomodate this type of layout:

  2144   <pre>

  2145 &lt;!DOCTYPE html>

  2146 &lt;html lang="ja">

  2147   &lt;style>

  2148     html   { writing-mode: vertical-rl;

  2149              line-height: 1.6; }

  2150     .main  { page: main;

  2151              columns: 2; column-gap: 1rem; }

  2152     .index { page: index;

  2153              columns: 3; column-gap: 1rem; }

  2154     @page       { margin: auto;    /* center kihon hanmen on page */

  2155                   width:  40rem; } /* 1.6 &times; 25 lines        */

  2156     @page main  { height: 61rem; } /* 2 &times; 30 chars + 1 &times; gap */

  2157     @page index { height: 62rem; } /* 3 &times; 20 chars + 2 &times; gap */

  2158   &lt;/style>

  2159   &lt;section class="main"> ... &lt;/section>

  2160   &lt;section class="index"> ... &lt;/section>

  2161 &lt;/html>

  2162 </pre>

  2163 </div>

  2166 <h2 id="image-properties">Image Properties</h2>

  2168 <p class="note">This section has been moved to [[CSS3-IMAGES]].</p>

  2170 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>

  2172 <h3 class="no-num">Properties that apply within the page context</h3>

  2174 <p>The following CSS 2.1 [[!CSS21]] properties apply to the page box.

  2175 If a conforming user agent supports any of these properties on block

  2176 boxes, then it must also support that property for the page box.</p>

  2178 <table class="property-list">

  2179   <tbody>

  2180     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>

  2181         <td>direction

  2182   <tbody>

  2183     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>

  2184         <td>background-color

  2185     <tr><td>background-image

  2186     <tr><td>background-repeat

  2187     <tr><td>background-attachment

  2188     <tr><td>background-position

  2189     <tr><td>background

  2190   <tbody>

  2191     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>

  2192         <td>border-top-width

  2193     <tr><td>border-right-width

  2194     <tr><td>border-bottom-width

  2195     <tr><td>border-left-width

  2196     <tr><td>border-width

  2197     <tr><td>border-top-color

  2198     <tr><td>border-right-color

  2199     <tr><td>border-bottom-color

  2200     <tr><td>border-left-color

  2201     <tr><td>border-color

  2202     <tr><td>border-top-style

  2203     <tr><td>border-right-style

  2204     <tr><td>border-bottom-style

  2205     <tr><td>border-left-style

  2206     <tr><td>border-short-style

  2207     <tr><td>border-top

  2208     <tr><td>border-right

  2209     <tr><td>border-bottom

  2210     <tr><td>border-left

  2211     <tr><td>border

  2212   <tbody>

  2213     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>

  2214         <td>counter-reset

  2215     <tr><td>counter-increment

  2216   <tbody>

  2217     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2218   <tbody>

  2219     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  2220         <td>font-family

  2221     <tr><td>font-size

  2222     <tr><td>font-style

  2223     <tr><td>font-variant

  2224     <tr><td>font-weight

  2225     <tr><td>font

  2226   <tbody>

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

  2228         <td>height

  2229     <tr><td>min-height

  2230     <tr><td>max-height

  2231   <tbody>

  2232     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2233   <tbody>

  2234     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>

  2235         <td>margin-top

  2236     <tr><td>margin-right

  2237     <tr><td>margin-bottom

  2238     <tr><td>margin-left

  2239     <tr><td>margin

  2240   <tbody>

  2241     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>

  2242         <td>outline-width

  2243     <tr><td>outline-style

  2244     <tr><td>outline-color

  2245     <tr><td>outline

  2246   <tbody>

  2247     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>

  2248         <td>padding-top

  2249     <tr><td>padding-right

  2250     <tr><td>padding-bottom

  2251     <tr><td>padding-left

  2252     <tr><td>padding

  2253   <tbody>

  2254     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  2255   <tbody>

  2256     <tr><td rowspan="8"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  2257         <td>direction

  2258     <tr><td>letter-spacing

  2259     <tr><td>text-align

  2260     <tr><td>text-decoration

  2261     <tr><td>text-indent

  2262     <tr><td>text-transform

  2263     <tr><td>white-space

  2264     <tr><td>word-spacing

  2265   <tbody>

  2266     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  2267   <tbody>

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

  2269         <td>width

  2270     <tr><td>min-width

  2271     <tr><td>max-width

  2272 </table>

  2274 <p>Properties that apply to the page-margin boxes can also be set within

  2275 the page context: if inheritable or explicitly inherited (with the

  2276 <code>inherit</code> keyword in the margin context), they will inherit

  2277 to the page-margin boxes.</p>

  2279 <h3 class="no-num">Properties that apply within the margin contexts</h3>

  2281 <p>The following CSS 2.1 [[!CSS21]] properties apply to page-margin boxes.

  2282 If a conforming user agents supports any of these properties on block

  2283 boxes, then it must also support that property for page-margin boxes (except

  2284 for <code>z-index</code>, which is optional for page-margin boxes).</p>

  2286 <table class="property-list">

  2287   <tbody>

  2288     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>

  2289         <td>direction

  2290     <tr><td>unicode-bidi

  2291   <tbody>

  2292     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>

  2293         <td>background-color

  2294     <tr><td>background-image

  2295     <tr><td>background-repeat

  2296     <tr><td>background-attachment

  2297     <tr><td>background-position

  2298     <tr><td>background

  2299   <tbody>

  2300     <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>

  2301         <td>border-top-width

  2302     <tr><td>border-right-width

  2303     <tr><td>border-bottom-width

  2304     <tr><td>border-left-width

  2305     <tr><td>border-width

  2306     <tr><td>border-top-color

  2307     <tr><td>border-right-color

  2308     <tr><td>border-bottom-color

  2309     <tr><td>border-left-color

  2310     <tr><td>border-color

  2311     <tr><td>border-top-style

  2312     <tr><td>border-right-style

  2313     <tr><td>border-bottom-style

  2314     <tr><td>border-left-style

  2315     <tr><td>border-short-style

  2316     <tr><td>border-top

  2317     <tr><td>border-right

  2318     <tr><td>border-bottom

  2319     <tr><td>border-left

  2320     <tr><td>border

  2321   <tbody>

  2322     <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>

  2323         <td>counter-reset

  2324     <tr><td>counter-increment

  2325   <tbody>

  2326     <tr><td colspan="2"><a href="">content</a>

  2327   <tbody>

  2328     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>

  2329   <tbody>

  2330     <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>

  2331         <td>font-family

  2332     <tr><td>font-size

  2333     <tr><td>font-style

  2334     <tr><td>font-variant

  2335     <tr><td>font-weight

  2336     <tr><td>font

  2337   <tbody>

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

  2339         <td>height

  2340     <tr><td>min-height

  2341     <tr><td>max-height

  2342   <tbody>

  2343     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>

  2344   <tbody>

  2345     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>

  2346         <td>margin-top

  2347     <tr><td>margin-right

  2348     <tr><td>margin-bottom

  2349     <tr><td>margin-left

  2350     <tr><td>margin

  2351   <tbody>

  2352     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>

  2353         <td>outline-width

  2354     <tr><td>outline-style

  2355     <tr><td>outline-color

  2356     <tr><td>outline

  2357   <tbody>

  2358     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>

  2359   <tbody>

  2360     <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>

  2361         <td>padding-top

  2362     <tr><td>padding-right

  2363     <tr><td>padding-bottom

  2364     <tr><td>padding-left

  2365     <tr><td>padding

  2366   <tbody>

  2367     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>

  2368   <tbody>

  2369     <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>

  2370         <td>letter-spacing

  2371     <tr><td>text-align

  2372     <tr><td>text-decoration

  2373     <tr><td>text-indent

  2374     <tr><td>text-transform

  2375     <tr><td>white-space

  2376     <tr><td>word-spacing

  2377   <tbody>

  2378     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>

  2379   <tbody>

  2380     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>

  2381   <tbody>

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

  2383         <td>width

  2384     <tr><td>min-width

  2385     <tr><td>max-width

  2386   <tbody>

  2387     <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>

  2388 </table>

  2390 <h2 class="no-num" id="transfer-possibilities">Appendix B: Transfer Possibilities</h2>

  2392 <p>Often, but not always, the page box has a one-to-one correspondence to the

  2393 physical surface onto which the document is ultimately rendered. The CSS3 page

  2394 model specifies formatting within the page box, but it is the user agent's

  2395 responsibility to transfer the page box to the sheet. Some user agent transfer

  2396 possibilities that are not addressed by CSS3 include:</p>

  2398 <ul id="complex-usecases">

  2399   <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>

  2400   <li>Transferring two page boxes to the front and back surfaces of the same

  2401   sheet (e.g. double-sided printing);</li>

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

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

  2404   <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on

  2405   a sheet, which, when folded and trimmed like a book, appear in their proper

  2406   sequence;</li>

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

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

  2409 </ul>

  2411 <h2 class="no-num" id="references">References</h2>

  2413 <h3 class="no-num" id="normative-references">Normative References</h3><!--normative-->

  2415 <h3 class="no-num" id="informative-references">Informative References</h3><!--informative-->

  2416 </div>

  2417 </div>

  2418 </body>

  2419 </html>

Mercurial > drafts / file revision

css3-page/Overview.src.html@3a33dc6c4f9c

css3-page/Overview.src.html