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