Mon, 11 Feb 2013 16:26:59 -0800
[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 -> specificity = 000 */ |
fantasai@213 | 1082 | @page :left { } /* f=0 g=0 h=1 -> specificity = 001 */ |
fantasai@213 | 1083 | @page :first { } /* f=0 g=1 h=0 -> specificity = 010 */ |
fantasai@213 | 1084 | @page artsy { } /* f=1 g=0 h=0 -> specificity = 100 */ |
fantasai@213 | 1085 | @page artsy:left { } /* f=1 g=0 h=1 -> specificity = 101 */ |
simon@6957 | 1086 | @page artsy:first { } /* f=1 g=1 h=0 -> 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><length>{1,2} | auto | [ <page-size> || [ 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><page-size></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><page-size></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><length> |
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><page-size> |
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><page-size></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><page-size></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 | <identifier> |
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 <p> 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 | <div> |
fantasai@213 | 2764 | <table>...</table> |
fantasai@213 | 2765 | <table>...</table> |
fantasai@213 | 2766 | <p>This text is rendered on a 'narrow' page</p> |
fantasai@213 | 2767 | </div> |
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 | <!DOCTYPE html> |
fantasai@6813 | 2781 | <html lang="ja"> |
fantasai@6813 | 2782 | <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 | </style> |
fantasai@6813 | 2794 | <section class="main"> ... </section> |
fantasai@6813 | 2795 | <section class="index"> ... </section> |
fantasai@6813 | 2796 | </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> |