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