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