css3-page/Overview.html

Mon, 25 Feb 2013 01:11:04 +0100

author
Simon Sapin <simon.sapin@exyr.org>
date
Mon, 25 Feb 2013 01:11:04 +0100
changeset 7573
76b534d18604
parent 7572
16a0d63c8707
child 7607
0de0c811bc62
permissions
-rwxr-xr-x

[css3-page] Deduplicate and clarify Page Properties and related appendix.

fantasai@213 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
fantasai@213 2
fantasai@213 3 <html lang=en>
simon@6795 4 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
fantasai@215 5 <title> CSS Paged Media Module Level 3</title>
simon@6795 6
simon@6957 7 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
simon@6795 8 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
simon@6957 9 rel=dcterms.rights>
simon@6957 10 <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
simon@6957 11 <meta content=text name=dcterms.type>
simon@7573 12 <meta content=2013-02-25 name=dcterms.issued>
simon@6957 13 <meta content="Melinda Grant" name=dcterms.creator>
simon@6957 14 <meta content="Håkon Wium Lie" name=dcterms.creator>
simon@6957 15 <meta content="Elika J. Etemad" name=dcterms.creator>
simon@7067 16 <meta content="Simon Sapin" name=dcterms.creator>
simon@6957 17 <meta content=W3C name=dcterms.publisher>
simon@7491 18 <meta content="http://dev.w3.org/csswg/css3-page/" name=dcterms.identifier>
fantasai@213 19 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
fantasai@213 20 <link href="../default.css" rel=stylesheet type="text/css">
fantasai@213 21 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
simon@6795 22 type="text/css">
fantasai@215 23 <style type="text/css">
fantasai@215 24 .keyword { font-weight:bold }
fantasai@213 25 .equation { padding: 2% }
fantasai@213 26 table.equation {text-align:center}
fantasai@213 27 td, th { vertical-align: top }
fantasai@213 28 pre { font-size: 1em; }
simon@6957 29
simon@6957 30 #margin-values { border-collapse: collapse; }
simon@6957 31 #margin-values td,
simon@6957 32 #margin-values th
simon@6957 33 {
simon@6957 34 padding: 0.2em;
fantasai@213 35 border: thin solid black;
fantasai@213 36 }
fantasai@213 37
fantasai@213 38 .property-list
fantasai@213 39 {
fantasai@213 40 border: 1px solid black;
fantasai@213 41 padding: .2em;
fantasai@213 42 margin-top: 2em;
fantasai@213 43 }
simon@6957 44
fantasai@213 45 .property-list td
fantasai@213 46 {
fantasai@213 47 border: 1px solid black;
fantasai@213 48 padding: .1em;
fantasai@213 49 }
fantasai@213 50
simon@6957 51 .editorial
simon@6957 52 {
simon@6957 53 display: block;
fantasai@213 54 font-family: arial, helvetica, sans-serif;
fantasai@213 55 font-size: 80%;
simon@6957 56 margin-left: .5in;
simon@6957 57 margin-right: 1in ;
fantasai@213 58 padding: 0.125in;
fantasai@213 59 background: #FFFFDD ;
fantasai@213 60 }
simon@6957 61
fantasai@213 62 .editorial:after { content: "Ed."}
simon@6957 63 .RFC2119
simon@6957 64 {
simon@6957 65 text-transform: lowercase;
simon@6957 66 font-style: italic
fantasai@213 67 }
simon@6957 68
simon@6957 69 em em.RFC2119
fantasai@213 70 {
simon@6957 71 text-transform: lowercase;
simon@6957 72 font-style: normal
simon@6957 73 }
simon@6957 74
simon@6957 75 table.page-sizes
simon@6957 76 {
simon@6957 77 border: thin solid;
fantasai@213 78 margin-top: 1.5em;
fantasai@213 79 }
simon@6957 80 table.page-sizes td
simon@6957 81 {
simon@6957 82 border: thin solid;
fantasai@213 83 padding: .5em;
fantasai@213 84 }
simon@6957 85 table.page-sizes th
simon@6957 86 {
simon@6957 87 border: thin solid;
simon@6957 88 padding: .5em;
fantasai@213 89 background: #ffffaa;
fantasai@213 90 }
fantasai@213 91
fantasai@211 92 </style>
fantasai@114 93
tantek@7536 94 <body class=h-entry>
fantasai@114 95 <div>
fantasai@213 96 <div class=head> <!--begin-logo-->
fantasai@213 97 <p><a href="http://www.w3.org/"><img alt=W3C height=48
fantasai@657 98 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
fantasai@213 99
tantek@7536 100 <h1 class=p-name>CSS Paged Media Module Level 3</h1>
tantek@7536 101
tantek@7536 102 <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
simon@7573 103 class=dt-updated><span class=value-title title=20130225>25 February
tantek@7536 104 2013</span></span></h2>
fantasai@114 105
fantasai@114 106 <dl>
fantasai@213 107 <dt>This version:
fantasai@213 108
tantek@7536 109 <dd><a class=u-url
fantasai@213 110 href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
simon@7573 111 <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130225</a></dd> -->
fantasai@213 112
fantasai@213 113 <dt>Latest version:
fantasai@213 114
fantasai@213 115 <dd><a
fantasai@211 116 href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a>
fantasai@213 117
fantasai@213 118 <dt>Previous version:
fantasai@213 119
simon@7552 120 <dd><a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/"
simon@7552 121 rel=previous>http://www.w3.org/TR/2006/WD-css3-page-20061010/</a>
tantek@7536 122
tantek@7536 123 <dt>Issue Tracking:
tantek@7536 124
tantek@7536 125 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/13"
tantek@7536 126 rel=issues>http://www.w3.org/Style/CSS/Tracker/products/13</a>
tantek@7536 127 <!-- or use the wiki:
tantek@7536 128 <dd><a rel="issues" href="http://wiki.csswg.org/spec/css3-page"
tantek@7536 129 >http://wiki.csswg.org/spec/css3-page</a></dd>
tantek@7536 130 -->
tantek@7536 131
tantek@7536 132 <dt>Feedback:
tantek@7536 133
fantasai@213 134 <dd><a
tantek@7536 135 href="mailto:www-style@w3.org?subject=%5Bcss3-page%5D%20feedback">www-style@w3.org</a>
tantek@7536 136 with subject line “<kbd>[css3-page] <var>… message topic
tantek@7536 137 …</var></kbd>” (<a
tantek@7536 138 href="http://lists.w3.org/Archives/Public/www-style/"
tantek@7536 139 rel=discussion>archives</a>)
fantasai@213 140
fantasai@213 141 <dt>Editors:
fantasai@213 142
tantek@7536 143 <dd class="p-author h-card vcard"> <span class="p-name fn">Melinda
tantek@7536 144 Grant</span>, <span class="p-org org">Hewlett-Packard</span>
tantek@7536 145
tantek@7536 146 <dd class="p-author h-card vcard"> <span class="p-name fn">Håkon Wium
tantek@7536 147 Lie</span>, <span class="p-org org">Opera Software</span>
tantek@7536 148
tantek@7536 149 <dd class="p-author h-card vcard"> <span class="p-name fn">Elika J.
tantek@7536 150 Etemad</span>, <span class="p-org org">Mozilla</span>
tantek@7536 151
tantek@7536 152 <dd class="p-author h-card vcard"> <span class="p-name fn">Simon
tantek@7536 153 Sapin</span>, <span class="p-org org">Kozea</span>
fantasai@114 154 </dl>
fantasai@114 155 <!--begin-copyright-->
fantasai@213 156 <p class=copyright><a
fantasai@114 157 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
simon@7289 158 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
fantasai@5967 159 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
fantasai@5967 160 href="http://www.csail.mit.edu/"><abbr
fantasai@5967 161 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
fantasai@5967 162 href="http://www.ercim.eu/"><abbr
fantasai@5967 163 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
simon@7289 164 <a href="http://www.keio.ac.jp/">Keio</a>, <a
simon@7289 165 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
fantasai@114 166 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
fantasai@114 167 <a
fantasai@114 168 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
fantasai@114 169 and <a
fantasai@114 170 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
fantasai@114 171 use</a> rules apply.</p>
fantasai@114 172 <!--end-copyright--></div>
fantasai@114 173
fantasai@213 174 <hr title="Separator for header">
fantasai@213 175
fantasai@213 176 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
fantasai@213 177
tantek@7536 178 <p> <span class=p-summary> This module describes the page model that
tantek@7536 179 partitions a flow into pages. It builds on the <a
tantek@7536 180 href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> and
tantek@7536 181 introduces and defines the page model and paged media. It adds
tantek@7536 182 functionality for pagination, page margins, page size and orientation,
tantek@7536 183 headers and footers, widows and orphans, and image orientation. Finally
tantek@7536 184 it extends generated content to enable page numbering and running headers
tantek@7536 185 / footers. </span></p>
fantasai@114 186 <!-- "Status of this document" -->
fantasai@213 187 <h2 class="no-num no-toc" id=status>Status of this Document</h2>
fantasai@114 188 <!--begin-status-->
fantasai@213 189 <p>This is a public copy of the editors' draft. It is provided for
fantasai@517 190 discussion only and may change at any moment. Its publication here does
fantasai@517 191 not imply endorsement of its contents by W3C. Don't cite this document
simon@6795 192 other than as work in progress.
fantasai@517 193
fantasai@517 194 <p>The (<a
fantasai@517 195 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
fantasai@517 196 public mailing list <a
fantasai@1626 197 href="mailto:www-style@w3.org?Subject=%5Bcss3-page%5D%20PUT%20SUBJECT%20HERE">
fantasai@1626 198 www-style@w3.org</a> (see <a
fantasai@517 199 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
fantasai@517 200 discussion of this specification. When sending e-mail, please put the
fantasai@5967 201 text “css3-page” in the subject, preferably like this:
simon@6795 202 “[<!---->css3-page<!---->] <em>…summary of comment…</em>”
fantasai@517 203
fantasai@517 204 <p>This document was produced by the <a href="/Style/CSS/members">CSS
fantasai@657 205 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
fantasai@517 206
fantasai@517 207 <p>This document was produced by a group operating under the <a
fantasai@517 208 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
fantasai@517 209 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
fantasai@517 210 rel=disclosure>public list of any patent disclosures</a> made in
fantasai@517 211 connection with the deliverables of the group; that page also includes
fantasai@517 212 instructions for disclosing a patent. An individual who has actual
fantasai@517 213 knowledge of a patent which the individual believes contains <a
fantasai@517 214 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
fantasai@517 215 Claim(s)</a> must disclose the information in accordance with <a
fantasai@517 216 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of
fantasai@517 217 the W3C Patent Policy</a>.</p>
fantasai@517 218 <!--end-status-->
fantasai@3574 219 <p>This document contains the <abbr
fantasai@3574 220 title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
fantasai@3574 221 Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
simon@7573 222 of 25 February 2013. The Last Call period ends on <span
simon@6795 223 class=fudge>TBD</span>.
fantasai@2094 224
fantasai@2094 225 <p>Expected next revision to this document is another LCWD, due to the
simon@7289 226 substantive changes to page-margin box sizing and other areas that are
simon@7289 227 now specified with more precision.
fantasai@211 228
fantasai@1090 229 <p>The <a href="lc2_issues.htm">Disposition of Comments</a> document
fantasai@211 230 contains the current issues list and responses to input received during
simon@6795 231 this Last Call period.
fantasai@211 232
fantasai@213 233 <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
fantasai@114 234 <!--begin-toc-->
fantasai@213 235 <ul class=toc>
fantasai@1626 236 <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
fantasai@1626 237
fantasai@1626 238 <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>
fantasai@1626 239
fantasai@1626 240 <li><a href="#page-terms"><span class=secno>3. </span>Page
fantasai@1626 241 Terminology</a>
fantasai@1626 242
fantasai@1626 243 <li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page
fantasai@523 244 Model</a>
fantasai@213 245 <ul class=toc>
fantasai@6061 246 <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
fantasai@6061 247 and Painting Order</a>
fantasai@6061 248
fantasai@6061 249 <li><a href="#content-outside-box"><span class=secno>4.2.
fantasai@1626 250 </span>Content outside the page box</a>
fantasai@1626 251
fantasai@1626 252 <li><a href="#progression"><span class=secno>4.3. </span>Page
fantasai@528 253 Progression</a>
fantasai@528 254 </ul>
fantasai@528 255
fantasai@1626 256 <li><a href="#page-selector-and-context"><span class=secno>5. </span>Page
fantasai@528 257 Selectors and the Page Context</a>
fantasai@528 258 <ul class=toc>
fantasai@1626 259 <li><a href="#at-page-rule"><span class=secno>5.1. </span>The @page
fantasai@568 260 Rule</a>
fantasai@568 261
simon@7554 262 <li><a href="#page-selectors"><span class=secno>5.2. </span>Page
simon@7554 263 selectors</a>
simon@7554 264 <ul class=toc>
simon@7554 265 <li><a href="#pseudo-classes"><span class=secno>5.2.1. </span> Page
simon@7554 266 pseudo-classes: :left, :right, :first, and :blank </a>
simon@7554 267 </ul>
fantasai@566 268
fantasai@1626 269 <li><a href="#syntax-page-selector"><span class=secno>5.3. </span>@page
fantasai@566 270 rule grammar</a>
fantasai@566 271
fantasai@1626 272 <li><a href="#cascading-and-page-context"><span class=secno>5.4.
fantasai@528 273 </span>Cascading in the page context</a>
fantasai@528 274 </ul>
fantasai@528 275
simon@7289 276 <li><a href="#margin-boxes"><span class=secno>6. </span>Page-Margin
simon@7289 277 Boxes</a>
fantasai@566 278 <ul class=toc>
fantasai@1626 279 <li><a href="#margin-at-rules"><span class=secno>6.1. </span>At-rules
simon@7289 280 for page-margin boxes</a>
fantasai@566 281
fantasai@1626 282 <li><a href="#populating-margin-boxes"><span class=secno>6.2.
simon@7289 283 </span>Populating page-margin boxes</a>
fantasai@566 284
fantasai@7449 285 <li><a href="#margin-dimension"><span class=secno>6.3. </span>Computing
fantasai@7449 286 Page-margin Box Dimensions</a>
fantasai@566 287 <ul class=toc>
fantasai@7449 288 <li><a href="#margin-box-terms"><span class=secno>6.3.1.
simon@7289 289 </span>Page-Margin Box Layout Terminology</a>
fantasai@566 290
fantasai@7449 291 <li><a href="#variable-sizing"><span class=secno>6.3.2. </span>
fantasai@7448 292 Page-Margin Box Variable Dimension Computation Rules</a>
simon@7053 293 <ul class=toc>
fantasai@7449 294 <li><a href="#variable-auto-margins"><span class=secno>6.3.2.1.
fantasai@7449 295 </span>Margins</a>
fantasai@7449 296
fantasai@7449 297 <li><a href="#variable-auto-sizing"><span class=secno>6.3.2.2.
fantasai@7449 298 </span>Resolving ‘<code class=css>auto</code>’ widths</a>
fantasai@7449 299
fantasai@7449 300 <li><a href="#variable-minmax"><span class=secno>6.3.2.3.
fantasai@7449 301 </span>Handling ‘<code class=property>min-width</code>’ and
fantasai@7449 302 ‘<code class=property>max-width</code>’</a>
fantasai@7449 303
fantasai@7449 304 <li><a href="#variable-position"><span class=secno>6.3.2.4.
fantasai@7449 305 </span>Positioning</a>
fantasai@7449 306
fantasai@7449 307 <li><a href="#variable-mapping"><span class=secno>6.3.2.5.
fantasai@7449 308 </span>Boxes on other sides</a>
simon@7053 309 </ul>
fantasai@1626 310
fantasai@7449 311 <li><a href="#fixed-sizing"><span class=secno>6.3.3.
simon@7289 312 </span>Page-Margin Box Fixed Dimension Computation Rules</a>
fantasai@566 313 </ul>
fantasai@566 314
simon@7289 315 <li><a href="#margin-box-ex"><span class=secno>6.4. </span>Page-margin
simon@7289 316 box examples</a>
fantasai@566 317 </ul>
fantasai@566 318
fantasai@1626 319 <li><a href="#page-properties"><span class=secno>7. </span>Page
fantasai@528 320 Properties</a>
fantasai@528 321 <ul class=toc>
fantasai@1626 322 <li><a href="#page-based-counters"><span class=secno>7.1.
fantasai@566 323 </span>Page-based counters</a>
fantasai@566 324
fantasai@1626 325 <li><a href="#margin-text-alignment"><span class=secno>7.2.
simon@7289 326 </span>Page-margin boxes and default values</a>
fantasai@566 327 </ul>
fantasai@566 328
fantasai@3574 329 <li><a href="#page-size"><span class=secno>8. </span>Page Size</a>
fantasai@566 330 <ul class=toc>
fantasai@1626 331 <li><a href="#page-size-prop"><span class=secno>8.1. </span>Page size:
fantasai@5967 332 the ‘<code class=property>size</code>’ property</a>
fantasai@213 333 <ul class=toc>
fantasai@1626 334 <li><a href="#some-examples"><span class=secno>8.1.1. </span>Some
fantasai@213 335 examples:</a>
fantasai@213 336
fantasai@1626 337 <li><a href="#page-size-media-query"><span class=secno>8.1.2.
fantasai@213 338 </span>Media Queries</a>
fantasai@114 339 </ul>
fantasai@213 340
fantasai@1626 341 <li><a href="#renderingpages"><span class=secno>8.2. </span>Rendering
fantasai@528 342 page boxes that do not fit a page sheet</a>
fantasai@528 343
fantasai@1626 344 <li><a href="#positioning-page-box"><span class=secno>8.3.
fantasai@528 345 </span>Positioning the page box on the sheet</a>
fantasai@114 346 </ul>
fantasai@213 347
simon@7430 348 <li><a href="#page-breaks"><span class=secno>9. </span> Page Breaks </a>
fantasai@213 349 <ul class=toc>
simon@7430 350 <li><a href="#using-named-pages"><span class=secno>9.1. </span>Using
fantasai@5967 351 named pages: ‘<code class=property>page</code>’</a>
fantasai@114 352 </ul>
fantasai@213 353
fantasai@1626 354 <li><a href="#image-properties"><span class=secno>10. </span>Image
fantasai@528 355 Properties</a>
fantasai@528 356
fantasai@563 357 <li class=no-num><a href="#properties-list">Appendix A: Applicable CSS2.1
fantasai@528 358 Properties</a>
fantasai@528 359 <ul class=toc>
simon@7573 360 <li class=no-num><a href="#page-property-list"> CSS 2.1 Properties that
simon@7573 361 apply within the page context</a>
simon@7573 362
simon@7573 363 <li class=no-num><a href="#margin-property-list"> CSS 2.1 properties
simon@7573 364 that apply within the margin contexts</a>
fantasai@114 365 </ul>
fantasai@213 366
fantasai@552 367 <li class=no-num><a href="#transfer-possibilities">Appendix B: Transfer
fantasai@552 368 Possibilities</a>
fantasai@552 369
simon@7493 370 <li class=no-num><a href="#changes">Changes</a>
simon@7493 371
fantasai@213 372 <li class=no-num><a href="#references">References</a>
fantasai@213 373 <ul class=toc>
fantasai@213 374 <li class=no-num><a href="#normative-references">Normative
fantasai@213 375 References</a>
fantasai@213 376
fantasai@213 377 <li class=no-num><a href="#informative-references">Informative
fantasai@213 378 References</a>
fantasai@114 379 </ul>
fantasai@114 380 </ul>
fantasai@114 381 <!--end-toc--> <!-- "Introduction" -->
fantasai@1626 382 <h2 id=intro><span class=secno>1. </span>Introduction</h2>
fantasai@213 383
fantasai@213 384 <p>Paged media (e.g., paper, transparencies, photo album pages, pages
fantasai@114 385 displayed on computer screens as printed output simulations) differ from
fantasai@5976 386 <a
fantasai@5976 387 href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous
fantasai@5976 388 media</a> in that the content of the document is split into one or more
fantasai@5976 389 discrete static display surfaces. To handle pages, CSS3 Paged Media
simon@6795 390 describes how:
fantasai@114 391
fantasai@114 392 <ul>
fantasai@213 393 <li><a href="#page-breaks">page breaks</a> are created and avoided;
fantasai@211 394
fantasai@211 395 <li>the page properties such as size, orientation, margins, border, and
fantasai@213 396 padding are specified;
fantasai@213 397
fantasai@213 398 <li>headers and footers are established within the page margins;
fantasai@211 399
fantasai@211 400 <li>content such as page counters are placed in the headers and footers;
fantasai@213 401 and
fantasai@213 402
fantasai@213 403 <li>orphans and widows can be controlled.
fantasai@114 404 </ul>
fantasai@114 405
fantasai@213 406 <p>This module defines a <a href="#page-model">page model</a> that
fantasai@114 407 specifies how a document is formatted within a rectangular area, called
fantasai@211 408 the <a href="#page-box-page-rule">page box</a>, that has finite width and
fantasai@657 409 height.
fantasai@114 410
fantasai@213 411 <p>Although CSS3 does not specify how user agents transfer page boxes to
fantasai@114 412 sheets, it does include certain mechanisms for telling user agents about
fantasai@114 413 the intended page sheet <a href="#page-size">size and orientation</a>. In
fantasai@114 414 the general case, CSS3 assumes that one page box will be transferred to
simon@6795 415 one surface of similar size.
fantasai@114 416
fantasai@1052 417 <p>All properties defined in this specification also accept the <a
fantasai@1052 418 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
fantasai@1052 419 keyword as their value, but for readability it has not been listed
fantasai@1052 420 explicitly.
fantasai@1052 421
fantasai@1626 422 <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
fantasai@213 423
fantasai@685 424 <p>All of the text in this specification is normative except sections
fantasai@685 425 explicitly marked as non-normative, examples, and notes. The keywords
fantasai@685 426 "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em
fantasai@685 427 class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em
fantasai@685 428 class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em
fantasai@685 429 class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>",
fantasai@685 430 "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when
fantasai@685 431 used in this document are to be interpreted as described in <cite>RFC
fantasai@685 432 2119</cite> <a href="#RFC2119"
fantasai@213 433 rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>. However, for
fantasai@114 434 readability, these words do not appear in all uppercase letters in this
simon@6795 435 specification.
fantasai@522 436
fantasai@522 437 <p>Examples in this specification are introduced with the words "for
fantasai@522 438 example" or are set apart from the normative text with
fantasai@657 439 <code>class="example"</code>, like this:
fantasai@522 440
fantasai@522 441 <div class=example>
simon@6795 442 <p>This is an example of an informative example.
fantasai@522 443 </div>
fantasai@522 444
fantasai@522 445 <p>Informative notes begin with the word "Note" and are set apart from the
fantasai@657 446 normative text with <code>class="note"</code>, like this:
fantasai@522 447
simon@6795 448 <p class=note>Note, this is an informative note.
fantasai@522 449
fantasai@1626 450 <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
fantasai@213 451
fantasai@213 452 <p>The following terminology and accompanying diagrams help to describe
simon@6795 453 the page model:
fantasai@114 454
fantasai@114 455 <dl>
fantasai@213 456 <dt id=page-sheet>Page sheet
fantasai@213 457
fantasai@3574 458 <dd><img
fantasai@3574 459 alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"
fantasai@3574 460 height=148 src=PageSheet.png style="float: right;" width=194>The page
fantasai@3574 461 sheet is one surface of the physical medium. The illustration to the
fantasai@3574 462 right shows a representation of the upper-left corner of a page sheet.
fantasai@213 463
fantasai@213 464 <dt id=printable-area>Printable and non-printable areas
fantasai@213 465
fantasai@213 466 <dd>The non-printable area is the area of a page sheet that a physical
fantasai@114 467 device such as a printer is not capable of marking reliably, usually due
fantasai@114 468 to the printer's paper handling mechanism. This value is printer
fantasai@114 469 dependent and is usually a small region along each edge of the page
fantasai@114 470 sheet. The printable area is the area of page sheet that a printer
fantasai@114 471 <em>is</em> capable of marking reliably. The size of the printable area
fantasai@114 472 is the size of the page sheet reduced by the size of the non-printable
fantasai@114 473 area. A user agent may not know the dimensions of this area for a
fantasai@114 474 particular printing device; but when its dimensions are known, user
fantasai@213 475 agents <em class=RFC2119>MAY</em> adjust the formatting of the document
fantasai@213 476 so that content falls within the printable area. How this adjustment is
fantasai@213 477 accomplished is device dependent within the constraints expressed in the
fantasai@213 478 sections <a href="#renderingpages">Rendering page boxes that do not fit
fantasai@213 479 a page sheet</a> and <a href="#content-outside-box">Content outside the
fantasai@213 480 page box</a>.
fantasai@213 481
fantasai@213 482 <dt id=page-orientation>Page Orientation
fantasai@213 483
fantasai@213 484 <dd>The page orientation is defined by comparing the length of the edges
fantasai@114 485 of a <a href="#page-box">page box</a>. The page box is a rectangle with
fantasai@114 486 two perpendicular edges called the long edge and the short edge. The
fantasai@114 487 length of the long edge is always greater than or equal to the length of
fantasai@114 488 the short edge. When the page box is square, the two edges are of the
fantasai@114 489 same length and either can be used as the long edge with the other being
fantasai@5967 490 the short edge. This specification defines page orientations of ‘<code
fantasai@5967 491 class=property>portrait</code>’ and ‘<code
fantasai@5967 492 class=property>landscape</code>’.
fantasai@213 493
fantasai@213 494 <dt id=portrait>Portrait Orientation
fantasai@213 495
fantasai@213 496 <dd>A portrait page's height is greater than or equal to its width.
fantasai@114 497 Horizontal elements are parallel to the short edge and vertical elements
fantasai@213 498 to the long edge.
fantasai@213 499
fantasai@213 500 <dt id=landscape>Landscape Orientation
fantasai@213 501
fantasai@213 502 <dd>A landscape page's width is greater than or equal to its height.
fantasai@114 503 Horizontal elements are parallel to the long edge and vertical elements
fantasai@1136 504 to the short edge. <span class=note>Note that CSS3 makes no distinction
fantasai@1136 505 between landscape and reverse-landscape orientations. However, future
fantasai@1136 506 versions of CSS may do so. UAs should consider, when formatting for
fantasai@1136 507 duplexed printing, the binding edge, page progression, and ease of
fantasai@1136 508 reading when choosing between landscape and reverse-landscape
fantasai@1136 509 renderings.</span>
fantasai@213 510
fantasai@213 511 <dt id=duplex-printing>Duplex Printing
fantasai@213 512
fantasai@213 513 <dd>Duplex printing prints one page box per side of a page sheet and uses
fantasai@213 514 both sides of the page sheet. This module provides no ability to specify
fantasai@213 515 whether a document is duplex printed, but the concept of left and right
fantasai@213 516 pages is based on the assumption that the document is duplex printed,
fantasai@213 517 regardless of whether or not it actually is.
fantasai@213 518
fantasai@213 519 <dt id=binding-edge>Binding Edge
fantasai@213 520
fantasai@213 521 <dd>The binding edge is the edge of the page box that is toward the
fantasai@114 522 binding if the material is bound. The binding edge often has a larger
fantasai@114 523 margin than the opposite edge to provide for the space used by the
fantasai@114 524 binding. The binding edge can be any of the four edges. However, page
fantasai@114 525 sheets are customarily bound so that the binding edge of page boxes with
fantasai@114 526 portrait orientation is vertical. This module provides no method to
fantasai@114 527 specify the binding edge. In duplex printing, the binding edge is on
fantasai@213 528 opposite sides of the page box for the left and right pages.
fantasai@213 529
fantasai@213 530 <dt id=facing-pages>Facing Pages
fantasai@213 531
fantasai@213 532 <dd>Facing pages are two sequential pages such that when the document is
fantasai@114 533 duplex printed they are on separate sheets of paper. Typically, the
fantasai@114 534 earlier page will be the back side of one sheet and the later page will
fantasai@114 535 be the front side of another. They are usually laid out so that the
fantasai@114 536 binding edges of facing pages are vertical and adjacent when the pages
fantasai@213 537 are placed in their normal reading orientation.
fantasai@213 538
fantasai@213 539 <dt id=left-page>Left Page
fantasai@213 540
fantasai@526 541 <dd>A page that would be on the left if it is part of a pair of facing
fantasai@114 542 pages as typically laid out. Page layouts for documents using a
fantasai@114 543 left-to-right page progression have the earlier of the facing pages on
fantasai@114 544 the left. Rules specific to the left page can be specified using the
simon@7554 545 <span class=css>‘<code class=css>:left</code>’</span> <a
simon@7554 546 href="#page-selector"><i>page selector</i></a>.
fantasai@213 547
fantasai@213 548 <dt id=right-page>Right Page
fantasai@213 549
fantasai@526 550 <dd>A page that would be on the right if it is part of a pair of facing
fantasai@114 551 pages as typically laid out. Page layouts for documents using a
fantasai@114 552 right-to-left page progression have the earlier of the facing pages on
fantasai@114 553 the right. Rules specific to the right page can be specified using the
simon@7554 554 <span class=css>‘<code class=css>:right</code>’</span> <a
simon@7554 555 href="#page-selector"><i>page selector</i></a>.
fantasai@114 556 </dl>
fantasai@526 557
fantasai@1626 558 <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>
fantasai@564 559
fantasai@564 560 <p>In the paged media formatting model, the document is transferred into
fantasai@564 561 one or more page boxes. The <dfn id=page-box>page box</dfn> is a
fantasai@564 562 specialized CSS box that maps to a rectangular print media surface, such
fantasai@564 563 as a page of paper. It is roughly analogous to the <a
fantasai@5976 564 href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
fantasai@5976 565 <img alt="" height=266 src=PageBox.png style="float: right;" width=267>
fantasai@5976 566
fantasai@5976 567 <p>As with other CSS <a
fantasai@5976 568 href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box consists
fantasai@5976 569 of margin, border, padding, and content areas. The content and margin
simon@6795 570 areas of a page box have special functions:
fantasai@564 571
fantasai@564 572 <ul>
fantasai@564 573 <li>The content area of a page box is called the <dfn id=page-area>page
fantasai@564 574 area</dfn>. The content of the document is flowed into one or more page
fantasai@564 575 boxes. The page area acts as a container for all the boxes generated by
fantasai@564 576 the root element and its descendants that are laid out within a given
fantasai@564 577 page box. The edges of the page area on the first page establish the
fantasai@564 578 rectangle that is the initial <a
fantasai@5976 579 href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing
fantasai@564 580 block</a> of the document.
fantasai@564 581
fantasai@564 582 <li>The margin area of a page box is divided into 16 <dfn
simon@7289 583 id=page-margin-boxes>page-margin boxes</dfn>. Each page-margin box has
simon@7289 584 its own margin, border, padding and content areas. Page-margin boxes are
simon@7289 585 typically used to display running headers and footers.
fantasai@564 586 </ul>
fantasai@564 587
fantasai@5973 588 <p>The properties of a <a href="#page-box"><i>page box</i></a> are
fantasai@5973 589 determined by properties <a
fantasai@5976 590 href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a>
fantasai@5976 591 within the <a href="#page-context"><i>page context</i></a>, which is the
fantasai@5976 592 <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration
simon@6957 593 block</a> of the <code>@page</code> rule. Similarly the properties of a
simon@7289 594 <i>page-margin box</i> are determined by properties declared within its
simon@7289 595 <a href="#margin-context"><i>margin context</i></a>. Declarations in the
simon@7289 596 page context can affect the page box and/or inherit to the page-margin
simon@7289 597 boxes, but they do not apply to or inherit into the document's root
simon@7289 598 element or other content.
fantasai@5973 599
fantasai@5973 600 <p>The <a href="#containing-block0"><i>containing block</i></a> of the
fantasai@5973 601 page box is specified using the ‘<a href="#size"><code
fantasai@5973 602 class=property>size</code></a>’ property in the <a
fantasai@5973 603 href="#page-context"><i>page context</i></a>. The width and horizontal
fantasai@5973 604 margins of the page box are then calculated exactly as for a <a
fantasai@5973 605 href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
fantasai@5973 606 block element in normal flow</a>. <a href="#CSS21"
fantasai@5973 607 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The height and vertical
fantasai@5973 608 margins of the page box are calculated analogously (instead of using the
fantasai@5973 609 block height formulas). In both cases if the values are over-constrained,
fantasai@5973 610 instead of ignoring any margins, the containing block is resized to
fantasai@5973 611 coincide with the margin edges of the page box.
fantasai@564 612
fantasai@6061 613 <h3 id=painting><span class=secno>4.1. </span> Page Backgrounds and
fantasai@6061 614 Painting Order</h3>
fantasai@6061 615
fantasai@6061 616 <p>When drawing a page of content, the page layers are painted in the
fantasai@6061 617 following painting order (bottommost first):
fantasai@6061 618
fantasai@6061 619 <ol>
fantasai@6061 620 <li>page background
fantasai@6061 621
fantasai@6061 622 <li>document canvas
fantasai@6061 623
fantasai@6061 624 <li>page borders
fantasai@6061 625
fantasai@6061 626 <li>document contents
fantasai@6061 627
simon@7289 628 <li>page-margin boxes
fantasai@6061 629 </ol>
fantasai@6061 630
fantasai@6061 631 <p>In the page model, the page background behaves similar to the root
fantasai@6061 632 background: its <a
fantasai@6061 633 href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background
fantasai@7443 634 painting area</i></a> is the entire page box, including its margins
fantasai@7443 635 (regardless of ‘<code class=property>background-clip</code>’). Page
fantasai@6065 636 backgrounds are anchored within the page box's padding area by default
fantasai@6065 637 (and honor ‘<code class=property>background-origin</code>’ if the UA
fantasai@6065 638 supports <a href="#CSS3BG"
fantasai@6065 639 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code
fantasai@6065 640 class=property>background-attachment</code>’ is ‘<code
fantasai@6061 641 class=css>fixed</code>’ then the image is positioned relative to the
fantasai@6061 642 page box including its margins (i.e. the <a
fantasai@6061 643 href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background
fantasai@6061 644 positioning area</i></a>, like the <i>background painting area</i>, is
fantasai@6061 645 the page's margin box).
fantasai@6061 646
fantasai@6061 647 <p>The document canvas background is drawn as the page box's background:
fantasai@6065 648 by default its <i>background painting area</i> covers the page box's
fantasai@6065 649 border box, and for UAs that support <a href="#CSS3BG"
fantasai@6064 650 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, follows the ‘<code
fantasai@6061 651 class=property>background-clip</code>’ value specified on the root
fantasai@6064 652 element. It remains, however, positioned with respect to the root element
fantasai@6064 653 or page area as usual.
fantasai@6061 654
simon@7289 655 <p>The UA may support the <code>z-index</code> property for page-margin
simon@7289 656 boxes. With respect to the page-margin boxes, the document canvas, page
simon@7289 657 borders, and all of the document contents are treated as a single element
simon@7289 658 with a <code>z-index</code> value of ‘<code class=css>0</code>’: the
simon@7289 659 page-margin boxes never interleave with parts of the document content or
simon@7289 660 between the content and the canvas. They may only paint in front of the
simon@7289 661 document content or behind the document canvas. The page background is
simon@7289 662 always painted underneath everything else. Since the
simon@7289 663 <code>position</code> property does not apply to page-margin boxes,
simon@7289 664 <code>z-index</code> always affects page-margin boxes as if they were
simon@7289 665 positioned elements regardless of the <code>position</code> property's
simon@7289 666 value.
fantasai@6061 667
fantasai@6061 668 <p>The default painting order, or <a
fantasai@6061 669 href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree
simon@7289 670 order", of page-margin boxes with respect to each other is not specified.
simon@7289 671 However, the page-margin boxes are defined to come after the page box and
simon@7289 672 its contents. <span class=issue>Suggestions here are welcome.</span>
fantasai@6061 673
fantasai@6061 674 <h3 id=content-outside-box><span class=secno>4.2. </span>Content outside
fantasai@528 675 the page box</h3>
fantasai@528 676
fantasai@528 677 <p>When formatting content in the page model, some content may end up
fantasai@5967 678 outside the page box. For example, an element whose ‘<code
fantasai@5967 679 class=property>white-space</code>’ property has the value ‘<code
fantasai@5967 680 class=property>pre</code>’ can generate a box that is wider than the
fantasai@5967 681 page box. As another example, when boxes are positioned absolutely or
fantasai@5967 682 relatively, they may end up in "inconvenient" locations. For example,
fantasai@5967 683 images may be placed on the edge of the page box or 100,000 meters below
simon@6795 684 the page box.
fantasai@528 685
fantasai@528 686 <p>A specification for the exact formatting of such elements lies outside
fantasai@528 687 the scope of this document. However, it is recommended that authors and
fantasai@528 688 user agents observe the following general principles concerning content
simon@6795 689 outside the page box:
fantasai@528 690
fantasai@528 691 <ul>
fantasai@565 692 <li>
fantasai@1134 693 <p>Content should be allowed slightly beyond the page box to allow pages
fantasai@1134 694 to "bleed".
fantasai@1134 695
fantasai@1134 696 <li>
fantasai@565 697 <p>User agents <em class=RFC2119>SHOULD</em> avoid generating a large
fantasai@565 698 number of content-empty pages to honor the positioning of elements
fantasai@565 699 (e.g., printing 100 blank pages is probably neither the author's nor
fantasai@565 700 the user's intent). A <dfn id=content-empty>Content-empty page</dfn> is
fantasai@565 701 a page box whose page area contains no printable content other than
fantasai@565 702 backgrounds and/or borders. A page box whose page area contains
fantasai@5967 703 generated content, or content whose visibility is ‘<code
fantasai@5967 704 class=property>hidden</code>’, or invisible content such as a
fantasai@565 705 zero-width space is not a content-empty page. On the other hand, a page
simon@7289 706 containing only a background and/or borders and/or page-margin box
simon@7289 707 content <em>is</em> a content-empty page.
fantasai@565 708
fantasai@565 709 <p class=note>Note, however, that generating a small number of empty
fantasai@5967 710 page boxes is sometimes necessary to honor the <span class=css>‘<code
fantasai@5967 711 class=property>left</code>’</span> and <span class=css>‘<code
simon@7430 712 class=property>right</code>’</span> values for <span
simon@7495 713 class=property>‘<code class=property>break-before</code>’</span>
simon@7495 714 and <span class=property>‘<code
simon@7495 715 class=property>break-after</code>’</span>.
fantasai@565 716
fantasai@565 717 <li>
fantasai@565 718 <p>Authors <em class=RFC2119>SHOULD NOT</em> position elements in
fantasai@657 719 inconvenient locations just to avoid rendering them. Instead:
fantasai@565 720
fantasai@528 721 <ul>
fantasai@528 722 <li>To suppress box generation entirely, set the <span
fantasai@5967 723 class=property>‘<code class=property>display</code>’</span>
fantasai@5967 724 property to <span class=css>‘<code
fantasai@5967 725 class=property>none</code>’</span>.
fantasai@5967 726
fantasai@5967 727 <li>To make a box invisible, set the <span class=property>‘<code
fantasai@5967 728 class=property>visibility</code>’</span> property.
fantasai@528 729 </ul>
fantasai@528 730
fantasai@565 731 <li>
fantasai@565 732 <p>This specification does not define how boxes positioned outside the
fantasai@565 733 page box are handled. Possibilities include discarding them or creating
fantasai@657 734 page boxes for them at the end of the document.
fantasai@528 735 </ul>
fantasai@565 736
fantasai@1626 737 <h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>
fantasai@526 738
fantasai@526 739 <p>CSS distinguishes between left pages and right pages on all documents,
fantasai@526 740 whether they are printed duplex or not. Each left page is followed by a
fantasai@526 741 right page and vice versa. Left and right pages can be styled differently
fantasai@526 742 with the <a href="#left-right-first"><code>:left</code> and
fantasai@657 743 <code>:right</code> pseudo-classes</a>.
fantasai@526 744
fantasai@526 745 <p>Whether the first page of a document is a left page or a right page
fantasai@526 746 depends on the page progression of the document. The <dfn
fantasai@526 747 id=page-progression>page progression</dfn> is the direction in which the
fantasai@526 748 printed pages of a document would be sequenced when laid out
fantasai@557 749 side-to-side. For example, English and horizontally-set Japanese
fantasai@557 750 typically progress from left to right, whereas Arabic and vertically-set
fantasai@5987 751 Japanese pages typically progress from right to left. In documents with a
fantasai@5987 752 left-to-right page progression the first page of the document is a right
simon@6795 753 page, and vice versa.
simon@6795 754
simon@6795 755 <p>The page progression direction is determined as follows:
fantasai@526 756
fantasai@526 757 <ul>
fantasai@526 758 <li>If text is laid out in horizontal lines, the page progression is the
fantasai@526 759 same as the inline progression.
fantasai@526 760
fantasai@526 761 <li>If text is laid out in vertical lines, the page progression is the
fantasai@526 762 same as the block progression.
fantasai@526 763 </ul>
fantasai@526 764
fantasai@5967 765 <p>If the UA supports the ‘<code class=property>direction</code>’ and
fantasai@5975 766 ‘<code class=property>writing-mode</code>’ properties from the CSS 3
fantasai@5975 767 Writing Modes Module <a href="#CSS3-WRITING-MODES"
fantasai@5975 768 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>, it
fantasai@5975 769 must <a
fantasai@5975 770 href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
fantasai@5975 771 whether the first page is a left or right page from the values of those
simon@6795 772 properties on the root element.
fantasai@526 773
fantasai@7437 774 <p> To explicitly force a document to begin printing on a left or right
fantasai@7437 775 page, authors can specify a <a
fantasai@7437 776 href="http://www.w3.org/TR/css3-break/#break-before">‘<code
fantasai@7437 777 class=property>break-before</code>’</a> value that that propagates a
fantasai@7437 778 page break to the root. <a href="#CSS3-BREAK"
fantasai@7437 779 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> The UA must
fantasai@7437 780 suppress the first (empty) page(s) in this case (and the
simon@7554 781 <code>:first</code> pseudo-class matches the first printed page).
fantasai@526 782
simon@7334 783 <div class=example>
simon@7334 784 <pre>
simon@7495 785 html { break-before: always }
simon@7334 786 </pre>
simon@7334 787
simon@7334 788 <p> For an HTML document with a left-to-right page progression, the above
simon@7334 789 style rule will cause the first page of the document to print on a
simon@7334 790 ‘<code class=css>:left</code>’ page
simon@7334 791
simon@7334 792 <pre>
simon@7495 793 html { break-before: left }
simon@7334 794 </pre>
simon@7334 795
simon@7334 796 <p> For an HTML document, the above style rule will cause the first page
simon@7334 797 of the document to print on a ‘<code class=css>:left</code>’ page,
simon@7334 798 regardless of the page progression.
simon@7334 799 </div>
simon@7334 800
fantasai@1626 801 <h2 id=page-selector-and-context><span class=secno>5. </span>Page
fantasai@1626 802 Selectors and the Page Context</h2>
fantasai@1626 803
fantasai@1626 804 <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>
fantasai@568 805
fantasai@557 806 <p>Authors can specify various aspects of a page box, such as its
simon@6957 807 dimensions, orientation, and margins, within an <span
simon@7500 808 class=css>@page</span> rule. ‘<code class=css>@page</code>’ rules are
simon@7500 809 allowed at the top-level of a stylesheet, as well as wherever <a
simon@7500 810 href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a>
simon@7500 811 are allowed. An <span class=css>@page</span> rule consists of the keyword
simon@7500 812 <span class=css>‘<code class=css>@page</code>’</span>, an <em
simon@7500 813 class=RFC2119>OPTIONAL</em> comma-separated list of <a
simon@7554 814 href="#page-selectors">page selectors</a> and a block of declarations
simon@7554 815 (said to be in the <dfn id=page-context>page context</dfn>). An ‘<code
simon@7554 816 class=css>@page</code>’ rule can also contain other at-rules,
simon@7554 817 interleaved between declarations. The current level of this specification
simon@7554 818 only allows <a href="#margin-at-rules">margin at-rules</a> inside
simon@7554 819 ‘<code class=css>@page</code>’.
simon@7554 820
simon@7554 821 <p>‘<code class=css>@page</code>’ rules without a selector list are
simon@7554 822 considered to have a single, empty selector. ‘<code
simon@7554 823 class=css>@page</code>’ rules apply to pages that <a
simon@7554 824 href="#match"><i>match</i></a> at least one of their selectors.
simon@6795 825
simon@6795 826 <p>Properties declared within the page context apply to the page box.
fantasai@213 827
fantasai@213 828 <p>If an error is encountered during the processing of a declaration block
fantasai@213 829 within a page or a margin context, the <a
fantasai@5976 830 href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for
fantasai@5976 831 handling parsing errors</a> apply; that is, valid declarations within the
simon@6795 832 block are applied.
fantasai@114 833
simon@7554 834 <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>
simon@7554 835
simon@7554 836 <p>A <dfn id=page-selector>page selector</dfn> is either:
simon@7554 837
simon@7554 838 <ul>
simon@7554 839 <li>one or more <a
simon@7554 840 href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
simon@7554 841 case-insensitive</a> <a href="#pseudo-classes">pseudo-classes</a>,
simon@7554 842
simon@7554 843 <li>a <a href="#using-named-pages">page type</a> (a case-sensitive
simon@7554 844 identifier) followed by zero or more pseudo-classes.
simon@7554 845 </ul>
simon@7554 846
simon@7555 847 <p> No whitespace is allowed between components of a selector. The <a
simon@7555 848 href="#page_selector"><i title="page_selector">page selector
simon@7555 849 grammar</i></a> and examples can be found below.
simon@7554 850
simon@7554 851 <p>A selector is said to <dfn id=match>match</dfn> a given page if and
simon@7554 852 only if all of its components match the page. Empty selectors (ie.
simon@7554 853 ‘<code class=css>@page</code>’ rules without a selector) match every
simon@7554 854 page. <span class=note>Empty selectors have the weakest <a
simon@7554 855 href="#specificity"><i>specificity</i></a>.</span>
simon@7554 856
simon@7554 857 <p><a href="#using-named-pages">Page type</a> selectors <a
simon@7554 858 href="#match"><i>match</i></a> pages of the named type generated by the
simon@7554 859 ‘<a href="#page"><code class=property>page</code></a>’ property.
simon@7554 860 <span id=page-selector-syntax-restrict> A page type name of ‘<code
simon@7554 861 class=css>auto</code>’ (<a
simon@7554 862 href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
simon@7554 863 case-insensitive</a>) does not make the rule invalid, but <em
simon@7554 864 class=RFC2119>MUST</em> never match. </span> Individual <a
simon@7554 865 href="#pseudo-classes">pseudo-classes</a> are defined below.
simon@7554 866
simon@7554 867 <h4 id=pseudo-classes><span class=secno>5.2.1. </span> <a
simon@7435 868 id=left-right-first></a> Page pseudo-classes: :left, :right, :first, and
simon@7554 869 :blank</h4>
simon@7435 870
simon@7435 871 <p> When printing double-sided documents, left and right pages are often
fantasai@566 872 formatted differently. This can be expressed through CSS pseudo-classes
simon@6795 873 defined in the <a href="#page-context">page context</a>.
fantasai@566 874
simon@7435 875 <p> All pages are automatically classified by user agents as either left
simon@7435 876 pages or right pages, based on <a href="#progression">page
simon@7554 877 progression</a>. The ‘<code class=css>:left</code>’ and ‘<code
simon@7554 878 class=css>:right</code>’ pseudo-classes only <a
simon@7554 879 href="#match"><i>match</i></a> left or right pages, respectively.
fantasai@566 880
fantasai@566 881 <div class=example> The following example creates left and right binding
fantasai@566 882 edges using these pseudo-classes:
fantasai@566 883 <pre>
fantasai@566 884 @page :left {
fantasai@566 885 margin-left: 3cm;
fantasai@566 886 margin-right: 4cm;
fantasai@566 887 }
fantasai@566 888
fantasai@566 889 @page :right {
fantasai@566 890 margin-left: 4cm;
fantasai@566 891 margin-right: 3cm;
fantasai@566 892 }
fantasai@566 893 </pre>
fantasai@566 894 </div>
fantasai@566 895
fantasai@566 896 <p>If different declarations have been given for left and right pages, the
fantasai@566 897 user agent <em class=RFC2119>MUST</em> honor these declarations even if
fantasai@566 898 the user agent does not transfer the page boxes to left and right sheets
fantasai@566 899 (i.e., a printer that only prints on one side of the medium must
simon@6795 900 nevertheless produce correctly formatted output).
fantasai@566 901
fantasai@566 902 <div class=note>
simon@7334 903 <p> <em><strong>Note.</strong> Adding declarations to the <span
fantasai@5967 904 class=css>‘<code class=css>:left</code>’</span> or <span
fantasai@5967 905 class=css>‘<code class=css>:right</code>’</span> pseudo-class does
fantasai@5967 906 not necessarily influence whether the document comes out of the printer
fantasai@5967 907 double- or single-sided (which is outside the scope of this
simon@6795 908 specification).</em>
fantasai@566 909 </div>
fantasai@566 910
simon@7554 911 <p> The ‘<code class=css>:first</code>’ pseudo-class only <a
simon@7554 912 href="#match"><i title=match>matches</i></a> the first printed page of a
simon@7554 913 document.
simon@7334 914
simon@7334 915 <div class=example>
simon@7334 916 <pre>
simon@7334 917 @page { margin: 2cm } /* All margins set to 2cm */
simon@7334 918
simon@7334 919 @page :first {
simon@7334 920 margin-top: 10cm /* Top margin on first page 10cm */
simon@7334 921 }
simon@7334 922 </pre>
simon@7334 923 </div>
simon@7334 924
simon@7554 925 <p> The ‘<code class=css>:blank</code>’ pseudo-class only <a
simon@7554 926 href="#match"><i title=match>matches</i></a> <a href="#content-empty"><i
simon@7554 927 title="content-empty page">content-empty pages</i></a> that appear as a
simon@7554 928 result of <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced
simon@7554 929 page breaks</a>.
simon@7435 930
simon@7499 931 <div class=note>
simon@7499 932 <p>Only the ‘<code class=css>left</code>’, ‘<code
simon@7499 933 class=css>right</code>’, ‘<code class=css>recto</code>’ and
simon@7499 934 ‘<code class=css>verso</code>’ values of the ‘<code
simon@7499 935 class=property>break-before</code>’ and ‘<code
simon@7499 936 class=property>break-after</code>’ properties can generate pages that
simon@7499 937 match ‘<code class=css>:blank</code>’.
simon@7499 938 </div>
simon@7499 939
simon@7435 940 <div class=example>
simon@7435 941 <p>In this example, forced page break may occur before <code>h1</code>
simon@7435 942 elements.
simon@7435 943
simon@7435 944 <pre>
simon@7495 945 h1 { break-before: left }
simon@7435 946
simon@7435 947 @page :blank {
simon@7435 948 @top-center { content: "This page is intentionally left blank" }
simon@7435 949 }
simon@7435 950 </pre>
simon@7435 951 </div>
simon@7435 952
simon@7554 953 <p> A page matched by ‘<code class=css>:blank</code>’ can also be
simon@7554 954 matched by other page pseudo-classes.
simon@7435 955
simon@7435 956 <div class=example>
simon@7435 957 <p>If headers have been specified on all right pages, a blank right page
simon@7435 958 will be matched by both <code>:blank</code> and <code>:right</code>.
simon@7435 959 Therefore, margin boxes set on right pages will have to be removed
simon@7435 960 unless they are wanted on blank pages. Here is an example where the top
simon@7435 961 center header is removed from blank pages, while the page number
simon@7435 962 remains:
simon@7435 963
simon@7435 964 <pre>
simon@7495 965 h1 { break-before: left }
simon@7435 966
simon@7435 967 @page :blank {
simon@7435 968 @top-center { content: none }
simon@7435 969 }
simon@7435 970
simon@7435 971 @page :right {
simon@7435 972 @top-center { content: "Preliminary edition" }
simon@7435 973 @bottom-center { content: counter(page) }
simon@7435 974 }
simon@7435 975 </pre>
simon@7435 976
simon@7554 977 <p>Due to the higher <a href="#specificity"><i>specificity</i></a> of
simon@7554 978 <code>:blank</code> over <code>:right</code>, the top center header is
simon@7554 979 removed even if <code>content: none</code> comes before <code>content:
simon@7554 980 "Preliminary edition"</code>.
simon@7435 981 </div>
simon@7435 982
fantasai@566 983 <div class=note>
fantasai@566 984 <p><em><strong>Note.</strong> Future versions of CSS may include other
simon@6795 985 page pseudo-classes.</em>
fantasai@566 986 </div>
fantasai@566 987
fantasai@1626 988 <h3 id=syntax-page-selector><span class=secno>5.3. </span>@page rule
fantasai@528 989 grammar</h3>
fantasai@213 990
fantasai@566 991 <p>The syntax for the @page rule is a specialization of the generic
annevk@150 992 at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to
fantasai@566 993 allow @page rules nested inside @media rules. User agents <em
simon@6795 994 class=RFC2119>MUST</em> adhere to the following grammar:
fantasai@213 995
fantasai@213 996 <p>See <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
simon@6795 997 Section 4.1.1 and Appendix G for the expansion of missing productions:
fantasai@114 998
fantasai@213 999 <p id=specializatons-of-ATKEYWORD> All new lexical tokens are
simon@6795 1000 specializations of the ATKEYWORD lexical token:
fantasai@114 1001
fantasai@213 1002 <pre class=lexical>
fantasai@213 1003 PAGE_SYM ::= "@page"
fantasai@213 1004 TOPLEFTCORNER_SYM ::= "@top-left-corner"
fantasai@213 1005 TOPLEFT_SYM ::= "@top-left"
fantasai@213 1006 TOPCENTER_SYM ::= "@top-center"
fantasai@213 1007 TOPRIGHT_SYM ::= "@top-right"
fantasai@213 1008 TOPRIGHTCORNER_SYM ::= "@top-right-corner"
simon@6957 1009 BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner"
fantasai@213 1010 BOTTOMLEFT_SYM ::= "@bottom-left"
fantasai@213 1011 BOTTOMCENTER_SYM ::= "@bottom-center"
fantasai@213 1012 BOTTOMRIGHT_SYM ::= "@bottom-right"
fantasai@213 1013 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
fantasai@213 1014 LEFTTOP_SYM ::= "@left-top"
fantasai@213 1015 LEFTMIDDLE_SYM ::= "@left-middle"
fantasai@213 1016 LEFTBOTTOM_SYM ::= "@left-bottom"
fantasai@213 1017 RIGHTTOP_SYM ::= "@right-top"
fantasai@213 1018 RIGHTMIDDLE_SYM ::= "@right-middle"
fantasai@213 1019 RIGHTBOTTOM_SYM ::= "@right-bottom"
fantasai@213 1020
simon@7554 1021 <dfn
simon@7554 1022 id=media>media</dfn> :
simon@7554 1023 MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <a
simon@7554 1024 href="#syntax-prod-page"><i>page_rule</i></a> | ruleset ]* '}' S*
fantasai@213 1025 ;
fantasai@213 1026
simon@7554 1027 <dfn
simon@7554 1028 id=syntax-prod-page>page_rule</dfn> :
simon@7554 1029 PAGE_SYM S* <a
simon@7554 1030 href="#page_selector_list"><i>page_selector_list</i></a> '{' S* <a
simon@7554 1031 href="#page_body"><i>page_body</i></a> '}' S*
fantasai@213 1032 ;
simon@7439 1033
simon@7554 1034 <dfn
simon@7554 1035 id="page_selector_list">page_selector_list</dfn> :
simon@7554 1036 [ <a
simon@7554 1037 href="#page_selector"><i>page_selector</i></a> S* [ ',' <a
simon@7554 1038 href="#page_selector"><i>page_selector</i></a> S* ]* ]?
simon@7439 1039 ;
simon@7439 1040
simon@7554 1041 <dfn
simon@7554 1042 id="page_selector">page_selector</dfn> :
simon@7554 1043 <a
simon@7554 1044 href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>+ | IDENT <a
simon@7554 1045 href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>*
simon@7290 1046 ;
simon@7554 1047
simon@7554 1048 <dfn
simon@7554 1049 id=syntax-prod-pseudo-page>pseudo_page</dfn> :
simon@7435 1050 ':' [ "left" | "right" | "first" | "blank" ]
fantasai@213 1051 ;
fantasai@213 1052
simon@7554 1053 <dfn
simon@7554 1054 id="page_body">page_body</dfn> : /* Can be empty */
simon@7554 1055 declaration? [ ';' S* <a
simon@7554 1056 href="#page_body"><i>page_body</i></a> ]? |
simon@7554 1057 <a
simon@7554 1058 href="#syntax-prod-margin"><i>page_margin_box</i></a> <a
simon@7554 1059 href="#page_body"><i>page_body</i></a>
fantasai@213 1060 ;
fantasai@213 1061
simon@7554 1062 <dfn
simon@7554 1063 id=syntax-prod-margin>page_margin_box</dfn> :
simon@7554 1064 <a
simon@7554 1065 href="#syntax-prod-margin-sym"><i>margin_sym</i></a> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
simon@7554 1066 ;
simon@7554 1067
simon@7554 1068 <dfn
simon@7554 1069 id=syntax-prod-margin-sym>margin_sym</dfn> :
simon@6957 1070 TOPLEFTCORNER_SYM |
simon@6957 1071 TOPLEFT_SYM |
simon@6957 1072 TOPCENTER_SYM |
simon@6957 1073 TOPRIGHT_SYM |
fantasai@213 1074 TOPRIGHTCORNER_SYM |
simon@6957 1075 BOTTOMLEFTCORNER_SYM |
simon@6957 1076 BOTTOMLEFT_SYM |
simon@6957 1077 BOTTOMCENTER_SYM |
fantasai@213 1078 BOTTOMRIGHT_SYM |
fantasai@213 1079 BOTTOMRIGHTCORNER_SYM |
fantasai@213 1080 LEFTTOP_SYM |
fantasai@213 1081 LEFTMIDDLE_SYM |
fantasai@213 1082 LEFTBOTTOM_SYM |
fantasai@213 1083 RIGHTTOP_SYM |
fantasai@213 1084 RIGHTMIDDLE_SYM |
simon@6957 1085 RIGHTBOTTOM_SYM
fantasai@213 1086 ;
fantasai@211 1087 </pre>
fantasai@211 1088
fantasai@213 1089 <div class=example>
fantasai@213 1090 <p>The following are examples of page selectors (declaration block
simon@6795 1091 intentionally left blank)
fantasai@114 1092
fantasai@213 1093 <pre>
fantasai@213 1094 @page { ... }
fantasai@213 1095 @page :left { ... }
fantasai@213 1096 @page :right { ... }
fantasai@213 1097 @page LandscapeTable { ... }
fantasai@213 1098 @page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
simon@7555 1099 @page:first { ... }
simon@7555 1100 @page toc, index { ... }
simon@7555 1101 @page :blank:first { ... }
fantasai@114 1102 </pre>
fantasai@114 1103
simon@7289 1104 <p>The following are examples of page-margin boxes where the declaration
simon@6795 1105 blocks are intentionally left blank.
fantasai@114 1106
fantasai@213 1107 <pre>
fantasai@213 1108 @page {
fantasai@213 1109 @top-left { ... /* document name */ }
fantasai@213 1110 @bottom-center { ... /* page number */}
fantasai@213 1111 }
fantasai@213 1112 @page :left { @left-middle { ... /* page number in left margin */ }}
fantasai@213 1113 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
fantasai@213 1114
fantasai@213 1115 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
fantasai@213 1116 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
fantasai@213 1117 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
fantasai@213 1118 @bottom-right-corner { ... /* empty footer */ } }
fantasai@114 1119 </pre>
fantasai@114 1120 </div>
fantasai@114 1121
fantasai@1626 1122 <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading
fantasai@528 1123 in the page context</h3>
fantasai@213 1124
fantasai@213 1125 <p>Declarations in page and margin contexts <a
fantasai@5976 1126 href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like
fantasai@5976 1127 declarations in <a
simon@6795 1128 href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.
fantasai@114 1129
simon@7554 1130 <p>The <dfn id=specificity>specificity</dfn> of page a selector is
simon@7554 1131 computed in a manner analogous to the computations defined in the <a
simon@6795 1132 href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:
fantasai@114 1133
fantasai@114 1134 <ul>
simon@7554 1135 <li>Count the number of page type names (= <var>f</var>)
simon@7572 1136 <p class=note> Given the syntax of page seletors, <var>f</var> can only
simon@7572 1137 ever be 0 or 1.
simon@7513 1138
simon@7513 1139 <li>Count the number of ‘<code class=css>:first</code>’ or ‘<code
simon@7513 1140 class=css>:blank</code>’ pseudo-classes (= <var>g</var>)
simon@7513 1141
simon@7513 1142 <li>Count the number of ‘<code class=css>:left</code>’ or ‘<code
simon@7513 1143 class=css>:right</code>’ pseudo-classes (= <var>h</var>)
fantasai@114 1144 </ul>
fantasai@114 1145
simon@7513 1146 <p> Specificities are compared by comparing the three components in order:
simon@7513 1147 the specificity with <var>f</var> larger a value is more specific; if the
simon@7513 1148 two <var>f</var> values are tied, then the specificity with a larger
simon@7513 1149 <var>g</var> value is more specific; if the two <var>g</var> values are
simon@7513 1150 also tied, then the specificity with a larger <var>h</var> value is more
simon@7513 1151 specific; if all the values are tied, the two specifities are equal.
simon@7513 1152
simon@7513 1153 <p> Due to storage limitations, implementations may have limitations on
simon@7513 1154 the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values
simon@7513 1155 higher than the limit must be clamped to that limit, and not overflow.
simon@7513 1156
simon@7554 1157 <p class=note> Note: Each comma-separated selectors in the same ‘<code
simon@7554 1158 class=css>@page</code>’ rule has its own specificity.
simon@7554 1159
simon@7513 1160 <p class=note> Note: Repeated occurrances of the same pseudo-classes are
simon@7513 1161 allowed and do increase specificity.
fantasai@213 1162
fantasai@213 1163 <div class=example>
simon@6795 1164 <p>Some page specificity calculation examples follow:
fantasai@213 1165
fantasai@213 1166 <pre>
simon@7513 1167 @page { } /* specificity = (0,0,0) */
simon@7513 1168 @page :left { } /* specificity = (0,0,1) */
simon@7513 1169 @page :first { } /* specificity = (0,1,0) */
simon@7513 1170 @page artsy { } /* specificity = (1,0,0) */
simon@7513 1171 @page artsy:left { } /* specificity = (1,0,1) */
simon@7513 1172 @page artsy:first { } /* specificity = (1,1,0) */
fantasai@211 1173 </pre>
fantasai@114 1174 </div>
fantasai@114 1175
fantasai@213 1176 <div class=example>
simon@6795 1177 <p>Consider the following usage example:
fantasai@213 1178
fantasai@213 1179 <pre>
fantasai@213 1180 @page {
simon@7513 1181 margin-left: 3cm;
fantasai@213 1182 }
fantasai@213 1183
fantasai@213 1184 @page :left {
simon@7513 1185 margin-left: 4cm;
fantasai@213 1186 }
fantasai@211 1187 </pre>
fantasai@211 1188
fantasai@213 1189 <p>Due to the higher specificity of the pseudo-class selector, the left
fantasai@482 1190 margin on left pages will be 4cm and all other pages (the right-facing
simon@6795 1191 pages) will have a left margin of 3cm.
fantasai@114 1192 </div>
fantasai@114 1193
fantasai@213 1194 <div class=example>
fantasai@213 1195 <p>In this example, the higher specificity of the green rules wins over
fantasai@114 1196 the red rule. Therefore the first page will have blue text in the
simon@7289 1197 top-left page-margin box and green text in the top-right page-margin
simon@7289 1198 box, while subsequent pages will have red text in the page-margin boxes.
fantasai@114 1199
fantasai@213 1200 <pre>
fantasai@213 1201 @page :first {
simon@7513 1202 color: green;
simon@7513 1203
simon@7513 1204 @top-left {
simon@7513 1205 content: "foo";
simon@7513 1206 color: blue;
simon@7513 1207 }
simon@7513 1208 @top-right {
simon@7513 1209 content: "bar";
simon@7513 1210 }
fantasai@213 1211 }
fantasai@213 1212
fantasai@213 1213 @page { color: red;
simon@7513 1214 @top-center {
simon@7513 1215 content: "Page " counter(page);
fantasai@213 1216 }
fantasai@213 1217 }
fantasai@114 1218 </pre>
fantasai@114 1219 </div>
fantasai@114 1220
fantasai@213 1221 <div class=example>
fantasai@213 1222 <p>Page contexts cascade, so the following stylesheet would style pages
simon@7289 1223 with 25 millimeter margins and 14 point type in the page-margin boxes:
fantasai@114 1224
fantasai@213 1225 <pre>
fantasai@213 1226 @page { margin: 25mm;}
fantasai@213 1227 @page { font-size: 14pt;}
fantasai@211 1228 </pre>
fantasai@114 1229 </div>
fantasai@114 1230
simon@7289 1231 <h2 id=margin-boxes><span class=secno>6. </span>Page-Margin Boxes</h2>
simon@7289 1232
simon@7289 1233 <p>Page-margin boxes are boxes within the page margin that, like
simon@6795 1234 pseudo-elements, can contain generated content.
fantasai@566 1235
simon@7289 1236 <p>Page-margin boxes can be used to create page headers and footers, which
simon@7289 1237 are portions of the page set aside for supplementary information such as
simon@7289 1238 the page number or document title.
fantasai@528 1239
fantasai@528 1240 <div class=example>
fantasai@566 1241 <p>Typically, a <dfn id=page-header>page header</dfn> is located at the
fantasai@566 1242 top of the page in documents with a predominately horizontal writing
fantasai@566 1243 direction and on the side opposite the <a href="#binding-edge">binding
fantasai@566 1244 edge</a> for documents with a predominately vertical writing direction.
fantasai@566 1245 One possible design of page headers for horizontally written documents
simon@7456 1246 uses the ‘<code class=css>@top-left-corner</code>’, ‘<code
simon@7456 1247 class=css>@top-left</code>’, ‘<code class=css>@top-center</code>’,
simon@7456 1248 ‘<code class=css>@top-right</code>’ and ‘<code
simon@7456 1249 class=css>@top-right-corner</code>’ page-margin boxes. Another design,
simon@7456 1250 for vertically written documents, could use the ‘<code
simon@7456 1251 class=css>@right-top</code>’, ‘<code
simon@7456 1252 class=css>@right-middle</code>’, and ‘<code
simon@7456 1253 class=css>@right-bottom</code>’ page-margin boxes for <a
simon@7456 1254 href="#right-page">right facing pages</a> and ‘<code
simon@7456 1255 class=css>@left-top</code>’, ‘<code
simon@7456 1256 class=css>@left-middle</code>’, and ‘<code
simon@7456 1257 class=css>@left-bottom</code>’ for <a href="#left-page">left facing
simon@7456 1258 pages</a>.
fantasai@566 1259
fantasai@566 1260 <p>The <dfn id=page-footer>page footer</dfn> is typically at the opposite
fantasai@566 1261 end of the page from the page header. For example, the design of a
fantasai@566 1262 horizontally written document with a page header at the top of the page
simon@7456 1263 could use the ‘<code class=css>@bottom-left-corner</code>’, ‘<code
simon@7456 1264 class=css>@bottom-left</code>’, ‘<code
simon@7456 1265 class=css>@bottom-center</code>’, ‘<code
simon@7456 1266 class=css>@bottom-right</code>’ and ‘<code
simon@7456 1267 class=css>@bottom-right-corner</code>’ page-margin boxes as the page
simon@7456 1268 footer. The design of a vertically written document could use the
simon@7456 1269 page-margin boxes of the binding edge of the page for the page footer.
fantasai@566 1270 </div>
fantasai@566 1271
simon@7289 1272 <p>Page-margin boxes are positioned with respect to the page area and are
simon@7289 1273 independent of page orientation, for example the top page-margin boxes
simon@7289 1274 are above the page area in both portrait and landscape orientation. The
simon@7289 1275 various page-margin boxes are defined and illustrated in the diagram
simon@7289 1276 below:
fantasai@566 1277
fantasai@3574 1278 <table class=data id=margin-box-def
simon@7289 1279 summary="defintion of each of the page-margin boxes">
simon@7289 1280 <caption>Table 1 Page-Margin Box Definitions</caption>
fantasai@566 1281
fantasai@566 1282 <thead>
fantasai@566 1283 <tr>
fantasai@566 1284 <th>Box
fantasai@566 1285
fantasai@566 1286 <th>Description
fantasai@566 1287
fantasai@566 1288 <th>Placement
fantasai@566 1289
fantasai@566 1290 <tbody>
fantasai@566 1291 <tr id=top-margin-boxes-def>
fantasai@566 1292 <th id=top-left-corner-box-def>top-left-corner
fantasai@566 1293
fantasai@566 1294 <td>a fixed-size box defined by the intersection of the top and left
fantasai@566 1295 margins of the page box
fantasai@566 1296
fantasai@3574 1297 <td><img
fantasai@3574 1298 alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
fantasai@566 1299 height=47 src=TopLeftCornerBox.png width=181>
fantasai@566 1300
fantasai@566 1301 <tr id=top-left-box-def>
fantasai@566 1302 <th>top-left
fantasai@566 1303
fantasai@566 1304 <td>a variable-width box filling the top page margin between the
simon@7289 1305 top-left-corner and top-center page-margin boxes
fantasai@566 1306
fantasai@3574 1307 <td><img
fantasai@3574 1308 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@3574 1309 height=47 src=TopLeftMarginBox.png width=181>
fantasai@566 1310
fantasai@566 1311 <tr id=top-center-box-def>
fantasai@566 1312 <th>top-center
fantasai@566 1313
fantasai@566 1314 <td>a variable-width box centered horizontally between the page's left
fantasai@566 1315 and right border edges and filling the page top margin between the
simon@7289 1316 top-left and top-right page-margin boxes
fantasai@566 1317
fantasai@3574 1318 <td><img
fantasai@3574 1319 alt="the top center box with margin, border, and padding, centered within the page's top margin"
fantasai@3574 1320 height=47 src=TopCenterMarginBox.png width=181>
fantasai@566 1321
fantasai@566 1322 <tr id=top-right-box-def>
fantasai@566 1323 <th>top-right
fantasai@566 1324
fantasai@566 1325 <td>a variable-width box filling the top page margin between the
simon@7289 1326 top-center and top-right-corner page-margin boxes
fantasai@566 1327
fantasai@3574 1328 <td><img
fantasai@3574 1329 alt="the top right box with margin, border, and padding, nested within the page's top margin"
fantasai@3574 1330 height=47 src=TopRightMarginBox.png width=181>
fantasai@566 1331
fantasai@566 1332 <tr>
fantasai@566 1333 <th id=top-right-corner-box-def>top-right-corner
fantasai@566 1334
fantasai@566 1335 <td>a fixed-size box defined by the intersection of the top and right
fantasai@566 1336 margins of the page box
fantasai@566 1337
fantasai@3574 1338 <td><img
fantasai@3574 1339 alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
fantasai@3574 1340 height=47 src=TopRightCornerMarginBox.png width=181>
fantasai@566 1341
fantasai@566 1342 <tr id=left-margin-boxes-def>
fantasai@566 1343 <th id=left-top-box-def>left-top
fantasai@566 1344
fantasai@566 1345 <td>a variable-height box filling the left page margin between the
simon@7289 1346 top-left-corner and left-middle page-margin boxes
fantasai@566 1347
fantasai@3574 1348 <td rowspan=3><img
simon@7289 1349 alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"
fantasai@3574 1350 height=226 src=LeftMarginBoxes.png width=181>
fantasai@566 1351
fantasai@566 1352 <tr id=left-middle-box-def>
fantasai@566 1353 <th>left-middle
fantasai@566 1354
fantasai@566 1355 <td>a variable-height box centered vertically between the page's top
fantasai@566 1356 and bottom border edges and filling the left page margin between the
simon@7289 1357 left-top and left-bottom page-margin boxes
fantasai@566 1358
fantasai@566 1359 <tr id=left-bottom-box-def>
fantasai@566 1360 <th>left-bottom
fantasai@566 1361
fantasai@566 1362 <td>a variable-height box filling the left page margin between the
simon@7289 1363 left-middle and bottom-left-corner page-margin boxes
fantasai@566 1364
fantasai@566 1365 <tr id=right-margin-boxes-def>
fantasai@566 1366 <th id=right-top-box-def>right-top
fantasai@566 1367
fantasai@566 1368 <td>a variable-height box filling the right page margin between the
simon@7289 1369 top-right-corner and right-middle page-margin boxes
fantasai@566 1370
fantasai@3574 1371 <td rowspan=3><img
simon@7289 1372 alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"
fantasai@3574 1373 height=226 src=RightMarginBoxes.png width=181>
fantasai@566 1374
fantasai@566 1375 <tr id=right-middle-box-def>
fantasai@566 1376 <th>right-middle
fantasai@566 1377
fantasai@566 1378 <td>a variable-height box centered vertically between the page's top
fantasai@566 1379 and bottom border edges and filling the right page margin between the
simon@7289 1380 right-top and right-bottom page-margin boxes
fantasai@566 1381
fantasai@566 1382 <tr id=right-bottom-box-def>
fantasai@566 1383 <th>right-bottom
fantasai@566 1384
fantasai@566 1385 <td>a variable-height box filling the right page margin between the
simon@7289 1386 right-middle and bottom-right-corner page-margin boxes
fantasai@566 1387
fantasai@566 1388 <tr id=bottom-margin-boxes-def>
fantasai@566 1389 <th id=bottom-left-corner-box-def>bottom-left-corner
fantasai@566 1390
fantasai@566 1391 <td>a fixed-size box defined by the intersection of the bottom and left
fantasai@566 1392 margins of the page box
fantasai@566 1393
fantasai@3574 1394 <td><img
fantasai@3574 1395 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@3574 1396 height=48 src=BottomLeftCornerBox.png width=181>
fantasai@566 1397
fantasai@566 1398 <tr id=bottom-left-box-def>
fantasai@566 1399 <th>bottom-left
fantasai@566 1400
fantasai@566 1401 <td>a variable-width box filling the bottom page margin between the
simon@7289 1402 bottom-left-corner and bottom-center page-margin boxes
fantasai@566 1403
fantasai@3574 1404 <td><img
simon@7289 1405 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@3574 1406 height=48 src=BottomLeftMarginBox.png width=181>
fantasai@566 1407
fantasai@566 1408 <tr id=bottom-center-box-def>
fantasai@566 1409 <th>bottom-center
fantasai@566 1410
fantasai@566 1411 <td>a variable-width box centered horizontally between the page's left
fantasai@566 1412 and right border edges and filling the bottom page margin between the
simon@7289 1413 bottom-left and bottom-right page-margin boxes
fantasai@566 1414
fantasai@3574 1415 <td style="vertical-align: middle;"><img
fantasai@3574 1416 alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
fantasai@3574 1417 height=48 src=BottomCenterMarginBox.png width=181>
fantasai@566 1418
fantasai@566 1419 <tr id=bottom-right-box-def>
fantasai@566 1420 <th>bottom-right
fantasai@566 1421
fantasai@566 1422 <td>a variable-width box filling the bottom page margin between the
simon@7289 1423 bottom-center and bottom-right-corner page-margin boxes
fantasai@566 1424
fantasai@3574 1425 <td><img
simon@7289 1426 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@3574 1427 height=48 src=BottomRightMarginBox.png width=181>
fantasai@566 1428
fantasai@566 1429 <tr id=bottom-right-corner-box-def>
fantasai@566 1430 <th>bottom-right-corner
fantasai@566 1431
fantasai@566 1432 <td>a fixed-size box defined by the intersection of the bottom and
fantasai@566 1433 right margins of the page box
fantasai@566 1434
fantasai@3574 1435 <td><img
fantasai@3574 1436 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@3574 1437 height=48 src=BottomRightCornerBox.png width=181>
fantasai@566 1438 </table>
fantasai@566 1439
simon@7289 1440 <h3 id=margin-at-rules><span class=secno>6.1. </span>At-rules for
simon@7289 1441 page-margin boxes</h3>
simon@7289 1442
simon@7289 1443 <p>Page-margin boxes are created by <a href="#margin-at-rules">margin
fantasai@1738 1444 at-rules</a> inside the <a href="#page-context">page context</a>. These
fantasai@1738 1445 rules should come after any declarations in the page context as legacy
simon@6795 1446 clients may not handle declarations after margin at-rules correctly.
fantasai@566 1447
fantasai@566 1448 <p>A <dfn id=margin-at-rule>margin at-rule</dfn> consists of an <a
fantasai@566 1449 href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the
simon@7289 1450 page-margin box (e.g. <span class=css>‘<code
fantasai@5967 1451 class=css>@top-left</code>’</span>) and a block of declarations (said
simon@6795 1452 to be in the <dfn id=margin-context>margin context</dfn>).
fantasai@566 1453
fantasai@566 1454 <div class=example>
fantasai@566 1455 <p>The following style sheet establishes a page header containing the
fantasai@566 1456 title ("Hamlet") on the left side and the page number, preceded by "Page
simon@6795 1457 ", on the right side:
fantasai@566 1458
fantasai@528 1459 <pre>
fantasai@566 1460 @page {
fantasai@566 1461 size: 8.5in 11in;
fantasai@566 1462 margin: 10%;
fantasai@566 1463
fantasai@566 1464 @top-left {
fantasai@566 1465 content: "Hamlet";
fantasai@566 1466 }
fantasai@566 1467 @top-right {
fantasai@566 1468 content: "Page " counter(page);
fantasai@566 1469 }
fantasai@528 1470 }
fantasai@528 1471 </pre>
fantasai@528 1472 </div>
fantasai@528 1473
fantasai@1626 1474 <h3 id=populating-margin-boxes><span class=secno>6.2. </span>Populating
simon@7289 1475 page-margin boxes</h3>
fantasai@566 1476
fantasai@5969 1477 <p>As with the ‘<code class=css>:before</code>’ and ‘<code
fantasai@5969 1478 class=css>:after</code>’ pseudo-elements, a specified ‘<code
fantasai@5969 1479 class=property>content</code>’ of ‘<code class=css>normal</code>’
simon@7289 1480 on a page-margin box computes to ‘<code class=css>none</code>’, and
simon@7289 1481 the page-margin box is <dfn id=generated>generated</dfn> if and only if
simon@7289 1482 the computed value of its ‘<code class=property>content</code>’
simon@7289 1483 property is not ‘<code class=property>none</code>’. Otherwise it
simon@7289 1484 behaves as if it had ‘<code class=css>display: none</code>’.
fantasai@528 1485
fantasai@528 1486 <div class=example>
fantasai@566 1487 <p>The following style sheet creates a green box in each corner of the
simon@6795 1488 page except the bottom-left corner.
fantasai@566 1489
fantasai@528 1490 <pre>
fantasai@566 1491 @page {
fantasai@566 1492 @top-left-corner { content: " "; border: solid green; }
fantasai@1090 1493 @top-right-corner { content: url(foo.png); border: solid green; }
fantasai@1090 1494 @bottom-right-corner { content: counter(page); border: solid green; }
fantasai@566 1495 @bottom-left-corner { content: normal; border: solid green; }
fantasai@566 1496 }
fantasai@566 1497 </pre>
fantasai@566 1498 </div>
fantasai@566 1499
fantasai@7449 1500 <h3 id=margin-dimension><span class=secno>6.3. </span>Computing
simon@7289 1501 Page-margin Box Dimensions</h3>
simon@7289 1502
simon@7289 1503 <p>The width and height of each page-margin box is determined by the rules
fantasai@1090 1504 below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6
simon@7289 1505 for page-margin boxes.
fantasai@1090 1506
fantasai@5967 1507 <p>The rules for applying ‘<code class=property>min-height</code>’,
fantasai@5967 1508 ‘<code class=property>max-height</code>’, ‘<code
fantasai@5967 1509 class=property>min-width</code>’, and ‘<code
fantasai@5967 1510 class=property>max-width</code>’ <a href="#CSS21"
simon@7289 1511 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do apply to page-margin
simon@7289 1512 boxes and may imply a recalculation of the width, height, and/or margins
simon@7289 1513 if the dimensions resulting from the specified ‘<code
fantasai@5967 1514 class=property>width</code>’ or ‘<code
fantasai@5967 1515 class=property>height</code>’ violate their constraints. If the UA does
fantasai@5967 1516 not support the ‘<code class=property>min-height</code>’ or ‘<code
fantasai@5967 1517 class=property>min-width</code>’ properties then it must behave as if
fantasai@5967 1518 ‘<code class=property>min-height</code>’ and ‘<code
fantasai@5967 1519 class=property>min-width</code>’ were always zero.
fantasai@566 1520
fantasai@7449 1521 <h4 id=margin-box-terms><span class=secno>6.3.1. </span><a
fantasai@7449 1522 id=max-margin-dimension></a>Page-Margin Box Layout Terminology</h4>
fantasai@566 1523
fantasai@566 1524 <p>In addition to the box model definitions in CSS2.1 <a href="#CSS21"
fantasai@7448 1525 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the sizing terms in CSS
fantasai@7448 1526 Intrinsic Sizing <a href="#CSS3-SIZING"
fantasai@7448 1527 rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a>, the following
fantasai@7448 1528 terms are defined for use in the subsequent page-margin box calculations:
fantasai@566 1529
fantasai@566 1530 <dl>
fantasai@7448 1531 <dt><dfn id=available-width>available width</dfn>
fantasai@7448 1532
fantasai@7448 1533 <dd>The sum of the page’s left border width, left padding, <a
fantasai@566 1534 href="#page-box">page area</a> width, right padding, and right border
fantasai@566 1535 width. In other words, it is the distance between the <a
fantasai@7448 1536 href="#page-box">page box</a>’s left right border edges. This quantity
fantasai@7448 1537 is used when calculating dimensions of the top and bottom page-margin
fantasai@7448 1538 boxes.
fantasai@7448 1539
fantasai@7448 1540 <dt><dfn id=available-height>available height</dfn>
fantasai@7448 1541
fantasai@7448 1542 <dd>The sum of the page’s top border width, top padding, <a
fantasai@566 1543 href="#page-box">page area</a> height, bottom padding, and bottom border
fantasai@566 1544 width. In other words, it is the distance between the <a
fantasai@7448 1545 href="#page-box">page box</a>’s top bottom border edges. This quantity
fantasai@7448 1546 is used when calculating dimensions of the left and right page-margin
fantasai@7448 1547 boxes.
fantasai@7448 1548
simon@7496 1549 <dt><dfn id=outer-width>outer width</dfn>
simon@7496 1550
simon@7496 1551 <dd>The width of the <a
simon@7496 1552 href="http://www.w3.org/TR/CSS21/box.html#outer-edge">outer edge</a>, as
simon@7496 1553 defined in <a href="#CSS21"
simon@7496 1554 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
simon@7496 1555
fantasai@7448 1556 <dt><dfn id=outer-min-width>outer min width</dfn>
fantasai@7448 1557
simon@7496 1558 <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
simon@7496 1559 <a href="http://www.w3.org/TR/css3-sizing/#min-content">‘<code
fantasai@7448 1560 class=css>min-content</code>’</a> is used when the width is ‘<code
fantasai@7448 1561 class=css>auto</code>’.
fantasai@7448 1562
fantasai@7448 1563 <dt><dfn id=outer-max-width>outer max width</dfn>
fantasai@7448 1564
simon@7496 1565 <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
simon@7496 1566 <a href="http://www.w3.org/TR/css3-sizing/#max-content">‘<code
simon@6958 1567 class=css>max-content</code>’</a> is used when ‘<code
simon@6958 1568 class=property>width</code>’ is ‘<code class=css>auto</code>’.
simon@6957 1569 </dl>
simon@6957 1570
simon@7289 1571 <p>The <dfn id=containing-block>containing block</dfn> for a corner
simon@7289 1572 page-margin box is the rectangle defined by the intersection of the two
simon@7289 1573 page margins meeting at that corner.
simon@7289 1574
simon@7289 1575 <p>For all other page-margin boxes, the <dfn
simon@7289 1576 id=containing-block0>containing block</dfn> is the rectangle formed by
simon@7289 1577 the encapsulating page margin minus the containing blocks of the adjacent
simon@7289 1578 corners' page-margin boxes. This means that the size of this containing
simon@7289 1579 block is given in one dimension by the used page margin and in the other
fantasai@7448 1580 dimension by the <a href="#available-width"><i>available width</i></a>
fantasai@7448 1581 (for top and bottom page-margin boxes) or <a
fantasai@7448 1582 href="#available-height"><i>available height</i></a> (for left and right
fantasai@7448 1583 page-margin boxes).
fantasai@7448 1584
fantasai@7449 1585 <h4 id=variable-sizing><span class=secno>6.3.2. </span> Page-Margin Box
fantasai@1626 1586 Variable Dimension Computation Rules</h4>
fantasai@566 1587
fantasai@5967 1588 <p>The following rules apply to ‘<code
fantasai@5967 1589 class=property>top-left</code>’, ‘<code
fantasai@5967 1590 class=property>top-center</code>’ and ‘<code
simon@7289 1591 class=property>top-right</code>’ page-margin boxes, which are referred
simon@7289 1592 to as A, B, and C, respectively, in this section.
simon@6957 1593
fantasai@7449 1594 <h5 id=variable-auto-margins><span class=secno>6.3.2.1. </span>Margins</h5>
simon@7053 1595
simon@6957 1596 <p>If the ‘<code class=property>margin-left</code>’ or ‘<code
simon@6957 1597 class=property>margin-right</code>’ property of any of the three boxes
simon@6957 1598 computes to ‘<code class=css>auto</code>’, the used value is zero.
simon@6957 1599
fantasai@7449 1600 <h5 id=variable-auto-sizing><span class=secno>6.3.2.2. </span>Resolving
fantasai@7449 1601 ‘<code class=css>auto</code>’ widths</h5>
simon@6957 1602
simon@6957 1603 <p>The following algorithm determines the used width of each box. For this
simon@7055 1604 purpose, boxes that are not <a href="#generated"><i>generated</i></a> are
simon@7496 1605 assumed to have a ‘<code class=property>width</code>’ and an <a
simon@7496 1606 href="#outer-width"><i>outer width</i></a> of zero.
simon@6957 1607
simon@6958 1608 <p class=note> Note: The high-level goals are (in order of priority) to
simon@6957 1609 center the middle box (B) if it is generated, to minimize overflow and
simon@6957 1610 overlap, and to distribute space proportionally to the amount of content.
simon@6957 1611
fantasai@7448 1612 <p>If the middle box (B) is not <a href="#generated"><i>generated</i></a>,
fantasai@7448 1613 distribute the <a href="#available-width"><i>available width</i></a> to A
fantasai@7448 1614 and C as follows:
fantasai@7448 1615
fantasai@7448 1616 <ul>
fantasai@7448 1617 <li> If only one box has ‘<code class=css>width: auto</code>’, its
simon@7496 1618 used width is resolved so that the sum of the <a
simon@7496 1619 href="#outer-width"><i>outer width</i></a>s equals <a
simon@7496 1620 href="#available-width"><i>available width</i></a>.
fantasai@7448 1621
fantasai@7448 1622 <li id=flex-fit> If A and C both have ‘<code class=css>width:
fantasai@7448 1623 auto</code>’, distribute the space to each box as follows:
fantasai@7448 1624 <ol>
fantasai@7448 1625 <li>If the sum of the outer <i>max-content widths</i> is less than the
fantasai@7448 1626 <a href="#available-width"><i>available width</i></a>, call that
fantasai@7448 1627 difference the <i>flex space</i>. Calculate each box's <i>flex
fantasai@7448 1628 factor</i> as proportional to its outer <i>max-content width</i>, and
fantasai@7448 1629 set its used outer width to:
fantasai@7448 1630 <pre><i>max-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
fantasai@7448 1631
fantasai@7448 1632 <li>Otherwise if the sum of the outer <i>min-content widths</i> is less
fantasai@7448 1633 than the <a href="#available-width"><i>available width</i></a>, call
fantasai@7448 1634 that difference the <i>flex space</i> calculate each box's <i>flex
fantasai@7448 1635 factor</i> as proportional to its <i>max-content</i> minus
fantasai@7448 1636 <i>min-content</i>, and set its used outer width to:
fantasai@7448 1637 <pre><i>min-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
fantasai@7448 1638
fantasai@7448 1639 <li>Otherwise, calculate its outer size as in the previous case, but
fantasai@7448 1640 set each box's <i>flex factor</i> as proportional to its outer
fantasai@7448 1641 <i>min-content width</i>.
fantasai@7448 1642 </ol>
fantasai@7448 1643 In each case, both <i>flex factors</i> are assumed to be ‘<code
fantasai@7448 1644 class=css>1</code>’ if their sum is equal to zero.
fantasai@7448 1645 </ul>
fantasai@7448 1646
fantasai@7448 1647 <p>If the middle box (B) is <a href="#generated"><i>generated</i></a>,
fantasai@7448 1648 determine the ‘<code class=css>auto</code>’ widths of A, B, and C as
fantasai@7448 1649 follows:
fantasai@7448 1650
simon@7052 1651 <ol>
fantasai@7448 1652 <li> First, resolve any ‘<code class=css>auto</code>’ width of the
fantasai@7448 1653 middle box (B): Assume there are two boxes, B and AC, where each of AC's
fantasai@7448 1654 dimensions is double the maximum of A and C. (This preserves B's
fantasai@7448 1655 centering.) Distribute the space to these two boxes (B and the imaginary
fantasai@7448 1656 AC) as described for A and C <a href="#fit2">above</a>.
fantasai@7448 1657
fantasai@7448 1658 <li> Then, resolve any ‘<code class=css>auto</code>’ widths of the
fantasai@7448 1659 side boxes (A and C) by setting that box's outer width to
fantasai@7448 1660 <pre>(<a
fantasai@7448 1661 href="#available-width"><i>available width</i></a> − <i>used outer size of B</i>) ÷ 2</pre>
fantasai@7448 1662
fantasai@7448 1663 <pre>
fantasai@7448 1664 </pre>
simon@7052 1665 </ol>
fantasai@566 1666
fantasai@7449 1667 <h5 id=variable-minmax><span class=secno>6.3.2.3. </span>Handling ‘<code
fantasai@7449 1668 class=property>min-width</code>’ and ‘<code
simon@7054 1669 class=property>max-width</code>’</h5>
simon@7054 1670
simon@7054 1671 <p> The ‘<code class=property>min-width</code>’ and ‘<code
simon@7054 1672 class=property>max-width</code>’ properties <a href="#CSS21"
simon@7054 1673 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> apply to page-margin boxes in
simon@7054 1674 the variable dimension like on normal elements, except that the three
simon@7054 1675 boxes on the same side are considered together.
simon@7054 1676
simon@7054 1677 <p> More precisely:
simon@7054 1678
simon@7054 1679 <ol>
simon@7054 1680 <li> The tentative used widths are calculated (without ‘<code
simon@7054 1681 class=property>min-width</code>’ and ‘<code
simon@7054 1682 class=property>max-width</code>’) following the rules under <a
simon@7054 1683 href="#marginbox-variabledim-with">Resolving ‘<code
simon@7054 1684 class=css>auto</code>’ widths</a> above.
simon@7054 1685
simon@7054 1686 <li> If the tentative used width of any of the three boxes is greater
simon@7054 1687 than ‘<code class=property>max-width</code>’, the rules above are
simon@7054 1688 applied again, but this time using the computed value of ‘<code
simon@7054 1689 class=property>max-width</code>’ as the computed value for ‘<code
simon@7054 1690 class=property>width</code>’.
simon@7054 1691
simon@7054 1692 <li> If the resulting width of any of the three boxes is smaller than
simon@7054 1693 ‘<code class=property>min-width</code>’, the rules above are applied
simon@7054 1694 again, but this time using the value of ‘<code
simon@7054 1695 class=property>min-width</code>’ as the computed value for ‘<code
simon@7054 1696 class=property>width</code>’.
simon@7054 1697 </ol>
simon@7054 1698
fantasai@7449 1699 <h5 id=variable-position><span class=secno>6.3.2.4. </span>Positioning</h5>
simon@7053 1700
simon@7053 1701 <p> Once the dimensions of the boxes are determined, they are positioned
simon@7053 1702 as follows:
simon@7053 1703
simon@7053 1704 <ul>
simon@7053 1705 <li>The left outer edge of A is flush with the left edge of the
simon@7053 1706 containing block
simon@7053 1707
simon@7053 1708 <li>The outer area of B is centered in the containing block.
simon@7053 1709
simon@7053 1710 <li>The right outer edge of C is flush with the right edge of the
simon@7053 1711 containing block.
simon@7053 1712 </ul>
simon@7053 1713
fantasai@7449 1714 <h5 id=variable-mapping><span class=secno>6.3.2.5. </span>Boxes on other
fantasai@7449 1715 sides</h5>
simon@7053 1716
fantasai@5967 1717 <p>The used values for ‘<code class=property>bottom-left</code>’,
fantasai@5967 1718 ‘<code class=property>bottom-center</code>’ and ‘<code
simon@7289 1719 class=property>bottom-right</code>’ page-margin boxes are established
simon@7289 1720 by the same rules as for ‘<code class=property>top-left</code>’,
simon@7289 1721 ‘<code class=property>top-center</code>’, and ‘<code
simon@6795 1722 class=property>top-right</code>’, respectively.
fantasai@5967 1723
fantasai@5967 1724 <p>The used values for ‘<code class=property>left-top</code>’,
fantasai@5967 1725 ‘<code class=property>left-middle</code>’ and ‘<code
fantasai@5967 1726 class=property>left-bottom</code>’ boxes are established by the same
fantasai@5967 1727 rules, with "width" replaced by "height", "left" by "top", "right" by
simon@6795 1728 "bottom" and "center" by "middle".
fantasai@5967 1729
fantasai@5967 1730 <p>The used values for ‘<code class=property>right-top</code>’,
fantasai@5967 1731 ‘<code class=property>right-middle</code>’ and ‘<code
simon@7289 1732 class=property>right-bottom</code>’ page-margin boxes are established
simon@7289 1733 by the same rules as for ‘<code class=property>left-top</code>’,
simon@7289 1734 ‘<code class=property>left-middle</code>’ and ‘<code
simon@6795 1735 class=property>left-bottom</code>’, respectively.
fantasai@566 1736
fantasai@7449 1737 <h4 id=fixed-sizing><span class=secno>6.3.3. </span>Page-Margin Box Fixed
fantasai@7449 1738 Dimension Computation Rules</h4>
fantasai@566 1739
fantasai@5967 1740 <p>The rules below are used to calculate the used values of each ‘<code
fantasai@5967 1741 class=property>top-left-corner</code>’, ‘<code
fantasai@5967 1742 class=property>top-left</code>’, ‘<code
fantasai@5967 1743 class=property>top-center</code>’, ‘<code
fantasai@5967 1744 class=property>top-right</code>’, and ‘<code
simon@7289 1745 class=property>top-right-corner</code>’ page-margin box's ‘<code
fantasai@5967 1746 class=property>height</code>’, ‘<code
fantasai@5967 1747 class=property>margin-top</code>’, and ‘<code
simon@6795 1748 class=property>margin-bottom</code>’ properties:
fantasai@1090 1749
fantasai@1090 1750 <ol>
fantasai@1090 1751 <li>The following constraint must hold among the used values of the
fantasai@1090 1752 margin box's properties:
fantasai@5967 1753 <p>‘<code class=property>margin-top</code>’ + ‘<code
fantasai@5967 1754 class=property>border-top-width</code>’ + ‘<code
fantasai@5967 1755 class=property>padding-top</code>’ + ‘<code
fantasai@5967 1756 class=property>height</code>’ + ‘<code
fantasai@5967 1757 class=property>padding-bottom</code>’ + ‘<code
fantasai@5967 1758 class=property>border-bottom-width</code>’ + ‘<code
fantasai@5967 1759 class=property>margin-bottom</code>’ = top page margin
fantasai@5967 1760
fantasai@5967 1761 <li>If ‘<code class=property>border-top-width</code>’ + ‘<code
fantasai@5967 1762 class=property>padding-top</code>’ + ‘<code
fantasai@5967 1763 class=property>height</code>’ (if it is not ‘<code
fantasai@5967 1764 class=css>auto</code>’) + ‘<code
fantasai@5967 1765 class=property>padding-bottom</code>’ + ‘<code
fantasai@5967 1766 class=property>border-bottom-width</code>’, plus ‘<code
fantasai@5967 1767 class=property>margin-top</code>’ and/or ‘<code
fantasai@5967 1768 class=property>margin-bottom</code>’ if not ‘<code
fantasai@5967 1769 class=css>auto</code>’, is larger than the height of the top page
fantasai@5967 1770 margin, then any ‘<code class=css>auto</code>’ values for ‘<code
fantasai@5967 1771 class=property>margin-top</code>’ or ‘<code
fantasai@5967 1772 class=property>margin-bottom</code>’ are, for the following rules,
fantasai@1090 1773 treated as zero.
fantasai@1090 1774
fantasai@5967 1775 <li>If at this point all of ‘<code class=property>height</code>’,
fantasai@5967 1776 ‘<code class=property>margin-top</code>’, and ‘<code
fantasai@5967 1777 class=property>margin-bottom</code>’ have a computed value other than
fantasai@5967 1778 ‘<code class=css>auto</code>’, the values are said to be
fantasai@5967 1779 "over-constrained". In this case, the specified value of ‘<code
fantasai@5967 1780 class=property>margin-top</code>’ is treated as ‘<code
fantasai@5967 1781 class=property>auto</code>’.
fantasai@5967 1782
fantasai@5967 1783 <li>If there is now exactly one value specified as ‘<code
fantasai@5967 1784 class=property>auto</code>’, its used value follows from the equality.
fantasai@5967 1785
fantasai@5967 1786 <li>If ‘<code class=property>height</code>’ is set to ‘<code
fantasai@5967 1787 class=property>auto</code>’, any other ‘<code
fantasai@5967 1788 class=property>auto</code>’ values become ‘<code
fantasai@5967 1789 class=css>0</code>’ and ‘<code class=property>height</code>’
fantasai@5967 1790 follows from the resulting equality
fantasai@5967 1791
fantasai@5967 1792 <li>If both ‘<code class=property>margin-top</code>’ and ‘<code
fantasai@5967 1793 class=property>margin-bottom</code>’ are ‘<code
fantasai@5967 1794 class=property>auto</code>’, their used values are equal. This
simon@7289 1795 vertically centers the page-margin box content within the top page
simon@7289 1796 margin.
fantasai@1090 1797 </ol>
fantasai@566 1798
simon@7289 1799 <p>The same rules apply to the bottom page-margin boxes
simon@7289 1800 (bottom-left-corner, bottom-left, bottom-center, bottom-right, and
simon@7289 1801 bottom-right-corner), except that in the overconstrained case, the
simon@7289 1802 ‘<code class=property>margin-bottom</code>’ is ignored rather than
simon@7289 1803 the ‘<code class=property>margin-top</code>’.
simon@7289 1804
simon@7289 1805 <p>Analogous rules govern the properties for the left and right
simon@7289 1806 page-margin boxes with respect to ‘<code class=property>width</code>’
fantasai@566 1807 (top-left-corner, left-top, left-middle, left-bottom, and
fantasai@566 1808 bottom-left-corner; top-right-corner, right-top, right-middle,
fantasai@5967 1809 right-bottom, bottom-right-corner), with ‘<code
fantasai@5967 1810 class=property>top</code>’ replaced by ‘<code
fantasai@5967 1811 class=property>left</code>’, ‘<code class=property>bottom</code>’
fantasai@5967 1812 replaced by ‘<code class=property>right</code>’, and ‘<code
fantasai@5967 1813 class=property>height</code>’ replaced by ‘<code
fantasai@5967 1814 class=property>width</code>’. In the overconstrained case for left
simon@7289 1815 (right) page-margin boxes, the specified value of ‘<code
fantasai@5967 1816 class=property>margin-left</code>’ (‘<code
simon@6795 1817 class=property>margin-right</code>’) is ignored.
fantasai@566 1818
simon@7289 1819 <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box
simon@7289 1820 examples</h3>
simon@7289 1821
simon@7289 1822 <p>The following is a collection of examples of page-margin box usage.
fantasai@566 1823
fantasai@566 1824 <div class=example>
simon@6795 1825 <p>Here is an example of a page with only a top-left header:
fantasai@566 1826
fantasai@566 1827 <pre>
fantasai@566 1828 @page {
fantasai@566 1829 @top-left { content: "Header in Left Cell (top-left)" }
fantasai@528 1830 }
fantasai@528 1831 </pre>
fantasai@566 1832
fantasai@566 1833 <p>Because there are no contents defined for the top-center or the
simon@7289 1834 top-right page-margin boxes, the extent of the top-left page-margin box
simon@7289 1835 is allowed to cross the center of the page box.
simon@6795 1836
simon@6795 1837 <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>
fantasai@528 1838 </div>
fantasai@528 1839
fantasai@528 1840 <div class=example>
simon@6795 1841 <p>The following is an example of a page with a centered header:
fantasai@566 1842
fantasai@528 1843 <pre>
fantasai@566 1844 @page {
fantasai@566 1845 @top-center { content: "Header in Center Cell (top-center)" }
fantasai@566 1846 }
fantasai@528 1847 </pre>
fantasai@528 1848
simon@6795 1849 <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>
fantasai@528 1850 </div>
fantasai@528 1851
fantasai@566 1852 <div class=example>
fantasai@566 1853 <p>The following is an example of a page with a single header in the
simon@7289 1854 top-right page-margin box:
fantasai@566 1855
fantasai@566 1856 <pre>
fantasai@566 1857 @page {
fantasai@566 1858 @top-right { content: "Header in Right Cell (top-right)" }
fantasai@566 1859 }
fantasai@566 1860 </pre>
fantasai@566 1861
fantasai@566 1862 <p>Because the content of the center cell is empty, the extent of the
simon@7289 1863 top-right page-margin box is allowed to cross the center of the page
simon@7289 1864 box.
simon@6795 1865
simon@6795 1866 <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>
fantasai@528 1867 </div>
fantasai@528 1868
fantasai@566 1869 <div class=example>
fantasai@566 1870 <p>The following is an example of a page with a top-center and a top-left
simon@6795 1871 header:
fantasai@566 1872
fantasai@566 1873 <pre>
fantasai@566 1874 @page {
fantasai@566 1875 @top-left { content: "Left Cell (top-left)" }
fantasai@566 1876 @top-center { content: "Header in Center Cell (top-center)" }
fantasai@566 1877 }
fantasai@566 1878 </pre>
fantasai@566 1879
simon@6795 1880 <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>
fantasai@528 1881 </div>
fantasai@528 1882
fantasai@566 1883 <div class=example>
fantasai@566 1884 <p>The following is an example of a page with a top-center and a
simon@6795 1885 top-right header:
fantasai@566 1886
fantasai@566 1887 <pre>
fantasai@566 1888 @page {
fantasai@566 1889 @top-center { content: "Header in Center Cell (top-center)" }
fantasai@566 1890 @top-right { content: "Right Cell (top-right)" }
fantasai@566 1891 }
fantasai@566 1892 </pre>
fantasai@566 1893
simon@6795 1894 <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>
fantasai@566 1895 </div>
fantasai@566 1896
fantasai@566 1897 <div class=example>
fantasai@566 1898 <p>The following is an example of a page with top-left and top-right
simon@6795 1899 headers:
fantasai@566 1900
fantasai@566 1901 <pre>
fantasai@566 1902 @page {
fantasai@566 1903 @top-left { content: "Header in top-left with approx. "
fantasai@566 1904 "twice as many words as right cell." }
fantasai@566 1905 @top-right { content: "Right cell (top-right)" }
fantasai@566 1906 }
fantasai@566 1907 </pre>
fantasai@566 1908
fantasai@566 1909 <p>Because there are no center cell contents, the extent of the top-left
simon@6795 1910 is allowed to cross the center of the page box.
simon@6795 1911
simon@6795 1912 <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>
fantasai@566 1913 </div>
fantasai@566 1914
fantasai@1626 1915 <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>
fantasai@114 1916
fantasai@114 1917 <div>
simon@7573 1918 <p> <a href="#properties-list">Appendix A</a> defines the normative list
simon@7573 1919 of CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
simon@7573 1920 <a href="#page-property-list">properties that apply to page boxes</a>.
simon@7573 1921 If a conforming user agent supports any of these properties on block
simon@7573 1922 boxes, then it <em class=RFC2119>MUST</em> also support that property in
simon@7573 1923 the <a href="#page-context"><i>page context</i></a>. This specification
simon@7573 1924 also defines the ‘<a href="#size"><code
simon@7573 1925 class=property>size</code></a>’ property that only applies in the page
simon@7573 1926 context.
simon@7573 1927
simon@7573 1928 <p> Properties that apply to the page-margin boxes can also be set within
simon@7573 1929 the page context: if inheritable or explicitly inherited (with the
simon@7573 1930 ‘<code class=css>inherit</code>’ keyword in the margin context),
simon@7573 1931 they will inherit to the page-margin boxes.
simon@7573 1932
simon@7573 1933 <p> The same appendix defines the normative list of CSS 2.1 <a
simon@7573 1934 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a
simon@7573 1935 href="#page-property-list">properties that apply to page-margin
simon@7573 1936 boxes</a>. If a conforming user agent supports any of these properties
simon@7573 1937 on block boxes, then it <em class=RFC2119>MUST</em> also support that
simon@7573 1938 property in the <a href="#margin-context"><i>margin context</i></a>
simon@7573 1939 (except for <code>z-index</code>, which is optional for page-margin
simon@7573 1940 boxes.)
simon@7573 1941
simon@7573 1942 <p> Other properties defined by <a href="#CSS21"
fantasai@557 1943 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these
simon@7573 1944 contexts. Behavior for properties not included in CSS 2.1 is undefined.
annevk@150 1945
fantasai@213 1946 <p class=note> Note: The intent of leaving other properties undefined is
fantasai@213 1947 to allow the gradual addition of appropriate CSS3 properties as they
simon@6795 1948 emerge, without having to update this specification with each addition.
fantasai@114 1949
fantasai@1133 1950 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
fantasai@1133 1951 elements in the document</a>, both the page context and the margin
fantasai@1133 1952 context have a computed value for every property, even if that property
simon@7289 1953 does not apply to the page or page-margin box.
fantasai@1133 1954
fantasai@566 1955 <p>The normal rules for CSS properties apply with the following
simon@6795 1956 exceptions:
fantasai@114 1957
fantasai@114 1958 <ul>
simon@7289 1959 <li>page-margin boxes inherit from the page context. The page context
fantasai@1090 1960 inherits from the root element. However, since the previous revision of
fantasai@1090 1961 CSS Paged Media Level 3 did not specify this point, an implementation
fantasai@1090 1962 that sets inherited properties in the page context to their initial
fantasai@1090 1963 values (as for the root element) is also conformant to CSS Paged Media
fantasai@1090 1964 Level 3. Note that this exception will be removed in Level 4.
fantasai@1090 1965
fantasai@5967 1966 <li>Values in units of ‘<code class=css>em</code>’ and ‘<code
fantasai@5967 1967 class=css>ex</code>’ are interpreted relative to the font associated
fantasai@5967 1968 with their context. When used on the ‘<code
fantasai@5967 1969 class=property>font-size</code>’ property in the margin context, they
fantasai@5967 1970 are relative to the font of the page context. When used on the ‘<code
fantasai@5967 1971 class=property>font-size</code>’ property in the page context, they
fantasai@5967 1972 are relative to the ‘<code class=property>font-size</code>’ of the
fantasai@5967 1973 root element. However, since a previous revision of CSS Paged Media
fantasai@5967 1974 Level 3 was ambiguous on this point, an implementation that treats
fantasai@5967 1975 ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on
fantasai@5967 1976 ‘<code class=property>font-size</code>’ as relative to the initial
fantasai@5967 1977 value is also conformant to CSS Paged Media Level 3. Note that this
fantasai@5967 1978 exception will be removed in Level 4.
fantasai@211 1979
fantasai@211 1980 <li>Percentage values on the margin and padding properties are relative
fantasai@473 1981 to the dimensions of the containing block. For right and left values,
fantasai@473 1982 percentages are relative to the width of the containing block; for top
fantasai@114 1983 and bottom values, percentages are relative to the height of the
fantasai@473 1984 containing block.
fantasai@213 1985
fantasai@5967 1986 <li>The used values of ‘<code class=property>width</code>’ and
fantasai@5967 1987 ‘<code class=property>height</code>’ have special computation rules
simon@7289 1988 for page boxes and page-margin boxes; see <a href="#page-size">Page
simon@7289 1989 Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box
fantasai@5967 1990 Dimensions</a>.
fantasai@114 1991
fantasai@6061 1992 <li>The page background is positioned and painted <a href="#painting">as
fantasai@6061 1993 described above</a>.
fantasai@566 1994
fantasai@566 1995 <li>The rules for counter scoping are modified <a
fantasai@566 1996 href=page-based-counters>as described below</a>.
fantasai@658 1997
simon@7435 1998 <li> As on the ‘<code class=css>::before</code>’ and ‘<code
simon@7435 1999 class=css>::after</code>’ pseudo-elements, the ‘<code
fantasai@5967 2000 class=css>normal</code>’ value of the ‘<code
fantasai@5967 2001 class=property>content</code>’ property computes to ‘<code
simon@7289 2002 class=css>none</code>’ on page-margin boxes.
simon@7289 2003
simon@7289 2004 <li>On page-margin boxes, the ‘<code
fantasai@5975 2005 class=property>vertical-align</code>’ property behaves <a
fantasai@5975 2006 href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as
fantasai@5975 2007 specified for table cells</a>. It <em>always</em> performs alignment in
fantasai@5975 2008 the vertical dimension, regardless of writing mode.
fantasai@114 2009 </ul>
fantasai@114 2010
fantasai@213 2011 <p>It is <em class=RFC2119>recommended</em> that user agents establish a
fantasai@213 2012 default page margin via the user agent stylesheet that includes any
fantasai@213 2013 non-printable area. It is further <em class=RFC2119>recommended</em>
fantasai@114 2014 that authors assume that the default page area will not include
simon@6795 2015 unprintable regions.
fantasai@114 2016
fantasai@1626 2017 <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based
fantasai@566 2018 counters</h3>
fantasai@566 2019
simon@6957 2020 <p>Counters can be defined and controlled within an <span
simon@6957 2021 class=css>‘<code class=css>@page</code>’</span> rule, and used as
simon@7289 2022 content in page-margin boxes. This is useful for maintaining a page
simon@7289 2023 count.
fantasai@566 2024
fantasai@5967 2025 <p>A ‘<code class=property>counter-increment</code>’ within either a
fantasai@5967 2026 page or margin context causes the counter to increment with the
simon@6795 2027 generation of each page box.
fantasai@566 2028
fantasai@566 2029 <p>If a counter is reset or incremented within the page context, it is in
simon@7289 2030 scope for all page-margin boxes and obscures all counters of the same
simon@7289 2031 name within the document.
fantasai@566 2032
fantasai@566 2033 <p>If a counter is reset or incremented within a margin context, it is in
simon@7289 2034 scope for that page-margin box and obscures any counters of the same
simon@7289 2035 name in both the page context and the document.
fantasai@566 2036
fantasai@566 2037 <p>If a counter that has not been reset or incremented within the margin
fantasai@566 2038 context or the page context is used by counter() or counters() in the
simon@7289 2039 margin context, then the resultant value is exactly as if the
simon@7289 2040 page-margin box were an element within the document at the start of the
simon@7289 2041 page, inside the deepest element in the normal flow that spans the page
simon@7289 2042 break. Use of the counter in this way does not affect the calculation of
simon@7289 2043 the counter's value.
fantasai@566 2044
simon@7441 2045 <p> A counter named ‘<a href="#page"><code class=css>page</code></a>’
simon@7441 2046 is automatically created and incremented by 1 on every page of the
simon@7441 2047 document, unless the ‘<code class=property>counter-increment</code>’
simon@7441 2048 property in the <a href="#page-context"><i>page context</i></a>
simon@7441 2049 explicitly specifies a different increment for the ‘<a
simon@7441 2050 href="#page"><code class=css>page</code></a>’ counter. The implied
simon@7441 2051 ‘<a href="#page"><code class=css>page</code></a>’ counter is a real
simon@7441 2052 counter, and can be directly affected using the ‘<code
fantasai@5967 2053 class=property>counter-increment</code>’ and ‘<code
fantasai@5967 2054 class=property>counter-reset</code>’ properties when named explicitly
fantasai@5967 2055 in those properties. It can also be used in the ‘<code
fantasai@5967 2056 class=css>counter()</code>’ and ‘<code
simon@6795 2057 class=css>counters()</code>’ function forms.
fantasai@5967 2058
simon@7441 2059 <div class=example>
simon@7441 2060 <p>The following rules result in the placement of the current page
simon@7441 2061 number in the middle of the outside margin of each page.
simon@7441 2062
simon@7441 2063 <pre>
simon@7441 2064 @page {
simon@7441 2065 margin: 10%;
simon@7441 2066
simon@7441 2067 @top-center {
simon@7441 2068 font-family: sans-serif;
simon@7441 2069 font-weight: bold;
simon@7441 2070 font-size: 2em;
simon@7441 2071 content: counter(page);
simon@7441 2072 }
simon@7441 2073 }
simon@7441 2074 </pre>
simon@7441 2075
simon@7441 2076 <p>Adding the following rule will make all pages even-numbered.
simon@7441 2077
simon@7441 2078 <pre>
simon@7441 2079 @page {
simon@7441 2080 counter-increment: page 2;
simon@7441 2081 }
simon@7441 2082 </pre>
simon@7441 2083 </div>
simon@7441 2084
fantasai@5967 2085 <p>Additionally, a counter named ‘<a href="#page"><code
fantasai@5967 2086 class=css>pages</code></a>’ is automatically created by the UA. Its
fantasai@5967 2087 value is always the total number of pages in the document. (In
fantasai@5967 2088 continuous media this is always 1.) The value of ‘<a
fantasai@5967 2089 href="#page"><code class=css>pages</code></a>’ cannot be manipulated:
fantasai@5967 2090 while ‘<code class=property>counter-reset</code>’ and ‘<code
fantasai@5967 2091 class=property>counter-increment</code>’ statements that set it are
fantasai@5967 2092 valid, they have no effect.
fantasai@1101 2093
fantasai@566 2094 <p>In all other respects, page-associated counters behave as described in
fantasai@566 2095 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a
fantasai@566 2096 href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a
simon@6795 2097 href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.
fantasai@566 2098
simon@7289 2099 <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin
simon@7289 2100 boxes and default values</h3>
fantasai@566 2101
fantasai@566 2102 <p>Properties used within page or margin contexts take their initial
fantasai@566 2103 values from their respective property definitions; however, user agents
fantasai@566 2104 must behave as though the values in the following table were established
simon@6795 2105 by rules in the UA default style sheet.
fantasai@566 2106
fantasai@3574 2107 <table class=data id=margin-values
simon@7289 2108 summary="definition of page-margin box default properties">
simon@7289 2109 <caption>Table 2. Default values for Page-Margin Boxes</caption>
fantasai@566 2110
fantasai@566 2111 <thead>
fantasai@566 2112 <tr>
simon@7289 2113 <th>Page-margin box
fantasai@566 2114
fantasai@5967 2115 <th><span class=property>‘<code
fantasai@5967 2116 class=property>text-align</code>’</span>
fantasai@5967 2117
fantasai@5967 2118 <th><span class=property>‘<code
fantasai@5967 2119 class=property>vertical-align</code>’</span>
fantasai@566 2120
fantasai@566 2121 <tbody>
fantasai@566 2122 <tr>
fantasai@566 2123 <td><a href="#top-left-corner-box-def">top-left-corner</a>
fantasai@566 2124
fantasai@566 2125 <td>right
fantasai@566 2126
fantasai@566 2127 <td>middle
fantasai@566 2128
fantasai@566 2129 <tr>
fantasai@566 2130 <td><a href="#top-left-box-def">top-left</a>
fantasai@566 2131
fantasai@566 2132 <td>left
fantasai@566 2133
fantasai@566 2134 <td>middle
fantasai@566 2135
fantasai@566 2136 <tr>
fantasai@566 2137 <td><a href="#top-center-box-def">top-center</a>
fantasai@566 2138
fantasai@566 2139 <td>center
fantasai@566 2140
fantasai@566 2141 <td>middle
fantasai@566 2142
fantasai@566 2143 <tr>
fantasai@566 2144 <td><a href="#top-right-box-def">top-right</a>
fantasai@566 2145
fantasai@566 2146 <td>right
fantasai@566 2147
fantasai@566 2148 <td>middle
fantasai@566 2149
fantasai@566 2150 <tr>
fantasai@566 2151 <td><a href="#top-right-corner-box-def">top-right-corner</a>
fantasai@566 2152
fantasai@566 2153 <td>left
fantasai@566 2154
fantasai@566 2155 <td>middle
fantasai@566 2156
fantasai@566 2157 <tr>
fantasai@566 2158 <td><a href="#left-top-box-def">left-top</a>
fantasai@566 2159
fantasai@566 2160 <td>center
fantasai@566 2161
fantasai@566 2162 <td>top
fantasai@566 2163
fantasai@566 2164 <tr>
fantasai@566 2165 <td><a href="#left-middle-box-def">left-middle</a>
fantasai@566 2166
fantasai@566 2167 <td>center
fantasai@566 2168
fantasai@566 2169 <td>middle
fantasai@566 2170
fantasai@566 2171 <tr>
fantasai@566 2172 <td><a href="#left-bottom-box-def">left-bottom</a>
fantasai@566 2173
fantasai@566 2174 <td>center
fantasai@566 2175
fantasai@566 2176 <td>bottom
fantasai@566 2177
fantasai@566 2178 <tr>
fantasai@566 2179 <td><a href="#right-top-box-def">right-top</a>
fantasai@566 2180
fantasai@566 2181 <td>center
fantasai@566 2182
fantasai@566 2183 <td>top
fantasai@566 2184
fantasai@566 2185 <tr>
fantasai@566 2186 <td><a href="#right-middle-box-def">right-middle</a>
fantasai@566 2187
fantasai@566 2188 <td>center
fantasai@566 2189
fantasai@566 2190 <td>middle
fantasai@566 2191
fantasai@566 2192 <tr>
fantasai@566 2193 <td><a href="#right-bottom-box-def">right-bottom</a>
fantasai@566 2194
fantasai@566 2195 <td>center
fantasai@566 2196
fantasai@566 2197 <td>bottom
fantasai@566 2198
fantasai@566 2199 <tr>
fantasai@566 2200 <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>
fantasai@566 2201
fantasai@566 2202 <td>right
fantasai@566 2203
fantasai@566 2204 <td>middle
fantasai@566 2205
fantasai@566 2206 <tr>
fantasai@566 2207 <td><a href="#bottom-left-box-def">bottom-left</a>
fantasai@566 2208
fantasai@566 2209 <td>left
fantasai@566 2210
fantasai@566 2211 <td>middle
fantasai@566 2212
fantasai@566 2213 <tr>
fantasai@566 2214 <td><a href="#bottom-center-box-def">bottom-center</a>
fantasai@566 2215
fantasai@566 2216 <td>center
fantasai@566 2217
fantasai@566 2218 <td>middle
fantasai@566 2219
fantasai@566 2220 <tr>
fantasai@566 2221 <td><a href="#bottom-right-box-def">bottom-right</a>
fantasai@566 2222
fantasai@566 2223 <td>right
fantasai@566 2224
fantasai@566 2225 <td>middle
fantasai@566 2226
fantasai@566 2227 <tr>
fantasai@566 2228 <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>
fantasai@566 2229
fantasai@566 2230 <td>left
fantasai@566 2231
fantasai@566 2232 <td>middle
fantasai@566 2233 </table>
fantasai@566 2234
fantasai@566 2235 <div class=example>
fantasai@566 2236 <p>This example style sheet could be used to create a centered header
simon@6795 2237 with the current chapter name:
fantasai@566 2238
fantasai@566 2239 <pre>body {counter-reset: chapter;}
fantasai@566 2240 div.chapter {counter-increment: chapter;}
fantasai@566 2241 @page {
fantasai@566 2242 margin: 10%;
fantasai@566 2243 @top-center { content: "Chapter" counter(chapter) }
fantasai@566 2244 }
fantasai@566 2245 </pre>
fantasai@566 2246 </div>
fantasai@566 2247
fantasai@3574 2248 <h2 id=page-size><span class=secno>8. </span>Page Size</h2>
fantasai@528 2249
fantasai@528 2250 <p>People around the world use many different paper sizes. It is a goal
fantasai@528 2251 of this specification that web content should be adaptable to a range of
fantasai@528 2252 different sizes without having to write a specific style sheet for each
simon@6795 2253 paper size.
fantasai@528 2254
fantasai@528 2255 <p>However, in some situations it is important that a certain page size
fantasai@528 2256 achieves a certain style. One way to achieve this goal is to utilize the
fantasai@5967 2257 ‘<a href="#size"><code class=property>size</code></a>’ property,
fantasai@5967 2258 which indicates that the document should preferentially be displayed on
fantasai@5967 2259 a surface of a certain size; another method is to use Media Queries <a
fantasai@5967 2260 href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow
simon@6795 2261 different style sheets to be applied to different page sizes.
fantasai@5967 2262
fantasai@5967 2263 <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a
fantasai@5967 2264 href="#size"><code class=property>size</code></a>’ property</h3>
fantasai@5967 2265
fantasai@1052 2266 <table class=propdef summary="definition of the size property">
fantasai@528 2267 <tbody>
fantasai@528 2268 <tr>
fantasai@528 2269 <th>Name:
fantasai@528 2270
fantasai@528 2271 <td><dfn id=size>size</dfn>
fantasai@528 2272
fantasai@528 2273 <tr>
fantasai@528 2274 <th>Value:
fantasai@528 2275
fantasai@1124 2276 <td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait |
fantasai@1124 2277 landscape] ]
fantasai@528 2278
fantasai@528 2279 <tr>
fantasai@528 2280 <th>Initial:
fantasai@528 2281
fantasai@528 2282 <td>auto
fantasai@528 2283
fantasai@528 2284 <tr>
fantasai@528 2285 <td><em>Applies to:</em>
fantasai@528 2286
fantasai@528 2287 <td>page context
fantasai@528 2288
fantasai@528 2289 <tr>
fantasai@528 2290 <th>Inherited:
fantasai@528 2291
fantasai@528 2292 <td>N/A
fantasai@528 2293
fantasai@528 2294 <tr>
fantasai@528 2295 <th>Percentages:
fantasai@528 2296
fantasai@528 2297 <td>N/A
fantasai@528 2298
fantasai@528 2299 <tr>
fantasai@528 2300 <th>Media:
fantasai@528 2301
fantasai@528 2302 <td>paged
fantasai@528 2303
fantasai@528 2304 <tr>
fantasai@528 2305 <td><em>Computed value:</em>
fantasai@528 2306
fantasai@528 2307 <td>specified value
fantasai@528 2308 </table>
fantasai@528 2309
fantasai@3574 2310 <p>This property specifies the target size and orientation of the <a
simon@7491 2311 href="#page-box">page box</a>’s containing block. In the general case,
simon@7491 2312 where one page box is rendered onto one <a href="#page-sheet">page
simon@7491 2313 sheet</a>, the ‘<a href="#size"><code
simon@7491 2314 class=property>size</code></a>’ property also indicates the size of
simon@7491 2315 the destination page sheet.
fantasai@528 2316
fantasai@528 2317 <p>The size of a page box can either be "absolute" (fixed size) or
fantasai@5987 2318 "scalable" (i.e., fitting available sheet sizes). The first three values
fantasai@5987 2319 in the table below can be used to create scalable page boxes. Other
fantasai@5987 2320 values define a fixed-size page box, and thereby indicate the preferred
fantasai@5987 2321 output media size. When possible, output should be rendered on the media
fantasai@5987 2322 size indicated. If the specified size is not available, the rules for <a
fantasai@5987 2323 href="#renderingpages">transposing a page box to a different size</a>
simon@6795 2324 apply.
fantasai@528 2325
fantasai@4555 2326 <p>If a <a href="#size"><code>size</code></a> property declaration is
fantasai@5967 2327 qualified by a ‘<code class=css>width</code>’, ‘<code
fantasai@5967 2328 class=css>height</code>’, ‘<code class=css>device-width</code>’,
fantasai@5967 2329 ‘<code class=css>device-height</code>’, ‘<code
fantasai@5967 2330 class=css>aspect-ratio</code>’, ‘<code
fantasai@5967 2331 class=css>device-aspect-ratio</code>’ or ‘<code
fantasai@5967 2332 class=css>orientation</code>’ media query <a href="#MEDIAQ"
fantasai@4555 2333 rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on
fantasai@4555 2334 the size of the paper), then the declaration must be <a
fantasai@4568 2335 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
fantasai@5967 2336 queries do not honor ‘<a href="#size"><code
fantasai@5967 2337 class=property>size</code></a>’: they assume the paper size that would
simon@6795 2338 be chosen if no @page rules were specified.
fantasai@528 2339
fantasai@5987 2340 <p class=issue>It would be useful if media queries could respond at least
fantasai@5987 2341 to sizes specified on an unqualified @page.
fantasai@5987 2342
fantasai@528 2343 <div class=example>
fantasai@657 2344 <p>In the following example
fantasai@528 2345
fantasai@528 2346 <pre>
fantasai@528 2347 @page {
fantasai@528 2348 size: 4in 6in;
fantasai@528 2349 }
simon@6957 2350
fantasai@528 2351 @media (max-width: 6in) {
fantasai@528 2352 @page {
fantasai@528 2353 size: letter;
fantasai@528 2354 }
fantasai@528 2355 }
fantasai@528 2356 </pre>
fantasai@528 2357
fantasai@2094 2358 <p>The second <a href="#size"><code>size</code></a> declaration is
fantasai@2094 2359 ignored, i.e. the specified value of the <a
fantasai@2094 2360 href="#size"><code>size</code></a> property is <code>4in 6in</code>.
fantasai@528 2361 </div>
fantasai@528 2362
fantasai@528 2363 <table class=page-sizes>
fantasai@528 2364 <tbody>
fantasai@528 2365 <tr>
fantasai@528 2366 <th>Value
fantasai@528 2367
fantasai@528 2368 <th>Description
fantasai@528 2369
fantasai@528 2370 <tr>
fantasai@528 2371 <td>auto
fantasai@528 2372
fantasai@528 2373 <td>The page box will be set to a size and orientation chosen by the
fantasai@528 2374 UA. In the usual case, the page box size and orientation is chosen to
fantasai@528 2375 match the target media sheet.
fantasai@528 2376
fantasai@528 2377 <tr>
fantasai@528 2378 <td>landscape
fantasai@528 2379
fantasai@528 2380 <td>Specifies that the page's content be printed in landscape
fantasai@528 2381 orientation. The longer sides of the page box are horizontal. If a
fantasai@5967 2382 <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>
fantasai@5967 2383 is not specified, the size of the page sheet is chosen by the UA.
fantasai@528 2384
fantasai@528 2385 <tr>
fantasai@528 2386 <td>portrait
fantasai@528 2387
fantasai@528 2388 <td>Specifies that the page's content be printed in portrait
fantasai@528 2389 orientation. The shorter sides of the page box are horizontal. If a
fantasai@5967 2390 <span class=css>‘<code class=css>&lt;page-size&gt;</code>’</span>
fantasai@5967 2391 is not specified, the size of the page sheet is chosen by the UA.
fantasai@528 2392
fantasai@528 2393 <tr>
fantasai@528 2394 <td>&lt;length&gt;
fantasai@528 2395
fantasai@528 2396 <td>The page box will be set to the given absolute dimension(s). If
fantasai@528 2397 only one length value is specified, it sets both the width and height
fantasai@528 2398 of the page box (i.e., the box is a square). If two length values are
fantasai@528 2399 specified, the first establishes the page box width, and the second
fantasai@5967 2400 the page box height. Values in units of <span class=css>‘<code
fantasai@5967 2401 class=property>em</code>’</span> and <span class=css>‘<code
fantasai@5967 2402 class=property>ex</code>’</span> refer to the page context's font.
fantasai@5988 2403 Negative lengths are illegal.
fantasai@528 2404
fantasai@528 2405 <tr>
fantasai@528 2406 <td>&lt;page-size&gt;
fantasai@528 2407
fantasai@528 2408 <td>A page size can be specified using one of the following media
fantasai@528 2409 names. This is the equivalent of specifying the <span
fantasai@5967 2410 class=css>‘<code class=css>&lt;page-size&gt;</code>’</span> using
fantasai@5967 2411 length values. The definition of the the media names comes from
fantasai@5967 2412 <cite>Media Standardized Names</cite> <a href="#PWGMSN"
fantasai@528 2413 rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.
fantasai@528 2414 <dl>
fantasai@528 2415 <dt>A5
fantasai@528 2416
fantasai@528 2417 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm
fantasai@528 2418 high.
fantasai@528 2419
fantasai@528 2420 <dt>A4
fantasai@528 2421
simon@6795 2422 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm
fantasai@528 2423 high.
fantasai@528 2424
fantasai@528 2425 <dt>A3
fantasai@528 2426
fantasai@528 2427 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm
fantasai@528 2428 high.
fantasai@528 2429
fantasai@528 2430 <dt>B5
fantasai@528 2431
fantasai@528 2432 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm
fantasai@528 2433 high.
fantasai@528 2434
fantasai@528 2435 <dt>B4
fantasai@528 2436
fantasai@528 2437 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm
fantasai@528 2438 high.
fantasai@528 2439
fantasai@528 2440 <dt>letter
fantasai@528 2441
fantasai@528 2442 <dd>Equivalent to the size of North American letter media: 8.5
fantasai@528 2443 inches wide and 11 inches high
fantasai@528 2444
fantasai@528 2445 <dt>legal
fantasai@528 2446
fantasai@528 2447 <dd>Equivalent to the size of North American legal: 8.5 inches wide
fantasai@528 2448 by 14 inches high.
fantasai@528 2449
fantasai@528 2450 <dt>ledger
fantasai@528 2451
fantasai@528 2452 <dd>Equivalent to the size of North American ledger: 11 inches wide
fantasai@528 2453 by 17 inches high.
fantasai@528 2454 </dl>
fantasai@528 2455 </table>
fantasai@528 2456
fantasai@5967 2457 <p>The ‘<code class=css>&lt;page-size&gt;</code>’ names can be used
fantasai@5967 2458 in conjunction with ‘<code class=property>landscape</code>’ or
fantasai@5967 2459 ‘<code class=property>portrait</code>’ to indicate both size and
simon@6795 2460 orientation.
fantasai@528 2461
fantasai@1626 2462 <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>
fantasai@114 2463
fantasai@213 2464 <div class=example>
fantasai@213 2465 <pre>
fantasai@528 2466 @page {
fantasai@528 2467 size: A4 landscape;
fantasai@213 2468 }
fantasai@528 2469 </pre>
fantasai@528 2470
fantasai@528 2471 <p>The above example sets the width of the page box to be 297mm and the
fantasai@528 2472 height to be 210mm. The page box in this example should be rendered on
simon@6795 2473 a page sheet size of 210 mm by 297 mm.
fantasai@528 2474 </div>
fantasai@528 2475
fantasai@528 2476 <div class=example>
fantasai@528 2477 <p>In the following example, the outer edges of the page box will align
fantasai@528 2478 with the page. The percentage value on the <span
fantasai@5967 2479 class=property>‘<code class=property>margin</code>’</span> property
fantasai@5967 2480 is relative to the page size so if the page sheet dimensions are 210mm
fantasai@5967 2481 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are
fantasai@5967 2482 no page borders or padding set in the UA default style sheet, the
simon@6795 2483 resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).
fantasai@528 2484
fantasai@528 2485 <pre>
fantasai@528 2486 @page {
fantasai@528 2487 size: auto;/* auto is the initial value */
fantasai@528 2488 margin: 10%;
fantasai@213 2489 }
fantasai@211 2490 </pre>
fantasai@114 2491 </div>
fantasai@114 2492
fantasai@213 2493 <div class=example>
fantasai@213 2494 <pre>
fantasai@528 2495 @page {
fantasai@528 2496 size: 8.5in 11in;/* width height */
fantasai@213 2497 }
fantasai@211 2498 </pre>
fantasai@528 2499
fantasai@528 2500 <p>The above example sets the width of the page box to be 8.5 inches and
fantasai@528 2501 the height to be 11 inches. This indicates that the page sheet size
fantasai@5967 2502 should be 8.5"x11" and the orientation ‘<code
simon@6795 2503 class=property>portrait</code>’.
fantasai@114 2504 </div>
fantasai@114 2505
fantasai@1626 2506 <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media
fantasai@1626 2507 Queries</h4>
fantasai@528 2508
simon@6795 2509 <p>This section is informative.
fantasai@528 2510
fantasai@528 2511 <p>By using Media Queries <a href="#MEDIAQ"
fantasai@528 2512 rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can
fantasai@528 2513 express different stylistic preferences for different page sizes.
simon@6795 2514 Consider this example:
fantasai@528 2515
fantasai@528 2516 <div class=example style="font-size: 10pt;">
fantasai@213 2517 <pre>
simon@6957 2518 /* style sheet for "A4" printing */
fantasai@528 2519 @media print and (width: 21cm) and (height: 29.7cm) {
fantasai@528 2520 @page {
fantasai@528 2521 margin: 3cm;
fantasai@528 2522 }
fantasai@528 2523 }
simon@6957 2524
fantasai@528 2525 /* style sheet for "letter" printing */
fantasai@528 2526 @media print and (width: 8.5in) and (height: 11in) {
fantasai@528 2527 @page {
fantasai@528 2528 margin: 1in;
fantasai@528 2529 }
fantasai@528 2530 }
fantasai@114 2531 </pre>
fantasai@114 2532 </div>
fantasai@114 2533
fantasai@528 2534 <p>In the example above, "A4" sheets are given a "3cm" page margin, and
simon@6795 2535 "letter" sheets are given a "1in" page margin.
fantasai@528 2536
fantasai@1626 2537 <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes
fantasai@528 2538 that do not fit a page sheet</h3>
fantasai@528 2539
fantasai@528 2540 <p>If a page box does not match the target page sheet dimensions, the
simon@6795 2541 user agent should do one of the following (in order of preference):
fantasai@528 2542
fantasai@528 2543 <ol>
fantasai@528 2544 <li>Render the page box at the indicated size on a larger page sheet.
fantasai@528 2545
fantasai@528 2546 <li>Rotate the page box 90° if this will make the page box fit the page
fantasai@528 2547 sheet.
fantasai@528 2548
fantasai@528 2549 <li>Scale the page box to fit the page sheet. (The aspect ratio of the
fantasai@528 2550 page box <em class=RFC2119>should</em> be preserved.)
fantasai@528 2551
simon@7568 2552 <li>Graphically "slice" the page box onto multiple page sheets.
fantasai@528 2553
fantasai@528 2554 <li>Clip overflowed content (least preferred).
fantasai@528 2555 </ol>
fantasai@528 2556
fantasai@528 2557 <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user
simon@6795 2558 before performing these operations.
fantasai@528 2559
fantasai@1626 2560 <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the
fantasai@528 2561 page box on the sheet</h3>
fantasai@528 2562
simon@7568 2563 <p>When the page box is smaller than the page sheet, the user agent <em
simon@6795 2564 class=RFC2119>SHOULD</em> either:
fantasai@114 2565
fantasai@114 2566 <ul>
fantasai@528 2567 <li>center the page box on the sheet since this will align double-sided
fantasai@528 2568 pages and avoid accidental loss of information that is printed near the
fantasai@528 2569 edge of the sheet; or
fantasai@528 2570
simon@7568 2571 <li>position the page box in the upper left corner of the page sheet (or
simon@7568 2572 another corner, based on the ‘<code
simon@7568 2573 class=property>direction</code>’ and ‘<code
simon@7568 2574 class=property>writing-mode</code>’ properties of the page box) as
fantasai@528 2575 this may minimize media consumption.
fantasai@114 2576 </ul>
fantasai@528 2577
fantasai@528 2578 <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in
fantasai@528 2579 this regard.</p>
fantasai@528 2580 <!-- "Page selector and page context" -->
simon@7430 2581 <h2 id=page-breaks><span class=secno>9. </span> <a
simon@7430 2582 id=pg-br-before-after></a> <a id=page-break-before></a> <a
simon@7430 2583 id=page-break-after></a> <a id=page-break-inside></a> <a
simon@7430 2584 id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a
simon@7430 2585 id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a
simon@7430 2586 id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>
simon@7430 2587 <a id=best-pg-brk></a> Page Breaks</h2>
simon@7430 2588
simon@7493 2589 <p> The CSS Fragmentation Module <a href="#CSS3-BREAK"
simon@7430 2590 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines
simon@7430 2591 how and where CSS boxes can be <i>fragmented</i>, including across page
simon@7430 2592 breaks. It defines a few properties that indicate where the user agent
simon@7430 2593 <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,
simon@7430 2594 and on what page (left or right) the subsequent content resumes. Each
fantasai@213 2595 page break ends layout in the current <a href="#page-box">page box</a>
fantasai@213 2596 and causes remaining pieces of the document tree to be laid out in a new
simon@6795 2597 page box.
fantasai@213 2598
simon@7430 2599 <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:
simon@7430 2600 ‘<a href="#page"><code class=property>page</code></a>’</h3>
fantasai@211 2601
fantasai@1052 2602 <table class=propdef summary="property definition">
fantasai@114 2603 <tbody>
fantasai@114 2604 <tr>
fantasai@213 2605 <th>Name:
fantasai@213 2606
simon@7430 2607 <td><dfn id=page>page</dfn>
fantasai@114 2608
fantasai@114 2609 <tr>
fantasai@213 2610 <th>Value:
fantasai@213 2611
simon@7430 2612 <td>auto | &lt;identifier&gt;
fantasai@114 2613
fantasai@114 2614 <tr>
fantasai@213 2615 <th>Initial:
fantasai@213 2616
fantasai@213 2617 <td>auto
fantasai@114 2618
fantasai@114 2619 <tr>
fantasai@213 2620 <th>Applies to:
fantasai@213 2621
fantasai@7436 2622 <td>boxes that create <a
fantasai@7436 2623 href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break
fantasai@7436 2624 points
fantasai@114 2625
fantasai@114 2626 <tr>
fantasai@213 2627 <th>Inherited:
fantasai@213 2628
simon@7430 2629 <td>no (but see prose)
fantasai@114 2630
fantasai@114 2631 <tr>
fantasai@213 2632 <th>Percentages:
fantasai@213 2633
fantasai@213 2634 <td>N/A
fantasai@114 2635
fantasai@114 2636 <tr>
fantasai@213 2637 <th>Media:
fantasai@213 2638
fantasai@213 2639 <td>paged
fantasai@114 2640
fantasai@114 2641 <tr>
fantasai@213 2642 <th>Computed value:
fantasai@213 2643
fantasai@213 2644 <td>specified value
fantasai@114 2645 </table>
fantasai@114 2646
fantasai@7436 2647 <p> The ‘<a href="#page"><code class=property>page</code></a>’
fantasai@7436 2648 property is used to specify a particular type of page (called a <dfn
fantasai@7436 2649 id=named-page>named page</dfn>) on which an element <em
fantasai@7436 2650 class=RFC2119>MUST</em> be displayed. If necessary, a <i>forced page
fantasai@7436 2651 break</i> is introduced and a new page generated of the specified type.
fantasai@7436 2652
simon@7556 2653 <p class=note> This page can be styled by using the same type name in a
simon@7556 2654 <a href="#page-selectors">page selector</a>.
simon@7556 2655
simon@7553 2656 <p> Page type names are case-sensitive identifiers. However the ‘<code
fantasai@7436 2657 class=css>auto</code>’ value, being a CSS keyword, is <a
fantasai@7436 2658 href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
fantasai@7436 2659 case-insensitive</a>.
fantasai@213 2660
simon@7430 2661 <p> The ‘<a href="#page"><code class=property>page</code></a>’
fantasai@5967 2662 property does not inherit. However, if the ‘<a href="#page"><code
fantasai@5967 2663 class=property>page</code></a>’ value on an element is ‘<code
fantasai@7436 2664 class=css>auto</code>’, then its used value is the value specified on
fantasai@7436 2665 its nearest ancestor with a non-auto value. When specified on the root
simon@7557 2666 element, the used value for ‘<code class=css>auto</code>’ is the
simon@7557 2667 empty string.
fantasai@7436 2668 <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
fantasai@7436 2669
fantasai@7436 2670 <p> Because a previous version of this specification indicated that the
fantasai@5967 2671 ‘<a href="#page"><code class=property>page</code></a>’ property is
fantasai@5967 2672 inherited, an implementation that inherits the ‘<a href="#page"><code
fantasai@5967 2673 class=property>page</code></a>’ property and treats ‘<code
fantasai@5967 2674 class=css>auto</code>’ as always naming the empty string remains
simon@7560 2675 conformant to CSS Paged Media Level 3. Note that this exception will be
simon@7560 2676 removed in Level 4. Therefore authors should not explicitly specify the
simon@7560 2677 ‘<code class=css>auto</code>’ value on a descendant of an element
simon@7560 2678 with a non-‘<code class=css>auto</code>’ value, as the resulting
simon@7560 2679 behavior will be unpredictable.
fantasai@114 2680
simon@7556 2681 <p> The ‘<a href="#page"><code class=property>page</code></a>’
simon@7556 2682 property works as follows:
simon@7556 2683
simon@7556 2684 <ol>
simon@7556 2685 <li> First, any ‘<code class=css>auto</code>’ values are resolved
simon@7556 2686 against non-‘<code class=css>auto</code>’ ancestors (as specified
simon@7556 2687 above).
simon@7556 2688
simon@7556 2689 <li> Next, a <dfn id=start-page-value>start ‘<code
simon@7556 2690 class=property>page</code>’ value</dfn> and <dfn
simon@7556 2691 id=end-page-value>end ‘<code class=property>page</code>’
simon@7556 2692 value</dfn> is determined for each box as the value (if any) propagated
simon@7556 2693 from its first or last child (respectively), else the used value on the
simon@7556 2694 box itself. A child propagates its own <a href="#start-page-value"><i
simon@7556 2695 title="start page value">start</i></a> or <a
simon@7556 2696 href="#end-page-value"><i>end ‘<code class=property>page</code>’
simon@7556 2697 value</i></a> if and only if the ‘<a href="#page"><code
simon@7556 2698 class=property>page</code></a>’ property applies to it.
simon@7556 2699
simon@7558 2700 <li> The first printed page’s type is the <a
simon@7558 2701 href="#start-page-value"><i>start ‘<code
simon@7558 2702 class=property>page</code>’ value</i></a> of the root.
simon@7558 2703
simon@7556 2704 <li> If for any two boxes meeting at a <a
simon@7556 2705 href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break
simon@7556 2706 point, the <a href="#end-page-value"><i>end ‘<code
simon@7556 2707 class=property>page</code>’ value</i></a> of the box preceding the
simon@7556 2708 break and <a href="#start-page-value"><i>start ‘<code
simon@7556 2709 class=property>page</code>’ value</i></a> of the box succeeding the
simon@7556 2710 break do not match, then a page break is forced between the two boxes,
simon@7556 2711 and content after the break resumes on a page box of the named type.
simon@7556 2712 </ol>
simon@7556 2713
simon@7556 2714 <p class=note> Essentially, the two ‘<a href="#page"><code
simon@7556 2715 class=property>page</code></a>’ values compared are those from the
simon@7556 2716 deepest boxes meeting at the class 1 break point, ignoring any subtrees
simon@7556 2717 rooted by boxes to which the ‘<a href="#page"><code
simon@7556 2718 class=property>page</code></a>’ property does not apply.
simon@7556 2719
fantasai@7436 2720 <p>See <a href="#CSS3-BREAK"
fantasai@7436 2721 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> for additional
fantasai@7436 2722 details on page breaks.
fantasai@1054 2723
fantasai@213 2724 <div class=example>
fantasai@213 2725 <p>In this example, the two tables are rendered on landscape pages
fantasai@114 2726 (indeed, on the same page, if they fit). The page type "narrow" is used
fantasai@114 2727 for the &lt;p&gt; after the second table, as the page properties for
simon@6795 2728 the table element are no longer in effect:
fantasai@114 2729
fantasai@213 2730 <pre>
fantasai@213 2731 @page narrow { size: 9cm 18cm }
fantasai@213 2732 @page rotated { size: landscape }
fantasai@213 2733 div { page: narrow }
fantasai@213 2734 table { page: rotated }
fantasai@211 2735 </pre>
fantasai@114 2736 with this document:
fantasai@213 2737 <pre>
fantasai@213 2738 &lt;div&gt;
fantasai@213 2739 &lt;table&gt;...&lt;/table&gt;
fantasai@213 2740 &lt;table&gt;...&lt;/table&gt;
fantasai@213 2741 &lt;p&gt;This text is rendered on a 'narrow' page&lt;/p&gt;
fantasai@213 2742 &lt;/div&gt;
fantasai@211 2743 </pre>
fantasai@114 2744 </div>
fantasai@114 2745
fantasai@6813 2746 <div class=example>
fantasai@6813 2747 <p>In Japanese documents, sometimes different parts of a single document
fantasai@6813 2748 will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"
fantasai@6813 2749 rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a
fantasai@6813 2750 href="#page"><code class=property>page</code></a>’ property, together
simon@6957 2751 with ‘<code class=css>@page</code>’ rules specifying different page
simon@6957 2752 widths, can accomodate this type of layout:
fantasai@6813 2753
fantasai@6813 2754 <pre>
fantasai@6813 2755 &lt;!DOCTYPE html>
fantasai@6813 2756 &lt;html lang="ja">
fantasai@6813 2757 &lt;style>
fantasai@6813 2758 html { writing-mode: vertical-rl;
fantasai@6813 2759 line-height: 1.6; }
fantasai@6813 2760 .main { page: main;
fantasai@6813 2761 columns: 2; column-gap: 1rem; }
fantasai@6813 2762 .index { page: index;
fantasai@6813 2763 columns: 3; column-gap: 1rem; }
fantasai@6813 2764 @page { margin: auto; /* center kihon hanmen on page */
fantasai@6813 2765 width: 40rem; } /* 1.6 × 25 lines */
fantasai@6813 2766 @page main { height: 61rem; } /* 2 × 30 chars + 1 × gap */
fantasai@6813 2767 @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
fantasai@6813 2768 &lt;/style>
fantasai@6813 2769 &lt;section class="main"> ... &lt;/section>
fantasai@6813 2770 &lt;section class="index"> ... &lt;/section>
fantasai@6813 2771 &lt;/html>
fantasai@6813 2772 </pre>
fantasai@6813 2773 </div>
fantasai@6813 2774
fantasai@1626 2775 <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>
fantasai@566 2776
simon@7428 2777 <p class=note>This section has been moved to <a href="#CSS3-IMAGES"
simon@7428 2778 rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.
fantasai@213 2779
fantasai@563 2780 <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1
fantasai@563 2781 Properties</h2>
fantasai@528 2782
simon@7573 2783 <h3 class=no-num id=page-property-list> CSS 2.1 Properties that apply
simon@7573 2784 within the page context</h3>
simon@7573 2785
simon@7573 2786 <p> This list is described in the <a href="#page-properties">Page
simon@7573 2787 Properties</a> section.
fantasai@213 2788
fantasai@213 2789 <table class=property-list>
fantasai@114 2790 <tbody>
fantasai@114 2791 <tr>
fantasai@5976 2792 <td rowspan=2><a
fantasai@5976 2793 href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
fantasai@563 2794 properties</a>
fantasai@563 2795
fantasai@563 2796 <td>direction
fantasai@563 2797
fantasai@563 2798 <tbody>
fantasai@563 2799 <tr>
fantasai@213 2800 <td rowspan=6><a
fantasai@5976 2801 href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
fantasai@213 2802 properties</a>
fantasai@213 2803
fantasai@213 2804 <td>background-color
fantasai@114 2805
fantasai@114 2806 <tr>
fantasai@213 2807 <td>background-image
fantasai@114 2808
fantasai@114 2809 <tr>
fantasai@213 2810 <td>background-repeat
fantasai@114 2811
fantasai@114 2812 <tr>
fantasai@213 2813 <td>background-attachment
fantasai@114 2814
fantasai@114 2815 <tr>
fantasai@213 2816 <td>background-position
fantasai@114 2817
fantasai@114 2818 <tr>
fantasai@213 2819 <td>background
fantasai@114 2820
fantasai@561 2821 <tbody>
fantasai@114 2822 <tr>
fantasai@5976 2823 <td rowspan=20><a
fantasai@5976 2824 href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
fantasai@213 2825 properties</a>
fantasai@213 2826
fantasai@213 2827 <td>border-top-width
fantasai@114 2828
fantasai@114 2829 <tr>
fantasai@213 2830 <td>border-right-width
fantasai@114 2831
fantasai@114 2832 <tr>
fantasai@213 2833 <td>border-bottom-width
fantasai@114 2834
fantasai@114 2835 <tr>
fantasai@213 2836 <td>border-left-width
fantasai@114 2837
fantasai@114 2838 <tr>
fantasai@213 2839 <td>border-width
fantasai@114 2840
fantasai@114 2841 <tr>
fantasai@213 2842 <td>border-top-color
fantasai@114 2843
fantasai@114 2844 <tr>
fantasai@213 2845 <td>border-right-color
fantasai@114 2846
fantasai@114 2847 <tr>
fantasai@213 2848 <td>border-bottom-color
fantasai@114 2849
fantasai@114 2850 <tr>
fantasai@213 2851 <td>border-left-color
fantasai@114 2852
fantasai@114 2853 <tr>
fantasai@213 2854 <td>border-color
fantasai@114 2855
fantasai@114 2856 <tr>
fantasai@213 2857 <td>border-top-style
fantasai@114 2858
fantasai@114 2859 <tr>
fantasai@213 2860 <td>border-right-style
fantasai@114 2861
fantasai@114 2862 <tr>
fantasai@213 2863 <td>border-bottom-style
fantasai@114 2864
fantasai@114 2865 <tr>
fantasai@213 2866 <td>border-left-style
fantasai@114 2867
fantasai@114 2868 <tr>
fantasai@213 2869 <td>border-short-style
fantasai@114 2870
fantasai@114 2871 <tr>
fantasai@213 2872 <td>border-top
fantasai@114 2873
fantasai@114 2874 <tr>
fantasai@213 2875 <td>border-right
fantasai@114 2876
fantasai@114 2877 <tr>
fantasai@213 2878 <td>border-bottom
fantasai@114 2879
fantasai@114 2880 <tr>
fantasai@213 2881 <td>border-left
fantasai@114 2882
fantasai@114 2883 <tr>
fantasai@213 2884 <td>border
fantasai@114 2885
fantasai@561 2886 <tbody>
fantasai@114 2887 <tr>
fantasai@5976 2888 <td rowspan=2><a
fantasai@5976 2889 href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
fantasai@563 2890 properties</a>
fantasai@213 2891
fantasai@213 2892 <td>counter-reset
fantasai@114 2893
fantasai@114 2894 <tr>
fantasai@213 2895 <td>counter-increment
fantasai@114 2896
fantasai@561 2897 <tbody>
fantasai@114 2898 <tr>
fantasai@5976 2899 <td colspan=2><a
fantasai@5976 2900 href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
fantasai@114 2901
fantasai@561 2902 <tbody>
fantasai@114 2903 <tr>
fantasai@5976 2904 <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
fantasai@5976 2905 properties</a>
fantasai@213 2906
fantasai@213 2907 <td>font-family
fantasai@114 2908
fantasai@114 2909 <tr>
fantasai@563 2910 <td>font-size
fantasai@563 2911
fantasai@563 2912 <tr>
fantasai@213 2913 <td>font-style
fantasai@114 2914
fantasai@114 2915 <tr>
fantasai@213 2916 <td>font-variant
fantasai@114 2917
fantasai@114 2918 <tr>
fantasai@213 2919 <td>font-weight
fantasai@114 2920
fantasai@114 2921 <tr>
fantasai@213 2922 <td>font
fantasai@114 2923
fantasai@561 2924 <tbody>
fantasai@114 2925 <tr>
fantasai@3574 2926 <td rowspan=3><a
fantasai@5976 2927 href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
fantasai@5976 2928 <a
fantasai@5976 2929 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
fantasai@3574 2930
fantasai@3574 2931 <td>height
fantasai@3574 2932
fantasai@3574 2933 <tr>
fantasai@3574 2934 <td>min-height
fantasai@3574 2935
fantasai@3574 2936 <tr>
fantasai@3574 2937 <td>max-height
fantasai@3574 2938
fantasai@3574 2939 <tbody>
fantasai@3574 2940 <tr>
fantasai@213 2941 <td colspan=2><a
fantasai@5976 2942 href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
fantasai@114 2943
fantasai@561 2944 <tbody>
fantasai@114 2945 <tr>
fantasai@5976 2946 <td rowspan=5><a
fantasai@5976 2947 href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
fantasai@213 2948 properties</a>
fantasai@213 2949
fantasai@213 2950 <td>margin-top
fantasai@114 2951
fantasai@114 2952 <tr>
fantasai@213 2953 <td>margin-right
fantasai@114 2954
fantasai@114 2955 <tr>
fantasai@213 2956 <td>margin-bottom
fantasai@114 2957
fantasai@114 2958 <tr>
fantasai@213 2959 <td>margin-left
fantasai@114 2960
fantasai@114 2961 <tr>
fantasai@213 2962 <td>margin
fantasai@114 2963
fantasai@561 2964 <tbody>
fantasai@114 2965 <tr>
fantasai@5976 2966 <td rowspan=5><a
fantasai@5976 2967 href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
fantasai@563 2968 properties</a>
fantasai@563 2969
fantasai@563 2970 <td>outline-width
fantasai@563 2971
fantasai@563 2972 <tr>
fantasai@563 2973 <td>outline-style
fantasai@563 2974
fantasai@563 2975 <tr>
fantasai@563 2976 <td>outline-color
fantasai@563 2977
fantasai@563 2978 <tr>
fantasai@563 2979 <td>outline
fantasai@563 2980
fantasai@563 2981 <tbody>
fantasai@563 2982 <tr>
fantasai@5976 2983 <td rowspan=5><a
fantasai@5976 2984 href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
fantasai@213 2985 properties</a>
fantasai@213 2986
fantasai@213 2987 <td>padding-top
fantasai@114 2988
fantasai@114 2989 <tr>
fantasai@213 2990 <td>padding-right
fantasai@211 2991
fantasai@211 2992 <tr>
fantasai@213 2993 <td>padding-bottom
fantasai@211 2994
fantasai@211 2995 <tr>
fantasai@213 2996 <td>padding-left
fantasai@211 2997
fantasai@211 2998 <tr>
fantasai@213 2999 <td>padding
fantasai@211 3000
fantasai@561 3001 <tbody>
fantasai@211 3002 <tr>
fantasai@563 3003 <td colspan=2><a
fantasai@5976 3004 href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
fantasai@211 3005
fantasai@561 3006 <tbody>
fantasai@211 3007 <tr>
simon@7567 3008 <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
fantasai@5976 3009 properties</a>
fantasai@563 3010
fantasai@563 3011 <td>letter-spacing
fantasai@211 3012
fantasai@211 3013 <tr>
fantasai@213 3014 <td>text-align
fantasai@211 3015
fantasai@211 3016 <tr>
fantasai@213 3017 <td>text-decoration
fantasai@211 3018
fantasai@211 3019 <tr>
fantasai@563 3020 <td>text-indent
fantasai@563 3021
fantasai@563 3022 <tr>
fantasai@563 3023 <td>text-transform
fantasai@563 3024
fantasai@563 3025 <tr>
fantasai@563 3026 <td>white-space
fantasai@211 3027
fantasai@211 3028 <tr>
fantasai@213 3029 <td>word-spacing
fantasai@211 3030
fantasai@561 3031 <tbody>
fantasai@211 3032 <tr>
fantasai@213 3033 <td colspan=2><a
fantasai@5976 3034 href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
fantasai@3574 3035
fantasai@3574 3036 <tbody>
fantasai@3574 3037 <tr>
fantasai@3574 3038 <td rowspan=3><a
fantasai@5976 3039 href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
fantasai@5976 3040 <a
fantasai@5976 3041 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
fantasai@3574 3042
fantasai@3574 3043 <td>width
fantasai@3574 3044
fantasai@3574 3045 <tr>
fantasai@3574 3046 <td>min-width
fantasai@3574 3047
fantasai@3574 3048 <tr>
fantasai@3574 3049 <td>max-width
fantasai@114 3050 </table>
fantasai@114 3051
simon@7573 3052 <h3 class=no-num id=margin-property-list> CSS 2.1 properties that apply
simon@7573 3053 within the margin contexts</h3>
simon@7573 3054
simon@7573 3055 <p> This list is described in the <a href="#page-properties">Page
simon@7573 3056 Properties</a> section.
fantasai@114 3057
fantasai@213 3058 <table class=property-list>
fantasai@114 3059 <tbody>
fantasai@114 3060 <tr>
fantasai@5976 3061 <td rowspan=2><a
fantasai@5976 3062 href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
fantasai@563 3063 properties</a>
fantasai@563 3064
fantasai@563 3065 <td>direction
fantasai@563 3066
fantasai@563 3067 <tr>
fantasai@563 3068 <td>unicode-bidi
fantasai@563 3069
fantasai@563 3070 <tbody>
fantasai@563 3071 <tr>
fantasai@213 3072 <td rowspan=6><a
fantasai@5976 3073 href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
fantasai@213 3074 properties</a>
fantasai@213 3075
fantasai@213 3076 <td>background-color
fantasai@114 3077
fantasai@114 3078 <tr>
fantasai@213 3079 <td>background-image
fantasai@114 3080
fantasai@114 3081 <tr>
fantasai@213 3082 <td>background-repeat
fantasai@114 3083
fantasai@114 3084 <tr>
fantasai@213 3085 <td>background-attachment
fantasai@114 3086
fantasai@114 3087 <tr>
fantasai@213 3088 <td>background-position
fantasai@114 3089
fantasai@114 3090 <tr>
fantasai@213 3091 <td>background
fantasai@114 3092
fantasai@561 3093 <tbody>
fantasai@114 3094 <tr>
fantasai@5976 3095 <td rowspan=20><a
fantasai@5976 3096 href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
fantasai@213 3097 properties</a>
fantasai@213 3098
fantasai@213 3099 <td>border-top-width
fantasai@114 3100
fantasai@114 3101 <tr>
fantasai@213 3102 <td>border-right-width
fantasai@114 3103
fantasai@114 3104 <tr>
fantasai@213 3105 <td>border-bottom-width
fantasai@114 3106
fantasai@114 3107 <tr>
fantasai@213 3108 <td>border-left-width
fantasai@114 3109
fantasai@114 3110 <tr>
fantasai@213 3111 <td>border-width
fantasai@114 3112
fantasai@114 3113 <tr>
fantasai@213 3114 <td>border-top-color
fantasai@114 3115
fantasai@114 3116 <tr>
fantasai@213 3117 <td>border-right-color
fantasai@114 3118
fantasai@114 3119 <tr>
fantasai@213 3120 <td>border-bottom-color
fantasai@114 3121
fantasai@114 3122 <tr>
fantasai@213 3123 <td>border-left-color
fantasai@114 3124
fantasai@114 3125 <tr>
fantasai@213 3126 <td>border-color
fantasai@114 3127
fantasai@114 3128 <tr>
fantasai@213 3129 <td>border-top-style
fantasai@114 3130
fantasai@114 3131 <tr>
fantasai@213 3132 <td>border-right-style
fantasai@114 3133
fantasai@114 3134 <tr>
fantasai@213 3135 <td>border-bottom-style
fantasai@114 3136
fantasai@114 3137 <tr>
fantasai@213 3138 <td>border-left-style
fantasai@114 3139
fantasai@114 3140 <tr>
fantasai@213 3141 <td>border-short-style
fantasai@114 3142
fantasai@114 3143 <tr>
fantasai@213 3144 <td>border-top
fantasai@114 3145
fantasai@114 3146 <tr>
fantasai@213 3147 <td>border-right
fantasai@114 3148
fantasai@114 3149 <tr>
fantasai@213 3150 <td>border-bottom
fantasai@114 3151
fantasai@114 3152 <tr>
fantasai@213 3153 <td>border-left
fantasai@114 3154
fantasai@114 3155 <tr>
fantasai@213 3156 <td>border
fantasai@114 3157
fantasai@561 3158 <tbody>
fantasai@114 3159 <tr>
fantasai@5976 3160 <td rowspan=2><a
fantasai@5976 3161 href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
fantasai@563 3162 properties</a>
fantasai@213 3163
fantasai@213 3164 <td>counter-reset
fantasai@114 3165
fantasai@114 3166 <tr>
fantasai@213 3167 <td>counter-increment
fantasai@114 3168
fantasai@561 3169 <tbody>
fantasai@114 3170 <tr>
fantasai@213 3171 <td colspan=2><a href="">content</a>
fantasai@114 3172
fantasai@561 3173 <tbody>
fantasai@114 3174 <tr>
fantasai@5976 3175 <td colspan=2><a
fantasai@5976 3176 href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
fantasai@114 3177
fantasai@561 3178 <tbody>
fantasai@114 3179 <tr>
fantasai@5976 3180 <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
fantasai@5976 3181 properties</a>
fantasai@213 3182
fantasai@213 3183 <td>font-family
fantasai@114 3184
fantasai@114 3185 <tr>
fantasai@563 3186 <td>font-size
fantasai@563 3187
fantasai@563 3188 <tr>
fantasai@213 3189 <td>font-style
fantasai@114 3190
fantasai@114 3191 <tr>
fantasai@213 3192 <td>font-variant
fantasai@114 3193
fantasai@114 3194 <tr>
fantasai@213 3195 <td>font-weight
fantasai@114 3196
fantasai@114 3197 <tr>
fantasai@213 3198 <td>font
fantasai@114 3199
fantasai@561 3200 <tbody>
fantasai@114 3201 <tr>
fantasai@563 3202 <td rowspan=3><a
fantasai@5976 3203 href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
fantasai@5976 3204 <a
fantasai@5976 3205 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
fantasai@563 3206
fantasai@563 3207 <td>height
fantasai@563 3208
fantasai@563 3209 <tr>
fantasai@563 3210 <td>min-height
fantasai@563 3211
fantasai@563 3212 <tr>
fantasai@563 3213 <td>max-height
fantasai@114 3214
fantasai@561 3215 <tbody>
fantasai@114 3216 <tr>
fantasai@213 3217 <td colspan=2><a
fantasai@5976 3218 href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
fantasai@114 3219
fantasai@561 3220 <tbody>
fantasai@114 3221 <tr>
fantasai@5976 3222 <td rowspan=5><a
fantasai@5976 3223 href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
fantasai@213 3224 properties</a>
fantasai@213 3225
fantasai@213 3226 <td>margin-top
fantasai@114 3227
fantasai@114 3228 <tr>
fantasai@213 3229 <td>margin-right
fantasai@114 3230
fantasai@114 3231 <tr>
fantasai@213 3232 <td>margin-bottom
fantasai@114 3233
fantasai@114 3234 <tr>
fantasai@213 3235 <td>margin-left
fantasai@114 3236
fantasai@114 3237 <tr>
fantasai@213 3238 <td>margin
fantasai@114 3239
fantasai@561 3240 <tbody>
fantasai@114 3241 <tr>
fantasai@5976 3242 <td rowspan=5><a
fantasai@5976 3243 href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
fantasai@563 3244 properties</a>
fantasai@563 3245
fantasai@563 3246 <td>outline-width
fantasai@563 3247
fantasai@563 3248 <tr>
fantasai@563 3249 <td>outline-style
fantasai@563 3250
fantasai@563 3251 <tr>
fantasai@563 3252 <td>outline-color
fantasai@563 3253
fantasai@563 3254 <tr>
fantasai@563 3255 <td>outline
fantasai@563 3256
fantasai@563 3257 <tbody>
fantasai@563 3258 <tr>
fantasai@563 3259 <td colspan=2><a
fantasai@5976 3260 href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
fantasai@563 3261
fantasai@563 3262 <tbody>
fantasai@563 3263 <tr>
fantasai@5976 3264 <td rowspan=5><a
fantasai@5976 3265 href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
fantasai@5976 3266 properties</a>
fantasai@5976 3267
fantasai@5976 3268 <td>padding-top
fantasai@211 3269
fantasai@211 3270 <tr>
fantasai@5976 3271 <td>padding-right
fantasai@211 3272
fantasai@211 3273 <tr>
fantasai@5976 3274 <td>padding-bottom
fantasai@211 3275
fantasai@211 3276 <tr>
fantasai@5976 3277 <td>padding-left
fantasai@563 3278
fantasai@563 3279 <tr>
fantasai@5976 3280 <td>padding
fantasai@211 3281
fantasai@563 3282 <tbody>
fantasai@211 3283 <tr>
fantasai@563 3284 <td colspan=2><a
fantasai@5976 3285 href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
fantasai@5976 3286
fantasai@5976 3287 <tbody>
fantasai@5976 3288 <tr>
fantasai@5976 3289 <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
fantasai@5976 3290 properties</a>
fantasai@5976 3291
fantasai@5976 3292 <td>letter-spacing
fantasai@5976 3293
fantasai@5976 3294 <tr>
fantasai@5976 3295 <td>text-align
fantasai@5976 3296
fantasai@5976 3297 <tr>
fantasai@5976 3298 <td>text-decoration
fantasai@5976 3299
fantasai@5976 3300 <tr>
fantasai@5976 3301 <td>text-indent
fantasai@5976 3302
fantasai@5976 3303 <tr>
fantasai@5976 3304 <td>text-transform
fantasai@5976 3305
fantasai@5976 3306 <tr>
fantasai@5976 3307 <td>white-space
fantasai@5976 3308
fantasai@5976 3309 <tr>
fantasai@5976 3310 <td>word-spacing
fantasai@211 3311
fantasai@561 3312 <tbody>
fantasai@211 3313 <tr>
fantasai@213 3314 <td colspan=2><a
fantasai@5976 3315 href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
fantasai@5976 3316
fantasai@5976 3317 <tbody>
fantasai@5976 3318 <tr>
fantasai@5976 3319 <td colspan=2><a
fantasai@5976 3320 href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
fantasai@211 3321
fantasai@561 3322 <tbody>
fantasai@211 3323 <tr>
fantasai@563 3324 <td rowspan=3><a
fantasai@5976 3325 href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
fantasai@5976 3326 <a
fantasai@5976 3327 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
fantasai@563 3328
fantasai@563 3329 <td>width
fantasai@563 3330
fantasai@563 3331 <tr>
fantasai@563 3332 <td>min-width
fantasai@563 3333
fantasai@563 3334 <tr>
fantasai@563 3335 <td>max-width
fantasai@560 3336
fantasai@561 3337 <tbody>
fantasai@560 3338 <tr>
fantasai@5976 3339 <td colspan=2><a
fantasai@5976 3340 href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
fantasai@114 3341 </table>
fantasai@114 3342
fantasai@552 3343 <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer
fantasai@552 3344 Possibilities</h2>
fantasai@552 3345
fantasai@552 3346 <p>Often, but not always, the page box has a one-to-one correspondence to
fantasai@552 3347 the physical surface onto which the document is ultimately rendered. The
fantasai@552 3348 CSS3 page model specifies formatting within the page box, but it is the
fantasai@552 3349 user agent's responsibility to transfer the page box to the sheet. Some
fantasai@552 3350 user agent transfer possibilities that are not addressed by CSS3
simon@6795 3351 include:
fantasai@552 3352
fantasai@552 3353 <ul id=complex-usecases>
fantasai@552 3354 <li>Transferring one page box to one sheet (e.g. single-sided printing);
fantasai@552 3355
fantasai@552 3356 <li>Transferring two page boxes to the front and back surfaces of the
fantasai@552 3357 same sheet (e.g. double-sided printing);
fantasai@552 3358
fantasai@552 3359 <li>Transferring N (small) page boxes to one sheet (called "N-up");
fantasai@552 3360
fantasai@552 3361 <li>Transferring one (large) page box to N x M sheets (called "tiling");
fantasai@552 3362
fantasai@552 3363 <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group
fantasai@552 3364 of pages printed on a sheet, which, when folded and trimmed like a
fantasai@552 3365 book, appear in their proper sequence;
fantasai@552 3366
fantasai@552 3367 <li>Printing one document to multiple output trays;
fantasai@552 3368
fantasai@552 3369 <li>Generating files containing print instructions.
fantasai@552 3370 </ul>
fantasai@552 3371
simon@7493 3372 <h2 class=no-num id=changes>Changes</h2>
simon@7493 3373
simon@7493 3374 <p> Changes since the <a
simon@7493 3375 href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006
simon@7493 3376 Working Draft</a> are:
simon@7493 3377
simon@7493 3378 <ul>
simon@7558 3379 <li>The first printed page can be <a
simon@7558 3380 href="#using-named-pages">named</a>.
simon@7558 3381
simon@7493 3382 <li>The ‘<code class=css>:blank</code>’ <a
simon@7493 3383 href="#pseudo-classes">pseudo-class</a> was imported from the <a
simon@7493 3384 href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged
simon@7493 3385 Media</a> module.
simon@7493 3386
simon@7493 3387 <li>‘<code class=css>@page</code>’ rules can now take multiple comma
simon@7493 3388 separated selectors, each selector can have multiple pseudo-classes.
simon@7493 3389 <div class=example>
simon@7493 3390 <pre>@page :first, :blank { @bottom-center { content: none } }</pre>
simon@7493 3391
simon@7493 3392 <pre>@page :first:left { @bottom-left { content: none } }</pre>
simon@7493 3393 </div>
simon@7493 3394
simon@7493 3395 <li>Margin boxes are renamed <a href="#margin-boxes">page-margin
simon@7493 3396 boxes</a>, to avoid confusion with the margin area of each box.
simon@7493 3397
simon@7493 3398 <li>The <a href="#variable-sizing">Variable Dimension</a> layout rules
simon@7493 3399 for page-margin boxes have been much simplified to not require
simon@7493 3400 quadratic optimization.
simon@7493 3401
simon@7493 3402 <li>The relative <a href="#painting">painting order</a> of page-margin
simon@7493 3403 boxes and page content has changed.
simon@7493 3404
simon@7493 3405 <li>The description of page breaks and definition of related properties
simon@7493 3406 (except for the ‘<a href="#page"><code
simon@7493 3407 class=property>page</code></a>’ property) have been moved to the CSS
simon@7493 3408 Fragmentation Module. <a href="#CSS3-BREAK"
simon@7493 3409 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>
simon@7493 3410
simon@7493 3411 <li>The ‘<code class=property>fit</code>’ and ‘<code
simon@7493 3412 class=property>fit-position</code>’ properties are renamed to
simon@7493 3413 ‘<code class=property>object-fit</code>’ and ‘<code
simon@7493 3414 class=property>object-position</code>’, redefined to enable
simon@7493 3415 additional use cases, and moved to the CSS3 Image Values and Replaced
simon@7493 3416 Content module. <a href="#CSS3-IMAGES"
simon@7493 3417 rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>
simon@7493 3418
simon@7493 3419 <li>Many miscellaneous clarifications and editorial improvements have
simon@7493 3420 been incorporated.
simon@7493 3421 </ul>
simon@7493 3422
fantasai@213 3423 <h2 class=no-num id=references>References</h2>
fantasai@213 3424
fantasai@213 3425 <h3 class=no-num id=normative-references>Normative References</h3>
fantasai@114 3426 <!--begin-normative--> <!-- Sorted by label -->
fantasai@213 3427 <dl class=bibliography>
fantasai@3574 3428 <dt
fantasai@3574 3429 style="display: none"><!-- keeps the doc valid if the DL is empty -->
fantasai@3574 3430 <!---->
fantasai@213 3431
fantasai@213 3432 <dt id=CSS21>[CSS21]
fantasai@114 3433
fantasai@397 3434 <dd>Bert Bos; et al. <a
simon@7289 3435 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading
fantasai@5967 3436 Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7
fantasai@5967 3437 June 2011. W3C Recommendation. URL: <a
simon@7289 3438 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
simon@6795 3439 </dd>
fantasai@4555 3440 <!---->
fantasai@4555 3441
simon@7430 3442 <dt id=CSS3-BREAK>[CSS3-BREAK]
simon@7430 3443
simon@7430 3444 <dd>Rossen Atanassov; Elika J. Etemad. <a
simon@7430 3445 href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
simon@7430 3446 Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
simon@7430 3447 Draft. (Work in progress.) URL: <a
simon@7430 3448 href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
simon@7430 3449 </dd>
simon@7430 3450 <!---->
simon@7430 3451
fantasai@7448 3452 <dt id=CSS3-SIZING>[CSS3-SIZING]
fantasai@7448 3453
fantasai@7448 3454 <dd>Tab Atkins Jr.; Elika J. Etemad. <a
fantasai@7448 3455 href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS
fantasai@7448 3456 Intrinsic &amp; Extrinsic Sizing Module Level 3.</cite></a> 27
fantasai@7448 3457 September 2012. W3C Working Draft. (Work in progress.) URL: <a
fantasai@7448 3458 href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>
fantasai@7448 3459 </dd>
fantasai@7448 3460 <!---->
fantasai@7448 3461
fantasai@6061 3462 <dt id=CSS3BG>[CSS3BG]
fantasai@6061 3463
fantasai@6061 3464 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
simon@6795 3465 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
simon@6795 3466 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
fantasai@6061 3467 Candidate Recommendation. (Work in progress.) URL: <a
simon@6795 3468 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
simon@6795 3469 </dd>
fantasai@6061 3470 <!---->
fantasai@6061 3471
fantasai@4555 3472 <dt id=MEDIAQ>[MEDIAQ]
fantasai@4555 3473
fantasai@5967 3474 <dd>Florian Rivoal. <a
simon@6795 3475 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
simon@6795 3476 Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
simon@6795 3477 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
simon@6795 3478 </dd>
fantasai@114 3479 <!---->
fantasai@114 3480
fantasai@213 3481 <dt id=PWGMSN>[PWGMSN]
fantasai@114 3482
fantasai@397 3483 <dd>Ron Bergman; Tom Hastings. <a
fantasai@397 3484 href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media
fantasai@397 3485 Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer
fantasai@397 3486 Working Group 5101.1-2002. URL: <a
fantasai@114 3487 href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf">ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf</a>
simon@6795 3488 </dd>
fantasai@114 3489 <!---->
fantasai@114 3490
fantasai@213 3491 <dt id=RFC2119>[RFC2119]
fantasai@114 3492
fantasai@397 3493 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
fantasai@397 3494 words for use in RFCs to Indicate Requirement Levels.</cite></a>
fantasai@397 3495 Internet RFC 2119. URL: <a
fantasai@114 3496 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
simon@6795 3497 </dd>
fantasai@114 3498 <!---->
fantasai@114 3499 </dl>
fantasai@114 3500 <!--end-normative-->
fantasai@213 3501 <h3 class=no-num id=informative-references>Informative References</h3>
fantasai@114 3502 <!--begin-informative--> <!-- Sorted by label -->
fantasai@213 3503 <dl class=bibliography>
fantasai@3574 3504 <dt
fantasai@3574 3505 style="display: none"><!-- keeps the doc valid if the DL is empty -->
fantasai@3574 3506 <!---->
fantasai@213 3507
simon@7428 3508 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
simon@7428 3509
simon@7428 3510 <dd>Elika J. Etemad; Tab Atkins Jr. <a
simon@7428 3511 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS
simon@7428 3512 Image Values and Replaced Content Module Level 3.</cite></a> 17 April
simon@7428 3513 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a
simon@7428 3514 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
simon@7428 3515 </dd>
simon@7428 3516 <!---->
simon@7428 3517
fantasai@5975 3518 <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
fantasai@5975 3519
fantasai@5975 3520 <dd>Elika J. Etemad; Koji Ishii. <a
simon@7052 3521 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
simon@7052 3522 Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
simon@7052 3523 Draft. (Work in progress.) URL: <a
simon@7052 3524 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
simon@6795 3525 </dd>
fantasai@114 3526 <!---->
fantasai@6813 3527
fantasai@6813 3528 <dt id=JLREQ>[JLREQ]
fantasai@6813 3529
fantasai@6813 3530 <dd>Yasuhiro Anan; et al. <a
fantasai@6813 3531 href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements
fantasai@6813 3532 for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group
fantasai@6813 3533 Note. URL: <a
fantasai@6813 3534 href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>
fantasai@6813 3535 </dd>
fantasai@6813 3536 <!---->
fantasai@114 3537 </dl>
fantasai@114 3538 <!--end-informative--></div>
fantasai@114 3539 </div>

mercurial