css3-page/Overview.src.html

Mon, 11 Feb 2013 18:46:59 -0800

author
Simon Sapin <simon.sapin@exyr.org>
date
Mon, 11 Feb 2013 18:46:59 -0800
changeset 7441
2a7cb1ed8232
parent 7439
9d57f98d774f
child 7443
6fdb489623ce
permissions
-rwxr-xr-x

[css3-page] Clarify 'counter-increment' vs. the 'page' counter.

fantasai@213 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
fantasai@213 2 <html lang="en">
fantasai@213 3 <head>
fantasai@213 4 <title>
fantasai@215 5 CSS Paged Media Module Level 3
fantasai@213 6 </title>
fantasai@213 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
fantasai@213 8 <link href="../default.css" rel="stylesheet" type="text/css">
fantasai@213 9 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
fantasai@215 10 <style type="text/css">
fantasai@215 11 .keyword { font-weight:bold }
fantasai@213 12 .equation { padding: 2% }
fantasai@213 13 table.equation {text-align:center}
fantasai@213 14 td, th { vertical-align: top }
fantasai@213 15 pre { font-size: 1em; }
simon@6956 16
simon@6956 17 #margin-values { border-collapse: collapse; }
simon@6956 18 #margin-values td,
simon@6956 19 #margin-values th
simon@6956 20 {
simon@6956 21 padding: 0.2em;
fantasai@213 22 border: thin solid black;
fantasai@213 23 }
fantasai@213 24
fantasai@213 25 .property-list
fantasai@213 26 {
fantasai@213 27 border: 1px solid black;
fantasai@213 28 padding: .2em;
fantasai@213 29 margin-top: 2em;
fantasai@213 30 }
simon@6956 31
fantasai@213 32 .property-list td
fantasai@213 33 {
fantasai@213 34 border: 1px solid black;
fantasai@213 35 padding: .1em;
fantasai@213 36 }
fantasai@213 37
simon@6956 38 .editorial
simon@6956 39 {
simon@6956 40 display: block;
fantasai@213 41 font-family: arial, helvetica, sans-serif;
fantasai@213 42 font-size: 80%;
simon@6956 43 margin-left: .5in;
simon@6956 44 margin-right: 1in ;
fantasai@213 45 padding: 0.125in;
fantasai@213 46 background: #FFFFDD ;
fantasai@213 47 }
simon@6956 48
fantasai@213 49 .editorial:after { content: "Ed."}
simon@6956 50 .RFC2119
simon@6956 51 {
simon@6956 52 text-transform: lowercase;
simon@6956 53 font-style: italic
fantasai@213 54 }
simon@6956 55
simon@6956 56 em em.RFC2119
fantasai@213 57 {
simon@6956 58 text-transform: lowercase;
simon@6956 59 font-style: normal
simon@6956 60 }
simon@6956 61
simon@6956 62 table.page-sizes
simon@6956 63 {
simon@6956 64 border: thin solid;
fantasai@213 65 margin-top: 1.5em;
fantasai@213 66 }
simon@6956 67 table.page-sizes td
simon@6956 68 {
simon@6956 69 border: thin solid;
fantasai@213 70 padding: .5em;
fantasai@213 71 }
simon@6956 72 table.page-sizes th
simon@6956 73 {
simon@6956 74 border: thin solid;
simon@6956 75 padding: .5em;
fantasai@213 76 background: #ffffaa;
fantasai@213 77 }
fantasai@213 78
fantasai@213 79 </style>
fantasai@213 80 </head>
fantasai@213 81 <body>
fantasai@213 82 <div>
fantasai@213 83 <div class="head">
fantasai@213 84 <!--logo-->
fantasai@213 85 <h1>CSS Paged Media Module Level 3</h1>
fantasai@213 86 <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>
fantasai@213 87 <dl>
fantasai@213 88 <dt>This version:</dt> <dd><a href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
fantasai@213 89 <!-- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
fantasai@213 90 <dt>Latest version:</dt> <dd><a href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a></dd>
fantasai@213 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>
fantasai@213 92 <dt>Editors:</dt> <dd>Melinda Grant, Hewlett-Packard</dd>
fantasai@213 93 <dd>H&aring;kon Wium Lie, Opera Software</dd>
fantasai@213 94 <dd>Elika J. Etemad, Hewlett-Packard</dd>
simon@7067 95 <dd>Simon Sapin, Kozea</dd>
fantasai@213 96 </dl>
fantasai@213 97
fantasai@213 98 <!--copyright-->
fantasai@213 99
fantasai@213 100 </div>
fantasai@213 101 <hr title="Separator for header">
fantasai@213 102
fantasai@213 103 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
fantasai@213 104
fantasai@213 105 <p>This module describes the page model that partitions a flow into pages. It
fantasai@5976 106 builds on the <a href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> and introduces
fantasai@213 107 and defines the page model and paged media. It adds functionality for
fantasai@213 108 pagination, page margins, page size and orientation, headers and footers,
fantasai@213 109 widows and orphans, and image orientation. Finally it extends generated content
fantasai@213 110 to enable page numbering and running headers / footers.</p>
fantasai@213 111
fantasai@213 112 <!-- "Status of this document" -->
fantasai@213 113
fantasai@213 114 <h2 class="no-num no-toc" id="status">Status of this Document</h2>
fantasai@213 115
fantasai@213 116 <!--status-->
fantasai@213 117
fantasai@213 118 <p>This document contains the <abbr title="Cascading Style Sheets">CSS3</abbr>
fantasai@213 119 Paged Media Module W3C Last Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a> of [DATE]. The
fantasai@213 120 Last Call period ends on <span class="fudge">TBD</span>.</p>
fantasai@213 121
fantasai@2094 122 <p>Relative to the previous Last Call Working Draft, this version has dropped
fantasai@2094 123 the formerly named 'fit' and 'fit-position' properties; they are
fantasai@2094 124 renamed to 'object-fit' and 'object-position', redefined to enable additional
fantasai@2094 125 use cases, and moved to the
fantasai@2094 126 <a href="http://www.w3.org/TR/css3-images/">CSS3 Image Values and Replaced Content module</a>.
simon@7289 127 The page-page-margin box sizing algorithm has been reworded to be a bit simpler,
fantasai@2094 128 and many miscellaneous clarifications and editorial improvements have
fantasai@213 129 been incorporated.</p>
fantasai@213 130
fantasai@1101 131 <p>Features at-risk (may be removed if they lack implementor interest):</p>
fantasai@583 132 <ul>
fantasai@1101 133 <li>comma-separated page selectors
fantasai@583 134 </ul>
fantasai@213 135
fantasai@2094 136 <p>Expected next revision to this document is another LCWD, due to the
simon@7289 137 substantive changes to page-margin box sizing and other areas that are now
fantasai@2094 138 specified with more precision.</p>
fantasai@213 139
fantasai@213 140 <p>The <a href="lc2_issues.htm">Disposition of Comments</a>
fantasai@213 141 document contains the current issues list and responses to input received
fantasai@213 142 during this Last Call period.</p>
fantasai@213 143
fantasai@213 144 <h2 class="no-num no-toc" id="contents">Table of Contents</h2><!--begin-toc-->
fantasai@213 145 <!--end-toc-->
fantasai@213 146 <!-- "Introduction" -->
fantasai@213 147 <h2 id="intro">Introduction</h2>
fantasai@213 148
fantasai@213 149 <p>Paged media (e.g., paper, transparencies, photo album pages, pages
fantasai@213 150 displayed on computer screens as printed output simulations) differ from
fantasai@5976 151 <a href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>
fantasai@213 152 in that the content of the document is split into one or more discrete
fantasai@213 153 static display surfaces. To handle pages, CSS3 Paged Media describes how:</p>
fantasai@213 154
fantasai@213 155 <ul>
fantasai@213 156 <li><a href="#page-breaks">page breaks</a> are created and avoided;</li>
fantasai@213 157 <li>the page properties such as size, orientation, margins, border, and
fantasai@213 158 padding are specified;</li>
fantasai@213 159 <li>headers and footers are established within the page margins;</li>
fantasai@213 160 <li>content such as page counters are placed in the headers and footers; and</li>
fantasai@213 161 <li>orphans and widows can be controlled.</li>
fantasai@213 162 </ul>
fantasai@213 163
fantasai@213 164 <p>This module defines a <a href="#page-model">page model</a> that specifies how a
fantasai@552 165 document is formatted within a rectangular area, called the
fantasai@552 166 <a href="#page-box-page-rule">page box</a>, that has finite width and height.
fantasai@522 167
fantasai@527 168 <p>Although CSS3 does not specify how user agents transfer page boxes to sheets,
fantasai@527 169 it does include certain mechanisms for telling user agents about the intended
fantasai@527 170 page sheet <a href="#page-size">size and orientation</a>. In the general case,
fantasai@527 171 CSS3 assumes that one page box will be transferred to one surface of similar
fantasai@527 172 size.</p>
fantasai@522 173
fantasai@1052 174 <p>All properties defined in this specification also accept the
fantasai@1052 175 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
fantasai@1052 176 keyword as their value, but for readability it has not been listed explicitly.
fantasai@522 177
fantasai@527 178 <h2 id="conformance">Conformance</h2>
fantasai@522 179
fantasai@685 180 <p>All of the text in this specification is normative except sections
fantasai@685 181 explicitly marked as non-normative, examples, and notes. The keywords
fantasai@685 182 "<em class="RFC2119">MUST</em>", "<em class="RFC2119">SHALL</em>",
fantasai@527 183 "<em class="RFC2119">MUST NOT</em>", "<em class="RFC2119">SHALL NOT</em>",
fantasai@527 184 "<em class="RFC2119">REQUIRED</em>", "<em class="RFC2119">SHOULD</em>",
fantasai@527 185 "<em class="RFC2119">SHOULD NOT</em>", "<em class="RFC2119">RECOMMENDED</em>",
fantasai@527 186 "<em class="RFC2119">MAY</em>", and "<em class="RFC2119">OPTIONAL</em>" when
fantasai@527 187 used in this document are to be interpreted as described in <cite>RFC
fantasai@527 188 2119</cite> [[!RFC2119]]. However, for readability, these words do not appear
fantasai@685 189 in all uppercase letters in this specification.</p>
fantasai@522 190
fantasai@527 191 <p>Examples in this specification are introduced with the words "for example"
fantasai@527 192 or are set apart from the normative text with <code>class="example"</code>,
fantasai@527 193 like this:
fantasai@522 194
fantasai@527 195 <div class="example">
fantasai@527 196 <p>This is an example of an informative example.</p>
fantasai@527 197 </div>
fantasai@523 198
fantasai@527 199 <p>Informative notes begin with the word "Note" and are set apart from the
fantasai@527 200 normative text with <code>class="note"</code>, like this:
fantasai@523 201
fantasai@527 202 <p class="note">Note, this is an informative note.</p>
fantasai@527 203
fantasai@564 204 <h2 id="page-terms">Page Terminology</h2>
fantasai@213 205
fantasai@213 206 <p>The following terminology and accompanying diagrams help to describe the
fantasai@523 207 page model:</p>
fantasai@213 208
fantasai@213 209 <dl>
fantasai@213 210 <dt id="page-sheet">Page sheet</dt>
fantasai@213 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"
fantasai@213 212 height="148" width="194">The page sheet is one surface of the physical
fantasai@213 213 medium. The illustration to the right shows a representation of the upper-left
fantasai@213 214 corner of a page sheet.</dd>
fantasai@523 215
fantasai@213 216 <dt id="printable-area">Printable and non-printable areas</dt>
fantasai@213 217 <dd>The non-printable area is the area of a page sheet that a physical device such
fantasai@213 218 as a printer is not capable of marking reliably, usually due to the printer's
fantasai@213 219 paper handling mechanism. This value is printer dependent and is usually a
fantasai@213 220 small region along each edge of the page sheet. The printable area is the area
fantasai@213 221 of page sheet that a printer <em>is</em> capable of marking reliably. The size
fantasai@213 222 of the printable area is the size of the page sheet reduced by the size of the
fantasai@213 223 non-printable area. A user agent may not know the dimensions of this area for a
fantasai@213 224 particular printing device; but when its dimensions are known, user agents
fantasai@213 225 <em class="RFC2119">MAY</em> adjust the formatting of the document so that
fantasai@213 226 content falls within the printable area. How this adjustment is accomplished is
fantasai@5987 227 device dependent within the constraints expressed in the sections
fantasai@5987 228 <a href="#renderingpages">Rendering page boxes that do not fit a page sheet</a> and
fantasai@213 229 <a href="#content-outside-box">Content outside the page box</a>.</dd>
fantasai@523 230
fantasai@523 231 <dt id="page-orientation">Page Orientation</dt>
fantasai@523 232 <dd>The page orientation is defined by comparing the length of the edges of a
fantasai@523 233 <a href="#page-box">page box</a>. The page box is a rectangle with two
fantasai@523 234 perpendicular edges called the long edge and the short edge. The length of the
fantasai@523 235 long edge is always greater than or equal to the length of the short edge. When
fantasai@523 236 the page box is square, the two edges are of the same length and either can be
fantasai@523 237 used as the long edge with the other being the short edge. This specification
fantasai@523 238 defines page orientations of 'portrait' and 'landscape'.</dd>
fantasai@523 239
fantasai@523 240 <dt id="portrait">Portrait Orientation</dt>
fantasai@523 241 <dd>A portrait page's height is greater than or equal to its width. Horizontal
fantasai@523 242 elements are parallel to the short edge and vertical elements to the long edge.</dd>
fantasai@523 243
fantasai@523 244 <dt id="landscape">Landscape Orientation</dt>
fantasai@523 245 <dd>A landscape page's width is greater than or equal to its height. Horizontal
fantasai@1136 246 elements are parallel to the long edge and vertical elements to the short edge.
fantasai@1136 247 <span class="note">Note that CSS3 makes no distinction between landscape and
fantasai@1136 248 reverse-landscape orientations. However, future versions of CSS may do so.
fantasai@1136 249 UAs should consider, when formatting for duplexed printing, the binding edge,
fantasai@1136 250 page progression, and ease of reading when choosing between landscape and
fantasai@1136 251 reverse-landscape renderings.</span>
fantasai@1136 252 </dd>
fantasai@523 253
fantasai@523 254 <dt id="duplex-printing">Duplex Printing</dt>
fantasai@523 255 <dd>Duplex printing prints one page box per side of a page sheet and uses both
fantasai@523 256 sides of the page sheet. This module provides no ability to specify whether a
fantasai@523 257 document is duplex printed, but the concept of left and right pages is based on
fantasai@523 258 the assumption that the document is duplex printed, regardless of whether or
fantasai@523 259 not it actually is.</dd>
fantasai@523 260
fantasai@523 261 <dt id="binding-edge">Binding Edge</dt>
fantasai@523 262 <dd>The binding edge is the edge of the page box that is toward the binding if the
fantasai@523 263 material is bound. The binding edge often has a larger margin than the opposite
fantasai@523 264 edge to provide for the space used by the binding. The binding edge can be any
fantasai@523 265 of the four edges. However, page sheets are customarily bound so that the
fantasai@523 266 binding edge of page boxes with portrait orientation is vertical. This module
fantasai@523 267 provides no method to specify the binding edge. In duplex printing, the binding
fantasai@523 268 edge is on opposite sides of the page box for the left and right pages.</dd>
fantasai@523 269
fantasai@523 270 <dt id="facing-pages">Facing Pages</dt>
fantasai@523 271 <dd>Facing pages are two sequential pages such that when the document is duplex
fantasai@523 272 printed they are on separate sheets of paper. Typically, the earlier page will
fantasai@523 273 be the back side of one sheet and the later page will be the front side of
fantasai@523 274 another. They are usually laid out so that the binding edges of facing pages
fantasai@523 275 are vertical and adjacent when the pages are placed in their normal reading
fantasai@523 276 orientation.</dd>
fantasai@526 277
fantasai@526 278 <dt id="left-page">Left Page</dt>
fantasai@526 279 <dd>A page that would be on the left if it is part of a pair of facing pages as
fantasai@526 280 typically laid out. Page layouts for documents using a left-to-right page
fantasai@526 281 progression have the earlier of the facing pages on the left. Rules specific to
fantasai@526 282 the left page can be specified using the <span class="css">':left'</span> page
fantasai@526 283 selector.</dd>
simon@6956 284
fantasai@526 285 <dt id="right-page">Right Page</dt>
fantasai@526 286 <dd>A page that would be on the right if it is part of a pair of facing pages as
fantasai@526 287 typically laid out. Page layouts for documents using a right-to-left page
fantasai@526 288 progression have the earlier of the facing pages on the right. Rules specific
fantasai@526 289 to the right page can be specified using the <span class="css">':right'</span>
fantasai@526 290 page selector.</dd>
fantasai@213 291 </dl>
fantasai@213 292
fantasai@564 293
fantasai@564 294 <h2 id="page-box-page-rule">The Page Model</h2>
fantasai@564 295
fantasai@564 296 <p>In the paged media formatting model, the document is transferred into one
fantasai@564 297 or more page boxes. The <dfn id="page-box">page box</dfn> is a specialized CSS
fantasai@564 298 box that maps to a rectangular print media surface, such as a page of paper.
fantasai@5976 299 It is roughly analogous to the <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
fantasai@564 300 <img src="PageBox.png" style="float: right;" alt="" height="266" width="267">
fantasai@564 301
fantasai@5976 302 <p>As with other CSS <a href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box
fantasai@3574 303 consists of margin, border, padding, and content areas. The content and
fantasai@3574 304 margin areas of a page box have special functions:</p>
fantasai@564 305
fantasai@564 306 <ul>
fantasai@564 307 <li>The content area of a page box is called the <dfn id="page-area">page
fantasai@564 308 area</dfn>. The content of the document is flowed into one or more page boxes.
fantasai@564 309 The page area acts as a container for all the boxes generated by the root
fantasai@564 310 element and its descendants that are laid out within a given page box. The
fantasai@564 311 edges of the page area on the first page establish the rectangle that is the
fantasai@5976 312 initial <a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing block</a>
fantasai@564 313 of the document.</li>
simon@7289 314 <li>The margin area of a page box is divided into
simon@7289 315 16 <dfn>page-margin boxes</dfn>.
simon@7289 316 Each page-margin box has its own margin, border, padding and content areas.
simon@7289 317 Page-margin boxes are typically used to display running headers and footers.</li>
fantasai@564 318 </ul>
fantasai@564 319
fantasai@5973 320 <p>The properties of a <i>page box</i> are determined by properties
fantasai@5976 321 <a href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a> within the
fantasai@5973 322 <i>page context</i>, which is the
fantasai@5976 323 <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration block</a> of the
simon@7289 324 <code>@page</code> rule. Similarly the properties of a <i>page-margin box</i>
fantasai@5973 325 are determined by properties declared within its <i>margin context</i>.
fantasai@5973 326 Declarations in the page context can affect the page box and/or inherit
simon@7289 327 to the page-margin boxes, but they do not apply to or inherit into the
fantasai@564 328 document's root element or other content.</p>
fantasai@564 329
fantasai@5973 330 <p>The <i>containing block</i> of the page box is specified using the 'size'
fantasai@5973 331 property in the <i>page context</i>. The width and horizontal margins
fantasai@5973 332 of the page box are then calculated exactly as for a
fantasai@5973 333 <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
fantasai@5973 334 block element in normal flow</a>. [[!CSS21]] The height and vertical margins
fantasai@5973 335 of the page box are calculated analogously (instead of using the block height
fantasai@5973 336 formulas). In both cases if the values are over-constrained, instead of
fantasai@5973 337 ignoring any margins, the containing block is resized to coincide with the
fantasai@5973 338 margin edges of the page box.
fantasai@5973 339
fantasai@6061 340 <h3 id="painting">
fantasai@6061 341 Page Backgrounds and Painting Order</h3>
fantasai@6061 342
fantasai@6061 343 <p>When drawing a page of content, the page layers are painted in the
fantasai@6061 344 following painting order (bottommost first):
fantasai@6061 345
fantasai@6061 346 <ol>
fantasai@6061 347 <li>page background
fantasai@6061 348 <li>document canvas
fantasai@6061 349 <li>page borders
fantasai@6061 350 <li>document contents
simon@7289 351 <li>page-margin boxes
fantasai@6061 352 </ol>
fantasai@6061 353
fantasai@6061 354 <p>In the page model, the page background behaves similar to the root background:
fantasai@6061 355 its <a href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background painting area</i></a>
fantasai@6061 356 is the entire page box, including its margins.
fantasai@6065 357 Page backgrounds are anchored within the page box's padding area by default
fantasai@6061 358 (and honor 'background-origin' if the UA supports [[!CSS3BG]]).
fantasai@6061 359 However if 'background-attachment' is ''fixed''
fantasai@6061 360 then the image is positioned relative to the page box including its margins
fantasai@6061 361 (i.e. the <a href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background positioning area</i></a>,
fantasai@6061 362 like the <i>background painting area</i>, is the page's margin box).
fantasai@6061 363
fantasai@6061 364 <p>The document canvas background is drawn as the page box's background:
fantasai@6065 365 by default its <i>background painting area</i> covers the page box's border box,
fantasai@6064 366 and for UAs that support [[!CSS3BG]], follows the 'background-clip' value specified on the root element.
fantasai@6061 367 It remains, however, positioned with respect to the root element
fantasai@6061 368 or page area as usual.
fantasai@6061 369
simon@7289 370 <p>The UA may support the <code>z-index</code> property for page-margin boxes.
simon@7289 371 With respect to the page-margin boxes,
fantasai@6061 372 the document canvas, page borders, and all of the document contents
fantasai@6061 373 are treated as a single element with a <code>z-index</code> value of '0':
simon@7289 374 the page-margin boxes never interleave with parts of the document content
fantasai@6061 375 or between the content and the canvas.
fantasai@6061 376 They may only paint in front of the document content or behind the document canvas.
fantasai@6061 377 The page background is always painted underneath everything else.
simon@7289 378 Since the <code>position</code> property does not apply to page-margin boxes,
simon@7289 379 <code>z-index</code> always affects page-margin boxes
simon@7289 380 as if they were positioned elements
simon@7289 381 regardless of the <code>position</code> property's value.
fantasai@6061 382
fantasai@6061 383 <p>The default painting order,
fantasai@6061 384 or <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree order",
simon@7289 385 of page-margin boxes with respect to each other is not specified.
simon@7289 386 However, the page-margin boxes are defined to come
simon@7289 387 after the page box and its contents.
fantasai@6061 388 <span class="issue">Suggestions here are welcome.</span>
fantasai@5973 389
fantasai@528 390 <h3 id="content-outside-box">Content outside the page box</h3>
fantasai@528 391
fantasai@528 392 <p>When formatting content in the page model, some content may end up outside the
fantasai@1134 393 page box. For example, an element whose 'white-space' property has the value
fantasai@1134 394 'pre' can generate a box that is wider than the page box. As another example,
fantasai@1134 395 when boxes are positioned absolutely or relatively, they may end up in
fantasai@1134 396 "inconvenient" locations. For example, images may be placed on the edge of
fantasai@1134 397 the page box or 100,000 meters below the page box. </p>
fantasai@528 398
fantasai@528 399 <p>A specification for the exact formatting of such elements lies outside the
fantasai@528 400 scope of this document. However, it is recommended that authors and user agents
fantasai@528 401 observe the following general principles concerning content outside the page
fantasai@528 402 box:</p>
fantasai@528 403
fantasai@528 404 <ul>
fantasai@1134 405 <li><p>Content should be allowed slightly beyond the page box to allow pages
fantasai@1134 406 to "bleed".
fantasai@565 407 <li><p>User agents <em class="RFC2119">SHOULD</em> avoid generating a large
fantasai@565 408 number of content-empty pages to honor the positioning of elements (e.g.,
fantasai@565 409 printing 100 blank pages is probably neither the author's nor the user's
fantasai@565 410 intent).
fantasai@565 411 A <dfn id="content-empty">Content-empty page</dfn> is a page box whose page
fantasai@565 412 area contains no printable content other than backgrounds and/or borders. A
fantasai@565 413 page box whose page area contains generated content, or content whose
fantasai@565 414 visibility is 'hidden', or invisible content such as a zero-width space is
fantasai@565 415 not a content-empty page. On the other hand, a page containing only a
simon@7289 416 background and/or borders and/or page-margin box content <em>is</em> a
fantasai@565 417 content-empty page.
fantasai@565 418 <p class="note">Note, however, that generating a small number of empty page
fantasai@565 419 boxes is sometimes necessary to honor the <span class="css">'left'</span> and
fantasai@565 420 <span class="css">'right'</span> values for <span class="property">'page-break-before'</span>
fantasai@565 421 and <span class="property">'page-break-after'</span>.</li>
fantasai@528 422
fantasai@565 423 <li><p>Authors <em class="RFC2119">SHOULD NOT</em> position elements in
fantasai@565 424 inconvenient locations just to avoid rendering them. Instead:
fantasai@565 425 <ul>
fantasai@565 426 <li>To suppress box generation entirely, set the <span class="property">'display'</span> property to <span class="css">'none'</span>.</li>
fantasai@565 427 <li>To make a box invisible, set the <span class="property">'visibility'</span>
fantasai@565 428 property.</li>
fantasai@565 429 </ul></li>
fantasai@565 430 <li><p>This specification does not define how boxes positioned outside the page
fantasai@565 431 box are handled. Possibilities include discarding them or creating page boxes
fantasai@565 432 for them at the end of the document.</li>
fantasai@565 433 </ul>
fantasai@528 434
fantasai@528 435 <h3 id="progression">Page Progression</h3>
fantasai@213 436
fantasai@526 437 <p>CSS distinguishes between left pages and right pages on all documents,
fantasai@526 438 whether they are printed duplex or not. Each left page is followed by a
fantasai@526 439 right page and vice versa. Left and right pages can be styled differently
fantasai@526 440 with the <a href="#left-right-first"><code>:left</code> and <code>:right</code>
fantasai@526 441 pseudo-classes</a>.
fantasai@213 442
fantasai@526 443 <p>Whether the first page of a document is a left page or a right page
fantasai@526 444 depends on the page progression of the document. The <dfn>page progression</dfn>
fantasai@526 445 is the direction in which the printed pages of a document would be sequenced
fantasai@557 446 when laid out side-to-side. For example, English and horizontally-set Japanese
fantasai@557 447 typically progress from left to right, whereas Arabic and vertically-set
fantasai@5987 448 Japanese pages typically progress from right to left. In documents with
fantasai@557 449 a left-to-right page progression the first page of the document is a right
fantasai@557 450 page, and vice versa.</p>
fantasai@213 451
fantasai@526 452 <p>The page progression direction is determined as follows:</p>
fantasai@213 453
fantasai@526 454 <ul>
fantasai@526 455 <li>If text is laid out in horizontal lines, the page progression is the
fantasai@526 456 same as the inline progression.</li>
fantasai@526 457 <li>If text is laid out in vertical lines, the page progression is the
fantasai@526 458 same as the block progression.</li>
fantasai@526 459 </ul>
fantasai@526 460
fantasai@5975 461 <p>If the UA supports the 'direction' and 'writing-mode' properties
fantasai@5975 462 from the CSS 3 Writing Modes Module [[CSS3-WRITING-MODES]], it must
fantasai@5975 463 <a href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
fantasai@526 464 whether the first page is a left or right page from the values of those
fantasai@526 465 properties on the root element.</p>
fantasai@526 466
fantasai@7437 467 <p>
fantasai@7437 468 To explicitly force a document to begin printing on a left or right page,
fantasai@7437 469 authors can specify a <a href="http://www.w3.org/TR/css3-break/#break-before">'break-before'</a> value
fantasai@7437 470 that that propagates a page break to the root. [[!CSS3-BREAK]]
fantasai@7437 471 The UA must suppress the first (empty) page(s) in this case
fantasai@7437 472 (and the <code>:first</code> selector applies to the first printed page).
fantasai@213 473
simon@7334 474 <div class="example">
simon@7334 475 <pre>
simon@7334 476 html { page-break-before: always }
simon@7334 477 </pre>
simon@7334 478
simon@7334 479 <p>
simon@7334 480 For an HTML document with a left-to-right page progression,
simon@7334 481 the above style rule will cause the first page of the document
simon@7334 482 to print on a ':left' page
simon@7334 483 </p>
simon@7334 484
simon@7334 485 <pre>
simon@7334 486 html { page-break-before: left }
simon@7334 487 </pre>
simon@7334 488
simon@7334 489 <p>
simon@7334 490 For an HTML document,
simon@7334 491 the above style rule will cause the first page of the document
simon@7334 492 to print on a ':left' page,
simon@7334 493 regardless of the page progression.
simon@7334 494 </p>
simon@7334 495 </div>
simon@7334 496
fantasai@528 497 <h2 id="page-selector-and-context">Page Selectors and the Page Context</h2>
fantasai@528 498
fantasai@568 499 <h3 id="at-page-rule">The @page Rule</h3>
fantasai@568 500
fantasai@557 501 <p>Authors can specify various aspects of a page box, such as its dimensions,
simon@7290 502 orientation, and margins, within an <span class="css">@page</span> rule.
simon@7290 503 An <span class="css">@page</span> rule consists of
simon@7290 504 the keyword <span class="css">'@page'</span>,
simon@7290 505 an <em class="RFC2119">OPTIONAL</em> comma-separated list of
simon@7290 506 <i title="page selector">page selectors</i>
simon@7290 507 and a block of declarations
simon@7290 508 (said to be in the <dfn id="page-context">page context</dfn>).
fantasai@566 509 <a href="#margin-at-rules">Margin at-rules</a> may be interleaved with the
fantasai@566 510 declarations in the page context.
fantasai@528 511
simon@7290 512 <p>A <dfn id="page-selector">page selector</dfn> is either
simon@7290 513 a page pseudo-class, or
simon@7290 514 a page name followed with no intervening whitespace
simon@7290 515 by an <em class="RFC2119">OPTIONAL</em> page pseudo-class.
simon@7290 516 The page selector specifies for which pages the declarations apply.
simon@7290 517 In CSS3, page selectors can designate the first page of a document,
simon@7290 518 all left pages, all right pages, or
simon@7290 519 <a href="#using-named-pages">pages with specific names</a>.
fantasai@1101 520 Multiple selectors may be combined with a comma (which may be preceded and/or
fantasai@1101 521 followed by white space); in this case the ''@page'' rule applies to pages
fantasai@1101 522 that match any of the page selectors. (Note: this feature is at-risk.)
fantasai@1055 523 If no page selector is given, then the ''@page'' rule applies to all pages.</p>
fantasai@528 524
fantasai@528 525 <p>Properties declared within the page context apply to the page box.</p>
fantasai@528 526
fantasai@528 527 <p>If an error is encountered during the processing of a declaration block within
fantasai@5976 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>
fantasai@528 529 apply; that is, valid declarations within the block are applied.</p>
fantasai@528 530
simon@7435 531 <h3 id="pseudo-classes">
simon@7435 532 <a id="left-right-first"></a>
simon@7435 533 Page pseudo-classes: :left, :right, :first, and :blank
simon@7435 534 </h3>
fantasai@528 535
simon@7434 536 <p>
simon@7434 537 When printing double-sided documents,
simon@7434 538 left and right pages are often formatted differently.
simon@7434 539 This can be expressed through CSS pseudo-classes defined
simon@7434 540 in the <a href="#page-context">page context</a>.
simon@7434 541 </p>
fantasai@566 542
simon@7434 543 <p>
simon@7434 544 All pages are automatically classified by user agents
simon@7434 545 as either left pages or right pages,
simon@7434 546 based on <a href="#progression">page progression</a>.
simon@7434 547 The <span class="css">':left'</span> and <span class="css">':right'</span>
simon@7434 548 page pseudo-classes can be used to selectively apply rules
simon@7434 549 to only the left or right pages, respectively.
simon@7434 550 </p>
fantasai@566 551
fantasai@566 552 <div class="example">
fantasai@566 553 The following example creates left and right binding edges using these pseudo-classes:
fantasai@566 554 <pre>
fantasai@566 555 @page :left {
fantasai@566 556 margin-left: 3cm;
fantasai@566 557 margin-right: 4cm;
fantasai@566 558 }
fantasai@566 559
fantasai@566 560 @page :right {
fantasai@566 561 margin-left: 4cm;
fantasai@566 562 margin-right: 3cm;
fantasai@566 563 }
fantasai@566 564 </pre>
fantasai@566 565 </div>
fantasai@566 566
fantasai@566 567 <p>If different declarations have been given for left and right pages, the user
fantasai@566 568 agent <em class="RFC2119">MUST</em> honor these declarations even if the user
fantasai@566 569 agent does not transfer the page boxes to left and right sheets (i.e., a
fantasai@566 570 printer that only prints on one side of the medium must nevertheless produce
fantasai@566 571 correctly formatted output).</p>
fantasai@566 572
simon@7334 573 <div class="note">
simon@7334 574 <p>
simon@7334 575 <em><strong>Note.</strong>
simon@7334 576 Adding declarations to the <span class="css">':left'</span> or
simon@7334 577 <span class="css">':right'</span> pseudo-class
simon@7334 578 does not necessarily influence whether the document
simon@7334 579 comes out of the printer double- or single-sided
simon@7334 580 (which is outside the scope of this specification).</em>
simon@7334 581 </p>
simon@7334 582 </div>
simon@7334 583
fantasai@566 584 <p>Authors can also specify style for the first page of a document with the
simon@6956 585 <span class="css">':first'</span> pseudo-class. Such style rules are applied only
fantasai@566 586 to the first printed page of a document.</p>
fantasai@566 587
fantasai@566 588 <div class="example">
fantasai@566 589 <pre>
fantasai@566 590 @page { margin: 2cm } /* All margins set to 2cm */
fantasai@566 591
fantasai@566 592 @page :first {
fantasai@566 593 margin-top: 10cm /* Top margin on first page 10cm */
fantasai@566 594 }
fantasai@566 595 </pre>
fantasai@566 596 </div>
fantasai@566 597
simon@7435 598 <p>
simon@7435 599 Blank pages that appear as a result of
simon@7435 600 <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced page breaks</a>
simon@7435 601 can be styled with the <code>:blank</code> pseudo-class.
simon@7435 602
simon@7435 603 <div class="example">
simon@7435 604 <p>In this example, forced page break may occur before <code>h1</code> elements.
simon@7435 605 <pre>
simon@7435 606 h1 { page-break-before: left }
simon@7435 607
simon@7435 608 @page :blank {
simon@7435 609 @top-center { content: "This page is intentionally left blank" }
simon@7435 610 }
simon@7435 611 </pre>
simon@7435 612 </div>
simon@7435 613
simon@7435 614 <p>
simon@7435 615 A page matched by <code>:blank</code> can also be matched
simon@7435 616 by other page pseudo-classes.
simon@7435 617
simon@7435 618 <div class="example">
simon@7435 619
simon@7435 620 <p>If headers have been specified on all right pages, a blank right
simon@7435 621 page will be matched by both <code>:blank</code>
simon@7435 622 and <code>:right</code>. Therefore, margin boxes set on right pages
simon@7435 623 will have to be removed unless they are wanted on blank pages. Here is
simon@7435 624 an example where the top center header is removed from blank pages,
simon@7435 625 while the page number remains:
simon@7435 626
simon@7435 627 <pre>
simon@7435 628 h1 { page-break-before: left }
simon@7435 629
simon@7435 630 @page :blank {
simon@7435 631 @top-center { content: none }
simon@7435 632 }
simon@7435 633
simon@7435 634 @page :right {
simon@7435 635 @top-center { content: "Preliminary edition" }
simon@7435 636 @bottom-center { content: counter(page) }
simon@7435 637 }
simon@7435 638 </pre>
simon@7435 639
simon@7435 640 <p>Due to the higher specificity of <code>:blank</code>
simon@7435 641 over <code>:right</code>, the top center header is removed even
simon@7435 642 if <code>content: none</code> comes before <code>content: "Preliminary
simon@7435 643 edition"</code>.
simon@7435 644
simon@7435 645 </div>
simon@7435 646
fantasai@566 647 <div class="note">
fantasai@566 648 <p><em><strong>Note.</strong> Future versions of CSS may include other page
fantasai@566 649 pseudo-classes.</em></p>
fantasai@566 650 </div>
fantasai@566 651
fantasai@566 652 <h3 id="syntax-page-selector">@page rule grammar</h3>
fantasai@566 653
fantasai@566 654 <p>The syntax for the @page rule is a specialization of the generic at-rule
fantasai@566 655 defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules
fantasai@566 656 nested inside @media rules. User agents <em class="RFC2119">MUST</em> adhere
fantasai@528 657 to the following grammar:</p>
fantasai@528 658
fantasai@528 659 <p>See [[!CSS21]], Section 4.1.1 and Appendix G for the expansion of missing
fantasai@528 660 productions:</p>
fantasai@528 661 <p id="specializatons-of-ATKEYWORD">
fantasai@528 662 All new lexical tokens are specializations of the ATKEYWORD lexical token:</p>
fantasai@528 663 <pre class="lexical">
fantasai@528 664 PAGE_SYM ::= "@page"
fantasai@528 665 TOPLEFTCORNER_SYM ::= "@top-left-corner"
fantasai@528 666 TOPLEFT_SYM ::= "@top-left"
fantasai@528 667 TOPCENTER_SYM ::= "@top-center"
fantasai@528 668 TOPRIGHT_SYM ::= "@top-right"
fantasai@528 669 TOPRIGHTCORNER_SYM ::= "@top-right-corner"
simon@6956 670 BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner"
fantasai@528 671 BOTTOMLEFT_SYM ::= "@bottom-left"
fantasai@528 672 BOTTOMCENTER_SYM ::= "@bottom-center"
fantasai@528 673 BOTTOMRIGHT_SYM ::= "@bottom-right"
fantasai@528 674 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
fantasai@528 675 LEFTTOP_SYM ::= "@left-top"
fantasai@528 676 LEFTMIDDLE_SYM ::= "@left-middle"
fantasai@528 677 LEFTBOTTOM_SYM ::= "@left-bottom"
fantasai@528 678 RIGHTTOP_SYM ::= "@right-top"
fantasai@528 679 RIGHTMIDDLE_SYM ::= "@right-middle"
fantasai@528 680 RIGHTBOTTOM_SYM ::= "@right-bottom"
fantasai@528 681
simon@6956 682 <span id="syntax-prod-media">media</span> :
fantasai@528 683 MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
fantasai@528 684 ;
fantasai@528 685
simon@7439 686 <span id="syntax-prod-page" title="">page</span> :
simon@7290 687 PAGE_SYM S* [ page_selector S* [ ',' page_selector S* ]* ]?
simon@7439 688 '{' S* page_body '}' S*
fantasai@528 689 ;
simon@7439 690
simon@7439 691 <span id="syntax-prod-page-body">page_body</span> : /* Can be empty */
simon@7439 692 declaration? [ ';' S* page_body ]? |
simon@7439 693 page_margin_box page_body
simon@7439 694 ;
simon@7439 695
simon@7290 696 <span id="syntax-prod-page-selector">page_selector</span> :
simon@7290 697 pseudo_page | IDENT pseudo_page?
simon@7290 698 ;
fantasai@528 699 <span id="syntax-prod-pseudo-page">pseudo_page</span> :
simon@7435 700 ':' [ "left" | "right" | "first" | "blank" ]
fantasai@528 701 ;
fantasai@528 702
simon@7289 703 <span id="syntax-prod-margin">page_margin_box</span> :
fantasai@5973 704 margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
fantasai@528 705 ;
fantasai@528 706
fantasai@528 707 <span id="syntax-prod-margin-sym">margin_sym</span> :
simon@6956 708 TOPLEFTCORNER_SYM |
simon@6956 709 TOPLEFT_SYM |
simon@6956 710 TOPCENTER_SYM |
simon@6956 711 TOPRIGHT_SYM |
fantasai@528 712 TOPRIGHTCORNER_SYM |
simon@6956 713 BOTTOMLEFTCORNER_SYM |
simon@6956 714 BOTTOMLEFT_SYM |
simon@6956 715 BOTTOMCENTER_SYM |
fantasai@528 716 BOTTOMRIGHT_SYM |
fantasai@528 717 BOTTOMRIGHTCORNER_SYM |
fantasai@528 718 LEFTTOP_SYM |
fantasai@528 719 LEFTMIDDLE_SYM |
fantasai@528 720 LEFTBOTTOM_SYM |
fantasai@528 721 RIGHTTOP_SYM |
fantasai@528 722 RIGHTMIDDLE_SYM |
simon@6956 723 RIGHTBOTTOM_SYM
fantasai@528 724 ;
fantasai@528 725 </pre>
fantasai@1101 726
fantasai@528 727 <p id="page-selector-syntax-restrict">
fantasai@1101 728 The value 'auto' is not a valid page name and must be treated as matching
fantasai@1101 729 nothing.
fantasai@528 730
fantasai@528 731 <div class="example">
fantasai@528 732
fantasai@528 733 <p>The following are examples of page selectors (declaration block intentionally
fantasai@528 734 left blank)</p>
fantasai@528 735 <pre>
fantasai@528 736 @page { ... }
fantasai@528 737 @page :left { ... }
fantasai@528 738 @page :right { ... }
fantasai@528 739 @page LandscapeTable { ... }
fantasai@528 740 @page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
fantasai@528 741 @page:first { ... };
fantasai@528 742 </pre>
fantasai@528 743
simon@7289 744 <p>The following are examples of page-margin boxes
simon@7289 745 where the declaration blocks are intentionally left blank.</p>
fantasai@528 746 <pre>
fantasai@528 747 @page {
fantasai@528 748 @top-left { ... /* document name */ }
fantasai@528 749 @bottom-center { ... /* page number */}
fantasai@528 750 }
fantasai@528 751 @page :left { @left-middle { ... /* page number in left margin */ }}
fantasai@528 752 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
fantasai@528 753
fantasai@528 754 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
fantasai@528 755 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
fantasai@528 756 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
fantasai@528 757 @bottom-right-corner { ... /* empty footer */ } }
fantasai@528 758 </pre>
fantasai@528 759 </div>
fantasai@528 760
fantasai@528 761 <h3 id="cascading-and-page-context">Cascading in the page context</h3>
fantasai@528 762
fantasai@5976 763 <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>
fantasai@528 764
fantasai@1101 765 <p>The specificity of page selectors is computed in a manner analogous to the
fantasai@5976 766 computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
fantasai@528 767 module:</p>
fantasai@528 768
fantasai@528 769 <ul>
fantasai@1101 770 <li>if the page selector has a named page, f=1; else f=0</li>
simon@7435 771 <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>
fantasai@1101 772 <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
fantasai@528 773 </ul>
fantasai@528 774
fantasai@528 775 <p>Concatenating the three numbers f-g-h gives the specificity.</p>
fantasai@528 776
fantasai@528 777 <div class="example">
fantasai@528 778
fantasai@528 779 <p>Some page specificity calculation examples follow:</p>
fantasai@528 780 <pre>
fantasai@528 781 @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
fantasai@528 782 @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
fantasai@528 783 @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
fantasai@528 784 @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
fantasai@528 785 @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
simon@6956 786 @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
fantasai@528 787 </pre>
fantasai@528 788 </div>
fantasai@528 789
fantasai@528 790 <div class="example">
fantasai@528 791
fantasai@528 792 <p>Consider the following usage example:</p>
fantasai@528 793 <pre>
fantasai@528 794 @page {
fantasai@528 795 margin-left: 3cm;
fantasai@528 796 }
fantasai@528 797
fantasai@528 798 @page :left {
fantasai@528 799 margin-left: 4cm;
fantasai@528 800 }
fantasai@528 801 </pre>
fantasai@528 802
fantasai@528 803 <p>Due to the higher specificity of the pseudo-class selector, the left margin on
fantasai@528 804 left pages will be 4cm and all other pages
fantasai@528 805 (the right-facing pages) will have a left margin of 3cm.</p>
fantasai@528 806 </div>
fantasai@528 807
fantasai@528 808 <div class="example">
fantasai@528 809
fantasai@528 810 <p>In this example, the higher specificity of the green rules wins over the red
simon@7289 811 rule.
simon@7289 812 Therefore the first page will have blue text in the top-left page-margin box
simon@7289 813 and green text in the top-right page-margin box,
simon@7289 814 while subsequent pages will have red text in the page-margin boxes.</p>
fantasai@528 815 <pre>
fantasai@528 816 @page :first {
fantasai@528 817 color: green;
fantasai@528 818
fantasai@528 819 @top-left {
fantasai@528 820 content: "foo";
fantasai@528 821 color: blue;
fantasai@528 822 }
fantasai@528 823 @top-right {
fantasai@528 824 content: "bar";
fantasai@528 825 }
fantasai@528 826 }
fantasai@528 827
fantasai@528 828 @page { color: red;
fantasai@528 829 @top-center {
fantasai@528 830 content: "Page " counter(page);
fantasai@528 831 }
fantasai@528 832 }
fantasai@528 833 </pre>
fantasai@528 834 </div>
fantasai@528 835
fantasai@528 836 <div class="example">
fantasai@528 837
fantasai@528 838 <p>Page contexts cascade, so the following stylesheet would style pages with 25
simon@7289 839 millimeter margins and 14 point type in the page-margin boxes:</p>
fantasai@528 840 <pre>
fantasai@528 841 @page { margin: 25mm;}
fantasai@528 842 @page { font-size: 14pt;}
fantasai@528 843 </pre>
fantasai@528 844 </div>
fantasai@528 845
simon@7289 846 <h2 id="margin-boxes">Page-Margin Boxes</h2>
fantasai@528 847
simon@7289 848 <p>Page-margin boxes are boxes within the page margin that,
simon@7289 849 like pseudo-elements, can contain generated content.</p>
fantasai@528 850
simon@7289 851 <p>Page-margin boxes can be used to create page headers and footers,
simon@7289 852 which are portions of the page set aside for supplementary
simon@7289 853 information such as the page number or document title.</p>
fantasai@528 854
fantasai@528 855 <div class="example">
fantasai@566 856 <p>Typically, a <dfn>page header</dfn> is located at the top of the page in
fantasai@566 857 documents with a predominately horizontal writing direction and on the side
fantasai@566 858 opposite the <a href="#binding-edge">binding edge</a> for documents with a
fantasai@566 859 predominately vertical writing direction. One possible design of page headers
simon@7289 860 for horizontally written documents uses the
simon@7289 861 <span class="css">'top-left-corner'</span>, <span class="css">'top-left'</span>,
fantasai@566 862 <span class="css">'top-center'</span>, <span class="css">'top-right'</span> and
simon@7289 863 <span class="css">'top-right-corner'</span> page-margin boxes.
simon@7289 864 Another design, for vertically written documents, could use the
simon@7289 865 <span class="css">'right-top'</span>, <span class="css">'right-middle'</span>,
simon@7289 866 and <span class="css">'right-bottom'</span> page-margin boxes for
simon@7289 867 <a href="#right-page">right facing pages</a> and
simon@7289 868 <span class="css">'left-top'</span>,
fantasai@566 869 <span class="css">'left-middle'</span>, and <span class="css">'left-bottom'</span> for <a href="#left-page">left facing pages</a>.</p>
fantasai@566 870
fantasai@566 871 <p>The <dfn>page footer</dfn> is typically at the opposite end of the page from
fantasai@566 872 the page header. For example, the design of a horizontally written document with
fantasai@566 873 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>,
simon@7289 874 <span class="css">'bottom-center'</span>,
simon@7289 875 <span class="css">'bottom-right'</span> and
simon@7289 876 <span class="css">'bottom-right-corner'</span>
simon@7289 877 page-margin boxes as the page footer.
simon@7289 878 The design of a vertically written document could use the page-margin boxes
simon@7289 879 of the binding edge of the page for the page footer.</p>
fantasai@566 880 </div>
fantasai@566 881
simon@7289 882 <p>Page-margin boxes are positioned with respect to the page area
simon@7289 883 and are independent of page orientation,
simon@7289 884 for example the top page-margin boxes are above the page area
simon@7289 885 in both portrait and landscape orientation.
simon@7289 886 The various page-margin boxes are defined
fantasai@566 887 and illustrated in the diagram below:
fantasai@566 888
simon@7289 889 <table id="margin-box-def" class="data" summary="defintion of each of the page-margin boxes">
simon@7289 890 <caption>Table 1 Page-Margin Box Definitions</caption>
fantasai@566 891 <thead>
fantasai@566 892 <tr>
fantasai@566 893 <th>Box</th>
fantasai@566 894 <th>Description</th>
fantasai@566 895 <th>Placement</th>
fantasai@566 896 </tr>
fantasai@566 897 </thead>
fantasai@566 898 <tbody>
fantasai@566 899 <tr id="top-margin-boxes-def">
fantasai@566 900 <th id="top-left-corner-box-def">top-left-corner</th>
fantasai@566 901 <td>a fixed-size box defined by the intersection of the top and left margins of the
fantasai@566 902 page box</td>
fantasai@566 903 <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"
fantasai@566 904 height="47" width="181"></td>
fantasai@566 905 </tr>
fantasai@566 906 <tr id="top-left-box-def">
fantasai@566 907 <th>top-left</th>
fantasai@566 908 <td>a variable-width box filling the top page margin between the top-left-corner
simon@7289 909 and top-center page-margin boxes</td>
fantasai@566 910 <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"
fantasai@566 911 height="47" width="181"></td>
fantasai@566 912 </tr>
fantasai@566 913 <tr id="top-center-box-def">
fantasai@566 914 <th>top-center</th>
fantasai@566 915 <td>a variable-width box centered horizontally between the page's left and right
fantasai@566 916 border edges and filling the page top margin between the top-left and top-right
simon@7289 917 page-margin boxes</td>
fantasai@566 918 <td><img src="TopCenterMarginBox.png" alt="the top center box with margin, border, and padding, centered within the page's top margin"
fantasai@566 919 height="47" width="181"></td>
fantasai@566 920 </tr>
fantasai@566 921 <tr id="top-right-box-def">
fantasai@566 922 <th>top-right</th>
fantasai@566 923 <td>a variable-width box filling the top page margin between the top-center and
simon@7289 924 top-right-corner page-margin boxes</td>
fantasai@566 925 <td><img src="TopRightMarginBox.png" alt="the top right box with margin, border, and padding, nested within the page's top margin"
fantasai@566 926 height="47" width="181"></td>
fantasai@566 927 </tr>
fantasai@566 928 <tr>
fantasai@566 929 <th id="top-right-corner-box-def">top-right-corner</th>
fantasai@566 930 <td>a fixed-size box defined by the intersection of the top and right margins of
fantasai@566 931 the page box</td>
fantasai@566 932 <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"
fantasai@566 933 height="47" width="181"></td>
fantasai@566 934 </tr>
fantasai@566 935 <tr id="left-margin-boxes-def">
fantasai@566 936 <th id="left-top-box-def">left-top</th>
fantasai@566 937 <td>a variable-height box filling the left page margin between the top-left-corner
simon@7289 938 and left-middle page-margin boxes</td>
simon@7289 939 <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"
fantasai@566 940 height="226" width="181"></td>
fantasai@566 941 </tr>
fantasai@566 942 <tr id="left-middle-box-def">
fantasai@566 943 <th>left-middle</th>
fantasai@566 944 <td>a variable-height box centered vertically between the page's top and bottom
fantasai@566 945 border edges and filling the left page margin between the left-top and
simon@7289 946 left-bottom page-margin boxes</td>
fantasai@566 947 </tr>
fantasai@566 948 <tr id="left-bottom-box-def">
fantasai@566 949 <th>left-bottom</th>
fantasai@566 950 <td>a variable-height box filling the left page margin between the left-middle and
simon@7289 951 bottom-left-corner page-margin boxes</td>
fantasai@566 952 </tr>
fantasai@566 953 <tr id="right-margin-boxes-def">
fantasai@566 954 <th id="right-top-box-def">right-top</th>
fantasai@566 955 <td>a variable-height box filling the right page margin between the
simon@7289 956 top-right-corner and right-middle page-margin boxes</td>
simon@7289 957 <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"
fantasai@566 958 height="226" width="181"></td>
fantasai@566 959 </tr>
fantasai@566 960 <tr id="right-middle-box-def">
fantasai@566 961 <th>right-middle</th>
fantasai@566 962 <td>a variable-height box centered vertically between the page's top and bottom
fantasai@566 963 border edges and filling the right page margin between the right-top and
simon@7289 964 right-bottom page-margin boxes</td>
fantasai@566 965 </tr>
fantasai@566 966 <tr id="right-bottom-box-def">
fantasai@566 967 <th>right-bottom</th>
fantasai@566 968 <td>a variable-height box filling the right page margin between the right-middle
simon@7289 969 and bottom-right-corner page-margin boxes</td>
fantasai@566 970 </tr>
fantasai@566 971 <tr id="bottom-margin-boxes-def">
fantasai@566 972 <th id="bottom-left-corner-box-def">bottom-left-corner</th>
fantasai@566 973 <td>a fixed-size box defined by the intersection of the bottom and left margins of
fantasai@566 974 the page box</td>
fantasai@566 975 <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"
fantasai@566 976 height="48" width="181"></td>
fantasai@566 977 </tr>
fantasai@566 978 <tr id="bottom-left-box-def">
fantasai@566 979 <th>bottom-left</th>
fantasai@566 980 <td>a variable-width box filling the bottom page margin between the
simon@7289 981 bottom-left-corner and bottom-center page-margin boxes</td>
simon@7289 982 <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"
fantasai@566 983 height="48" width="181"></td>
fantasai@566 984 </tr>
fantasai@566 985 <tr id="bottom-center-box-def">
fantasai@566 986 <th>bottom-center</th>
fantasai@566 987 <td>a variable-width box centered horizontally between the page's left and right
fantasai@566 988 border edges and filling the bottom page margin between the bottom-left and
simon@7289 989 bottom-right page-margin boxes</td>
fantasai@566 990 <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"
fantasai@566 991 height="48" width="181"></td>
fantasai@566 992 </tr>
fantasai@566 993 <tr id="bottom-right-box-def">
fantasai@566 994 <th>bottom-right</th>
fantasai@566 995 <td>a variable-width box filling the bottom page margin between the bottom-center
simon@7289 996 and bottom-right-corner page-margin boxes</td>
simon@7289 997 <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"
fantasai@566 998 height="48" width="181"></td>
fantasai@566 999 </tr>
fantasai@566 1000 <tr id="bottom-right-corner-box-def">
fantasai@566 1001 <th>bottom-right-corner</th>
fantasai@566 1002 <td>a fixed-size box defined by the intersection of the bottom and right margins of
fantasai@566 1003 the page box</td>
fantasai@566 1004 <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"
fantasai@566 1005 height="48" width="181"></td>
fantasai@566 1006 </tr>
fantasai@566 1007 </tbody>
fantasai@566 1008 </table>
fantasai@566 1009
simon@7289 1010 <h3 id="margin-at-rules">At-rules for page-margin boxes</h3>
fantasai@566 1011
simon@7289 1012 <p>Page-margin boxes are created by
simon@7289 1013 <a href="#margin-at-rules">margin at-rules</a>
fantasai@1738 1014 inside the <a href="#page-context">page context</a>.
fantasai@1738 1015 These rules should come after any declarations in the page context as legacy
fantasai@1738 1016 clients may not handle declarations after margin at-rules correctly.</p>
fantasai@566 1017
simon@7289 1018 <p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an
simon@7289 1019 <a href="#specializatons-of-ATKEYWORD">ATKEYWORD</a>
simon@7289 1020 that identifies the page-margin box
fantasai@566 1021 (e.g. <span class="css">'@top-left'</span>) and a block of declarations (said
fantasai@566 1022 to be in the <dfn id="margin-context">margin context</dfn>).</p>
fantasai@566 1023
fantasai@566 1024 <div class="example">
fantasai@566 1025
fantasai@566 1026 <p>The following style sheet establishes a page header containing the title
fantasai@566 1027 ("Hamlet") on the left side and the page number, preceded by "Page ", on the
fantasai@566 1028 right side:</p>
fantasai@528 1029 <pre>
fantasai@566 1030 @page {
fantasai@566 1031 size: 8.5in 11in;
fantasai@566 1032 margin: 10%;
fantasai@528 1033
fantasai@566 1034 @top-left {
fantasai@566 1035 content: "Hamlet";
fantasai@566 1036 }
fantasai@566 1037 @top-right {
fantasai@566 1038 content: "Page " counter(page);
fantasai@566 1039 }
fantasai@528 1040 }
fantasai@528 1041 </pre>
fantasai@528 1042 </div>
fantasai@528 1043
fantasai@528 1044
simon@7289 1045 <h3 id="populating-margin-boxes">Populating page-margin boxes</h3>
fantasai@566 1046
fantasai@5969 1047 <p>As with the '':before'' and '':after'' pseudo-elements,
simon@7289 1048 a specified 'content' of ''normal'' on a page-margin box computes to ''none'',
simon@7289 1049 and the page-margin box is <dfn>generated</dfn>
simon@7289 1050 if and only if the computed value
simon@6957 1051 of its 'content' property is not 'none'.
fantasai@5968 1052 Otherwise it behaves as if it had ''display: none''.
fantasai@528 1053
fantasai@528 1054 <div class="example">
fantasai@566 1055 <p>The following style sheet creates a green box in each corner of the page
fantasai@566 1056 except the bottom-left corner.</p>
fantasai@528 1057 <pre>
fantasai@566 1058 @page {
fantasai@566 1059 @top-left-corner { content: " "; border: solid green; }
fantasai@1090 1060 @top-right-corner { content: url(foo.png); border: solid green; }
fantasai@1090 1061 @bottom-right-corner { content: counter(page); border: solid green; }
fantasai@566 1062 @bottom-left-corner { content: normal; border: solid green; }
fantasai@566 1063 }
fantasai@528 1064 </pre>
fantasai@528 1065 </div>
fantasai@528 1066
simon@7289 1067 <h3 id="margin-box-dimensions">Computing Page-margin Box Dimensions</h3>
fantasai@566 1068
simon@7289 1069 <p>The width and height of each page-margin box is determined by the rules
fantasai@1090 1070 below. These rules define the equivalent of CSS2.1 Sections 10.3 and
simon@7289 1071 10.6 for page-margin boxes.</p>
fantasai@1090 1072
fantasai@1090 1073 <p>The rules for applying 'min-height', 'max-height', 'min-width', and
simon@7289 1074 'max-width' [[!CSS21]] do apply to page-margin boxes and may imply
simon@7289 1075 a recalculation of the width, height, and/or margins
simon@7289 1076 if the dimensions resulting from the specified 'width' or 'height'
simon@7289 1077 violate their constraints.
simon@7289 1078 If the UA does not support the 'min-height' or 'min-width' properties
simon@7289 1079 then it must behave as if 'min-height' and 'min-width' were always zero.
fantasai@566 1080
simon@7289 1081 <h4 id="max-margin-dimension">Page-Margin Box Layout Terminology</h4>
fantasai@566 1082
fantasai@566 1083 <p>In addition to the box model definitions in CSS2.1 [[!CSS21]], the following
simon@7289 1084 terms are defined for use in the subsequent page-margin box calculations:</p>
fantasai@566 1085
fantasai@566 1086 <dl>
fantasai@566 1087
simon@6958 1088 <dt id="MaxBoxWidth"><dfn>max box width</dfn></dt>
simon@6958 1089 <dd>the sum of the page’s left border width, left padding,
fantasai@566 1090 <a href="#page-box">page area</a> width, right padding, and right border width.
fantasai@566 1091 In other words, it is the distance between the <a href="#page-box">page
simon@6958 1092 box</a>’s left border edge and right border edge</a>. This quantity is used
simon@7289 1093 when calculating dimensions of the top and bottom page-margin boxes.</dd>
fantasai@566 1094
simon@6958 1095 <dt id="MaxBoxHeight"><dfn>max box height</dfn></dt>
simon@6958 1096 <dd>the sum of the page’s top border width, top padding,
fantasai@566 1097 <a href="#page-box">page area</a> height, bottom padding, and bottom border
fantasai@566 1098 width. In other words, it is the distance between the <a href="#page-box">page
simon@6958 1099 box</a>’s top border edge and bottom border edge. This quantity is used when
simon@7289 1100 calculating dimensions of the left and right page-margin boxes.</dd>
fantasai@566 1101
simon@6958 1102 <dt><dfn>outer width</dfn></dt>
simon@7289 1103 <dd>the sum of a page-margin box's left and right margins, left and right border
fantasai@566 1104 widths, left and right padding, and content-box width.</dd>
fantasai@566 1105
simon@6958 1106 <dt><dfn>outer height</dfn></dt>
simon@7289 1107 <dd>the sum of a page-margin box's top and bottom margins, top and bottom border
fantasai@1626 1108 widths, top and bottom padding, and content-box height.</dd>
fantasai@566 1109 </dl>
fantasai@566 1110
simon@6958 1111 <dt><dfn>outer min-content</dfn> width</dt>
simon@6958 1112 <dd>Like the <i>outer width</i>, except that
simon@6958 1113 <a href="http://www.w3.org/TR/css3-sizing/#min-content">''min-content''</a>
simon@6958 1114 is used when 'width' is ''auto''.</dd>
simon@6957 1115
simon@6958 1116 <dt><dfn>outer max-content</dfn> width</dt>
simon@6958 1117 <dd>Like the <i>outer width</i>, except that
simon@6958 1118 <a href="http://www.w3.org/TR/css3-sizing/#max-content">''max-content''</a>
simon@6958 1119 is used when 'width' is ''auto''.</dd>
simon@6957 1120
simon@7289 1121 <p>The <dfn>containing block</dfn> for a corner page-margin box is the rectangle
fantasai@566 1122 defined by the intersection of the two page margins meeting at that corner.</p>
fantasai@566 1123
simon@7289 1124 <p>For all other page-margin boxes,
simon@7289 1125 the <dfn>containing block</dfn> is the rectangle
fantasai@566 1126 formed by the encapsulating page margin minus the containing blocks of the
simon@7289 1127 adjacent corners' page-margin boxes.
simon@7289 1128 This means that the size of this containing block is given
simon@7289 1129 in one dimension by the used page margin and in the other dimension
simon@7289 1130 by the <a href="#MaxBoxWidth">max box width</a>
simon@7289 1131 (for top and bottom page-margin boxes) or
simon@7289 1132 <a href="#MaxBoxHeight">max box height</a>
simon@7289 1133 (for left and right page-margin boxes).</p>
fantasai@566 1134
simon@7289 1135 <h4 id="margin-dimension">Page-Margin Box Variable Dimension Computation Rules</h4>
fantasai@566 1136
simon@7289 1137 <p>The following rules apply to 'top-left', 'top-center' and 'top-right'
simon@7289 1138 page-margin boxes,
simon@7289 1139 which are referred to as A, B, and C, respectively, in this section.</p>
simon@6957 1140
simon@7053 1141 <h5 id="marginbox-variabledim-margins">Margins</h5>
simon@7053 1142
simon@6957 1143 <p>If the 'margin-left' or 'margin-right' property of any of the three boxes
simon@6957 1144 computes to ''auto'', the used value is zero.</p>
simon@6957 1145
simon@7053 1146 <h5 id="marginbox-variabledim-with">Resolving ''auto'' widths</h5>
fantasai@566 1147
simon@6957 1148 <p>The following algorithm determines the used width of each box.
simon@7055 1149 For this purpose, boxes that are not <i>generated</i>
simon@7052 1150 are assumed to have a 'width' and an <i>outer width</i> of zero.
simon@7052 1151 </p>
simon@6957 1152
simon@6957 1153 <p class="note">
simon@6958 1154 Note: The high-level goals are (in order of priority) to center the middle
simon@6957 1155 box (B) if it is generated, to minimize overflow and overlap, and to
simon@6957 1156 distribute space proportionally to the amount of content.</p>
simon@6957 1157
simon@7052 1158 <ol>
simon@7052 1159 <li>
simon@7052 1160 If B is not <i>generated</i>:
simon@7052 1161 <ol>
simon@7052 1162 <li>
simon@7052 1163 If only box has 'width: auto', its used width is resolved so that
simon@7052 1164 the sum of the <i>outer width</i>s equals <i>max box width</i>.
simon@7052 1165 </li>
simon@6957 1166
simon@7052 1167 <li>
simon@7052 1168 If A and C both have 'width: auto':
simon@7052 1169 <ol>
simon@7052 1170 <li>
simon@7052 1171 Let <i>free space</i> be <i>max box width</i> minus
simon@7052 1172 A’s and C’s <i>outer min-content width</i>.
simon@7052 1173 </li>
simon@6957 1174
simon@7052 1175 <li>
simon@7052 1176 If <i>free space</i> is positive,
simon@7052 1177 let the respective <i>weight</i> for A and C be
simon@7052 1178 <i>max-content</i> minus <i>min-content</i>.
simon@7052 1179 If it is negative or zero, let the weights be <i>min-content</i>.
simon@7052 1180 In either case if both weights are zero, let them be '1px' instead.
simon@7052 1181 <span class="note">
simon@7052 1182 The '1px' value is arbitrary as long as the weights are equal.
simon@7052 1183 </span>
simon@7052 1184 </li>
simon@6957 1185
simon@7052 1186 <li>
simon@7052 1187 The respective used width is
simon@7052 1188 <i>min-content</i> + <i>free space</i> × <i>weight</i>
simon@7052 1189 ÷ sum of both weights
simon@7052 1190 </li>
simon@7052 1191 </ol>
simon@7052 1192 </li>
simon@7052 1193 </ol>
simon@7052 1194 </li>
simon@6957 1195
simon@7052 1196 <li>
simon@7052 1197 If B is <i>generated</i>:
simon@7052 1198 <ol>
simon@7052 1199 <li>
simon@7052 1200 If B has 'width: auto':
simon@7052 1201 <ol>
simon@7052 1202 <li>
simon@7052 1203 Let <i>free space</i> be <i>max box width</i>
simon@7052 1204 - 2 × max(<i>min<sub>A</sub></i>, <i>min<sub>C</sub></i>)
simon@7052 1205 - <i>min<sub>B</sub></i>,
simon@7052 1206 where <i>min</i> is a box’s <i>outer min-content width</i>
simon@7052 1207 if 'width' is ''auto'', zero otherwise.
simon@7052 1208 </li>
simon@7052 1209 <li>
simon@7052 1210 Let <i>upper limit</i> be <i>max box width</i>
simon@7052 1211 - 2 × max(<i>fixed<sub>A</sub></i>, <i>fixed<sub>C</sub></i>),
simon@7052 1212 where <i>fixed</i> is a box’s <i>outer width</i>
simon@7052 1213 if 'width' is not ''auto'', zero otherwise.
simon@7052 1214 </li>
simon@7052 1215 <li>
simon@7052 1216 If <i>free space</i> is positive,
simon@7052 1217 let the <i>weight</i> of a box be
simon@7052 1218 <i>max-content</i> minus <i>min-content</i>.
simon@7052 1219 If it is negative or zero, let the weights be <i>min-content</i>.
simon@7052 1220 </li>
simon@7052 1221 <li>
simon@7052 1222 Let <i>weight<sub>AC</sub></i> be
simon@7052 1223 max(<i>weight<sub>A</sub></i>, <i>weight<sub>C</sub></i>)
simon@7052 1224 </li>
simon@7052 1225 <li>
simon@7052 1226 If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>
simon@7052 1227 are zero, let them be '1px' instead.
simon@7052 1228 </li>
simon@7052 1229 <li>
simon@7052 1230 B’s used width is
simon@7052 1231 min(<i>upper limit</i>,
simon@7052 1232 <i>min-content</i> +
simon@7052 1233 <i>free space</i> × <i>weight<sub>B</sub></i>
simon@7052 1234 ÷ (<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))
simon@7052 1235 </li>
simon@7052 1236 </ol>
simon@7052 1237 </li>
simon@7052 1238 <li>
simon@7052 1239 Then, if A or C has 'width: auto',
simon@7052 1240 the respective used widths are resolved so that <i>outer width</i>
simon@7052 1241 equals (<i>max box width</i> - B’s <i>outer width</i>) ÷ 2
simon@7052 1242 </li>
simon@7052 1243 </ol>
simon@7052 1244 </li>
simon@7052 1245 </ol>
simon@6957 1246
simon@7054 1247 <h5 id="marginbox-variabledim-minmax">Handling 'min-width' and 'max-width'</h5>
simon@7054 1248
simon@7054 1249 <p>
simon@7054 1250 The 'min-width' and 'max-width' properties [[CSS21]] apply to page-margin
simon@7054 1251 boxes in the variable dimension like on normal elements, except that the
simon@7054 1252 three boxes on the same side are considered together.
simon@7054 1253 </p>
simon@7054 1254
simon@7054 1255 <p>
simon@7054 1256 More precisely:
simon@7054 1257 </p>
simon@7054 1258
simon@7054 1259 <ol>
simon@7054 1260 <li>
simon@7054 1261 The tentative used widths are calculated
simon@7054 1262 (without 'min-width' and 'max-width') following the rules under
simon@7054 1263 <a href="#marginbox-variabledim-with">Resolving ''auto'' widths</a>
simon@7054 1264 above.
simon@7054 1265 </li>
simon@7054 1266 <li>
simon@7054 1267 If the tentative used width of any of the three boxes
simon@7054 1268 is greater than 'max-width', the rules above are applied again,
simon@7054 1269 but this time using the computed value of 'max-width'
simon@7054 1270 as the computed value for 'width'.
simon@7054 1271 </li>
simon@7054 1272 <li>
simon@7054 1273 If the resulting width of any of the three boxes
simon@7054 1274 is smaller than 'min-width', the rules above are applied again,
simon@7054 1275 but this time using the value of 'min-width'
simon@7054 1276 as the computed value for 'width'.
simon@7054 1277 </li>
simon@7054 1278 </ol>
simon@7054 1279
simon@7053 1280 <h5 id="marginbox-variabledim-positioning">Positioning</h5>
simon@7053 1281
simon@7053 1282 <p>
simon@7053 1283 Once the dimensions of the boxes are determined,
simon@7053 1284 they are positioned as follows:
simon@7053 1285 </p>
simon@7053 1286
simon@7053 1287 <ul>
simon@7053 1288 <li>The left outer edge of A is flush with the left edge of the
simon@7053 1289 containing block</li>
simon@7053 1290 <li>The outer area of B is centered in the containing block.</li>
simon@7053 1291 <li>The right outer edge of C is flush with the right edge of the
simon@7053 1292 containing block.</li>
simon@7053 1293 </ul>
simon@7053 1294
simon@7053 1295 <h5 id="marginbox-variabledim-others">Boxes on other sides</h5>
fantasai@566 1296
simon@7289 1297 <p>The used values for 'bottom-left', 'bottom-center' and 'bottom-right'
simon@7289 1298 page-margin boxes are established by the same rules as
simon@7289 1299 for 'top-left', 'top-center', and 'top-right', respectively.</p>
fantasai@566 1300
fantasai@566 1301 <p>The used values for 'left-top', 'left-middle' and 'left-bottom' boxes are
fantasai@566 1302 established by the same rules, with "width" replaced by "height", "left" by
fantasai@566 1303 "top", "right" by "bottom" and "center" by "middle".</p>
fantasai@566 1304
simon@7289 1305 <p>The used values for 'right-top', 'right-middle' and 'right-bottom'
simon@7289 1306 page-margin boxes
fantasai@566 1307 are established by the same rules as for 'left-top', 'left-middle' and
fantasai@566 1308 'left-bottom', respectively.</p>
fantasai@566 1309
simon@7289 1310 <h4 id="margin-constraints">Page-Margin Box Fixed Dimension Computation Rules</h4>
fantasai@566 1311
fantasai@1090 1312 <p>The rules below are used to calculate the used values of each
fantasai@566 1313 'top-left-corner', 'top-left', 'top-center', 'top-right', and
simon@7289 1314 'top-right-corner' page-margin box's 'height', 'margin-top', and 'margin-bottom'
fantasai@1090 1315 properties:</p>
fantasai@566 1316
fantasai@1090 1317 <ol>
fantasai@1090 1318 <li>The following constraint must hold among the used values of the margin
fantasai@1090 1319 box's properties:
fantasai@1090 1320 <p>'margin-top' + 'border-top-width' + 'padding-top' + 'height' +
fantasai@1090 1321 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = top page margin
fantasai@566 1322
fantasai@1090 1323 <li>If 'border-top-width' + 'padding-top' + 'height' (if it is not ''auto'')
fantasai@1090 1324 + 'padding-bottom' + 'border-bottom-width', plus 'margin-top' and/or
fantasai@1090 1325 'margin-bottom' if not ''auto'', is larger than the height of the top page
fantasai@1090 1326 margin, then any ''auto'' values for 'margin-top' or 'margin-bottom' are, for
fantasai@1090 1327 the following rules, treated as zero.
fantasai@566 1328
fantasai@1090 1329 <li>If at this point all of 'height', 'margin-top', and 'margin-bottom'
fantasai@1090 1330 have a computed value other than ''auto'', the values are said to be
fantasai@1090 1331 "over-constrained". In this case, the specified value of 'margin-top' is
fantasai@1090 1332 treated as 'auto'.
fantasai@566 1333
fantasai@1090 1334 <li>If there is now exactly one value specified as 'auto', its used value
fantasai@1090 1335 follows from the equality.
fantasai@566 1336
fantasai@1090 1337 <li>If 'height' is set to 'auto', any other 'auto' values become '0' and
fantasai@1090 1338 'height' follows from the resulting equality
fantasai@566 1339
simon@7289 1340 <li>If both 'margin-top' and 'margin-bottom' are 'auto',
simon@7289 1341 their used values are equal.
simon@7289 1342 This vertically centers the page-margin box content
simon@7289 1343 within the top page margin.
fantasai@1090 1344 </ol>
fantasai@566 1345
simon@7289 1346 <p>The same rules apply to the bottom page-margin boxes (bottom-left-corner,
fantasai@566 1347 bottom-left, bottom-center, bottom-right, and bottom-right-corner), except that
fantasai@566 1348 in the overconstrained case, the 'margin-bottom' is ignored rather than the
fantasai@566 1349 'margin-top'.</p>
fantasai@566 1350
simon@7289 1351 <p>Analogous rules govern the properties for the left and right
simon@7289 1352 page-margin boxes with respect to 'width'
simon@7289 1353 (top-left-corner, left-top, left-middle, left-bottom, and
fantasai@566 1354 bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom,
fantasai@566 1355 bottom-right-corner), with 'top' replaced by 'left', 'bottom' replaced by
simon@7289 1356 'right', and 'height' replaced by 'width'.
simon@7289 1357 In the overconstrained case for left (right) page-margin boxes,
simon@7289 1358 the specified value of 'margin-left' ('margin-right') is ignored.</p>
fantasai@566 1359
simon@7289 1360 <h3 id="margin-box-ex">Page-margin box examples</h3>
fantasai@566 1361
simon@7289 1362 <p>The following is a collection of examples of page-margin box usage.</p>
fantasai@566 1363
fantasai@528 1364 <div class="example">
fantasai@566 1365
fantasai@566 1366 <p>Here is an example of a page with only a top-left header:</p>
fantasai@528 1367 <pre>
fantasai@566 1368 @page {
fantasai@566 1369 @top-left { content: "Header in Left Cell (top-left)" }
fantasai@566 1370 }
fantasai@528 1371 </pre>
fantasai@528 1372
fantasai@566 1373 <p>Because there are no contents defined for the top-center or the top-right
simon@7289 1374 page-margin boxes, the extent of the top-left page-margin box
simon@7289 1375 is allowed to cross the center of the page box.</p>
fantasai@566 1376
fantasai@566 1377 <p><img alt="Header Example 1" src="header-ex-1.png" height="177" width="737"></p>
fantasai@528 1378 </div>
fantasai@528 1379
fantasai@566 1380 <div class="example">
fantasai@566 1381
fantasai@566 1382 <p>The following is an example of a page with a centered header:</p>
fantasai@566 1383 <pre>
fantasai@566 1384 @page {
fantasai@566 1385 @top-center { content: "Header in Center Cell (top-center)" }
fantasai@566 1386 }
fantasai@566 1387 </pre>
fantasai@566 1388
fantasai@566 1389 <p><img alt="Header Example 2" src="header-ex-2.png" height="177" width="737"></p>
fantasai@528 1390 </div>
fantasai@528 1391
fantasai@566 1392 <div class="example">
fantasai@566 1393
fantasai@566 1394 <p>The following is an example of a page with a single header in the top-right
simon@7289 1395 page-margin box:</p>
fantasai@566 1396 <pre>
fantasai@566 1397 @page {
fantasai@566 1398 @top-right { content: "Header in Right Cell (top-right)" }
fantasai@566 1399 }
fantasai@566 1400 </pre>
fantasai@566 1401
fantasai@566 1402 <p>Because the content of the center cell is empty, the extent of the top-right
simon@7289 1403 page-margin box is allowed to cross the center of the page box.</p>
fantasai@566 1404
fantasai@566 1405 <p><img alt="Header Example 3" src="header-ex-3.png" height="177" width="737"></p>
fantasai@566 1406 </div>
fantasai@566 1407
fantasai@566 1408 <div class="example">
fantasai@566 1409
fantasai@566 1410 <p>The following is an example of a page with a top-center and a top-left header:</p>
fantasai@566 1411 <pre>
fantasai@566 1412 @page {
fantasai@566 1413 @top-left { content: "Left Cell (top-left)" }
fantasai@566 1414 @top-center { content: "Header in Center Cell (top-center)" }
fantasai@566 1415 }
fantasai@566 1416 </pre>
fantasai@566 1417
fantasai@566 1418 <p><img alt="Header Example 4" src="header-ex-4.png" height="177" width="737"></p>
fantasai@566 1419 </div>
fantasai@566 1420
fantasai@566 1421 <div class="example">
fantasai@566 1422
fantasai@566 1423 <p>The following is an example of a page with a top-center and a top-right header:</p>
fantasai@566 1424 <pre>
fantasai@566 1425 @page {
fantasai@566 1426 @top-center { content: "Header in Center Cell (top-center)" }
fantasai@566 1427 @top-right { content: "Right Cell (top-right)" }
fantasai@566 1428 }
fantasai@566 1429 </pre>
fantasai@566 1430
fantasai@566 1431 <p><img alt="Header Example 5" src="header-ex-5.png" height="177" width="737"></p>
fantasai@566 1432 </div>
fantasai@566 1433
fantasai@566 1434 <div class="example">
fantasai@566 1435
fantasai@566 1436 <p>The following is an example of a page with top-left and top-right headers:</p>
fantasai@566 1437 <pre>
fantasai@566 1438 @page {
fantasai@566 1439 @top-left { content: "Header in top-left with approx. "
fantasai@566 1440 "twice as many words as right cell." }
fantasai@566 1441 @top-right { content: "Right cell (top-right)" }
fantasai@566 1442 }
fantasai@566 1443 </pre>
fantasai@566 1444
fantasai@566 1445 <p>Because there are no center cell contents, the extent of the top-left is
fantasai@5974 1446 allowed to cross the center of the page box.</p>
fantasai@566 1447
fantasai@566 1448 <p><img alt="Header Example 6" src="header-ex-6.png" height="177" width="737"></p>
fantasai@528 1449 </div>
fantasai@528 1450
fantasai@528 1451 <h2 id="page-properties">Page Properties</h2>
fantasai@528 1452 <div>
fantasai@528 1453
fantasai@3574 1454 <p>The following properties, when used in the <a href="#page-context">page
fantasai@3574 1455 context</a>, apply to the page box:</p>
fantasai@528 1456
fantasai@528 1457 <ul>
fantasai@5976 1458 <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a></li>
fantasai@5976 1459 <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a></li>
fantasai@5976 1460 <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a></li>
fantasai@5976 1461 <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
fantasai@5976 1462 <li><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>
fantasai@5976 1463 <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a></li>
fantasai@5976 1464 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a></li>
fantasai@5976 1465 <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a></li>
fantasai@5976 1466 <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
fantasai@5976 1467 <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a></li>
fantasai@5976 1468 <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
fantasai@528 1469 <li><a href="#page-size">size</a></li>
fantasai@5976 1470 <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
fantasai@5976 1471 <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a></li>
fantasai@528 1472 </ul>
fantasai@528 1473
fantasai@3574 1474 <p>The following properties, when used in a <a href="#margin-at-rule">margin
simon@7289 1475 context</a>, apply to page-margin boxes and their content:</p>
fantasai@528 1476
fantasai@528 1477 <ul>
fantasai@5976 1478 <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
fantasai@5976 1479 <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
fantasai@5976 1480 <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
fantasai@5976 1481 <li><a href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
fantasai@5976 1482 <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
fantasai@5976 1483 <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
fantasai@5976 1484 <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>
fantasai@5976 1485 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
fantasai@5976 1486 <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
fantasai@5976 1487 <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
fantasai@5976 1488 <li><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
fantasai@5976 1489 <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
fantasai@5976 1490 <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
fantasai@5976 1491 <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
fantasai@5976 1492 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
fantasai@5976 1493 <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
fantasai@5976 1494 <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>
fantasai@5976 1495 <li><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
fantasai@528 1496 </ul>
fantasai@528 1497
fantasai@528 1498 <p>A detailed list of properties that <em class="RFC2119">MUST</em> be supported
fantasai@528 1499 within page and margin contexts by a conforming implementation can be found in
fantasai@1052 1500 <a href="#properties-list">Appendix A</a>.</p>
fantasai@528 1501
fantasai@557 1502 <p>Other properties defined by [[!CSS21]] do not apply in these contexts. Behavior
fantasai@528 1503 for properties not included in CSS 2.1 and not listed here or in Appendix A is
fantasai@528 1504 undefined.</p>
fantasai@3574 1505
fantasai@528 1506 <p class="note">
fantasai@528 1507 Note: The intent of leaving other properties undefined is to allow the gradual
fantasai@528 1508 addition of appropriate CSS3 properties as they emerge, without having to
fantasai@528 1509 update this specification with each addition.</p>
fantasai@528 1510
fantasai@1133 1511 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
fantasai@1133 1512 elements in the document</a>, both the page context and the margin context
fantasai@1133 1513 have a computed value for every property, even if that property does not
simon@7289 1514 apply to the page or page-margin box.</p>
fantasai@1133 1515
fantasai@566 1516 <p>The normal rules for CSS properties apply with the following exceptions:</p>
fantasai@528 1517
fantasai@528 1518 <ul>
simon@7289 1519 <li>page-margin boxes inherit from the page context.
simon@7289 1520 The page context inherits from the root element.
simon@7289 1521 However, since the previous revision of CSS Paged
fantasai@1090 1522 Media Level 3 did not specify this point, an implementation that sets
fantasai@1090 1523 inherited properties in the page context to their initial values (as for the
fantasai@1090 1524 root element) is also conformant to CSS Paged Media Level 3. Note that this
fantasai@1090 1525 exception will be removed in Level 4.
fantasai@1090 1526 <li>Values in units of ''em'' and ''ex'' are interpreted relative to the font
fantasai@1090 1527 associated with their context. When used on the 'font-size' property in the
fantasai@1090 1528 margin context, they are relative to the font of the page context. When used
fantasai@1090 1529 on the 'font-size' property in the page context, they are relative to the
fantasai@1090 1530 'font-size' of the root element. However, since a previous revision of CSS
fantasai@1090 1531 Paged Media Level 3 was ambiguous on this point, an implementation that
fantasai@1090 1532 treats ''em'' and ''ex'' on 'font-size' as relative to the initial value is
fantasai@1090 1533 also conformant to CSS Paged Media Level 3. Note that this exception will
fantasai@1090 1534 be removed in Level 4.
fantasai@528 1535 <li>Percentage values on the margin and padding properties are relative to the
fantasai@528 1536 dimensions of the containing block. For right and left values, percentages are
fantasai@528 1537 relative to the width of the containing block; for top and bottom values,
fantasai@528 1538 percentages are relative to the height of the containing block.</li>
fantasai@3574 1539 <li>The used values of 'width' and 'height' have special computation rules
simon@7289 1540 for page boxes and page-margin boxes; see <a href="#page-size">Page Size</a>
simon@7289 1541 and <a href="#margin-box-dimensions">Computing Page-Margin Box Dimensions</a>.
fantasai@6061 1542 <li>The page background is positioned and painted
fantasai@6061 1543 <a href="#painting">as described above</a>.
fantasai@566 1544 <li>The rules for counter scoping are modified <a href="page-based-counters">as
fantasai@566 1545 described below</a>.</li>
simon@7433 1546 <li>
simon@7433 1547 As on the '::before' and '::after' pseudo-elements,
simon@7433 1548 the ''normal'' value of the 'content' property computes to ''none''
simon@7433 1549 on page-margin boxes.
simon@7433 1550 </li>
simon@7289 1551 <li>On page-margin boxes, the 'vertical-align' property behaves
fantasai@5975 1552 <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as specified for table cells</a>.
fantasai@5975 1553 It <em>always</em> performs alignment in the vertical dimension,
fantasai@5975 1554 regardless of writing mode.
fantasai@528 1555 </ul>
fantasai@528 1556
fantasai@528 1557 <p>It is <em class="RFC2119">recommended</em> that user agents establish a default
fantasai@528 1558 page margin via the user agent stylesheet that includes any non-printable area.
fantasai@528 1559 It is further <em class="RFC2119">recommended</em> that authors assume that the
fantasai@528 1560 default page area will not include unprintable regions.</p>
fantasai@528 1561
fantasai@566 1562 <h3 id="page-based-counters">Page-based counters</h3>
fantasai@566 1563
fantasai@566 1564 <p>Counters can be defined and controlled within an <span class="css">'@page'</span>
simon@7289 1565 rule, and used as content in page-margin boxes.
simon@7289 1566 This is useful for maintaining a page count.</p>
fantasai@566 1567
fantasai@566 1568 <p>A 'counter-increment' within either a page or margin context causes the counter
fantasai@566 1569 to increment with the generation of each page box.</p>
fantasai@566 1570
fantasai@566 1571 <p>If a counter is reset or incremented within the page context, it is in scope
simon@7289 1572 for all page-margin boxes and obscures all counters of the same name within the
fantasai@566 1573 document.</p>
fantasai@566 1574
fantasai@566 1575 <p>If a counter is reset or incremented within a margin context, it is in scope
simon@7289 1576 for that page-margin box and obscures any counters of the same name
simon@7289 1577 in both the page context and the document.</p>
fantasai@566 1578
fantasai@566 1579 <p>If a counter that has not been reset or incremented within the margin context
fantasai@566 1580 or the page context is used by counter() or counters() in the margin context,
simon@7289 1581 then the resultant value is exactly
simon@7289 1582 as if the page-margin box were an element within
fantasai@566 1583 the document at the start of the page, inside the deepest element in the normal
fantasai@566 1584 flow that spans the page break. Use of the counter in this way does not affect
fantasai@566 1585 the calculation of the counter's value.</p>
fantasai@566 1586
simon@7441 1587 <p>
simon@7441 1588 A counter named ''page'' is automatically created
simon@7441 1589 and incremented by 1 on every page of the document,
simon@7441 1590 unless the 'counter-increment' property in the <i>page context</i>
simon@7441 1591 explicitly specifies a different increment for the ''page'' counter.
simon@7441 1592 The implied ''page'' counter is a real counter,
simon@7441 1593 and can be directly affected using the 'counter-increment' and 'counter-reset' properties
simon@7441 1594 when named explicitly in those properties.
simon@7441 1595 It can also be used in the 'counter()' and 'counters()' function forms.
simon@7441 1596 </p>
simon@7441 1597
simon@7441 1598 <div class="example">
simon@7441 1599 <p>The following rules result in the placement of the current page number in the
simon@7441 1600 middle of the outside margin of each page.</p>
simon@7441 1601 <pre>
simon@7441 1602 @page {
simon@7441 1603 margin: 10%;
simon@7441 1604
simon@7441 1605 @top-center {
simon@7441 1606 font-family: sans-serif;
simon@7441 1607 font-weight: bold;
simon@7441 1608 font-size: 2em;
simon@7441 1609 content: counter(page);
simon@7441 1610 }
simon@7441 1611 }
simon@7441 1612 </pre>
simon@7441 1613
simon@7441 1614 <p>Adding the following rule will make all pages even-numbered.</p>
simon@7441 1615 <pre>
simon@7441 1616 @page {
simon@7441 1617 counter-increment: page 2;
simon@7441 1618 }
simon@7441 1619 </pre>
simon@7441 1620 </div>
fantasai@566 1621
fantasai@1101 1622 <p>Additionally, a counter named ''pages'' is automatically created by the UA.
fantasai@1101 1623 Its value is always the total number of pages in the document. (In continuous
fantasai@1101 1624 media this is always 1.) The value of ''pages'' cannot be manipulated: while
fantasai@1101 1625 'counter-reset' and 'counter-increment' statements that set it are valid, they
fantasai@1101 1626 have no effect.
fantasai@1101 1627
fantasai@566 1628 <p>In all other respects, page-associated counters behave as described in
fantasai@566 1629 [[!CSS21]], <a href="TR/CSS21/generate.html#scope">Nested Counters and
fantasai@5976 1630 Scope</a> and <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.</p>
fantasai@566 1631
simon@7289 1632 <h3 id="margin-text-alignment">Page-margin boxes and default values</h3>
fantasai@566 1633
fantasai@566 1634 <p>Properties used within page or margin contexts take their initial values from
fantasai@566 1635 their respective property definitions; however, user agents must behave as
fantasai@566 1636 though the values in the following table were established by rules in the UA
fantasai@566 1637 default style sheet.</p>
simon@7289 1638 <table id="margin-values" class="data" summary="definition of page-margin box default properties">
simon@7289 1639 <caption>Table 2. Default values for Page-Margin Boxes</caption>
fantasai@566 1640 <thead>
fantasai@566 1641 <tr>
simon@7289 1642 <th>Page-margin box</th>
fantasai@566 1643 <th><span class="property">'text-align'</span></th>
fantasai@566 1644 <th><span class="property">'vertical-align'</span></th>
fantasai@566 1645 </tr>
fantasai@566 1646 </thead>
fantasai@566 1647 <tbody>
fantasai@566 1648 <tr>
fantasai@566 1649 <td><a href="#top-left-corner-box-def">top-left-corner</a></td>
fantasai@566 1650 <td>right</td>
fantasai@566 1651 <td>middle</td>
fantasai@566 1652 </tr>
fantasai@566 1653 <tr>
fantasai@566 1654 <td><a href="#top-left-box-def">top-left</a></td>
fantasai@566 1655 <td>left</td>
fantasai@566 1656 <td>middle</td>
fantasai@566 1657 </tr>
fantasai@566 1658 <tr>
fantasai@566 1659 <td><a href="#top-center-box-def">top-center</a></td>
fantasai@566 1660 <td>center</td>
fantasai@566 1661 <td>middle</td>
fantasai@566 1662 </tr>
fantasai@566 1663 <tr>
fantasai@566 1664 <td><a href="#top-right-box-def">top-right</a></td>
fantasai@566 1665 <td>right</td>
fantasai@566 1666 <td>middle</td>
fantasai@566 1667 </tr>
fantasai@566 1668 <tr>
fantasai@566 1669 <td><a href="#top-right-corner-box-def">top-right-corner</a></td>
fantasai@566 1670 <td>left</td>
fantasai@566 1671 <td>middle</td>
fantasai@566 1672 </tr>
fantasai@566 1673 <tr>
fantasai@566 1674 <td><a href="#left-top-box-def">left-top</a></td>
fantasai@566 1675 <td>center</td>
fantasai@566 1676 <td>top</td>
fantasai@566 1677 </tr>
fantasai@566 1678 <tr>
fantasai@566 1679 <td><a href="#left-middle-box-def">left-middle</a></td>
fantasai@566 1680 <td>center</td>
fantasai@566 1681 <td>middle</td>
fantasai@566 1682 </tr>
fantasai@566 1683 <tr>
fantasai@566 1684 <td><a href="#left-bottom-box-def">left-bottom</a></td>
fantasai@566 1685 <td>center</td>
fantasai@566 1686 <td>bottom</td>
fantasai@566 1687 </tr>
fantasai@566 1688 <tr>
fantasai@566 1689 <td><a href="#right-top-box-def">right-top</a></td>
fantasai@566 1690 <td>center</td>
fantasai@566 1691 <td>top</td>
fantasai@566 1692 </tr>
fantasai@566 1693 <tr>
fantasai@566 1694 <td><a href="#right-middle-box-def">right-middle</a></td>
fantasai@566 1695 <td>center</td>
fantasai@566 1696 <td>middle</td>
fantasai@566 1697 </tr>
fantasai@566 1698 <tr>
fantasai@566 1699 <td><a href="#right-bottom-box-def">right-bottom</a></td>
fantasai@566 1700 <td>center</td>
fantasai@566 1701 <td>bottom</td>
fantasai@566 1702 </tr>
fantasai@566 1703 <tr>
fantasai@566 1704 <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a></td>
fantasai@566 1705 <td>right</td>
fantasai@566 1706 <td>middle</td>
fantasai@566 1707 </tr>
fantasai@566 1708 <tr>
fantasai@566 1709 <td><a href="#bottom-left-box-def">bottom-left</a></td>
fantasai@566 1710 <td>left</td>
fantasai@566 1711 <td>middle</td>
fantasai@566 1712 </tr>
fantasai@566 1713 <tr>
fantasai@566 1714 <td><a href="#bottom-center-box-def">bottom-center</a></td>
fantasai@566 1715 <td>center</td>
fantasai@566 1716 <td>middle</td>
fantasai@566 1717 </tr>
fantasai@566 1718 <tr>
fantasai@566 1719 <td><a href="#bottom-right-box-def">bottom-right</a></td>
fantasai@566 1720 <td>right</td>
fantasai@566 1721 <td>middle</td>
fantasai@566 1722 </tr>
fantasai@566 1723 <tr>
fantasai@566 1724 <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a></td>
fantasai@566 1725 <td>left</td>
fantasai@566 1726 <td>middle</td>
fantasai@566 1727 </tr>
fantasai@566 1728 </tbody>
fantasai@566 1729 </table>
fantasai@566 1730
fantasai@566 1731 <div class="example">
fantasai@566 1732
fantasai@566 1733 <p>This example style sheet could be used to create a centered header with the
fantasai@566 1734 current chapter name:</p>
fantasai@566 1735 <pre>body {counter-reset: chapter;}
fantasai@566 1736 div.chapter {counter-increment: chapter;}
fantasai@566 1737 @page {
fantasai@566 1738 margin: 10%;
fantasai@566 1739 @top-center { content: "Chapter" counter(chapter) }
fantasai@566 1740 }
fantasai@566 1741 </pre>
fantasai@566 1742 </div>
fantasai@566 1743
fantasai@3574 1744 <h2 id="page-size">Page Size</h2>
fantasai@213 1745
fantasai@213 1746 <p>People around the world use many different paper sizes. It is a goal of this
fantasai@213 1747 specification that web content should be adaptable to a range of different
fantasai@213 1748 sizes without having to write a specific style sheet for each paper size.</p>
fantasai@213 1749
fantasai@213 1750 <p>However, in some situations it is important that a certain page size achieves a
fantasai@213 1751 certain style. One way to achieve this goal is to utilize the 'size' property,
fantasai@213 1752 which indicates that the document should preferentially be displayed on a
fantasai@213 1753 surface of a certain size; another method is to use Media Queries [[MEDIAQ]]
fantasai@213 1754 which allow different style sheets to be applied to different page sizes.</p>
fantasai@213 1755
fantasai@528 1756 <h3 id="page-size-prop">Page size: the 'size' property</h3>
fantasai@3574 1757
fantasai@213 1758 <table class="propdef" summary="definition of the size property">
fantasai@213 1759 <tr>
fantasai@213 1760 <th>Name:
fantasai@213 1761 <td><dfn id="size">size</dfn>
fantasai@213 1762 <tr>
fantasai@213 1763 <th>Value:
fantasai@1124 1764 <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]
fantasai@213 1765 <tr>
fantasai@213 1766 <th>Initial:
fantasai@213 1767 <td>auto
fantasai@213 1768 <tr>
fantasai@213 1769 <td><em>Applies to:</em>
fantasai@213 1770 <td>page context
fantasai@213 1771 <tr>
fantasai@213 1772 <th>Inherited:
fantasai@213 1773 <td>N/A
fantasai@213 1774 <tr>
fantasai@213 1775 <th>Percentages:
fantasai@213 1776 <td>N/A
fantasai@213 1777 <tr>
fantasai@213 1778 <th>Media:
fantasai@213 1779 <td>paged
fantasai@213 1780 <tr>
fantasai@213 1781 <td><em>Computed value:</em>
fantasai@213 1782 <td>specified value
fantasai@213 1783 </table>
fantasai@213 1784
fantasai@3574 1785 <p>This property specifies the target size and orientation of the
fantasai@5973 1786 <a href="#page-box">page box</a>'s containing block.
fantasai@5973 1787 In the general case, where one page box is rendered onto one <a href="#page-sheet">page sheet</a>,
fantasai@5973 1788 the 'size' property also indicates the size of the destination page sheet.
fantasai@213 1789
fantasai@5987 1790 <p>The size of a page box can either be "absolute" (fixed size) or "scalable"
fantasai@5987 1791 (i.e., fitting available sheet sizes).
fantasai@5987 1792 The first three values in the table below can be used to create scalable page
fantasai@5987 1793 boxes.
fantasai@5987 1794 Other values define a fixed-size page box, and thereby indicate the preferred
fantasai@213 1795 output media size. When possible, output should be rendered on the media size
fantasai@5987 1796 indicated.
fantasai@5987 1797 If the specified size is not available, the rules for
fantasai@5987 1798 <a href="#renderingpages">transposing a page box to a different size</a>
fantasai@5987 1799 apply.</p>
fantasai@217 1800
fantasai@4555 1801 <p>If a <code>size</code> property declaration is qualified by a ''width'',
fantasai@4568 1802 ''height'', ''device-width'', ''device-height'', ''aspect-ratio'',
fantasai@4568 1803 ''device-aspect-ratio'' or ''orientation''
fantasai@4568 1804 media query [[!MEDIAQ]] (or other conditional on the size of the paper), then
fantasai@4555 1805 the declaration must be
fantasai@4568 1806 <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
fantasai@4568 1807 queries do not honor 'size': they assume the paper size that would be chosen
fantasai@4568 1808 if no @page rules were specified.</p>
fantasai@217 1809
fantasai@5987 1810 <p class=issue>It would be useful if media queries could respond at least
fantasai@5987 1811 to sizes specified on an unqualified @page.
fantasai@5987 1812
fantasai@217 1813 <div class="example">
fantasai@217 1814 <p>In the following example
fantasai@217 1815 <pre>
fantasai@217 1816 @page {
fantasai@217 1817 size: 4in 6in;
fantasai@217 1818 }
simon@6956 1819
fantasai@217 1820 @media (max-width: 6in) {
fantasai@217 1821 @page {
fantasai@217 1822 size: letter;
fantasai@217 1823 }
fantasai@217 1824 }
fantasai@217 1825 </pre>
fantasai@217 1826 <p>The second <code>size</code> declaration is ignored, i.e. the specified value
fantasai@217 1827 of the <code>size</code> property is <code>4in 6in</code>.
fantasai@217 1828 </div>
fantasai@217 1829
fantasai@213 1830 <table class="page-sizes">
fantasai@213 1831 <tr>
fantasai@213 1832 <th>Value</th>
fantasai@213 1833 <th>Description</th>
fantasai@213 1834 </tr>
fantasai@213 1835 <tr>
fantasai@213 1836 <td>auto</td>
fantasai@213 1837 <td>The page box will be set to a size and orientation chosen by the UA. In the
fantasai@213 1838 usual case, the page box size and orientation is chosen to match the target
fantasai@213 1839 media sheet.</td>
fantasai@213 1840 </tr>
fantasai@213 1841 <tr>
fantasai@213 1842 <td>landscape</td>
fantasai@213 1843 <td>Specifies that the page's content be printed in landscape orientation. The
fantasai@213 1844 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
fantasai@213 1845 is chosen by the UA.</td>
fantasai@213 1846 </tr>
fantasai@213 1847 <tr>
fantasai@213 1848 <td>portrait</td>
fantasai@213 1849 <td>Specifies that the page's content be printed in portrait orientation. The
fantasai@213 1850 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
fantasai@213 1851 is chosen by the UA.</td>
fantasai@213 1852 </tr>
fantasai@213 1853 <tr>
fantasai@213 1854 <td>&lt;length&gt;</td>
fantasai@213 1855 <td>The page box will be set to the given absolute dimension(s). If only one length
fantasai@213 1856 value is specified, it sets both the width and height of the page box (i.e.,
fantasai@213 1857 the box is a square). If two length values are specified, the first establishes
fantasai@213 1858 the page box width, and the second the page box height. Values in units of
fantasai@213 1859 <span class="css">'em'</span> and <span class="css">'ex'</span> refer to the
fantasai@5988 1860 page context's font. Negative lengths are illegal.</td>
fantasai@213 1861 </tr>
fantasai@213 1862 <tr>
fantasai@213 1863 <td>&lt;page-size&gt;</td>
fantasai@213 1864 <td>A page size can be specified using one of the following media names. This is
fantasai@213 1865 the equivalent of specifying the <span class="css">'&lt;page-size&gt;'</span>
fantasai@213 1866 using length values. The definition of the the media names comes from
fantasai@213 1867 <cite>Media Standardized Names</cite> [[!PWGMSN]].
fantasai@213 1868
fantasai@213 1869 <dl>
fantasai@213 1870
fantasai@213 1871 <dt>A5</dt>
fantasai@213 1872 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>
fantasai@213 1873
fantasai@213 1874 <dt>A4</dt>
simon@6795 1875 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.</dd>
fantasai@213 1876
fantasai@213 1877 <dt>A3</dt>
fantasai@213 1878 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>
fantasai@213 1879
fantasai@213 1880 <dt>B5</dt>
fantasai@213 1881 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>
fantasai@213 1882
fantasai@213 1883 <dt>B4</dt>
fantasai@213 1884 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>
fantasai@213 1885
fantasai@213 1886 <dt>letter</dt>
fantasai@213 1887 <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11
fantasai@213 1888 inches high</dd>
fantasai@213 1889
fantasai@213 1890 <dt>legal</dt>
fantasai@213 1891 <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches
fantasai@213 1892 high.</dd>
fantasai@213 1893
fantasai@213 1894 <dt>ledger</dt>
fantasai@213 1895 <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches
fantasai@213 1896 high.</dd>
fantasai@213 1897 </dl></td>
fantasai@213 1898 </tr>
fantasai@213 1899 </table>
fantasai@213 1900
fantasai@213 1901 <p>The '&lt;page-size&gt;' names can be used in conjunction with 'landscape' or
fantasai@213 1902 'portrait' to indicate both size and orientation.</p>
fantasai@213 1903
fantasai@213 1904 <h4>Some examples:</h4>
fantasai@213 1905
fantasai@213 1906 <div class="example">
fantasai@213 1907 <pre>
fantasai@213 1908 @page {
fantasai@213 1909 size: A4 landscape;
fantasai@213 1910 }
fantasai@213 1911 </pre>
fantasai@213 1912
fantasai@213 1913 <p>The above example sets the width of the page box to be 297mm and the height to
fantasai@213 1914 be 210mm. The page box in this example should be rendered on a page sheet size
fantasai@213 1915 of 210 mm by 297 mm.</p>
fantasai@213 1916 </div>
fantasai@213 1917
fantasai@213 1918 <div class="example">
fantasai@213 1919
fantasai@213 1920 <p>In the following example, the outer edges of the page box will align with the
fantasai@213 1921 page. The percentage value on the <span class="property">'margin'</span>
fantasai@213 1922 property is relative to the page size so if the page sheet dimensions are 210mm
fantasai@213 1923 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page
fantasai@213 1924 borders or padding set in the UA default style sheet, the resulting page area
fantasai@213 1925 is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>
fantasai@213 1926 <pre>
fantasai@213 1927 @page {
fantasai@213 1928 size: auto;/* auto is the initial value */
fantasai@213 1929 margin: 10%;
fantasai@213 1930 }
fantasai@213 1931 </pre>
fantasai@213 1932 </div>
fantasai@213 1933
fantasai@213 1934 <div class="example">
fantasai@213 1935 <pre>
fantasai@213 1936 @page {
fantasai@213 1937 size: 8.5in 11in;/* width height */
fantasai@213 1938 }
fantasai@213 1939 </pre>
fantasai@213 1940
fantasai@213 1941 <p>The above example sets the width of the page box to be 8.5 inches and the
fantasai@213 1942 height to be 11 inches. This indicates that the page sheet size should be
fantasai@213 1943 8.5"x11" and the orientation 'portrait'.</p>
fantasai@213 1944 </div>
fantasai@213 1945
fantasai@213 1946 <h4 id="page-size-media-query">Media Queries</h4>
fantasai@213 1947
fantasai@213 1948 <p>This section is informative.</p>
fantasai@213 1949
fantasai@213 1950 <p>By using Media Queries [[MEDIAQ]], one style sheet can express different
fantasai@213 1951 stylistic preferences for different page sizes. Consider this example:</p>
fantasai@213 1952
fantasai@213 1953 <div class="example" style="font-size: 10pt;">
fantasai@213 1954 <pre>
simon@6956 1955 /* style sheet for "A4" printing */
fantasai@213 1956 @media print and (width: 21cm) and (height: 29.7cm) {
fantasai@213 1957 @page {
fantasai@213 1958 margin: 3cm;
fantasai@213 1959 }
fantasai@213 1960 }
simon@6956 1961
fantasai@213 1962 /* style sheet for "letter" printing */
fantasai@213 1963 @media print and (width: 8.5in) and (height: 11in) {
fantasai@213 1964 @page {
fantasai@213 1965 margin: 1in;
fantasai@213 1966 }
fantasai@213 1967 }
fantasai@213 1968 </pre>
fantasai@213 1969 </div>
fantasai@213 1970
fantasai@213 1971 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
fantasai@213 1972 sheets are given a "1in" page margin.</p>
fantasai@213 1973
fantasai@528 1974 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>
fantasai@213 1975
fantasai@213 1976 <p>If a page box does not match the target page sheet dimensions, the user agent
fantasai@5987 1977 should do one of the following (in order of preference):</p>
fantasai@213 1978
fantasai@213 1979 <ol>
fantasai@213 1980 <li>Render the page box at the indicated size on a larger page sheet.</li>
fantasai@213 1981 <li>Rotate the page box 90° if this will make the page box fit the page sheet.</li>
fantasai@213 1982 <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box
fantasai@213 1983 <em class="RFC2119">should</em> be preserved.)</li>
fantasai@213 1984 <li>Reformat the page contents, including 'spilling' onto other page sheets.</li>
fantasai@213 1985 <li>Clip overflowed content (least preferred).</li>
fantasai@213 1986 </ol>
fantasai@213 1987
fantasai@213 1988 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before
fantasai@213 1989 performing these operations.</p>
fantasai@213 1990
fantasai@528 1991 <h3 id="positioning-page-box">Positioning the page box on the sheet</h3>
fantasai@213 1992
fantasai@213 1993 <p>When the page box is smaller than the page size, the user agent <em class="RFC2119">SHOULD</em> either:</p>
fantasai@213 1994
fantasai@213 1995 <ul>
fantasai@213 1996 <li>center the page box on the sheet since this will align double-sided pages
fantasai@213 1997 and avoid accidental loss of information that is printed near the edge of the
fantasai@213 1998 sheet; or</li>
fantasai@213 1999 <li>position the page box in the upper left corner of the page sheet, as this
fantasai@213 2000 may minimize media consumption.</li>
fantasai@213 2001 </ul>
fantasai@213 2002
fantasai@213 2003 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this
fantasai@213 2004 regard.</p><!-- "Page selector and page context" -->
fantasai@213 2005
simon@7430 2006 <h2 id="page-breaks">
simon@7430 2007 <a id="pg-br-before-after"></a>
simon@7430 2008 <a id="page-break-before"></a>
simon@7430 2009 <a id="page-break-after"></a>
simon@7430 2010 <a id="page-break-inside"></a>
simon@7430 2011 <a id="breaks-inside"></a>
simon@7430 2012 <a id="orphans"></a>
simon@7430 2013 <a id="widows"></a>
simon@7430 2014 <a id="allowed-pg-brk"></a>
simon@7430 2015 <a id="brk-btw-blocks"></a>
simon@7430 2016 <a id="brk-btw-lines"></a>
simon@7430 2017 <a id="brk-end-block"></a>
simon@7430 2018 <a id="forced-pg-brk"></a>
simon@7430 2019 <a id="best-pg-brk"></a>
simon@7430 2020 Page Breaks
simon@7430 2021 </h2>
fantasai@213 2022
simon@7430 2023 <p>
simon@7430 2024 The [[!CSS3-BREAK]] module defines how and where CSS boxes
simon@7430 2025 can be <i>fragmented</i>, including across page breaks.
simon@7430 2026 It defines a few properties that indicate where the user agent
simon@7430 2027 <em class="RFC2119">MAY</em> or <em class="RFC2119">MUST</em> break pages,
simon@7430 2028 and on what page (left or right) the subsequent content resumes.
simon@7430 2029 Each page break ends layout in the current <a href="#page-box">page box</a>
simon@7430 2030 and causes remaining pieces of the document tree to be laid out
simon@7430 2031 in a new page box.
simon@7430 2032 </p>
fantasai@213 2033
fantasai@213 2034 <h3 id="using-named-pages">Using named pages: 'page'</h3>
fantasai@213 2035 <table class="propdef" summary="property definition">
fantasai@213 2036 <tr>
fantasai@213 2037 <th>Name:
fantasai@213 2038 <td><dfn id="page">page</dfn>
fantasai@213 2039 <tr>
fantasai@213 2040 <th>Value:
fantasai@1053 2041 <td>auto | &lt;identifier&gt;
fantasai@213 2042 <tr>
fantasai@213 2043 <th>Initial:
fantasai@576 2044 <td>auto
fantasai@213 2045 <tr>
fantasai@213 2046 <th>Applies to:
fantasai@7436 2047 <td>boxes that create <a href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break points
fantasai@213 2048 <tr>
fantasai@213 2049 <th>Inherited:
fantasai@1053 2050 <td>no (but see prose)
fantasai@213 2051 <tr>
fantasai@213 2052 <th>Percentages:
fantasai@213 2053 <td>N/A
fantasai@213 2054 <tr>
fantasai@213 2055 <th>Media:
fantasai@213 2056 <td>paged
fantasai@213 2057 <tr>
fantasai@213 2058 <th>Computed value:
fantasai@213 2059 <td>specified value
fantasai@213 2060 </table>
simon@6956 2061
fantasai@7436 2062 <p>
fantasai@7436 2063 The 'page' property is used to specify a particular type of page (called a <dfn>named page</dfn>)
fantasai@7436 2064 on which an element <em class="RFC2119">MUST</em> be displayed.
fantasai@7436 2065 If necessary, a <i>forced page break</i> is introduced
fantasai@7436 2066 and a new page generated of the specified type.
fantasai@7436 2067
fantasai@7436 2068 <p>
fantasai@7436 2069 Page names are case-sensitive identifiers.
fantasai@7436 2070 However the ''auto'' value, being a CSS keyword, is
fantasai@7436 2071 <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>.
fantasai@213 2072
fantasai@213 2073 <div class="example">
fantasai@213 2074
fantasai@213 2075 <p>This example will put all tables on a right-hand side landscape page (named
fantasai@213 2076 "rotated"):</p>
fantasai@213 2077 <pre>
fantasai@213 2078 @page rotated { size: landscape }
fantasai@213 2079 table { page: rotated; page-break-before: right }
fantasai@213 2080 </pre>
fantasai@213 2081 </div>
fantasai@213 2082
simon@7430 2083 <p>
simon@7430 2084 The 'page' property works as follows:
simon@7430 2085
fantasai@7436 2086 <ol>
fantasai@7436 2087
fantasai@7436 2088 <li>
fantasai@7436 2089 First, any ''auto'' values are resolved against non-''auto'' ancestors
fantasai@7436 2090 (as specified below).
fantasai@7436 2091
fantasai@7436 2092 <li>
fantasai@7436 2093 Next,
fantasai@7436 2094 a <dfn>preceding 'page' value</dfn> and <dfn>succeeding 'page' value</dfn>
fantasai@7436 2095 is determined for each box
fantasai@7436 2096 as the value (if any) propagated from its last or first child (respectively),
fantasai@7436 2097 else the used value on the box itself.
fantasai@7436 2098 A child propagates its own <i title="preceding page value">preceding</i> or <i>succeeding 'page' value</i>
fantasai@7436 2099 <em>iff</em> the 'page' property applies to it.
fantasai@7436 2100
fantasai@7436 2101 <li>
fantasai@7436 2102 If for any two boxes meeting at a <a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break point,
fantasai@7436 2103 the <i>preceding 'page' value</i> and <i>succeeding 'page' value</i> do not match,
fantasai@7436 2104 then a page break is forced between the two boxes,
fantasai@7436 2105 and content after the break resumes on a page box of the named type.
fantasai@7436 2106 </ol>
fantasai@7436 2107
fantasai@7436 2108 <p>
fantasai@7436 2109 Essentially, the two 'page' values compared are those from the deepest boxes
fantasai@7436 2110 meeting at the class 1 break point,
fantasai@7436 2111 ignoring any subtrees rooted by boxes to which the 'page' property does not apply.
fantasai@7432 2112
simon@7430 2113 <p>
fantasai@7432 2114 The 'page' property does not inherit.
fantasai@7432 2115 However, if the 'page' value on an element is ''auto'',
fantasai@7436 2116 then its used value is the value specified on its nearest ancestor with a non-auto value.
fantasai@7436 2117 When specified on the root element, the effective name is the empty string.
fantasai@1053 2118
fantasai@7436 2119 <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
fantasai@213 2120
fantasai@7432 2121 <p>
fantasai@7436 2122 Because a previous version of this specification indicated that the 'page' property is inherited,
fantasai@7436 2123 an implementation that inherits the 'page' property
fantasai@7436 2124 and treats ''auto'' as always naming the empty string
fantasai@7436 2125 remains conformant to CSS3 Paged Media.
fantasai@7436 2126 Therefore authors should not explicitly specify the ''auto'' value
fantasai@7436 2127 on a descendant of an element with a non-''auto'' value,
fantasai@7436 2128 as the resulting behavior will be unpredictable.
fantasai@7436 2129
fantasai@7436 2130 <p>See [[!CSS3-BREAK]] for additional details on page breaks.
fantasai@1054 2131
fantasai@213 2132 <div class="example">
fantasai@213 2133
fantasai@213 2134 <p>In this example, the two tables are rendered on landscape pages (indeed, on the
fantasai@213 2135 same page, if they fit). The page type "narrow" is used for the &lt;p&gt; after
fantasai@213 2136 the second table, as the page properties for the table element are no longer in
fantasai@213 2137 effect:</p>
fantasai@213 2138 <pre>
fantasai@213 2139 @page narrow { size: 9cm 18cm }
fantasai@213 2140 @page rotated { size: landscape }
fantasai@213 2141 div { page: narrow }
fantasai@213 2142 table { page: rotated }
fantasai@213 2143 </pre>with this document:
fantasai@213 2144 <pre>
fantasai@213 2145 &lt;div&gt;
fantasai@213 2146 &lt;table&gt;...&lt;/table&gt;
fantasai@213 2147 &lt;table&gt;...&lt;/table&gt;
fantasai@213 2148 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;
fantasai@213 2149 &lt;/div&gt;
fantasai@213 2150 </pre>
fantasai@213 2151 </div>
fantasai@213 2152
fantasai@6813 2153 <div class="example">
fantasai@6813 2154 <p>In Japanese documents, sometimes different parts of a single document
fantasai@6813 2155 will have different <i lang="ja-Latn">kihon hanmen</i>. [[JLREQ]]
fantasai@6813 2156 The 'page' property, together with ''@page'' rules specifying different page widths,
fantasai@6813 2157 can accomodate this type of layout:
fantasai@6813 2158 <pre>
fantasai@6813 2159 &lt;!DOCTYPE html>
fantasai@6813 2160 &lt;html lang="ja">
fantasai@6813 2161 &lt;style>
fantasai@6813 2162 html { writing-mode: vertical-rl;
fantasai@6813 2163 line-height: 1.6; }
fantasai@6813 2164 .main { page: main;
fantasai@6813 2165 columns: 2; column-gap: 1rem; }
fantasai@6813 2166 .index { page: index;
fantasai@6813 2167 columns: 3; column-gap: 1rem; }
fantasai@6813 2168 @page { margin: auto; /* center kihon hanmen on page */
fantasai@6813 2169 width: 40rem; } /* 1.6 &times; 25 lines */
fantasai@6813 2170 @page main { height: 61rem; } /* 2 &times; 30 chars + 1 &times; gap */
fantasai@6813 2171 @page index { height: 62rem; } /* 3 &times; 20 chars + 2 &times; gap */
fantasai@6813 2172 &lt;/style>
fantasai@6813 2173 &lt;section class="main"> ... &lt;/section>
fantasai@6813 2174 &lt;section class="index"> ... &lt;/section>
fantasai@6813 2175 &lt;/html>
fantasai@6813 2176 </pre>
fantasai@6813 2177 </div>
fantasai@6813 2178
fantasai@213 2179
fantasai@566 2180 <h2 id="image-properties">Image Properties</h2>
fantasai@213 2181
simon@7428 2182 <p class="note">This section has been moved to [[CSS3-IMAGES]].</p>
fantasai@213 2183
fantasai@563 2184 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>
fantasai@213 2185
fantasai@528 2186 <h3 class="no-num">Properties that apply within the page context</h3>
fantasai@213 2187
fantasai@562 2188 <p>The following CSS 2.1 [[!CSS21]] properties apply to the page box.
fantasai@563 2189 If a conforming user agent supports any of these properties on block
fantasai@563 2190 boxes, then it must also support that property for the page box.</p>
fantasai@213 2191
fantasai@213 2192 <table class="property-list">
fantasai@561 2193 <tbody>
fantasai@5976 2194 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
fantasai@563 2195 <td>direction
fantasai@563 2196 <tbody>
fantasai@5976 2197 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
fantasai@561 2198 <td>background-color
fantasai@561 2199 <tr><td>background-image
fantasai@561 2200 <tr><td>background-repeat
fantasai@561 2201 <tr><td>background-attachment
fantasai@561 2202 <tr><td>background-position
fantasai@561 2203 <tr><td>background
fantasai@561 2204 <tbody>
fantasai@5976 2205 <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
fantasai@561 2206 <td>border-top-width
fantasai@561 2207 <tr><td>border-right-width
fantasai@561 2208 <tr><td>border-bottom-width
fantasai@561 2209 <tr><td>border-left-width
fantasai@561 2210 <tr><td>border-width
fantasai@561 2211 <tr><td>border-top-color
fantasai@561 2212 <tr><td>border-right-color
fantasai@561 2213 <tr><td>border-bottom-color
fantasai@561 2214 <tr><td>border-left-color
fantasai@561 2215 <tr><td>border-color
fantasai@561 2216 <tr><td>border-top-style
fantasai@561 2217 <tr><td>border-right-style
fantasai@561 2218 <tr><td>border-bottom-style
fantasai@561 2219 <tr><td>border-left-style
fantasai@561 2220 <tr><td>border-short-style
fantasai@561 2221 <tr><td>border-top
fantasai@561 2222 <tr><td>border-right
fantasai@561 2223 <tr><td>border-bottom
fantasai@561 2224 <tr><td>border-left
fantasai@561 2225 <tr><td>border
fantasai@561 2226 <tbody>
fantasai@5976 2227 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
fantasai@561 2228 <td>counter-reset
fantasai@561 2229 <tr><td>counter-increment
fantasai@561 2230 <tbody>
fantasai@5976 2231 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
fantasai@561 2232 <tbody>
fantasai@5976 2233 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
fantasai@561 2234 <td>font-family
fantasai@563 2235 <tr><td>font-size
fantasai@561 2236 <tr><td>font-style
fantasai@561 2237 <tr><td>font-variant
fantasai@561 2238 <tr><td>font-weight
fantasai@561 2239 <tr><td>font
fantasai@561 2240 <tbody>
fantasai@5976 2241 <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>
fantasai@3574 2242 <td>height
fantasai@3574 2243 <tr><td>min-height
fantasai@3574 2244 <tr><td>max-height
fantasai@3574 2245 <tbody>
fantasai@5976 2246 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
fantasai@561 2247 <tbody>
fantasai@5976 2248 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
fantasai@561 2249 <td>margin-top
fantasai@561 2250 <tr><td>margin-right
fantasai@561 2251 <tr><td>margin-bottom
fantasai@561 2252 <tr><td>margin-left
fantasai@561 2253 <tr><td>margin
fantasai@561 2254 <tbody>
fantasai@5976 2255 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
fantasai@563 2256 <td>outline-width
fantasai@563 2257 <tr><td>outline-style
fantasai@563 2258 <tr><td>outline-color
fantasai@563 2259 <tr><td>outline
fantasai@563 2260 <tbody>
fantasai@5976 2261 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
fantasai@561 2262 <td>padding-top
fantasai@561 2263 <tr><td>padding-right
fantasai@561 2264 <tr><td>padding-bottom
fantasai@561 2265 <tr><td>padding-left
fantasai@561 2266 <tr><td>padding
fantasai@561 2267 <tbody>
fantasai@5976 2268 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
fantasai@561 2269 <tbody>
fantasai@5976 2270 <tr><td rowspan="8"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
fantasai@563 2271 <td>direction
fantasai@563 2272 <tr><td>letter-spacing
fantasai@561 2273 <tr><td>text-align
fantasai@561 2274 <tr><td>text-decoration
fantasai@563 2275 <tr><td>text-indent
fantasai@561 2276 <tr><td>text-transform
fantasai@561 2277 <tr><td>white-space
fantasai@563 2278 <tr><td>word-spacing
fantasai@561 2279 <tbody>
fantasai@5976 2280 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
fantasai@3574 2281 <tbody>
fantasai@5976 2282 <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>
fantasai@3574 2283 <td>width
fantasai@3574 2284 <tr><td>min-width
fantasai@3574 2285 <tr><td>max-width
fantasai@213 2286 </table>
fantasai@213 2287
simon@7289 2288 <p>Properties that apply to the page-margin boxes can also be set within
fantasai@562 2289 the page context: if inheritable or explicitly inherited (with the
simon@7289 2290 <code>inherit</code> keyword in the margin context), they will inherit
simon@7289 2291 to the page-margin boxes.</p>
fantasai@562 2292
fantasai@528 2293 <h3 class="no-num">Properties that apply within the margin contexts</h3>
fantasai@213 2294
simon@7289 2295 <p>The following CSS 2.1 [[!CSS21]] properties apply to page-margin boxes.
fantasai@563 2296 If a conforming user agents supports any of these properties on block
simon@7289 2297 boxes, then it must also support that property for page-margin boxes (except
simon@7289 2298 for <code>z-index</code>, which is optional for page-margin boxes).</p>
fantasai@562 2299
fantasai@213 2300 <table class="property-list">
fantasai@561 2301 <tbody>
fantasai@5976 2302 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
fantasai@563 2303 <td>direction
fantasai@563 2304 <tr><td>unicode-bidi
fantasai@563 2305 <tbody>
fantasai@5976 2306 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
fantasai@561 2307 <td>background-color
fantasai@561 2308 <tr><td>background-image
fantasai@561 2309 <tr><td>background-repeat
fantasai@561 2310 <tr><td>background-attachment
fantasai@561 2311 <tr><td>background-position
fantasai@561 2312 <tr><td>background
fantasai@561 2313 <tbody>
fantasai@5976 2314 <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
fantasai@561 2315 <td>border-top-width
fantasai@561 2316 <tr><td>border-right-width
fantasai@561 2317 <tr><td>border-bottom-width
fantasai@561 2318 <tr><td>border-left-width
fantasai@561 2319 <tr><td>border-width
fantasai@561 2320 <tr><td>border-top-color
fantasai@561 2321 <tr><td>border-right-color
fantasai@561 2322 <tr><td>border-bottom-color
fantasai@561 2323 <tr><td>border-left-color
fantasai@561 2324 <tr><td>border-color
fantasai@561 2325 <tr><td>border-top-style
fantasai@561 2326 <tr><td>border-right-style
fantasai@561 2327 <tr><td>border-bottom-style
fantasai@561 2328 <tr><td>border-left-style
fantasai@561 2329 <tr><td>border-short-style
fantasai@561 2330 <tr><td>border-top
fantasai@561 2331 <tr><td>border-right
fantasai@561 2332 <tr><td>border-bottom
fantasai@561 2333 <tr><td>border-left
fantasai@561 2334 <tr><td>border
fantasai@561 2335 <tbody>
fantasai@5976 2336 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
fantasai@561 2337 <td>counter-reset
fantasai@561 2338 <tr><td>counter-increment
fantasai@561 2339 <tbody>
fantasai@561 2340 <tr><td colspan="2"><a href="">content</a>
fantasai@561 2341 <tbody>
fantasai@5976 2342 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
fantasai@561 2343 <tbody>
fantasai@5976 2344 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
fantasai@561 2345 <td>font-family
fantasai@563 2346 <tr><td>font-size
fantasai@561 2347 <tr><td>font-style
fantasai@561 2348 <tr><td>font-variant
fantasai@561 2349 <tr><td>font-weight
fantasai@561 2350 <tr><td>font
fantasai@561 2351 <tbody>
fantasai@5976 2352 <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>
fantasai@563 2353 <td>height
fantasai@563 2354 <tr><td>min-height
fantasai@563 2355 <tr><td>max-height
fantasai@561 2356 <tbody>
fantasai@5976 2357 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
fantasai@561 2358 <tbody>
fantasai@5976 2359 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
fantasai@561 2360 <td>margin-top
fantasai@561 2361 <tr><td>margin-right
fantasai@561 2362 <tr><td>margin-bottom
fantasai@561 2363 <tr><td>margin-left
fantasai@561 2364 <tr><td>margin
fantasai@561 2365 <tbody>
fantasai@5976 2366 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
fantasai@563 2367 <td>outline-width
fantasai@563 2368 <tr><td>outline-style
fantasai@563 2369 <tr><td>outline-color
fantasai@563 2370 <tr><td>outline
fantasai@563 2371 <tbody>
fantasai@5976 2372 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
fantasai@563 2373 <tbody>
fantasai@5976 2374 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
fantasai@561 2375 <td>padding-top
fantasai@561 2376 <tr><td>padding-right
fantasai@561 2377 <tr><td>padding-bottom
fantasai@561 2378 <tr><td>padding-left
fantasai@561 2379 <tr><td>padding
fantasai@561 2380 <tbody>
fantasai@5976 2381 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
fantasai@563 2382 <tbody>
fantasai@5976 2383 <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
fantasai@563 2384 <td>letter-spacing
fantasai@561 2385 <tr><td>text-align
fantasai@561 2386 <tr><td>text-decoration
fantasai@563 2387 <tr><td>text-indent
fantasai@561 2388 <tr><td>text-transform
fantasai@561 2389 <tr><td>white-space
fantasai@563 2390 <tr><td>word-spacing
fantasai@563 2391 <tbody>
fantasai@5976 2392 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
fantasai@561 2393 <tbody>
fantasai@5976 2394 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
fantasai@561 2395 <tbody>
fantasai@5976 2396 <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>
fantasai@563 2397 <td>width
fantasai@563 2398 <tr><td>min-width
fantasai@563 2399 <tr><td>max-width
fantasai@561 2400 <tbody>
fantasai@5976 2401 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
fantasai@213 2402 </table>
fantasai@213 2403
fantasai@552 2404 <h2 class="no-num" id="transfer-possibilities">Appendix B: Transfer Possibilities</h2>
fantasai@552 2405
fantasai@552 2406 <p>Often, but not always, the page box has a one-to-one correspondence to the
fantasai@552 2407 physical surface onto which the document is ultimately rendered. The CSS3 page
fantasai@552 2408 model specifies formatting within the page box, but it is the user agent's
fantasai@552 2409 responsibility to transfer the page box to the sheet. Some user agent transfer
fantasai@552 2410 possibilities that are not addressed by CSS3 include:</p>
fantasai@552 2411
fantasai@552 2412 <ul id="complex-usecases">
fantasai@552 2413 <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>
fantasai@552 2414 <li>Transferring two page boxes to the front and back surfaces of the same
fantasai@552 2415 sheet (e.g. double-sided printing);</li>
fantasai@552 2416 <li>Transferring N (small) page boxes to one sheet (called "N-up");</li>
fantasai@552 2417 <li>Transferring one (large) page box to N x M sheets (called "tiling");</li>
fantasai@552 2418 <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on
fantasai@552 2419 a sheet, which, when folded and trimmed like a book, appear in their proper
fantasai@552 2420 sequence;</li>
fantasai@552 2421 <li>Printing one document to multiple output trays;</li>
fantasai@552 2422 <li>Generating files containing print instructions.</li>
fantasai@552 2423 </ul>
fantasai@552 2424
fantasai@213 2425 <h2 class="no-num" id="references">References</h2>
fantasai@213 2426
fantasai@213 2427 <h3 class="no-num" id="normative-references">Normative References</h3><!--normative-->
fantasai@213 2428
fantasai@213 2429 <h3 class="no-num" id="informative-references">Informative References</h3><!--informative-->
fantasai@213 2430 </div>
fantasai@213 2431 </div>
fantasai@213 2432 </body>
fantasai@213 2433 </html>

mercurial