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