css3-page/Overview.html

Mon, 11 Feb 2013 16:26:59 -0800

author
fantasai <fantasai.cvs@inkedblade.net>
date
Mon, 11 Feb 2013 16:26:59 -0800
changeset 7437
3a33dc6c4f9c
parent 7436
6ded58aacc4c
child 7439
9d57f98d774f
permissions
-rwxr-xr-x

[css3-page] Clarify page-break before the document.

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

mercurial