css3-page/Overview.src.html@9d57f98d774f
css3-page/Overview.src.html
Mon, 11 Feb 2013 17:08:40 -0800
- author
- Simon Sapin <simon.sapin@exyr.org>
- date
- Mon, 11 Feb 2013 17:08:40 -0800
- changeset 7439
- 9d57f98d774f
- parent 7437
- 3a33dc6c4f9c
- child 7441
- 2a7cb1ed8232
- permissions
- -rwxr-xr-x
[css3-page] Change the @page grammar to be LL(k)
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>
468 To explicitly force a document to begin printing on a left or right page,
469 authors can specify a <a href="http://www.w3.org/TR/css3-break/#break-before">'break-before'</a> value
470 that that propagates a page break to the root. [[!CSS3-BREAK]]
471 The UA must suppress the first (empty) page(s) in this case
472 (and the <code>:first</code> selector applies to the first printed page).
474 <div class="example">
475 <pre>
476 html { page-break-before: always }
477 </pre>
479 <p>
480 For an HTML document with a left-to-right page progression,
481 the above style rule will cause the first page of the document
482 to print on a ':left' page
483 </p>
485 <pre>
486 html { page-break-before: left }
487 </pre>
489 <p>
490 For an HTML document,
491 the above style rule will cause the first page of the document
492 to print on a ':left' page,
493 regardless of the page progression.
494 </p>
495 </div>
497 <h2 id="page-selector-and-context">Page Selectors and the Page Context</h2>
499 <h3 id="at-page-rule">The @page Rule</h3>
501 <p>Authors can specify various aspects of a page box, such as its dimensions,
502 orientation, and margins, within an <span class="css">@page</span> rule.
503 An <span class="css">@page</span> rule consists of
504 the keyword <span class="css">'@page'</span>,
505 an <em class="RFC2119">OPTIONAL</em> comma-separated list of
506 <i title="page selector">page selectors</i>
507 and a block of declarations
508 (said to be in the <dfn id="page-context">page context</dfn>).
509 <a href="#margin-at-rules">Margin at-rules</a> may be interleaved with the
510 declarations in the page context.
512 <p>A <dfn id="page-selector">page selector</dfn> is either
513 a page pseudo-class, or
514 a page name followed with no intervening whitespace
515 by an <em class="RFC2119">OPTIONAL</em> page pseudo-class.
516 The page selector specifies for which pages the declarations apply.
517 In CSS3, page selectors can designate the first page of a document,
518 all left pages, all right pages, or
519 <a href="#using-named-pages">pages with specific names</a>.
520 Multiple selectors may be combined with a comma (which may be preceded and/or
521 followed by white space); in this case the ''@page'' rule applies to pages
522 that match any of the page selectors. (Note: this feature is at-risk.)
523 If no page selector is given, then the ''@page'' rule applies to all pages.</p>
525 <p>Properties declared within the page context apply to the page box.</p>
527 <p>If an error is encountered during the processing of a declaration block within
528 a page or a margin context, the <a href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for handling parsing errors</a>
529 apply; that is, valid declarations within the block are applied.</p>
531 <h3 id="pseudo-classes">
532 <a id="left-right-first"></a>
533 Page pseudo-classes: :left, :right, :first, and :blank
534 </h3>
536 <p>
537 When printing double-sided documents,
538 left and right pages are often formatted differently.
539 This can be expressed through CSS pseudo-classes defined
540 in the <a href="#page-context">page context</a>.
541 </p>
543 <p>
544 All pages are automatically classified by user agents
545 as either left pages or right pages,
546 based on <a href="#progression">page progression</a>.
547 The <span class="css">':left'</span> and <span class="css">':right'</span>
548 page pseudo-classes can be used to selectively apply rules
549 to only the left or right pages, respectively.
550 </p>
552 <div class="example">
553 The following example creates left and right binding edges using these pseudo-classes:
554 <pre>
555 @page :left {
556 margin-left: 3cm;
557 margin-right: 4cm;
558 }
560 @page :right {
561 margin-left: 4cm;
562 margin-right: 3cm;
563 }
564 </pre>
565 </div>
567 <p>If different declarations have been given for left and right pages, the user
568 agent <em class="RFC2119">MUST</em> honor these declarations even if the user
569 agent does not transfer the page boxes to left and right sheets (i.e., a
570 printer that only prints on one side of the medium must nevertheless produce
571 correctly formatted output).</p>
573 <div class="note">
574 <p>
575 <em><strong>Note.</strong>
576 Adding declarations to the <span class="css">':left'</span> or
577 <span class="css">':right'</span> pseudo-class
578 does not necessarily influence whether the document
579 comes out of the printer double- or single-sided
580 (which is outside the scope of this specification).</em>
581 </p>
582 </div>
584 <p>Authors can also specify style for the first page of a document with the
585 <span class="css">':first'</span> pseudo-class. Such style rules are applied only
586 to the first printed page of a document.</p>
588 <div class="example">
589 <pre>
590 @page { margin: 2cm } /* All margins set to 2cm */
592 @page :first {
593 margin-top: 10cm /* Top margin on first page 10cm */
594 }
595 </pre>
596 </div>
598 <p>
599 Blank pages that appear as a result of
600 <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced page breaks</a>
601 can be styled with the <code>:blank</code> pseudo-class.
603 <div class="example">
604 <p>In this example, forced page break may occur before <code>h1</code> elements.
605 <pre>
606 h1 { page-break-before: left }
608 @page :blank {
609 @top-center { content: "This page is intentionally left blank" }
610 }
611 </pre>
612 </div>
614 <p>
615 A page matched by <code>:blank</code> can also be matched
616 by other page pseudo-classes.
618 <div class="example">
620 <p>If headers have been specified on all right pages, a blank right
621 page will be matched by both <code>:blank</code>
622 and <code>:right</code>. Therefore, margin boxes set on right pages
623 will have to be removed unless they are wanted on blank pages. Here is
624 an example where the top center header is removed from blank pages,
625 while the page number remains:
627 <pre>
628 h1 { page-break-before: left }
630 @page :blank {
631 @top-center { content: none }
632 }
634 @page :right {
635 @top-center { content: "Preliminary edition" }
636 @bottom-center { content: counter(page) }
637 }
638 </pre>
640 <p>Due to the higher specificity of <code>:blank</code>
641 over <code>:right</code>, the top center header is removed even
642 if <code>content: none</code> comes before <code>content: "Preliminary
643 edition"</code>.
645 </div>
647 <div class="note">
648 <p><em><strong>Note.</strong> Future versions of CSS may include other page
649 pseudo-classes.</em></p>
650 </div>
652 <h3 id="syntax-page-selector">@page rule grammar</h3>
654 <p>The syntax for the @page rule is a specialization of the generic at-rule
655 defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules
656 nested inside @media rules. User agents <em class="RFC2119">MUST</em> adhere
657 to the following grammar:</p>
659 <p>See [[!CSS21]], Section 4.1.1 and Appendix G for the expansion of missing
660 productions:</p>
661 <p id="specializatons-of-ATKEYWORD">
662 All new lexical tokens are specializations of the ATKEYWORD lexical token:</p>
663 <pre class="lexical">
664 PAGE_SYM ::= "@page"
665 TOPLEFTCORNER_SYM ::= "@top-left-corner"
666 TOPLEFT_SYM ::= "@top-left"
667 TOPCENTER_SYM ::= "@top-center"
668 TOPRIGHT_SYM ::= "@top-right"
669 TOPRIGHTCORNER_SYM ::= "@top-right-corner"
670 BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner"
671 BOTTOMLEFT_SYM ::= "@bottom-left"
672 BOTTOMCENTER_SYM ::= "@bottom-center"
673 BOTTOMRIGHT_SYM ::= "@bottom-right"
674 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
675 LEFTTOP_SYM ::= "@left-top"
676 LEFTMIDDLE_SYM ::= "@left-middle"
677 LEFTBOTTOM_SYM ::= "@left-bottom"
678 RIGHTTOP_SYM ::= "@right-top"
679 RIGHTMIDDLE_SYM ::= "@right-middle"
680 RIGHTBOTTOM_SYM ::= "@right-bottom"
682 <span id="syntax-prod-media">media</span> :
683 MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
684 ;
686 <span id="syntax-prod-page" title="">page</span> :
687 PAGE_SYM S* [ page_selector S* [ ',' page_selector S* ]* ]?
688 '{' S* page_body '}' S*
689 ;
691 <span id="syntax-prod-page-body">page_body</span> : /* Can be empty */
692 declaration? [ ';' S* page_body ]? |
693 page_margin_box page_body
694 ;
696 <span id="syntax-prod-page-selector">page_selector</span> :
697 pseudo_page | IDENT pseudo_page?
698 ;
699 <span id="syntax-prod-pseudo-page">pseudo_page</span> :
700 ':' [ "left" | "right" | "first" | "blank" ]
701 ;
703 <span id="syntax-prod-margin">page_margin_box</span> :
704 margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
705 ;
707 <span id="syntax-prod-margin-sym">margin_sym</span> :
708 TOPLEFTCORNER_SYM |
709 TOPLEFT_SYM |
710 TOPCENTER_SYM |
711 TOPRIGHT_SYM |
712 TOPRIGHTCORNER_SYM |
713 BOTTOMLEFTCORNER_SYM |
714 BOTTOMLEFT_SYM |
715 BOTTOMCENTER_SYM |
716 BOTTOMRIGHT_SYM |
717 BOTTOMRIGHTCORNER_SYM |
718 LEFTTOP_SYM |
719 LEFTMIDDLE_SYM |
720 LEFTBOTTOM_SYM |
721 RIGHTTOP_SYM |
722 RIGHTMIDDLE_SYM |
723 RIGHTBOTTOM_SYM
724 ;
725 </pre>
727 <p id="page-selector-syntax-restrict">
728 The value 'auto' is not a valid page name and must be treated as matching
729 nothing.
731 <div class="example">
733 <p>The following are examples of page selectors (declaration block intentionally
734 left blank)</p>
735 <pre>
736 @page { ... }
737 @page :left { ... }
738 @page :right { ... }
739 @page LandscapeTable { ... }
740 @page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
741 @page:first { ... };
742 </pre>
744 <p>The following are examples of page-margin boxes
745 where the declaration blocks are intentionally left blank.</p>
746 <pre>
747 @page {
748 @top-left { ... /* document name */ }
749 @bottom-center { ... /* page number */}
750 }
751 @page :left { @left-middle { ... /* page number in left margin */ }}
752 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
754 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
755 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
756 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
757 @bottom-right-corner { ... /* empty footer */ } }
758 </pre>
759 </div>
761 <h3 id="cascading-and-page-context">Cascading in the page context</h3>
763 <p>Declarations in page and margin contexts <a href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like declarations in <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.</p>
765 <p>The specificity of page selectors is computed in a manner analogous to the
766 computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
767 module:</p>
769 <ul>
770 <li>if the page selector has a named page, f=1; else f=0</li>
771 <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>
772 <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
773 </ul>
775 <p>Concatenating the three numbers f-g-h gives the specificity.</p>
777 <div class="example">
779 <p>Some page specificity calculation examples follow:</p>
780 <pre>
781 @page { } /* f=0 g=0 h=0 -> specificity = 000 */
782 @page :left { } /* f=0 g=0 h=1 -> specificity = 001 */
783 @page :first { } /* f=0 g=1 h=0 -> specificity = 010 */
784 @page artsy { } /* f=1 g=0 h=0 -> specificity = 100 */
785 @page artsy:left { } /* f=1 g=0 h=1 -> specificity = 101 */
786 @page artsy:first { } /* f=1 g=1 h=0 -> specificity = 110 */
787 </pre>
788 </div>
790 <div class="example">
792 <p>Consider the following usage example:</p>
793 <pre>
794 @page {
795 margin-left: 3cm;
796 }
798 @page :left {
799 margin-left: 4cm;
800 }
801 </pre>
803 <p>Due to the higher specificity of the pseudo-class selector, the left margin on
804 left pages will be 4cm and all other pages
805 (the right-facing pages) will have a left margin of 3cm.</p>
806 </div>
808 <div class="example">
810 <p>In this example, the higher specificity of the green rules wins over the red
811 rule.
812 Therefore the first page will have blue text in the top-left page-margin box
813 and green text in the top-right page-margin box,
814 while subsequent pages will have red text in the page-margin boxes.</p>
815 <pre>
816 @page :first {
817 color: green;
819 @top-left {
820 content: "foo";
821 color: blue;
822 }
823 @top-right {
824 content: "bar";
825 }
826 }
828 @page { color: red;
829 @top-center {
830 content: "Page " counter(page);
831 }
832 }
833 </pre>
834 </div>
836 <div class="example">
838 <p>Page contexts cascade, so the following stylesheet would style pages with 25
839 millimeter margins and 14 point type in the page-margin boxes:</p>
840 <pre>
841 @page { margin: 25mm;}
842 @page { font-size: 14pt;}
843 </pre>
844 </div>
846 <h2 id="margin-boxes">Page-Margin Boxes</h2>
848 <p>Page-margin boxes are boxes within the page margin that,
849 like pseudo-elements, can contain generated content.</p>
851 <p>Page-margin boxes can be used to create page headers and footers,
852 which are portions of the page set aside for supplementary
853 information such as the page number or document title.</p>
855 <div class="example">
856 <p>Typically, a <dfn>page header</dfn> is located at the top of the page in
857 documents with a predominately horizontal writing direction and on the side
858 opposite the <a href="#binding-edge">binding edge</a> for documents with a
859 predominately vertical writing direction. One possible design of page headers
860 for horizontally written documents uses the
861 <span class="css">'top-left-corner'</span>, <span class="css">'top-left'</span>,
862 <span class="css">'top-center'</span>, <span class="css">'top-right'</span> and
863 <span class="css">'top-right-corner'</span> page-margin boxes.
864 Another design, for vertically written documents, could use the
865 <span class="css">'right-top'</span>, <span class="css">'right-middle'</span>,
866 and <span class="css">'right-bottom'</span> page-margin boxes for
867 <a href="#right-page">right facing pages</a> and
868 <span class="css">'left-top'</span>,
869 <span class="css">'left-middle'</span>, and <span class="css">'left-bottom'</span> for <a href="#left-page">left facing pages</a>.</p>
871 <p>The <dfn>page footer</dfn> is typically at the opposite end of the page from
872 the page header. For example, the design of a horizontally written document with
873 a page header at the top of the page could use the <span class="css">'bottom-left-corner'</span>, <span class="css">'bottom-left'</span>,
874 <span class="css">'bottom-center'</span>,
875 <span class="css">'bottom-right'</span> and
876 <span class="css">'bottom-right-corner'</span>
877 page-margin boxes as the page footer.
878 The design of a vertically written document could use the page-margin boxes
879 of the binding edge of the page for the page footer.</p>
880 </div>
882 <p>Page-margin boxes are positioned with respect to the page area
883 and are independent of page orientation,
884 for example the top page-margin boxes are above the page area
885 in both portrait and landscape orientation.
886 The various page-margin boxes are defined
887 and illustrated in the diagram below:
889 <table id="margin-box-def" class="data" summary="defintion of each of the page-margin boxes">
890 <caption>Table 1 Page-Margin Box Definitions</caption>
891 <thead>
892 <tr>
893 <th>Box</th>
894 <th>Description</th>
895 <th>Placement</th>
896 </tr>
897 </thead>
898 <tbody>
899 <tr id="top-margin-boxes-def">
900 <th id="top-left-corner-box-def">top-left-corner</th>
901 <td>a fixed-size box defined by the intersection of the top and left margins of the
902 page box</td>
903 <td><img src="TopLeftCornerBox.png" alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
904 height="47" width="181"></td>
905 </tr>
906 <tr id="top-left-box-def">
907 <th>top-left</th>
908 <td>a variable-width box filling the top page margin between the top-left-corner
909 and top-center page-margin boxes</td>
910 <td><img src="TopLeftMarginBox.png" alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"
911 height="47" width="181"></td>
912 </tr>
913 <tr id="top-center-box-def">
914 <th>top-center</th>
915 <td>a variable-width box centered horizontally between the page's left and right
916 border edges and filling the page top margin between the top-left and top-right
917 page-margin boxes</td>
918 <td><img src="TopCenterMarginBox.png" alt="the top center box with margin, border, and padding, centered within the page's top margin"
919 height="47" width="181"></td>
920 </tr>
921 <tr id="top-right-box-def">
922 <th>top-right</th>
923 <td>a variable-width box filling the top page margin between the top-center and
924 top-right-corner page-margin boxes</td>
925 <td><img src="TopRightMarginBox.png" alt="the top right box with margin, border, and padding, nested within the page's top margin"
926 height="47" width="181"></td>
927 </tr>
928 <tr>
929 <th id="top-right-corner-box-def">top-right-corner</th>
930 <td>a fixed-size box defined by the intersection of the top and right margins of
931 the page box</td>
932 <td><img src="TopRightCornerMarginBox.png" alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
933 height="47" width="181"></td>
934 </tr>
935 <tr id="left-margin-boxes-def">
936 <th id="left-top-box-def">left-top</th>
937 <td>a variable-height box filling the left page margin between the top-left-corner
938 and left-middle page-margin boxes</td>
939 <td rowspan="3"><img src="LeftMarginBoxes.png" alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"
940 height="226" width="181"></td>
941 </tr>
942 <tr id="left-middle-box-def">
943 <th>left-middle</th>
944 <td>a variable-height box centered vertically between the page's top and bottom
945 border edges and filling the left page margin between the left-top and
946 left-bottom page-margin boxes</td>
947 </tr>
948 <tr id="left-bottom-box-def">
949 <th>left-bottom</th>
950 <td>a variable-height box filling the left page margin between the left-middle and
951 bottom-left-corner page-margin boxes</td>
952 </tr>
953 <tr id="right-margin-boxes-def">
954 <th id="right-top-box-def">right-top</th>
955 <td>a variable-height box filling the right page margin between the
956 top-right-corner and right-middle page-margin boxes</td>
957 <td rowspan="3"><img src="RightMarginBoxes.png" alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"
958 height="226" width="181"></td>
959 </tr>
960 <tr id="right-middle-box-def">
961 <th>right-middle</th>
962 <td>a variable-height box centered vertically between the page's top and bottom
963 border edges and filling the right page margin between the right-top and
964 right-bottom page-margin boxes</td>
965 </tr>
966 <tr id="right-bottom-box-def">
967 <th>right-bottom</th>
968 <td>a variable-height box filling the right page margin between the right-middle
969 and bottom-right-corner page-margin boxes</td>
970 </tr>
971 <tr id="bottom-margin-boxes-def">
972 <th id="bottom-left-corner-box-def">bottom-left-corner</th>
973 <td>a fixed-size box defined by the intersection of the bottom and left margins of
974 the page box</td>
975 <td><img src="BottomLeftCornerBox.png" alt="bottom left corner box with margin, border, and padding, nested within the page margin at the intersection of the left and bottom page margins"
976 height="48" width="181"></td>
977 </tr>
978 <tr id="bottom-left-box-def">
979 <th>bottom-left</th>
980 <td>a variable-width box filling the bottom page margin between the
981 bottom-left-corner and bottom-center page-margin boxes</td>
982 <td><img src="BottomLeftMarginBox.png" alt="bottom left page-margin box with margin, border, and padding, nested within the page's bottom margin next to the bottom-left-corner box"
983 height="48" width="181"></td>
984 </tr>
985 <tr id="bottom-center-box-def">
986 <th>bottom-center</th>
987 <td>a variable-width box centered horizontally between the page's left and right
988 border edges and filling the bottom page margin between the bottom-left and
989 bottom-right page-margin boxes</td>
990 <td style="vertical-align: middle;"><img src="BottomCenterMarginBox.png" alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
991 height="48" width="181"></td>
992 </tr>
993 <tr id="bottom-right-box-def">
994 <th>bottom-right</th>
995 <td>a variable-width box filling the bottom page margin between the bottom-center
996 and bottom-right-corner page-margin boxes</td>
997 <td><img src="BottomRightMarginBox.png" alt="bottom right page-margin box with margin, border, and padding, nested within the page's bottom margin and next to the bottom-right-corner box"
998 height="48" width="181"></td>
999 </tr>
1000 <tr id="bottom-right-corner-box-def">
1001 <th>bottom-right-corner</th>
1002 <td>a fixed-size box defined by the intersection of the bottom and right margins of
1003 the page box</td>
1004 <td><img src="BottomRightCornerBox.png" alt="bottom right corner box with margin, border, and padding, nested within the page margin at the intersection of the right and bottom page margins"
1005 height="48" width="181"></td>
1006 </tr>
1007 </tbody>
1008 </table>
1010 <h3 id="margin-at-rules">At-rules for page-margin boxes</h3>
1012 <p>Page-margin boxes are created by
1013 <a href="#margin-at-rules">margin at-rules</a>
1014 inside the <a href="#page-context">page context</a>.
1015 These rules should come after any declarations in the page context as legacy
1016 clients may not handle declarations after margin at-rules correctly.</p>
1018 <p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an
1019 <a href="#specializatons-of-ATKEYWORD">ATKEYWORD</a>
1020 that identifies the page-margin box
1021 (e.g. <span class="css">'@top-left'</span>) and a block of declarations (said
1022 to be in the <dfn id="margin-context">margin context</dfn>).</p>
1024 <div class="example">
1026 <p>The following style sheet establishes a page header containing the title
1027 ("Hamlet") on the left side and the page number, preceded by "Page ", on the
1028 right side:</p>
1029 <pre>
1030 @page {
1031 size: 8.5in 11in;
1032 margin: 10%;
1034 @top-left {
1035 content: "Hamlet";
1036 }
1037 @top-right {
1038 content: "Page " counter(page);
1039 }
1040 }
1041 </pre>
1042 </div>
1045 <h3 id="populating-margin-boxes">Populating page-margin boxes</h3>
1047 <p>As with the '':before'' and '':after'' pseudo-elements,
1048 a specified 'content' of ''normal'' on a page-margin box computes to ''none'',
1049 and the page-margin box is <dfn>generated</dfn>
1050 if and only if the computed value
1051 of its 'content' property is not 'none'.
1052 Otherwise it behaves as if it had ''display: none''.
1054 <div class="example">
1055 <p>The following style sheet creates a green box in each corner of the page
1056 except the bottom-left corner.</p>
1057 <pre>
1058 @page {
1059 @top-left-corner { content: " "; border: solid green; }
1060 @top-right-corner { content: url(foo.png); border: solid green; }
1061 @bottom-right-corner { content: counter(page); border: solid green; }
1062 @bottom-left-corner { content: normal; border: solid green; }
1063 }
1064 </pre>
1065 </div>
1067 <h3 id="margin-box-dimensions">Computing Page-margin Box Dimensions</h3>
1069 <p>The width and height of each page-margin box is determined by the rules
1070 below. These rules define the equivalent of CSS2.1 Sections 10.3 and
1071 10.6 for page-margin boxes.</p>
1073 <p>The rules for applying 'min-height', 'max-height', 'min-width', and
1074 'max-width' [[!CSS21]] do apply to page-margin boxes and may imply
1075 a recalculation of the width, height, and/or margins
1076 if the dimensions resulting from the specified 'width' or 'height'
1077 violate their constraints.
1078 If the UA does not support the 'min-height' or 'min-width' properties
1079 then it must behave as if 'min-height' and 'min-width' were always zero.
1081 <h4 id="max-margin-dimension">Page-Margin Box Layout Terminology</h4>
1083 <p>In addition to the box model definitions in CSS2.1 [[!CSS21]], the following
1084 terms are defined for use in the subsequent page-margin box calculations:</p>
1086 <dl>
1088 <dt id="MaxBoxWidth"><dfn>max box width</dfn></dt>
1089 <dd>the sum of the page’s left border width, left padding,
1090 <a href="#page-box">page area</a> width, right padding, and right border width.
1091 In other words, it is the distance between the <a href="#page-box">page
1092 box</a>’s left border edge and right border edge</a>. This quantity is used
1093 when calculating dimensions of the top and bottom page-margin boxes.</dd>
1095 <dt id="MaxBoxHeight"><dfn>max box height</dfn></dt>
1096 <dd>the sum of the page’s top border width, top padding,
1097 <a href="#page-box">page area</a> height, bottom padding, and bottom border
1098 width. In other words, it is the distance between the <a href="#page-box">page
1099 box</a>’s top border edge and bottom border edge. This quantity is used when
1100 calculating dimensions of the left and right page-margin boxes.</dd>
1102 <dt><dfn>outer width</dfn></dt>
1103 <dd>the sum of a page-margin box's left and right margins, left and right border
1104 widths, left and right padding, and content-box width.</dd>
1106 <dt><dfn>outer height</dfn></dt>
1107 <dd>the sum of a page-margin box's top and bottom margins, top and bottom border
1108 widths, top and bottom padding, and content-box height.</dd>
1109 </dl>
1111 <dt><dfn>outer min-content</dfn> width</dt>
1112 <dd>Like the <i>outer width</i>, except that
1113 <a href="http://www.w3.org/TR/css3-sizing/#min-content">''min-content''</a>
1114 is used when 'width' is ''auto''.</dd>
1116 <dt><dfn>outer max-content</dfn> width</dt>
1117 <dd>Like the <i>outer width</i>, except that
1118 <a href="http://www.w3.org/TR/css3-sizing/#max-content">''max-content''</a>
1119 is used when 'width' is ''auto''.</dd>
1121 <p>The <dfn>containing block</dfn> for a corner page-margin box is the rectangle
1122 defined by the intersection of the two page margins meeting at that corner.</p>
1124 <p>For all other page-margin boxes,
1125 the <dfn>containing block</dfn> is the rectangle
1126 formed by the encapsulating page margin minus the containing blocks of the
1127 adjacent corners' page-margin boxes.
1128 This means that the size of this containing block is given
1129 in one dimension by the used page margin and in the other dimension
1130 by the <a href="#MaxBoxWidth">max box width</a>
1131 (for top and bottom page-margin boxes) or
1132 <a href="#MaxBoxHeight">max box height</a>
1133 (for left and right page-margin boxes).</p>
1135 <h4 id="margin-dimension">Page-Margin Box Variable Dimension Computation Rules</h4>
1137 <p>The following rules apply to 'top-left', 'top-center' and 'top-right'
1138 page-margin boxes,
1139 which are referred to as A, B, and C, respectively, in this section.</p>
1141 <h5 id="marginbox-variabledim-margins">Margins</h5>
1143 <p>If the 'margin-left' or 'margin-right' property of any of the three boxes
1144 computes to ''auto'', the used value is zero.</p>
1146 <h5 id="marginbox-variabledim-with">Resolving ''auto'' widths</h5>
1148 <p>The following algorithm determines the used width of each box.
1149 For this purpose, boxes that are not <i>generated</i>
1150 are assumed to have a 'width' and an <i>outer width</i> of zero.
1151 </p>
1153 <p class="note">
1154 Note: The high-level goals are (in order of priority) to center the middle
1155 box (B) if it is generated, to minimize overflow and overlap, and to
1156 distribute space proportionally to the amount of content.</p>
1158 <ol>
1159 <li>
1160 If B is not <i>generated</i>:
1161 <ol>
1162 <li>
1163 If only box has 'width: auto', its used width is resolved so that
1164 the sum of the <i>outer width</i>s equals <i>max box width</i>.
1165 </li>
1167 <li>
1168 If A and C both have 'width: auto':
1169 <ol>
1170 <li>
1171 Let <i>free space</i> be <i>max box width</i> minus
1172 A’s and C’s <i>outer min-content width</i>.
1173 </li>
1175 <li>
1176 If <i>free space</i> is positive,
1177 let the respective <i>weight</i> for A and C be
1178 <i>max-content</i> minus <i>min-content</i>.
1179 If it is negative or zero, let the weights be <i>min-content</i>.
1180 In either case if both weights are zero, let them be '1px' instead.
1181 <span class="note">
1182 The '1px' value is arbitrary as long as the weights are equal.
1183 </span>
1184 </li>
1186 <li>
1187 The respective used width is
1188 <i>min-content</i> + <i>free space</i> × <i>weight</i>
1189 ÷ sum of both weights
1190 </li>
1191 </ol>
1192 </li>
1193 </ol>
1194 </li>
1196 <li>
1197 If B is <i>generated</i>:
1198 <ol>
1199 <li>
1200 If B has 'width: auto':
1201 <ol>
1202 <li>
1203 Let <i>free space</i> be <i>max box width</i>
1204 - 2 × max(<i>min<sub>A</sub></i>, <i>min<sub>C</sub></i>)
1205 - <i>min<sub>B</sub></i>,
1206 where <i>min</i> is a box’s <i>outer min-content width</i>
1207 if 'width' is ''auto'', zero otherwise.
1208 </li>
1209 <li>
1210 Let <i>upper limit</i> be <i>max box width</i>
1211 - 2 × max(<i>fixed<sub>A</sub></i>, <i>fixed<sub>C</sub></i>),
1212 where <i>fixed</i> is a box’s <i>outer width</i>
1213 if 'width' is not ''auto'', zero otherwise.
1214 </li>
1215 <li>
1216 If <i>free space</i> is positive,
1217 let the <i>weight</i> of a box be
1218 <i>max-content</i> minus <i>min-content</i>.
1219 If it is negative or zero, let the weights be <i>min-content</i>.
1220 </li>
1221 <li>
1222 Let <i>weight<sub>AC</sub></i> be
1223 max(<i>weight<sub>A</sub></i>, <i>weight<sub>C</sub></i>)
1224 </li>
1225 <li>
1226 If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>
1227 are zero, let them be '1px' instead.
1228 </li>
1229 <li>
1230 B’s used width is
1231 min(<i>upper limit</i>,
1232 <i>min-content</i> +
1233 <i>free space</i> × <i>weight<sub>B</sub></i>
1234 ÷ (<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))
1235 </li>
1236 </ol>
1237 </li>
1238 <li>
1239 Then, if A or C has 'width: auto',
1240 the respective used widths are resolved so that <i>outer width</i>
1241 equals (<i>max box width</i> - B’s <i>outer width</i>) ÷ 2
1242 </li>
1243 </ol>
1244 </li>
1245 </ol>
1247 <h5 id="marginbox-variabledim-minmax">Handling 'min-width' and 'max-width'</h5>
1249 <p>
1250 The 'min-width' and 'max-width' properties [[CSS21]] apply to page-margin
1251 boxes in the variable dimension like on normal elements, except that the
1252 three boxes on the same side are considered together.
1253 </p>
1255 <p>
1256 More precisely:
1257 </p>
1259 <ol>
1260 <li>
1261 The tentative used widths are calculated
1262 (without 'min-width' and 'max-width') following the rules under
1263 <a href="#marginbox-variabledim-with">Resolving ''auto'' widths</a>
1264 above.
1265 </li>
1266 <li>
1267 If the tentative used width of any of the three boxes
1268 is greater than 'max-width', the rules above are applied again,
1269 but this time using the computed value of 'max-width'
1270 as the computed value for 'width'.
1271 </li>
1272 <li>
1273 If the resulting width of any of the three boxes
1274 is smaller than 'min-width', the rules above are applied again,
1275 but this time using the value of 'min-width'
1276 as the computed value for 'width'.
1277 </li>
1278 </ol>
1280 <h5 id="marginbox-variabledim-positioning">Positioning</h5>
1282 <p>
1283 Once the dimensions of the boxes are determined,
1284 they are positioned as follows:
1285 </p>
1287 <ul>
1288 <li>The left outer edge of A is flush with the left edge of the
1289 containing block</li>
1290 <li>The outer area of B is centered in the containing block.</li>
1291 <li>The right outer edge of C is flush with the right edge of the
1292 containing block.</li>
1293 </ul>
1295 <h5 id="marginbox-variabledim-others">Boxes on other sides</h5>
1297 <p>The used values for 'bottom-left', 'bottom-center' and 'bottom-right'
1298 page-margin boxes are established by the same rules as
1299 for 'top-left', 'top-center', and 'top-right', respectively.</p>
1301 <p>The used values for 'left-top', 'left-middle' and 'left-bottom' boxes are
1302 established by the same rules, with "width" replaced by "height", "left" by
1303 "top", "right" by "bottom" and "center" by "middle".</p>
1305 <p>The used values for 'right-top', 'right-middle' and 'right-bottom'
1306 page-margin boxes
1307 are established by the same rules as for 'left-top', 'left-middle' and
1308 'left-bottom', respectively.</p>
1310 <h4 id="margin-constraints">Page-Margin Box Fixed Dimension Computation Rules</h4>
1312 <p>The rules below are used to calculate the used values of each
1313 'top-left-corner', 'top-left', 'top-center', 'top-right', and
1314 'top-right-corner' page-margin box's 'height', 'margin-top', and 'margin-bottom'
1315 properties:</p>
1317 <ol>
1318 <li>The following constraint must hold among the used values of the margin
1319 box's properties:
1320 <p>'margin-top' + 'border-top-width' + 'padding-top' + 'height' +
1321 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = top page margin
1323 <li>If 'border-top-width' + 'padding-top' + 'height' (if it is not ''auto'')
1324 + 'padding-bottom' + 'border-bottom-width', plus 'margin-top' and/or
1325 'margin-bottom' if not ''auto'', is larger than the height of the top page
1326 margin, then any ''auto'' values for 'margin-top' or 'margin-bottom' are, for
1327 the following rules, treated as zero.
1329 <li>If at this point all of 'height', 'margin-top', and 'margin-bottom'
1330 have a computed value other than ''auto'', the values are said to be
1331 "over-constrained". In this case, the specified value of 'margin-top' is
1332 treated as 'auto'.
1334 <li>If there is now exactly one value specified as 'auto', its used value
1335 follows from the equality.
1337 <li>If 'height' is set to 'auto', any other 'auto' values become '0' and
1338 'height' follows from the resulting equality
1340 <li>If both 'margin-top' and 'margin-bottom' are 'auto',
1341 their used values are equal.
1342 This vertically centers the page-margin box content
1343 within the top page margin.
1344 </ol>
1346 <p>The same rules apply to the bottom page-margin boxes (bottom-left-corner,
1347 bottom-left, bottom-center, bottom-right, and bottom-right-corner), except that
1348 in the overconstrained case, the 'margin-bottom' is ignored rather than the
1349 'margin-top'.</p>
1351 <p>Analogous rules govern the properties for the left and right
1352 page-margin boxes with respect to 'width'
1353 (top-left-corner, left-top, left-middle, left-bottom, and
1354 bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom,
1355 bottom-right-corner), with 'top' replaced by 'left', 'bottom' replaced by
1356 'right', and 'height' replaced by 'width'.
1357 In the overconstrained case for left (right) page-margin boxes,
1358 the specified value of 'margin-left' ('margin-right') is ignored.</p>
1360 <h3 id="margin-box-ex">Page-margin box examples</h3>
1362 <p>The following is a collection of examples of page-margin box usage.</p>
1364 <div class="example">
1366 <p>Here is an example of a page with only a top-left header:</p>
1367 <pre>
1368 @page {
1369 @top-left { content: "Header in Left Cell (top-left)" }
1370 }
1371 </pre>
1373 <p>Because there are no contents defined for the top-center or the top-right
1374 page-margin boxes, the extent of the top-left page-margin box
1375 is allowed to cross the center of the page box.</p>
1377 <p><img alt="Header Example 1" src="header-ex-1.png" height="177" width="737"></p>
1378 </div>
1380 <div class="example">
1382 <p>The following is an example of a page with a centered header:</p>
1383 <pre>
1384 @page {
1385 @top-center { content: "Header in Center Cell (top-center)" }
1386 }
1387 </pre>
1389 <p><img alt="Header Example 2" src="header-ex-2.png" height="177" width="737"></p>
1390 </div>
1392 <div class="example">
1394 <p>The following is an example of a page with a single header in the top-right
1395 page-margin box:</p>
1396 <pre>
1397 @page {
1398 @top-right { content: "Header in Right Cell (top-right)" }
1399 }
1400 </pre>
1402 <p>Because the content of the center cell is empty, the extent of the top-right
1403 page-margin box is allowed to cross the center of the page box.</p>
1405 <p><img alt="Header Example 3" src="header-ex-3.png" height="177" width="737"></p>
1406 </div>
1408 <div class="example">
1410 <p>The following is an example of a page with a top-center and a top-left header:</p>
1411 <pre>
1412 @page {
1413 @top-left { content: "Left Cell (top-left)" }
1414 @top-center { content: "Header in Center Cell (top-center)" }
1415 }
1416 </pre>
1418 <p><img alt="Header Example 4" src="header-ex-4.png" height="177" width="737"></p>
1419 </div>
1421 <div class="example">
1423 <p>The following is an example of a page with a top-center and a top-right header:</p>
1424 <pre>
1425 @page {
1426 @top-center { content: "Header in Center Cell (top-center)" }
1427 @top-right { content: "Right Cell (top-right)" }
1428 }
1429 </pre>
1431 <p><img alt="Header Example 5" src="header-ex-5.png" height="177" width="737"></p>
1432 </div>
1434 <div class="example">
1436 <p>The following is an example of a page with top-left and top-right headers:</p>
1437 <pre>
1438 @page {
1439 @top-left { content: "Header in top-left with approx. "
1440 "twice as many words as right cell." }
1441 @top-right { content: "Right cell (top-right)" }
1442 }
1443 </pre>
1445 <p>Because there are no center cell contents, the extent of the top-left is
1446 allowed to cross the center of the page box.</p>
1448 <p><img alt="Header Example 6" src="header-ex-6.png" height="177" width="737"></p>
1449 </div>
1451 <h2 id="page-properties">Page Properties</h2>
1452 <div>
1454 <p>The following properties, when used in the <a href="#page-context">page
1455 context</a>, apply to the page box:</p>
1457 <ul>
1458 <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a></li>
1459 <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a></li>
1460 <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a></li>
1461 <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
1462 <li><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">direction</a>
1463 <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a></li>
1464 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a></li>
1465 <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a></li>
1466 <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
1467 <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a></li>
1468 <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
1469 <li><a href="#page-size">size</a></li>
1470 <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
1471 <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a></li>
1472 </ul>
1474 <p>The following properties, when used in a <a href="#margin-at-rule">margin
1475 context</a>, apply to page-margin boxes and their content:</p>
1477 <ul>
1478 <li><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
1479 <li><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
1480 <li><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
1481 <li><a href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
1482 <li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a></li>
1483 <li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
1484 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
1485 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
1486 <li><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
1487 <li><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
1488 <li><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
1489 <li><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
1490 <li><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
1491 <li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
1492 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
1493 <li><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
1494 <li><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
1495 <li><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
1496 </ul>
1498 <p>A detailed list of properties that <em class="RFC2119">MUST</em> be supported
1499 within page and margin contexts by a conforming implementation can be found in
1500 <a href="#properties-list">Appendix A</a>.</p>
1502 <p>Other properties defined by [[!CSS21]] do not apply in these contexts. Behavior
1503 for properties not included in CSS 2.1 and not listed here or in Appendix A is
1504 undefined.</p>
1506 <p class="note">
1507 Note: The intent of leaving other properties undefined is to allow the gradual
1508 addition of appropriate CSS3 properties as they emerge, without having to
1509 update this specification with each addition.</p>
1511 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
1512 elements in the document</a>, both the page context and the margin context
1513 have a computed value for every property, even if that property does not
1514 apply to the page or page-margin box.</p>
1516 <p>The normal rules for CSS properties apply with the following exceptions:</p>
1518 <ul>
1519 <li>page-margin boxes inherit from the page context.
1520 The page context inherits from the root element.
1521 However, since the previous revision of CSS Paged
1522 Media Level 3 did not specify this point, an implementation that sets
1523 inherited properties in the page context to their initial values (as for the
1524 root element) is also conformant to CSS Paged Media Level 3. Note that this
1525 exception will be removed in Level 4.
1526 <li>Values in units of ''em'' and ''ex'' are interpreted relative to the font
1527 associated with their context. When used on the 'font-size' property in the
1528 margin context, they are relative to the font of the page context. When used
1529 on the 'font-size' property in the page context, they are relative to the
1530 'font-size' of the root element. However, since a previous revision of CSS
1531 Paged Media Level 3 was ambiguous on this point, an implementation that
1532 treats ''em'' and ''ex'' on 'font-size' as relative to the initial value is
1533 also conformant to CSS Paged Media Level 3. Note that this exception will
1534 be removed in Level 4.
1535 <li>Percentage values on the margin and padding properties are relative to the
1536 dimensions of the containing block. For right and left values, percentages are
1537 relative to the width of the containing block; for top and bottom values,
1538 percentages are relative to the height of the containing block.</li>
1539 <li>The used values of 'width' and 'height' have special computation rules
1540 for page boxes and page-margin boxes; see <a href="#page-size">Page Size</a>
1541 and <a href="#margin-box-dimensions">Computing Page-Margin Box Dimensions</a>.
1542 <li>The page background is positioned and painted
1543 <a href="#painting">as described above</a>.
1544 <li>The rules for counter scoping are modified <a href="page-based-counters">as
1545 described below</a>.</li>
1546 <li>
1547 As on the '::before' and '::after' pseudo-elements,
1548 the ''normal'' value of the 'content' property computes to ''none''
1549 on page-margin boxes.
1550 </li>
1551 <li>On page-margin boxes, the 'vertical-align' property behaves
1552 <a href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as specified for table cells</a>.
1553 It <em>always</em> performs alignment in the vertical dimension,
1554 regardless of writing mode.
1555 </ul>
1557 <p>It is <em class="RFC2119">recommended</em> that user agents establish a default
1558 page margin via the user agent stylesheet that includes any non-printable area.
1559 It is further <em class="RFC2119">recommended</em> that authors assume that the
1560 default page area will not include unprintable regions.</p>
1562 <h3 id="page-based-counters">Page-based counters</h3>
1564 <p>Counters can be defined and controlled within an <span class="css">'@page'</span>
1565 rule, and used as content in page-margin boxes.
1566 This is useful for maintaining a page count.</p>
1568 <div class="example">
1570 <p>The following rules result in the placement of the current page number in the
1571 middle of the outside margin of each page.</p>
1572 <pre>
1573 @page {
1574 margin: 10%;
1575 counter-increment: page;
1577 @top-center {
1578 font-family: sans-serif;
1579 font-weight: bold;
1580 font-size: 2em;
1581 content: counter(page);
1582 }
1583 }
1584 </pre>
1585 </div>
1587 <p>A 'counter-increment' within either a page or margin context causes the counter
1588 to increment with the generation of each page box.</p>
1590 <p>If a counter is reset or incremented within the page context, it is in scope
1591 for all page-margin boxes and obscures all counters of the same name within the
1592 document.</p>
1594 <p>If a counter is reset or incremented within a margin context, it is in scope
1595 for that page-margin box and obscures any counters of the same name
1596 in both the page context and the document.</p>
1598 <p>If a counter that has not been reset or incremented within the margin context
1599 or the page context is used by counter() or counters() in the margin context,
1600 then the resultant value is exactly
1601 as if the page-margin box were an element within
1602 the document at the start of the page, inside the deepest element in the normal
1603 flow that spans the page break. Use of the counter in this way does not affect
1604 the calculation of the counter's value.</p>
1606 <p>A counter named ''page'' is automatically created and incremented on every
1607 page of the document. Specifically, the UA must automatically create and
1608 increment such a counter as if ''@page { counter-increment: page; }'' were
1609 specified. The implied ''page'' counter is a real counter, and can be directly
1610 affected using the 'counter-increment' and 'counter-reset' properties when
1611 named explicitly in those properties. It can also be used in the 'counter()'
1612 and 'counters()' function forms.</p>
1614 <p>Additionally, a counter named ''pages'' is automatically created by the UA.
1615 Its value is always the total number of pages in the document. (In continuous
1616 media this is always 1.) The value of ''pages'' cannot be manipulated: while
1617 'counter-reset' and 'counter-increment' statements that set it are valid, they
1618 have no effect.
1620 <p>In all other respects, page-associated counters behave as described in
1621 [[!CSS21]], <a href="TR/CSS21/generate.html#scope">Nested Counters and
1622 Scope</a> and <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.</p>
1624 <h3 id="margin-text-alignment">Page-margin boxes and default values</h3>
1626 <p>Properties used within page or margin contexts take their initial values from
1627 their respective property definitions; however, user agents must behave as
1628 though the values in the following table were established by rules in the UA
1629 default style sheet.</p>
1630 <table id="margin-values" class="data" summary="definition of page-margin box default properties">
1631 <caption>Table 2. Default values for Page-Margin Boxes</caption>
1632 <thead>
1633 <tr>
1634 <th>Page-margin box</th>
1635 <th><span class="property">'text-align'</span></th>
1636 <th><span class="property">'vertical-align'</span></th>
1637 </tr>
1638 </thead>
1639 <tbody>
1640 <tr>
1641 <td><a href="#top-left-corner-box-def">top-left-corner</a></td>
1642 <td>right</td>
1643 <td>middle</td>
1644 </tr>
1645 <tr>
1646 <td><a href="#top-left-box-def">top-left</a></td>
1647 <td>left</td>
1648 <td>middle</td>
1649 </tr>
1650 <tr>
1651 <td><a href="#top-center-box-def">top-center</a></td>
1652 <td>center</td>
1653 <td>middle</td>
1654 </tr>
1655 <tr>
1656 <td><a href="#top-right-box-def">top-right</a></td>
1657 <td>right</td>
1658 <td>middle</td>
1659 </tr>
1660 <tr>
1661 <td><a href="#top-right-corner-box-def">top-right-corner</a></td>
1662 <td>left</td>
1663 <td>middle</td>
1664 </tr>
1665 <tr>
1666 <td><a href="#left-top-box-def">left-top</a></td>
1667 <td>center</td>
1668 <td>top</td>
1669 </tr>
1670 <tr>
1671 <td><a href="#left-middle-box-def">left-middle</a></td>
1672 <td>center</td>
1673 <td>middle</td>
1674 </tr>
1675 <tr>
1676 <td><a href="#left-bottom-box-def">left-bottom</a></td>
1677 <td>center</td>
1678 <td>bottom</td>
1679 </tr>
1680 <tr>
1681 <td><a href="#right-top-box-def">right-top</a></td>
1682 <td>center</td>
1683 <td>top</td>
1684 </tr>
1685 <tr>
1686 <td><a href="#right-middle-box-def">right-middle</a></td>
1687 <td>center</td>
1688 <td>middle</td>
1689 </tr>
1690 <tr>
1691 <td><a href="#right-bottom-box-def">right-bottom</a></td>
1692 <td>center</td>
1693 <td>bottom</td>
1694 </tr>
1695 <tr>
1696 <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a></td>
1697 <td>right</td>
1698 <td>middle</td>
1699 </tr>
1700 <tr>
1701 <td><a href="#bottom-left-box-def">bottom-left</a></td>
1702 <td>left</td>
1703 <td>middle</td>
1704 </tr>
1705 <tr>
1706 <td><a href="#bottom-center-box-def">bottom-center</a></td>
1707 <td>center</td>
1708 <td>middle</td>
1709 </tr>
1710 <tr>
1711 <td><a href="#bottom-right-box-def">bottom-right</a></td>
1712 <td>right</td>
1713 <td>middle</td>
1714 </tr>
1715 <tr>
1716 <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a></td>
1717 <td>left</td>
1718 <td>middle</td>
1719 </tr>
1720 </tbody>
1721 </table>
1723 <div class="example">
1725 <p>This example style sheet could be used to create a centered header with the
1726 current chapter name:</p>
1727 <pre>body {counter-reset: chapter;}
1728 div.chapter {counter-increment: chapter;}
1729 @page {
1730 margin: 10%;
1731 @top-center { content: "Chapter" counter(chapter) }
1732 }
1733 </pre>
1734 </div>
1736 <h2 id="page-size">Page Size</h2>
1738 <p>People around the world use many different paper sizes. It is a goal of this
1739 specification that web content should be adaptable to a range of different
1740 sizes without having to write a specific style sheet for each paper size.</p>
1742 <p>However, in some situations it is important that a certain page size achieves a
1743 certain style. One way to achieve this goal is to utilize the 'size' property,
1744 which indicates that the document should preferentially be displayed on a
1745 surface of a certain size; another method is to use Media Queries [[MEDIAQ]]
1746 which allow different style sheets to be applied to different page sizes.</p>
1748 <h3 id="page-size-prop">Page size: the 'size' property</h3>
1750 <table class="propdef" summary="definition of the size property">
1751 <tr>
1752 <th>Name:
1753 <td><dfn id="size">size</dfn>
1754 <tr>
1755 <th>Value:
1756 <td><length>{1,2} | auto | [ <page-size> || [ portrait | landscape] ]
1757 <tr>
1758 <th>Initial:
1759 <td>auto
1760 <tr>
1761 <td><em>Applies to:</em>
1762 <td>page context
1763 <tr>
1764 <th>Inherited:
1765 <td>N/A
1766 <tr>
1767 <th>Percentages:
1768 <td>N/A
1769 <tr>
1770 <th>Media:
1771 <td>paged
1772 <tr>
1773 <td><em>Computed value:</em>
1774 <td>specified value
1775 </table>
1777 <p>This property specifies the target size and orientation of the
1778 <a href="#page-box">page box</a>'s containing block.
1779 In the general case, where one page box is rendered onto one <a href="#page-sheet">page sheet</a>,
1780 the 'size' property also indicates the size of the destination page sheet.
1782 <p>The size of a page box can either be "absolute" (fixed size) or "scalable"
1783 (i.e., fitting available sheet sizes).
1784 The first three values in the table below can be used to create scalable page
1785 boxes.
1786 Other values define a fixed-size page box, and thereby indicate the preferred
1787 output media size. When possible, output should be rendered on the media size
1788 indicated.
1789 If the specified size is not available, the rules for
1790 <a href="#renderingpages">transposing a page box to a different size</a>
1791 apply.</p>
1793 <p>If a <code>size</code> property declaration is qualified by a ''width'',
1794 ''height'', ''device-width'', ''device-height'', ''aspect-ratio'',
1795 ''device-aspect-ratio'' or ''orientation''
1796 media query [[!MEDIAQ]] (or other conditional on the size of the paper), then
1797 the declaration must be
1798 <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
1799 queries do not honor 'size': they assume the paper size that would be chosen
1800 if no @page rules were specified.</p>
1802 <p class=issue>It would be useful if media queries could respond at least
1803 to sizes specified on an unqualified @page.
1805 <div class="example">
1806 <p>In the following example
1807 <pre>
1808 @page {
1809 size: 4in 6in;
1810 }
1812 @media (max-width: 6in) {
1813 @page {
1814 size: letter;
1815 }
1816 }
1817 </pre>
1818 <p>The second <code>size</code> declaration is ignored, i.e. the specified value
1819 of the <code>size</code> property is <code>4in 6in</code>.
1820 </div>
1822 <table class="page-sizes">
1823 <tr>
1824 <th>Value</th>
1825 <th>Description</th>
1826 </tr>
1827 <tr>
1828 <td>auto</td>
1829 <td>The page box will be set to a size and orientation chosen by the UA. In the
1830 usual case, the page box size and orientation is chosen to match the target
1831 media sheet.</td>
1832 </tr>
1833 <tr>
1834 <td>landscape</td>
1835 <td>Specifies that the page's content be printed in landscape orientation. The
1836 longer sides of the page box are horizontal. If a <span class="css">'<page-size>'</span> is not specified, the size of the page sheet
1837 is chosen by the UA.</td>
1838 </tr>
1839 <tr>
1840 <td>portrait</td>
1841 <td>Specifies that the page's content be printed in portrait orientation. The
1842 shorter sides of the page box are horizontal. If a <span class="css">'<page-size>'</span> is not specified, the size of the page sheet
1843 is chosen by the UA.</td>
1844 </tr>
1845 <tr>
1846 <td><length></td>
1847 <td>The page box will be set to the given absolute dimension(s). If only one length
1848 value is specified, it sets both the width and height of the page box (i.e.,
1849 the box is a square). If two length values are specified, the first establishes
1850 the page box width, and the second the page box height. Values in units of
1851 <span class="css">'em'</span> and <span class="css">'ex'</span> refer to the
1852 page context's font. Negative lengths are illegal.</td>
1853 </tr>
1854 <tr>
1855 <td><page-size></td>
1856 <td>A page size can be specified using one of the following media names. This is
1857 the equivalent of specifying the <span class="css">'<page-size>'</span>
1858 using length values. The definition of the the media names comes from
1859 <cite>Media Standardized Names</cite> [[!PWGMSN]].
1861 <dl>
1863 <dt>A5</dt>
1864 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>
1866 <dt>A4</dt>
1867 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.</dd>
1869 <dt>A3</dt>
1870 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>
1872 <dt>B5</dt>
1873 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>
1875 <dt>B4</dt>
1876 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>
1878 <dt>letter</dt>
1879 <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11
1880 inches high</dd>
1882 <dt>legal</dt>
1883 <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches
1884 high.</dd>
1886 <dt>ledger</dt>
1887 <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches
1888 high.</dd>
1889 </dl></td>
1890 </tr>
1891 </table>
1893 <p>The '<page-size>' names can be used in conjunction with 'landscape' or
1894 'portrait' to indicate both size and orientation.</p>
1896 <h4>Some examples:</h4>
1898 <div class="example">
1899 <pre>
1900 @page {
1901 size: A4 landscape;
1902 }
1903 </pre>
1905 <p>The above example sets the width of the page box to be 297mm and the height to
1906 be 210mm. The page box in this example should be rendered on a page sheet size
1907 of 210 mm by 297 mm.</p>
1908 </div>
1910 <div class="example">
1912 <p>In the following example, the outer edges of the page box will align with the
1913 page. The percentage value on the <span class="property">'margin'</span>
1914 property is relative to the page size so if the page sheet dimensions are 210mm
1915 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page
1916 borders or padding set in the UA default style sheet, the resulting page area
1917 is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>
1918 <pre>
1919 @page {
1920 size: auto;/* auto is the initial value */
1921 margin: 10%;
1922 }
1923 </pre>
1924 </div>
1926 <div class="example">
1927 <pre>
1928 @page {
1929 size: 8.5in 11in;/* width height */
1930 }
1931 </pre>
1933 <p>The above example sets the width of the page box to be 8.5 inches and the
1934 height to be 11 inches. This indicates that the page sheet size should be
1935 8.5"x11" and the orientation 'portrait'.</p>
1936 </div>
1938 <h4 id="page-size-media-query">Media Queries</h4>
1940 <p>This section is informative.</p>
1942 <p>By using Media Queries [[MEDIAQ]], one style sheet can express different
1943 stylistic preferences for different page sizes. Consider this example:</p>
1945 <div class="example" style="font-size: 10pt;">
1946 <pre>
1947 /* style sheet for "A4" printing */
1948 @media print and (width: 21cm) and (height: 29.7cm) {
1949 @page {
1950 margin: 3cm;
1951 }
1952 }
1954 /* style sheet for "letter" printing */
1955 @media print and (width: 8.5in) and (height: 11in) {
1956 @page {
1957 margin: 1in;
1958 }
1959 }
1960 </pre>
1961 </div>
1963 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
1964 sheets are given a "1in" page margin.</p>
1966 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>
1968 <p>If a page box does not match the target page sheet dimensions, the user agent
1969 should do one of the following (in order of preference):</p>
1971 <ol>
1972 <li>Render the page box at the indicated size on a larger page sheet.</li>
1973 <li>Rotate the page box 90° if this will make the page box fit the page sheet.</li>
1974 <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box
1975 <em class="RFC2119">should</em> be preserved.)</li>
1976 <li>Reformat the page contents, including 'spilling' onto other page sheets.</li>
1977 <li>Clip overflowed content (least preferred).</li>
1978 </ol>
1980 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before
1981 performing these operations.</p>
1983 <h3 id="positioning-page-box">Positioning the page box on the sheet</h3>
1985 <p>When the page box is smaller than the page size, the user agent <em class="RFC2119">SHOULD</em> either:</p>
1987 <ul>
1988 <li>center the page box on the sheet since this will align double-sided pages
1989 and avoid accidental loss of information that is printed near the edge of the
1990 sheet; or</li>
1991 <li>position the page box in the upper left corner of the page sheet, as this
1992 may minimize media consumption.</li>
1993 </ul>
1995 <p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this
1996 regard.</p><!-- "Page selector and page context" -->
1998 <h2 id="page-breaks">
1999 <a id="pg-br-before-after"></a>
2000 <a id="page-break-before"></a>
2001 <a id="page-break-after"></a>
2002 <a id="page-break-inside"></a>
2003 <a id="breaks-inside"></a>
2004 <a id="orphans"></a>
2005 <a id="widows"></a>
2006 <a id="allowed-pg-brk"></a>
2007 <a id="brk-btw-blocks"></a>
2008 <a id="brk-btw-lines"></a>
2009 <a id="brk-end-block"></a>
2010 <a id="forced-pg-brk"></a>
2011 <a id="best-pg-brk"></a>
2012 Page Breaks
2013 </h2>
2015 <p>
2016 The [[!CSS3-BREAK]] module defines how and where CSS boxes
2017 can be <i>fragmented</i>, including across page breaks.
2018 It defines a few properties that indicate where the user agent
2019 <em class="RFC2119">MAY</em> or <em class="RFC2119">MUST</em> break pages,
2020 and on what page (left or right) the subsequent content resumes.
2021 Each page break ends layout in the current <a href="#page-box">page box</a>
2022 and causes remaining pieces of the document tree to be laid out
2023 in a new page box.
2024 </p>
2026 <h3 id="using-named-pages">Using named pages: 'page'</h3>
2027 <table class="propdef" summary="property definition">
2028 <tr>
2029 <th>Name:
2030 <td><dfn id="page">page</dfn>
2031 <tr>
2032 <th>Value:
2033 <td>auto | <identifier>
2034 <tr>
2035 <th>Initial:
2036 <td>auto
2037 <tr>
2038 <th>Applies to:
2039 <td>boxes that create <a href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break points
2040 <tr>
2041 <th>Inherited:
2042 <td>no (but see prose)
2043 <tr>
2044 <th>Percentages:
2045 <td>N/A
2046 <tr>
2047 <th>Media:
2048 <td>paged
2049 <tr>
2050 <th>Computed value:
2051 <td>specified value
2052 </table>
2054 <p>
2055 The 'page' property is used to specify a particular type of page (called a <dfn>named page</dfn>)
2056 on which an element <em class="RFC2119">MUST</em> be displayed.
2057 If necessary, a <i>forced page break</i> is introduced
2058 and a new page generated of the specified type.
2060 <p>
2061 Page names are case-sensitive identifiers.
2062 However the ''auto'' value, being a CSS keyword, is
2063 <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>.
2065 <div class="example">
2067 <p>This example will put all tables on a right-hand side landscape page (named
2068 "rotated"):</p>
2069 <pre>
2070 @page rotated { size: landscape }
2071 table { page: rotated; page-break-before: right }
2072 </pre>
2073 </div>
2075 <p>
2076 The 'page' property works as follows:
2078 <ol>
2080 <li>
2081 First, any ''auto'' values are resolved against non-''auto'' ancestors
2082 (as specified below).
2084 <li>
2085 Next,
2086 a <dfn>preceding 'page' value</dfn> and <dfn>succeeding 'page' value</dfn>
2087 is determined for each box
2088 as the value (if any) propagated from its last or first child (respectively),
2089 else the used value on the box itself.
2090 A child propagates its own <i title="preceding page value">preceding</i> or <i>succeeding 'page' value</i>
2091 <em>iff</em> the 'page' property applies to it.
2093 <li>
2094 If for any two boxes meeting at a <a href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break point,
2095 the <i>preceding 'page' value</i> and <i>succeeding 'page' value</i> do not match,
2096 then a page break is forced between the two boxes,
2097 and content after the break resumes on a page box of the named type.
2098 </ol>
2100 <p>
2101 Essentially, the two 'page' values compared are those from the deepest boxes
2102 meeting at the class 1 break point,
2103 ignoring any subtrees rooted by boxes to which the 'page' property does not apply.
2105 <p>
2106 The 'page' property does not inherit.
2107 However, if the 'page' value on an element is ''auto'',
2108 then its used value is the value specified on its nearest ancestor with a non-auto value.
2109 When specified on the root element, the effective name is the empty string.
2111 <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
2113 <p>
2114 Because a previous version of this specification indicated that the 'page' property is inherited,
2115 an implementation that inherits the 'page' property
2116 and treats ''auto'' as always naming the empty string
2117 remains conformant to CSS3 Paged Media.
2118 Therefore authors should not explicitly specify the ''auto'' value
2119 on a descendant of an element with a non-''auto'' value,
2120 as the resulting behavior will be unpredictable.
2122 <p>See [[!CSS3-BREAK]] for additional details on page breaks.
2124 <div class="example">
2126 <p>In this example, the two tables are rendered on landscape pages (indeed, on the
2127 same page, if they fit). The page type "narrow" is used for the <p> after
2128 the second table, as the page properties for the table element are no longer in
2129 effect:</p>
2130 <pre>
2131 @page narrow { size: 9cm 18cm }
2132 @page rotated { size: landscape }
2133 div { page: narrow }
2134 table { page: rotated }
2135 </pre>with this document:
2136 <pre>
2137 <div>
2138 <table>...</table>
2139 <table>...</table>
2140 <p>This text is rendered on a 'narrow' page</p>
2141 </div>
2142 </pre>
2143 </div>
2145 <div class="example">
2146 <p>In Japanese documents, sometimes different parts of a single document
2147 will have different <i lang="ja-Latn">kihon hanmen</i>. [[JLREQ]]
2148 The 'page' property, together with ''@page'' rules specifying different page widths,
2149 can accomodate this type of layout:
2150 <pre>
2151 <!DOCTYPE html>
2152 <html lang="ja">
2153 <style>
2154 html { writing-mode: vertical-rl;
2155 line-height: 1.6; }
2156 .main { page: main;
2157 columns: 2; column-gap: 1rem; }
2158 .index { page: index;
2159 columns: 3; column-gap: 1rem; }
2160 @page { margin: auto; /* center kihon hanmen on page */
2161 width: 40rem; } /* 1.6 × 25 lines */
2162 @page main { height: 61rem; } /* 2 × 30 chars + 1 × gap */
2163 @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
2164 </style>
2165 <section class="main"> ... </section>
2166 <section class="index"> ... </section>
2167 </html>
2168 </pre>
2169 </div>
2172 <h2 id="image-properties">Image Properties</h2>
2174 <p class="note">This section has been moved to [[CSS3-IMAGES]].</p>
2176 <h2 class="no-num" id="properties-list">Appendix A: Applicable CSS2.1 Properties</h2>
2178 <h3 class="no-num">Properties that apply within the page context</h3>
2180 <p>The following CSS 2.1 [[!CSS21]] properties apply to the page box.
2181 If a conforming user agent supports any of these properties on block
2182 boxes, then it must also support that property for the page box.</p>
2184 <table class="property-list">
2185 <tbody>
2186 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
2187 <td>direction
2188 <tbody>
2189 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
2190 <td>background-color
2191 <tr><td>background-image
2192 <tr><td>background-repeat
2193 <tr><td>background-attachment
2194 <tr><td>background-position
2195 <tr><td>background
2196 <tbody>
2197 <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
2198 <td>border-top-width
2199 <tr><td>border-right-width
2200 <tr><td>border-bottom-width
2201 <tr><td>border-left-width
2202 <tr><td>border-width
2203 <tr><td>border-top-color
2204 <tr><td>border-right-color
2205 <tr><td>border-bottom-color
2206 <tr><td>border-left-color
2207 <tr><td>border-color
2208 <tr><td>border-top-style
2209 <tr><td>border-right-style
2210 <tr><td>border-bottom-style
2211 <tr><td>border-left-style
2212 <tr><td>border-short-style
2213 <tr><td>border-top
2214 <tr><td>border-right
2215 <tr><td>border-bottom
2216 <tr><td>border-left
2217 <tr><td>border
2218 <tbody>
2219 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
2220 <td>counter-reset
2221 <tr><td>counter-increment
2222 <tbody>
2223 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
2224 <tbody>
2225 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
2226 <td>font-family
2227 <tr><td>font-size
2228 <tr><td>font-style
2229 <tr><td>font-variant
2230 <tr><td>font-weight
2231 <tr><td>font
2232 <tbody>
2233 <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
2234 <td>height
2235 <tr><td>min-height
2236 <tr><td>max-height
2237 <tbody>
2238 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
2239 <tbody>
2240 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
2241 <td>margin-top
2242 <tr><td>margin-right
2243 <tr><td>margin-bottom
2244 <tr><td>margin-left
2245 <tr><td>margin
2246 <tbody>
2247 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
2248 <td>outline-width
2249 <tr><td>outline-style
2250 <tr><td>outline-color
2251 <tr><td>outline
2252 <tbody>
2253 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
2254 <td>padding-top
2255 <tr><td>padding-right
2256 <tr><td>padding-bottom
2257 <tr><td>padding-left
2258 <tr><td>padding
2259 <tbody>
2260 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
2261 <tbody>
2262 <tr><td rowspan="8"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
2263 <td>direction
2264 <tr><td>letter-spacing
2265 <tr><td>text-align
2266 <tr><td>text-decoration
2267 <tr><td>text-indent
2268 <tr><td>text-transform
2269 <tr><td>white-space
2270 <tr><td>word-spacing
2271 <tbody>
2272 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
2273 <tbody>
2274 <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
2275 <td>width
2276 <tr><td>min-width
2277 <tr><td>max-width
2278 </table>
2280 <p>Properties that apply to the page-margin boxes can also be set within
2281 the page context: if inheritable or explicitly inherited (with the
2282 <code>inherit</code> keyword in the margin context), they will inherit
2283 to the page-margin boxes.</p>
2285 <h3 class="no-num">Properties that apply within the margin contexts</h3>
2287 <p>The following CSS 2.1 [[!CSS21]] properties apply to page-margin boxes.
2288 If a conforming user agents supports any of these properties on block
2289 boxes, then it must also support that property for page-margin boxes (except
2290 for <code>z-index</code>, which is optional for page-margin boxes).</p>
2292 <table class="property-list">
2293 <tbody>
2294 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi properties</a>
2295 <td>direction
2296 <tr><td>unicode-bidi
2297 <tbody>
2298 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background properties</a>
2299 <td>background-color
2300 <tr><td>background-image
2301 <tr><td>background-repeat
2302 <tr><td>background-attachment
2303 <tr><td>background-position
2304 <tr><td>background
2305 <tbody>
2306 <tr><td rowspan="20"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties">border properties</a>
2307 <td>border-top-width
2308 <tr><td>border-right-width
2309 <tr><td>border-bottom-width
2310 <tr><td>border-left-width
2311 <tr><td>border-width
2312 <tr><td>border-top-color
2313 <tr><td>border-right-color
2314 <tr><td>border-bottom-color
2315 <tr><td>border-left-color
2316 <tr><td>border-color
2317 <tr><td>border-top-style
2318 <tr><td>border-right-style
2319 <tr><td>border-bottom-style
2320 <tr><td>border-left-style
2321 <tr><td>border-short-style
2322 <tr><td>border-top
2323 <tr><td>border-right
2324 <tr><td>border-bottom
2325 <tr><td>border-left
2326 <tr><td>border
2327 <tbody>
2328 <tr><td rowspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#counters">counter properties</a>
2329 <td>counter-reset
2330 <tr><td>counter-increment
2331 <tbody>
2332 <tr><td colspan="2"><a href="">content</a>
2333 <tbody>
2334 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
2335 <tbody>
2336 <tr><td rowspan="6"><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>
2337 <td>font-family
2338 <tr><td>font-size
2339 <tr><td>font-style
2340 <tr><td>font-variant
2341 <tr><td>font-weight
2342 <tr><td>font
2343 <tbody>
2344 <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
2345 <td>height
2346 <tr><td>min-height
2347 <tr><td>max-height
2348 <tbody>
2349 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
2350 <tbody>
2351 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin properties</a>
2352 <td>margin-top
2353 <tr><td>margin-right
2354 <tr><td>margin-bottom
2355 <tr><td>margin-left
2356 <tr><td>margin
2357 <tbody>
2358 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline properties</a>
2359 <td>outline-width
2360 <tr><td>outline-style
2361 <tr><td>outline-color
2362 <tr><td>outline
2363 <tbody>
2364 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
2365 <tbody>
2366 <tr><td rowspan="5"><a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding properties</a>
2367 <td>padding-top
2368 <tr><td>padding-right
2369 <tr><td>padding-bottom
2370 <tr><td>padding-left
2371 <tr><td>padding
2372 <tbody>
2373 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
2374 <tbody>
2375 <tr><td rowspan="7"><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a>
2376 <td>letter-spacing
2377 <tr><td>text-align
2378 <tr><td>text-decoration
2379 <tr><td>text-indent
2380 <tr><td>text-transform
2381 <tr><td>white-space
2382 <tr><td>word-spacing
2383 <tbody>
2384 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
2385 <tbody>
2386 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
2387 <tbody>
2388 <tr><td rowspan="3"><a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a> <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
2389 <td>width
2390 <tr><td>min-width
2391 <tr><td>max-width
2392 <tbody>
2393 <tr><td colspan="2"><a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
2394 </table>
2396 <h2 class="no-num" id="transfer-possibilities">Appendix B: Transfer Possibilities</h2>
2398 <p>Often, but not always, the page box has a one-to-one correspondence to the
2399 physical surface onto which the document is ultimately rendered. The CSS3 page
2400 model specifies formatting within the page box, but it is the user agent's
2401 responsibility to transfer the page box to the sheet. Some user agent transfer
2402 possibilities that are not addressed by CSS3 include:</p>
2404 <ul id="complex-usecases">
2405 <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>
2406 <li>Transferring two page boxes to the front and back surfaces of the same
2407 sheet (e.g. double-sided printing);</li>
2408 <li>Transferring N (small) page boxes to one sheet (called "N-up");</li>
2409 <li>Transferring one (large) page box to N x M sheets (called "tiling");</li>
2410 <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on
2411 a sheet, which, when folded and trimmed like a book, appear in their proper
2412 sequence;</li>
2413 <li>Printing one document to multiple output trays;</li>
2414 <li>Generating files containing print instructions.</li>
2415 </ul>
2417 <h2 class="no-num" id="references">References</h2>
2419 <h3 class="no-num" id="normative-references">Normative References</h3><!--normative-->
2421 <h3 class="no-num" id="informative-references">Informative References</h3><!--informative-->
2422 </div>
2423 </div>
2424 </body>
2425 </html>
