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