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