Thu, 07 Mar 2013 17:13:37 +0100
[css3-page] Define the default stacking order of page-margin boxes.
WG resolution:
http://lists.w3.org/Archives/Public/www-style/2013Mar/0157.html
http://lists.w3.org/Archives/Public/www-style/2013Mar/0163.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
3 <html lang=en>
4 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
5 <title> CSS Paged Media Module Level 3</title>
7 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
8 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
9 rel=dcterms.rights>
10 <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
11 <meta content=text name=dcterms.type>
12 <meta content=2013-03-07 name=dcterms.issued>
13 <meta content="Melinda Grant" name=dcterms.creator>
14 <meta content="Håkon Wium Lie" name=dcterms.creator>
15 <meta content="Elika J. Etemad" name=dcterms.creator>
16 <meta content="Simon Sapin" name=dcterms.creator>
17 <meta content=W3C name=dcterms.publisher>
18 <meta content="http://dev.w3.org/csswg/css3-page/" name=dcterms.identifier>
19 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
20 <link href="../default.css" rel=stylesheet type="text/css">
21 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
22 type="text/css">
23 <style type="text/css">
24 .keyword { font-weight:bold }
25 .equation { padding: 2% }
26 table.equation {text-align:center}
27 td, th { vertical-align: top }
28 pre { font-size: 1em; }
30 #margin-values { border-collapse: collapse; }
31 #margin-values td,
32 #margin-values th
33 {
34 padding: 0.2em;
35 border: thin solid black;
36 }
38 .property-list
39 {
40 border: 1px solid black;
41 padding: .2em;
42 margin-top: 2em;
43 }
45 .property-list td
46 {
47 border: 1px solid black;
48 padding: .1em;
49 }
51 .editorial
52 {
53 display: block;
54 font-family: arial, helvetica, sans-serif;
55 font-size: 80%;
56 margin-left: .5in;
57 margin-right: 1in ;
58 padding: 0.125in;
59 background: #FFFFDD ;
60 }
62 .editorial:after { content: "Ed."}
63 .RFC2119
64 {
65 text-transform: lowercase;
66 font-style: italic
67 }
69 em em.RFC2119
70 {
71 text-transform: lowercase;
72 font-style: normal
73 }
75 table.page-sizes
76 {
77 border: thin solid;
78 margin-top: 1.5em;
79 }
80 table.page-sizes td
81 {
82 border: thin solid;
83 padding: .5em;
84 }
85 table.page-sizes th
86 {
87 border: thin solid;
88 padding: .5em;
89 background: #ffffaa;
90 }
92 </style>
94 <body class=h-entry>
95 <div>
96 <div class=head> <!--begin-logo-->
97 <p><a href="http://www.w3.org/"><img alt=W3C height=48
98 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
100 <h1 class=p-name>CSS Paged Media Module Level 3</h1>
102 <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
103 class=dt-updated><span class=value-title title=20130307> 7 March
104 2013</span></span></h2>
106 <dl>
107 <dt>This version:
109 <dd><a class=u-url
110 href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
111 <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130307</a></dd> -->
113 <dt>Latest version:
115 <dd><a
116 href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a>
118 <dt>Previous version:
120 <dd><a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/"
121 rel=previous>http://www.w3.org/TR/2006/WD-css3-page-20061010/</a>
123 <dt>Issue Tracking:
125 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/13"
126 rel=issues>http://www.w3.org/Style/CSS/Tracker/products/13</a>
127 <!-- or use the wiki:
128 <dd><a rel="issues" href="http://wiki.csswg.org/spec/css3-page"
129 >http://wiki.csswg.org/spec/css3-page</a></dd>
130 -->
132 <dt>Feedback:
134 <dd><a
135 href="mailto:www-style@w3.org?subject=%5Bcss3-page%5D%20feedback">www-style@w3.org</a>
136 with subject line “<kbd>[css3-page] <var>… message topic
137 …</var></kbd>” (<a
138 href="http://lists.w3.org/Archives/Public/www-style/"
139 rel=discussion>archives</a>)
141 <dt>Editors:
143 <dd class="p-author h-card vcard"> <span class="p-name fn">Melinda
144 Grant</span>, <span class="p-org org">Hewlett-Packard</span>
146 <dd class="p-author h-card vcard"> <span class="p-name fn">Håkon Wium
147 Lie</span>, <span class="p-org org">Opera Software</span>
149 <dd class="p-author h-card vcard"> <span class="p-name fn">Elika J.
150 Etemad</span>, <span class="p-org org">Mozilla</span>
152 <dd class="p-author h-card vcard"> <span class="p-name fn">Simon
153 Sapin</span>, <span class="p-org org">Kozea</span>
154 </dl>
155 <!--begin-copyright-->
156 <p class=copyright><a
157 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
158 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
159 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
160 href="http://www.csail.mit.edu/"><abbr
161 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
162 href="http://www.ercim.eu/"><abbr
163 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
164 <a href="http://www.keio.ac.jp/">Keio</a>, <a
165 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
166 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
167 <a
168 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
169 and <a
170 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
171 use</a> rules apply.</p>
172 <!--end-copyright--></div>
174 <hr title="Separator for header">
176 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
178 <p> <span class=p-summary> This module describes the page model that
179 partitions a flow into pages. It builds on the <a
180 href="http://www.w3.org/TR/CSS21/box.html">Box model module</a> and
181 introduces and defines the page model and paged media. It adds
182 functionality for pagination, page margins, page size and orientation,
183 headers and footers, widows and orphans, and image orientation. Finally
184 it extends generated content to enable page numbering and running headers
185 / footers. </span></p>
186 <!-- "Status of this document" -->
187 <h2 class="no-num no-toc" id=status>Status of this Document</h2>
188 <!--begin-status-->
189 <p>This is a public copy of the editors' draft. It is provided for
190 discussion only and may change at any moment. Its publication here does
191 not imply endorsement of its contents by W3C. Don't cite this document
192 other than as work in progress.
194 <p>The (<a
195 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
196 public mailing list <a
197 href="mailto:www-style@w3.org?Subject=%5Bcss3-page%5D%20PUT%20SUBJECT%20HERE">
198 www-style@w3.org</a> (see <a
199 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
200 discussion of this specification. When sending e-mail, please put the
201 text “css3-page” in the subject, preferably like this:
202 “[<!---->css3-page<!---->] <em>…summary of comment…</em>”
204 <p>This document was produced by the <a href="/Style/CSS/members">CSS
205 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
207 <p>This document was produced by a group operating under the <a
208 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
209 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
210 rel=disclosure>public list of any patent disclosures</a> made in
211 connection with the deliverables of the group; that page also includes
212 instructions for disclosing a patent. An individual who has actual
213 knowledge of a patent which the individual believes contains <a
214 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
215 Claim(s)</a> must disclose the information in accordance with <a
216 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of
217 the W3C Patent Policy</a>.</p>
218 <!--end-status-->
219 <p>This document contains the <abbr
220 title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
221 Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
222 of 7 March 2013. The Last Call period ends on <span
223 class=fudge>TBD</span>.
225 <p>Expected next revision to this document is another LCWD, due to the
226 substantive changes to page-margin box sizing and other areas that are
227 now specified with more precision.
229 <p>The <a href="lc2_issues.htm">Disposition of Comments</a> document
230 contains the current issues list and responses to input received during
231 this Last Call period.
233 <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
234 <!--begin-toc-->
235 <ul class=toc>
236 <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
238 <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>
240 <li><a href="#page-terms"><span class=secno>3. </span>Page
241 Terminology</a>
243 <li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page
244 Model</a>
245 <ul class=toc>
246 <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
247 and Painting Order</a>
249 <li><a href="#content-outside-box"><span class=secno>4.2.
250 </span>Content outside the page box</a>
252 <li><a href="#progression"><span class=secno>4.3. </span>Page
253 Progression</a>
254 </ul>
256 <li><a href="#page-selector-and-context"><span class=secno>5. </span>Page
257 Selectors and the Page Context</a>
258 <ul class=toc>
259 <li><a href="#at-page-rule"><span class=secno>5.1. </span>The @page
260 Rule</a>
262 <li><a href="#page-selectors"><span class=secno>5.2. </span>Page
263 selectors</a>
264 <ul class=toc>
265 <li><a href="#pseudo-classes"><span class=secno>5.2.1. </span> Page
266 pseudo-classes: :left, :right, :first, and :blank </a>
267 </ul>
269 <li><a href="#syntax-page-selector"><span class=secno>5.3. </span>@page
270 rule grammar</a>
272 <li><a href="#cascading-and-page-context"><span class=secno>5.4.
273 </span>Cascading in the page context</a>
274 </ul>
276 <li><a href="#margin-boxes"><span class=secno>6. </span>Page-Margin
277 Boxes</a>
278 <ul class=toc>
279 <li><a href="#margin-at-rules"><span class=secno>6.1. </span>At-rules
280 for page-margin boxes</a>
282 <li><a href="#populating-margin-boxes"><span class=secno>6.2.
283 </span>Populating page-margin boxes</a>
285 <li><a href="#margin-dimension"><span class=secno>6.3. </span>Computing
286 Page-margin Box Dimensions</a>
287 <ul class=toc>
288 <li><a href="#margin-box-terms"><span class=secno>6.3.1.
289 </span>Page-Margin Box Layout Terminology</a>
291 <li><a href="#variable-sizing"><span class=secno>6.3.2. </span>
292 Page-Margin Box Variable Dimension Computation Rules</a>
293 <ul class=toc>
294 <li><a href="#variable-auto-margins"><span class=secno>6.3.2.1.
295 </span>Margins</a>
297 <li><a href="#variable-auto-sizing"><span class=secno>6.3.2.2.
298 </span>Resolving ‘<code class=css>auto</code>’ widths</a>
300 <li><a href="#variable-minmax"><span class=secno>6.3.2.3.
301 </span>Handling ‘<code class=property>min-width</code>’ and
302 ‘<code class=property>max-width</code>’</a>
304 <li><a href="#variable-position"><span class=secno>6.3.2.4.
305 </span>Positioning</a>
307 <li><a href="#variable-mapping"><span class=secno>6.3.2.5.
308 </span>Boxes on other sides</a>
309 </ul>
311 <li><a href="#fixed-sizing"><span class=secno>6.3.3.
312 </span>Page-Margin Box Fixed Dimension Computation Rules</a>
313 </ul>
315 <li><a href="#margin-box-ex"><span class=secno>6.4. </span>Page-margin
316 box examples</a>
317 </ul>
319 <li><a href="#page-properties"><span class=secno>7. </span>Page
320 Properties</a>
321 <ul class=toc>
322 <li><a href="#page-based-counters"><span class=secno>7.1.
323 </span>Page-based counters</a>
325 <li><a href="#margin-text-alignment"><span class=secno>7.2.
326 </span>Page-margin boxes and default values</a>
327 </ul>
329 <li><a href="#page-size"><span class=secno>8. </span>Page Size</a>
330 <ul class=toc>
331 <li><a href="#page-size-prop"><span class=secno>8.1. </span>Page size:
332 the ‘<code class=property>size</code>’ property</a>
333 <ul class=toc>
334 <li><a href="#some-examples"><span class=secno>8.1.1. </span>Some
335 examples:</a>
337 <li><a href="#page-size-media-query"><span class=secno>8.1.2.
338 </span>Media Queries</a>
339 </ul>
341 <li><a href="#renderingpages"><span class=secno>8.2. </span>Rendering
342 page boxes that do not fit a page sheet</a>
344 <li><a href="#positioning-page-box"><span class=secno>8.3.
345 </span>Positioning the page box on the sheet</a>
346 </ul>
348 <li><a href="#page-breaks"><span class=secno>9. </span> Page Breaks </a>
349 <ul class=toc>
350 <li><a href="#using-named-pages"><span class=secno>9.1. </span>Using
351 named pages: ‘<code class=property>page</code>’</a>
352 </ul>
354 <li><a href="#image-properties"><span class=secno>10. </span>Image
355 Properties</a>
357 <li class=no-num><a href="#properties-list">Appendix A: Applicable CSS2.1
358 Properties</a>
359 <ul class=toc>
360 <li class=no-num><a href="#page-property-list"> CSS 2.1 Properties that
361 apply within the page context</a>
363 <li class=no-num><a href="#margin-property-list"> CSS 2.1 properties
364 that apply within the margin contexts</a>
365 </ul>
367 <li class=no-num><a href="#transfer-possibilities">Appendix B: Transfer
368 Possibilities</a>
370 <li class=no-num><a href="#changes">Changes</a>
372 <li class=no-num><a href="#references">References</a>
373 <ul class=toc>
374 <li class=no-num><a href="#normative-references">Normative
375 References</a>
377 <li class=no-num><a href="#informative-references">Informative
378 References</a>
379 </ul>
380 </ul>
381 <!--end-toc--> <!-- "Introduction" -->
382 <h2 id=intro><span class=secno>1. </span>Introduction</h2>
384 <p>Paged media (e.g., paper, transparencies, photo album pages, pages
385 displayed on computer screens as printed output simulations) differ from
386 <a
387 href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous
388 media</a> in that the content of the document is split into one or more
389 discrete static display surfaces. To handle pages, CSS3 Paged Media
390 describes how:
392 <ul>
393 <li><a href="#page-breaks">page breaks</a> are created and avoided;
395 <li>the page properties such as size, orientation, margins, border, and
396 padding are specified;
398 <li>headers and footers are established within the page margins;
400 <li>content such as page counters are placed in the headers and footers;
401 and
403 <li>orphans and widows can be controlled.
404 </ul>
406 <p>This module defines a <a href="#page-model">page model</a> that
407 specifies how a document is formatted within a rectangular area, called
408 the <a href="#page-box-page-rule">page box</a>, that has finite width and
409 height.
411 <p>Although CSS3 does not specify how user agents transfer page boxes to
412 sheets, it does include certain mechanisms for telling user agents about
413 the intended page sheet <a href="#page-size">size and orientation</a>. In
414 the general case, CSS3 assumes that one page box will be transferred to
415 one surface of similar size.
417 <p>All properties defined in this specification also accept the <a
418 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
419 keyword as their value, but for readability it has not been listed
420 explicitly.
422 <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
424 <p>All of the text in this specification is normative except sections
425 explicitly marked as non-normative, examples, and notes. The keywords
426 "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em
427 class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em
428 class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em
429 class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>",
430 "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when
431 used in this document are to be interpreted as described in <cite>RFC
432 2119</cite> <a href="#RFC2119"
433 rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>. However, for
434 readability, these words do not appear in all uppercase letters in this
435 specification.
437 <p>Examples in this specification are introduced with the words "for
438 example" or are set apart from the normative text with
439 <code>class="example"</code>, like this:
441 <div class=example>
442 <p>This is an example of an informative example.
443 </div>
445 <p>Informative notes begin with the word "Note" and are set apart from the
446 normative text with <code>class="note"</code>, like this:
448 <p class=note>Note, this is an informative note.
450 <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
452 <p>The following terminology and accompanying diagrams help to describe
453 the page model:
455 <dl>
456 <dt id=page-sheet>Page sheet
458 <dd><img
459 alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"
460 height=148 src=PageSheet.png style="float: right;" width=194>The page
461 sheet is one surface of the physical medium. The illustration to the
462 right shows a representation of the upper-left corner of a page sheet.
464 <dt id=printable-area>Printable and non-printable areas
466 <dd>The non-printable area is the area of a page sheet that a physical
467 device such as a printer is not capable of marking reliably, usually due
468 to the printer's paper handling mechanism. This value is printer
469 dependent and is usually a small region along each edge of the page
470 sheet. The printable area is the area of page sheet that a printer
471 <em>is</em> capable of marking reliably. The size of the printable area
472 is the size of the page sheet reduced by the size of the non-printable
473 area. A user agent may not know the dimensions of this area for a
474 particular printing device; but when its dimensions are known, user
475 agents <em class=RFC2119>MAY</em> adjust the formatting of the document
476 so that content falls within the printable area. How this adjustment is
477 accomplished is device dependent within the constraints expressed in the
478 sections <a href="#renderingpages">Rendering page boxes that do not fit
479 a page sheet</a> and <a href="#content-outside-box">Content outside the
480 page box</a>.
482 <dt id=page-orientation>Page Orientation
484 <dd>The page orientation is defined by comparing the length of the edges
485 of a <a href="#page-box">page box</a>. The page box is a rectangle with
486 two perpendicular edges called the long edge and the short edge. The
487 length of the long edge is always greater than or equal to the length of
488 the short edge. When the page box is square, the two edges are of the
489 same length and either can be used as the long edge with the other being
490 the short edge. This specification defines page orientations of ‘<code
491 class=property>portrait</code>’ and ‘<code
492 class=property>landscape</code>’.
494 <dt id=portrait>Portrait Orientation
496 <dd>A portrait page's height is greater than or equal to its width.
497 Horizontal elements are parallel to the short edge and vertical elements
498 to the long edge.
500 <dt id=landscape>Landscape Orientation
502 <dd>A landscape page's width is greater than or equal to its height.
503 Horizontal elements are parallel to the long edge and vertical elements
504 to the short edge. <span class=note>Note that CSS3 makes no distinction
505 between landscape and reverse-landscape orientations. However, future
506 versions of CSS may do so. UAs should consider, when formatting for
507 duplexed printing, the binding edge, page progression, and ease of
508 reading when choosing between landscape and reverse-landscape
509 renderings.</span>
511 <dt id=duplex-printing>Duplex Printing
513 <dd>Duplex printing prints one page box per side of a page sheet and uses
514 both sides of the page sheet. This module provides no ability to specify
515 whether a document is duplex printed, but the concept of left and right
516 pages is based on the assumption that the document is duplex printed,
517 regardless of whether or not it actually is.
519 <dt id=binding-edge>Binding Edge
521 <dd>The binding edge is the edge of the page box that is toward the
522 binding if the material is bound. The binding edge often has a larger
523 margin than the opposite edge to provide for the space used by the
524 binding. The binding edge can be any of the four edges. However, page
525 sheets are customarily bound so that the binding edge of page boxes with
526 portrait orientation is vertical. This module provides no method to
527 specify the binding edge. In duplex printing, the binding edge is on
528 opposite sides of the page box for the left and right pages.
530 <dt id=facing-pages>Facing Pages
532 <dd>Facing pages are two sequential pages such that when the document is
533 duplex printed they are on separate sheets of paper. Typically, the
534 earlier page will be the back side of one sheet and the later page will
535 be the front side of another. They are usually laid out so that the
536 binding edges of facing pages are vertical and adjacent when the pages
537 are placed in their normal reading orientation.
539 <dt id=left-page>Left Page
541 <dd>A page that would be on the left if it is part of a pair of facing
542 pages as typically laid out. Page layouts for documents using a
543 left-to-right page progression have the earlier of the facing pages on
544 the left. Rules specific to the left page can be specified using the
545 <span class=css>‘<code class=css>:left</code>’</span> <a
546 href="#page-selector"><i>page selector</i></a>.
548 <dt id=right-page>Right Page
550 <dd>A page that would be on the right if it is part of a pair of facing
551 pages as typically laid out. Page layouts for documents using a
552 right-to-left page progression have the earlier of the facing pages on
553 the right. Rules specific to the right page can be specified using the
554 <span class=css>‘<code class=css>:right</code>’</span> <a
555 href="#page-selector"><i>page selector</i></a>.
556 </dl>
558 <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>
560 <p>In the paged media formatting model, the document is transferred into
561 one or more page boxes. The <dfn id=page-box>page box</dfn> is a
562 specialized CSS box that maps to a rectangular print media surface, such
563 as a page of paper. It is roughly analogous to the <a
564 href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>.
565 <img alt="" height=266 src=PageBox.png style="float: right;" width=267>
567 <p>As with other CSS <a
568 href="http://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box consists
569 of margin, border, padding, and content areas. The content and margin
570 areas of a page box have special functions:
572 <ul>
573 <li>The content area of a page box is called the <dfn id=page-area>page
574 area</dfn>. The content of the document is flowed into one or more page
575 boxes. The page area acts as a container for all the boxes generated by
576 the root element and its descendants that are laid out within a given
577 page box. The edges of the page area on the first page establish the
578 rectangle that is the initial <a
579 href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing
580 block</a> of the document.
582 <li>The margin area of a page box is divided into 16 <dfn
583 id=page-margin-boxes>page-margin boxes</dfn>. Each page-margin box has
584 its own margin, border, padding and content areas. Page-margin boxes are
585 typically used to display running headers and footers.
586 </ul>
588 <p>The properties of a <a href="#page-box"><i>page box</i></a> are
589 determined by properties <a
590 href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a>
591 within the <a href="#page-context"><i>page context</i></a>, which is the
592 <a href="http://www.w3.org/TR/CSS21/syndata.html#x14">declaration
593 block</a> of the <code>@page</code> rule. Similarly the properties of a
594 <i>page-margin box</i> are determined by properties declared within its
595 <a href="#margin-context"><i>margin context</i></a>. Declarations in the
596 page context can affect the page box and/or inherit to the page-margin
597 boxes, but they do not apply to or inherit into the document's root
598 element or other content.
600 <p>The <a href="#containing-block0"><i>containing block</i></a> of the
601 page box is specified using the ‘<a href="#size"><code
602 class=property>size</code></a>’ property in the <a
603 href="#page-context"><i>page context</i></a>. The width and horizontal
604 margins of the page box are then calculated exactly as for a <a
605 href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced
606 block element in normal flow</a>. <a href="#CSS21"
607 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The height and vertical
608 margins of the page box are calculated analogously (instead of using the
609 block height formulas). In both cases if the values are over-constrained,
610 instead of ignoring any margins, the containing block is resized to
611 coincide with the margin edges of the page box.
613 <h3 id=painting><span class=secno>4.1. </span> Page Backgrounds and
614 Painting Order</h3>
616 <p>When drawing a page of content, the page layers are painted in the
617 following painting order (bottommost first):
619 <ol>
620 <li>page background
622 <li>document canvas
624 <li>page borders
626 <li>document contents
628 <li>page-margin boxes
629 </ol>
631 <p>In the page model, the page background behaves similar to the root
632 background: its <a
633 href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background
634 painting area</i></a> is the entire page box, including its margins
635 (regardless of ‘<code class=property>background-clip</code>’). Page
636 backgrounds are anchored within the page box's padding area by default
637 (and honor ‘<code class=property>background-origin</code>’ if the UA
638 supports <a href="#CSS3BG"
639 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code
640 class=property>background-attachment</code>’ is ‘<code
641 class=css>fixed</code>’ then the image is positioned relative to the
642 page box including its margins (i.e. the <a
643 href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background
644 positioning area</i></a>, like the <i>background painting area</i>, is
645 the page's margin box).
647 <p>The document canvas background is drawn as the page box's background:
648 by default its <i>background painting area</i> covers the page box's
649 border box, and for UAs that support <a href="#CSS3BG"
650 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, follows the ‘<code
651 class=property>background-clip</code>’ value specified on the root
652 element. It remains, however, positioned with respect to the root element
653 or page area as usual.
655 <p>The ‘<code class=property>z-index</code>’ property applies to
656 page-margin boxes. With respect to the page-margin boxes, the document
657 canvas, page borders, and all of the document contents are treated as a
658 single element with a <code>z-index</code> value of ‘<code
659 class=css>0</code>’: the page-margin boxes never interleave with parts
660 of the document content or between the content and the canvas. They may
661 only paint in front of the document content or behind the document
662 canvas. The page background is always painted underneath everything else.
663 Since the <code>position</code> property does not apply to page-margin
664 boxes, <code>z-index</code> always affects page-margin boxes as if they
665 were positioned elements regardless of the <code>position</code>
666 property's value.
668 <p>The default painting order, or <a
669 href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree
670 order", of page-margin boxes with respect to each other is as follows:
672 <ol>
673 <li>‘<code class=css>@top-left-corner</code>’
675 <li>‘<code class=css>@top-left</code>’
677 <li>‘<code class=css>@top-center</code>’
679 <li>‘<code class=css>@top-right</code>’
681 <li>‘<code class=css>@top-right-corner</code>’
683 <li>‘<code class=css>@right-top</code>’
685 <li>‘<code class=css>@right-middle</code>’
687 <li>‘<code class=css>@right-bottom</code>’
689 <li>‘<code class=css>@bottom-right-corner</code>’
691 <li>‘<code class=css>@bottom-right</code>’
693 <li>‘<code class=css>@bottom-center</code>’
695 <li>‘<code class=css>@bottom-left</code>’
697 <li>‘<code class=css>@bottom-left-corner</code>’
699 <li>‘<code class=css>@left-bottom</code>’
701 <li>‘<code class=css>@left-middle</code>’
703 <li>‘<code class=css>@left-top</code>’
704 </ol>
706 <p class=note> Start with ‘<code class=css>@top-left-corner</code>’,
707 then go clockwise. This order is arbitrary but can be overridden with
708 ‘<code class=property>z-index</code>’. It only has a visible effect
709 when page-margin boxes overlap, which should not happen in most cases.
711 <h3 id=content-outside-box><span class=secno>4.2. </span>Content outside
712 the page box</h3>
714 <p>When formatting content in the page model, some content may end up
715 outside the page box. For example, an element whose ‘<code
716 class=property>white-space</code>’ property has the value ‘<code
717 class=property>pre</code>’ can generate a box that is wider than the
718 page box. As another example, when boxes are positioned absolutely or
719 relatively, they may end up in "inconvenient" locations. For example,
720 images may be placed on the edge of the page box or 100,000 meters below
721 the page box.
723 <p>A specification for the exact formatting of such elements lies outside
724 the scope of this document. However, it is recommended that authors and
725 user agents observe the following general principles concerning content
726 outside the page box:
728 <ul>
729 <li>
730 <p>Content should be allowed slightly beyond the page box to allow pages
731 to "bleed".
733 <li>
734 <p>User agents <em class=RFC2119>SHOULD</em> avoid generating a large
735 number of content-empty pages to honor the positioning of elements
736 (e.g., printing 100 blank pages is probably neither the author's nor
737 the user's intent). A <dfn id=content-empty>Content-empty page</dfn> is
738 a page box whose page area contains no printable content other than
739 backgrounds and/or borders. A page box whose page area contains
740 generated content, or content whose visibility is ‘<code
741 class=property>hidden</code>’, or invisible content such as a
742 zero-width space is not a content-empty page. On the other hand, a page
743 containing only a background and/or borders and/or page-margin box
744 content <em>is</em> a content-empty page.
746 <p class=note>Note, however, that generating a small number of empty
747 page boxes is sometimes necessary to honor the <span class=css>‘<code
748 class=property>left</code>’</span> and <span class=css>‘<code
749 class=property>right</code>’</span> values for <span
750 class=property>‘<code class=property>break-before</code>’</span>
751 and <span class=property>‘<code
752 class=property>break-after</code>’</span>.
754 <li>
755 <p>Authors <em class=RFC2119>SHOULD NOT</em> position elements in
756 inconvenient locations just to avoid rendering them. Instead:
758 <ul>
759 <li>To suppress box generation entirely, set the <span
760 class=property>‘<code class=property>display</code>’</span>
761 property to <span class=css>‘<code
762 class=property>none</code>’</span>.
764 <li>To make a box invisible, set the <span class=property>‘<code
765 class=property>visibility</code>’</span> property.
766 </ul>
768 <li>
769 <p>This specification does not define how boxes positioned outside the
770 page box are handled. Possibilities include discarding them or creating
771 page boxes for them at the end of the document.
772 </ul>
774 <h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>
776 <p>CSS distinguishes between left pages and right pages on all documents,
777 whether they are printed duplex or not. Each left page is followed by a
778 right page and vice versa. Left and right pages can be styled differently
779 with the <a href="#left-right-first"><code>:left</code> and
780 <code>:right</code> pseudo-classes</a>.
782 <p>Whether the first page of a document is a left page or a right page
783 depends on the page progression of the document. The <dfn
784 id=page-progression>page progression</dfn> is the direction in which the
785 printed pages of a document would be sequenced when laid out
786 side-to-side. For example, English and horizontally-set Japanese
787 typically progress from left to right, whereas Arabic and vertically-set
788 Japanese pages typically progress from right to left. In documents with a
789 left-to-right page progression the first page of the document is a right
790 page, and vice versa.
792 <p>The page progression direction is determined as follows:
794 <ul>
795 <li>If text is laid out in horizontal lines, the page progression is the
796 same as the inline progression.
798 <li>If text is laid out in vertical lines, the page progression is the
799 same as the block progression.
800 </ul>
802 <p>If the UA supports the ‘<code class=property>direction</code>’ and
803 ‘<code class=property>writing-mode</code>’ properties from the CSS 3
804 Writing Modes Module <a href="#CSS3-WRITING-MODES"
805 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>, it
806 must <a
807 href="http://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a>
808 whether the first page is a left or right page from the values of those
809 properties on the root element.
811 <p> To explicitly force a document to begin printing on a left or right
812 page, authors can specify a <a
813 href="http://www.w3.org/TR/css3-break/#break-before">‘<code
814 class=property>break-before</code>’</a> value that that propagates a
815 page break to the root. <a href="#CSS3-BREAK"
816 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> The UA must
817 suppress the first (empty) page(s) in this case (and the
818 <code>:first</code> pseudo-class matches the first printed page).
820 <div class=example>
821 <pre>
822 html { break-before: always }
823 </pre>
825 <p> For an HTML document with a left-to-right page progression, the above
826 style rule will cause the first page of the document to print on a
827 ‘<code class=css>:left</code>’ page
829 <pre>
830 html { break-before: left }
831 </pre>
833 <p> For an HTML document, the above style rule will cause the first page
834 of the document to print on a ‘<code class=css>:left</code>’ page,
835 regardless of the page progression.
836 </div>
838 <h2 id=page-selector-and-context><span class=secno>5. </span>Page
839 Selectors and the Page Context</h2>
841 <h3 id=at-page-rule><span class=secno>5.1. </span>The @page Rule</h3>
843 <p>Authors can specify various aspects of a page box, such as its
844 dimensions, orientation, and margins, within an <span
845 class=css>@page</span> rule. ‘<code class=css>@page</code>’ rules are
846 allowed at the top-level of a stylesheet, as well as wherever <a
847 href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a>
848 are allowed. An <span class=css>@page</span> rule consists of the keyword
849 <span class=css>‘<code class=css>@page</code>’</span>, an <em
850 class=RFC2119>OPTIONAL</em> comma-separated list of <a
851 href="#page-selectors">page selectors</a> and a block of declarations
852 (said to be in the <dfn id=page-context>page context</dfn>). An ‘<code
853 class=css>@page</code>’ rule can also contain other at-rules,
854 interleaved between declarations. The current level of this specification
855 only allows <a href="#margin-at-rules">margin at-rules</a> inside
856 ‘<code class=css>@page</code>’.
858 <p>‘<code class=css>@page</code>’ rules without a selector list are
859 considered to have a single, empty selector. ‘<code
860 class=css>@page</code>’ rules apply to pages that <a
861 href="#match"><i>match</i></a> at least one of their selectors.
863 <p>Properties declared within the page context apply to the page box.
865 <p>If an error is encountered during the processing of a declaration block
866 within a page or a margin context, the <a
867 href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for
868 handling parsing errors</a> apply; that is, valid declarations within the
869 block are applied.
871 <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>
873 <p>A <dfn id=page-selector>page selector</dfn> is either:
875 <ul>
876 <li>one or more <a
877 href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
878 case-insensitive</a> <a href="#pseudo-classes">pseudo-classes</a>,
880 <li>a <a href="#using-named-pages">page type</a> (a case-sensitive
881 identifier) followed by zero or more pseudo-classes.
882 </ul>
884 <p> No whitespace is allowed between components of a selector. The <a
885 href="#page_selector"><i title="page_selector">page selector
886 grammar</i></a> and examples can be found below.
888 <p>A selector is said to <dfn id=match>match</dfn> a given page if and
889 only if all of its components match the page. Empty selectors (ie.
890 ‘<code class=css>@page</code>’ rules without a selector) match every
891 page. <span class=note>Empty selectors have the weakest <a
892 href="#specificity"><i>specificity</i></a>.</span>
894 <p><a href="#using-named-pages">Page type</a> selectors <a
895 href="#match"><i>match</i></a> pages of the named type generated by the
896 ‘<a href="#page"><code class=property>page</code></a>’ property.
897 <span id=page-selector-syntax-restrict> A page type name of ‘<code
898 class=css>auto</code>’ (<a
899 href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
900 case-insensitive</a>) does not make the rule invalid, but <em
901 class=RFC2119>MUST</em> never match. </span> Individual <a
902 href="#pseudo-classes">pseudo-classes</a> are defined below.
904 <h4 id=pseudo-classes><span class=secno>5.2.1. </span> <a
905 id=left-right-first></a> Page pseudo-classes: :left, :right, :first, and
906 :blank</h4>
908 <p> In addition to the optional <i>page name</i>, ‘<code
909 class=css>@page</code>’ rules can restrict which pages they apply to
910 with CSS pseudo-classes in their <a href="#page-selector"><i>page
911 selector</i></a>.
913 <p> When printing double-sided documents, left and right pages are often
914 formatted differently. All pages are automatically classified by user
915 agents as either left pages or right pages, based on <a
916 href="#progression">page progression</a>. The ‘<code
917 class=css>:left</code>’ and ‘<code class=css>:right</code>’
918 pseudo-classes only <a href="#match"><i>match</i></a> left or right
919 pages, respectively.
921 <div class=example> The following example creates left and right binding
922 edges using these pseudo-classes:
923 <pre>
924 @page :left {
925 margin-left: 3cm;
926 margin-right: 4cm;
927 }
929 @page :right {
930 margin-left: 4cm;
931 margin-right: 3cm;
932 }
933 </pre>
934 </div>
936 <p>If different declarations have been given for left and right pages, the
937 user agent <em class=RFC2119>MUST</em> honor these declarations even if
938 the user agent does not transfer the page boxes to left and right sheets
939 (i.e., a printer that only prints on one side of the medium must
940 nevertheless produce correctly formatted output).
942 <div class=note>
943 <p> <em><strong>Note.</strong> Adding declarations to the <span
944 class=css>‘<code class=css>:left</code>’</span> or <span
945 class=css>‘<code class=css>:right</code>’</span> pseudo-class does
946 not necessarily influence whether the document comes out of the printer
947 double- or single-sided (which is outside the scope of this
948 specification).</em>
949 </div>
951 <p> The ‘<code class=css>:first</code>’ pseudo-class only <a
952 href="#match"><i title=match>matches</i></a> the first printed page of a
953 document.
955 <div class=example>
956 <pre>
957 @page { margin: 2cm } /* All margins set to 2cm */
959 @page :first {
960 margin-top: 10cm /* Top margin on first page 10cm */
961 }
962 </pre>
963 </div>
965 <p> The ‘<code class=css>:blank</code>’ pseudo-class only <a
966 href="#match"><i title=match>matches</i></a> <a href="#content-empty"><i
967 title="content-empty page">content-empty pages</i></a> that appear as a
968 result of <a href="http://www.w3.org/TR/css3-break/#forced-breaks">forced
969 page breaks</a>.
971 <div class=note>
972 <p>Only the ‘<code class=css>left</code>’, ‘<code
973 class=css>right</code>’, ‘<code class=css>recto</code>’ and
974 ‘<code class=css>verso</code>’ values of the ‘<code
975 class=property>break-before</code>’ and ‘<code
976 class=property>break-after</code>’ properties can generate pages that
977 match ‘<code class=css>:blank</code>’.
978 </div>
980 <div class=example>
981 <p>In this example, forced page break may occur before <code>h1</code>
982 elements.
984 <pre>
985 h1 { break-before: left }
987 @page :blank {
988 @top-center { content: "This page is intentionally left blank" }
989 }
990 </pre>
991 </div>
993 <p> A page matched by ‘<code class=css>:blank</code>’ can also be
994 matched by other page pseudo-classes.
996 <div class=example>
997 <p>If headers have been specified on all right pages, a blank right page
998 will be matched by both <code>:blank</code> and <code>:right</code>.
999 Therefore, margin boxes set on right pages will have to be removed
1000 unless they are wanted on blank pages. Here is an example where the top
1001 center header is removed from blank pages, while the page number
1002 remains:
1004 <pre>
1005 h1 { break-before: left }
1007 @page :blank {
1008 @top-center { content: none }
1009 }
1011 @page :right {
1012 @top-center { content: "Preliminary edition" }
1013 @bottom-center { content: counter(page) }
1014 }
1015 </pre>
1017 <p>Due to the higher <a href="#specificity"><i>specificity</i></a> of
1018 <code>:blank</code> over <code>:right</code>, the top center header is
1019 removed even if <code>content: none</code> comes before <code>content:
1020 "Preliminary edition"</code>.
1021 </div>
1023 <div class=note>
1024 <p><em><strong>Note.</strong> Future versions of CSS may include other
1025 page pseudo-classes.</em>
1026 </div>
1028 <h3 id=syntax-page-selector><span class=secno>5.3. </span>@page rule
1029 grammar</h3>
1031 <p>The syntax for the @page rule is a specialization of the generic
1032 at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to
1033 allow @page rules nested inside @media rules. User agents <em
1034 class=RFC2119>MUST</em> adhere to the following grammar:
1036 <p>See <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
1037 Section 4.1.1 and Appendix G for the expansion of missing productions:
1039 <p id=specializatons-of-ATKEYWORD> All new lexical tokens are
1040 specializations of the ATKEYWORD lexical token:
1042 <pre class=lexical>
1043 PAGE_SYM ::= "@page"
1044 TOPLEFTCORNER_SYM ::= "@top-left-corner"
1045 TOPLEFT_SYM ::= "@top-left"
1046 TOPCENTER_SYM ::= "@top-center"
1047 TOPRIGHT_SYM ::= "@top-right"
1048 TOPRIGHTCORNER_SYM ::= "@top-right-corner"
1049 BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner"
1050 BOTTOMLEFT_SYM ::= "@bottom-left"
1051 BOTTOMCENTER_SYM ::= "@bottom-center"
1052 BOTTOMRIGHT_SYM ::= "@bottom-right"
1053 BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
1054 LEFTTOP_SYM ::= "@left-top"
1055 LEFTMIDDLE_SYM ::= "@left-middle"
1056 LEFTBOTTOM_SYM ::= "@left-bottom"
1057 RIGHTTOP_SYM ::= "@right-top"
1058 RIGHTMIDDLE_SYM ::= "@right-middle"
1059 RIGHTBOTTOM_SYM ::= "@right-bottom"
1061 <dfn
1062 id=media>media</dfn> :
1063 MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <a
1064 href="#syntax-prod-page"><i>page_rule</i></a> | ruleset ]* '}' S*
1065 ;
1067 <dfn
1068 id=syntax-prod-page>page_rule</dfn> :
1069 PAGE_SYM S* <a
1070 href="#page_selector_list"><i>page_selector_list</i></a> '{' S* <a
1071 href="#page_body"><i>page_body</i></a> '}' S*
1072 ;
1074 <dfn
1075 id="page_selector_list">page_selector_list</dfn> :
1076 [ <a
1077 href="#page_selector"><i>page_selector</i></a> S* [ ',' <a
1078 href="#page_selector"><i>page_selector</i></a> S* ]* ]?
1079 ;
1081 <dfn
1082 id="page_selector">page_selector</dfn> :
1083 <a
1084 href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>+ | IDENT <a
1085 href="#syntax-prod-pseudo-page"><i>pseudo_page</i></a>*
1086 ;
1088 <dfn
1089 id=syntax-prod-pseudo-page>pseudo_page</dfn> :
1090 ':' [ "left" | "right" | "first" | "blank" ]
1091 ;
1093 <dfn
1094 id="page_body">page_body</dfn> : /* Can be empty */
1095 declaration? [ ';' S* <a
1096 href="#page_body"><i>page_body</i></a> ]? |
1097 <a
1098 href="#syntax-prod-margin"><i>page_margin_box</i></a> <a
1099 href="#page_body"><i>page_body</i></a>
1100 ;
1102 <dfn
1103 id=syntax-prod-margin>page_margin_box</dfn> :
1104 <a
1105 href="#syntax-prod-margin-sym"><i>margin_sym</i></a> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
1106 ;
1108 <dfn
1109 id=syntax-prod-margin-sym>margin_sym</dfn> :
1110 TOPLEFTCORNER_SYM |
1111 TOPLEFT_SYM |
1112 TOPCENTER_SYM |
1113 TOPRIGHT_SYM |
1114 TOPRIGHTCORNER_SYM |
1115 BOTTOMLEFTCORNER_SYM |
1116 BOTTOMLEFT_SYM |
1117 BOTTOMCENTER_SYM |
1118 BOTTOMRIGHT_SYM |
1119 BOTTOMRIGHTCORNER_SYM |
1120 LEFTTOP_SYM |
1121 LEFTMIDDLE_SYM |
1122 LEFTBOTTOM_SYM |
1123 RIGHTTOP_SYM |
1124 RIGHTMIDDLE_SYM |
1125 RIGHTBOTTOM_SYM
1126 ;
1127 </pre>
1129 <div class=example>
1130 <p>The following are examples of page selectors (declaration block
1131 intentionally left blank)
1133 <pre>
1134 @page { ... }
1135 @page :left { ... }
1136 @page :right { ... }
1137 @page LandscapeTable { ... }
1138 @page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
1139 @page:first { ... }
1140 @page toc, index { ... }
1141 @page :blank:first { ... }
1142 </pre>
1144 <p>The following are examples of page-margin boxes where the declaration
1145 blocks are intentionally left blank.
1147 <pre>
1148 @page {
1149 @top-left { ... /* document name */ }
1150 @bottom-center { ... /* page number */}
1151 }
1152 @page :left { @left-middle { ... /* page number in left margin */ }}
1153 @page :right{ @right-middle { ... /* page number in right margins of right pages */}}
1155 @page :left { @bottom-left-corner { ... /* left page numbers */ }}
1156 @page :right { @bottom-right-corner { ... /* right page numbers */ }}
1157 @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
1158 @bottom-right-corner { ... /* empty footer */ } }
1159 </pre>
1160 </div>
1162 <h3 id=cascading-and-page-context><span class=secno>5.4. </span>Cascading
1163 in the page context</h3>
1165 <p>Declarations in page and margin contexts <a
1166 href="http://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like
1167 declarations in <a
1168 href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.
1170 <p>The <dfn id=specificity>specificity</dfn> of page a selector is
1171 computed in a manner analogous to the computations defined in the <a
1172 href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:
1174 <ul>
1175 <li>Count the number of page type names (= <var>f</var>)
1176 <p class=note> Given the syntax of page seletors, <var>f</var> can only
1177 ever be 0 or 1.
1179 <li>Count the number of ‘<code class=css>:first</code>’ or ‘<code
1180 class=css>:blank</code>’ pseudo-classes (= <var>g</var>)
1182 <li>Count the number of ‘<code class=css>:left</code>’ or ‘<code
1183 class=css>:right</code>’ pseudo-classes (= <var>h</var>)
1184 </ul>
1186 <p> Specificities are compared by comparing the three components in order:
1187 the specificity with <var>f</var> larger a value is more specific; if the
1188 two <var>f</var> values are tied, then the specificity with a larger
1189 <var>g</var> value is more specific; if the two <var>g</var> values are
1190 also tied, then the specificity with a larger <var>h</var> value is more
1191 specific; if all the values are tied, the two specifities are equal.
1193 <p> Due to storage limitations, implementations may have limitations on
1194 the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values
1195 higher than the limit must be clamped to that limit, and not overflow.
1197 <p class=note> Note: Each comma-separated selectors in the same ‘<code
1198 class=css>@page</code>’ rule has its own specificity.
1200 <p class=note> Note: Repeated occurrances of the same pseudo-classes are
1201 allowed and do increase specificity.
1203 <div class=example>
1204 <p>Some page specificity calculation examples follow:
1206 <pre>
1207 @page { } /* specificity = (0,0,0) */
1208 @page :left { } /* specificity = (0,0,1) */
1209 @page :first { } /* specificity = (0,1,0) */
1210 @page artsy { } /* specificity = (1,0,0) */
1211 @page artsy:left { } /* specificity = (1,0,1) */
1212 @page artsy:first { } /* specificity = (1,1,0) */
1213 </pre>
1214 </div>
1216 <div class=example>
1217 <p>Consider the following usage example:
1219 <pre>
1220 @page {
1221 margin-left: 3cm;
1222 }
1224 @page :left {
1225 margin-left: 4cm;
1226 }
1227 </pre>
1229 <p>Due to the higher specificity of the pseudo-class selector, the left
1230 margin on left pages will be 4cm and all other pages (the right-facing
1231 pages) will have a left margin of 3cm.
1232 </div>
1234 <div class=example>
1235 <p>In this example, the higher specificity of the green rules wins over
1236 the red rule. Therefore the first page will have blue text in the
1237 top-left page-margin box and green text in the top-right page-margin
1238 box, while subsequent pages will have red text in the page-margin boxes.
1240 <pre>
1241 @page :first {
1242 color: green;
1244 @top-left {
1245 content: "foo";
1246 color: blue;
1247 }
1248 @top-right {
1249 content: "bar";
1250 }
1251 }
1253 @page { color: red;
1254 @top-center {
1255 content: "Page " counter(page);
1256 }
1257 }
1258 </pre>
1259 </div>
1261 <div class=example>
1262 <p>Page contexts cascade, so the following stylesheet would style pages
1263 with 25 millimeter margins and 14 point type in the page-margin boxes:
1265 <pre>
1266 @page { margin: 25mm;}
1267 @page { font-size: 14pt;}
1268 </pre>
1269 </div>
1271 <h2 id=margin-boxes><span class=secno>6. </span>Page-Margin Boxes</h2>
1273 <p>Page-margin boxes are boxes within the page margin that, like
1274 pseudo-elements, can contain generated content.
1276 <p>Page-margin boxes can be used to create page headers and footers, which
1277 are portions of the page set aside for supplementary information such as
1278 the page number or document title.
1280 <div class=example>
1281 <p>Typically, a <dfn id=page-header>page header</dfn> is located at the
1282 top of the page in documents with a predominately horizontal writing
1283 direction and on the side opposite the <a href="#binding-edge">binding
1284 edge</a> for documents with a predominately vertical writing direction.
1285 One possible design of page headers for horizontally written documents
1286 uses the ‘<code class=css>@top-left-corner</code>’, ‘<code
1287 class=css>@top-left</code>’, ‘<code class=css>@top-center</code>’,
1288 ‘<code class=css>@top-right</code>’ and ‘<code
1289 class=css>@top-right-corner</code>’ page-margin boxes. Another design,
1290 for vertically written documents, could use the ‘<code
1291 class=css>@right-top</code>’, ‘<code
1292 class=css>@right-middle</code>’, and ‘<code
1293 class=css>@right-bottom</code>’ page-margin boxes for <a
1294 href="#right-page">right facing pages</a> and ‘<code
1295 class=css>@left-top</code>’, ‘<code
1296 class=css>@left-middle</code>’, and ‘<code
1297 class=css>@left-bottom</code>’ for <a href="#left-page">left facing
1298 pages</a>.
1300 <p>The <dfn id=page-footer>page footer</dfn> is typically at the opposite
1301 end of the page from the page header. For example, the design of a
1302 horizontally written document with a page header at the top of the page
1303 could use the ‘<code class=css>@bottom-left-corner</code>’, ‘<code
1304 class=css>@bottom-left</code>’, ‘<code
1305 class=css>@bottom-center</code>’, ‘<code
1306 class=css>@bottom-right</code>’ and ‘<code
1307 class=css>@bottom-right-corner</code>’ page-margin boxes as the page
1308 footer. The design of a vertically written document could use the
1309 page-margin boxes of the binding edge of the page for the page footer.
1310 </div>
1312 <p>Page-margin boxes are positioned with respect to the page area and are
1313 independent of page orientation, for example the top page-margin boxes
1314 are above the page area in both portrait and landscape orientation. The
1315 various page-margin boxes are defined and illustrated in the diagram
1316 below:
1318 <table class=data id=margin-box-def
1319 summary="defintion of each of the page-margin boxes">
1320 <caption>Table 1 Page-Margin Box Definitions</caption>
1322 <thead>
1323 <tr>
1324 <th>Box
1326 <th>Description
1328 <th>Placement
1330 <tbody>
1331 <tr id=top-margin-boxes-def>
1332 <th id=top-left-corner-box-def>top-left-corner
1334 <td>a fixed-size box defined by the intersection of the top and left
1335 margins of the page box
1337 <td><img
1338 alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
1339 height=47 src=TopLeftCornerBox.png width=181>
1341 <tr id=top-left-box-def>
1342 <th>top-left
1344 <td>a variable-width box filling the top page margin between the
1345 top-left-corner and top-center page-margin boxes
1347 <td><img
1348 alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"
1349 height=47 src=TopLeftMarginBox.png width=181>
1351 <tr id=top-center-box-def>
1352 <th>top-center
1354 <td>a variable-width box centered horizontally between the page's left
1355 and right border edges and filling the page top margin between the
1356 top-left and top-right page-margin boxes
1358 <td><img
1359 alt="the top center box with margin, border, and padding, centered within the page's top margin"
1360 height=47 src=TopCenterMarginBox.png width=181>
1362 <tr id=top-right-box-def>
1363 <th>top-right
1365 <td>a variable-width box filling the top page margin between the
1366 top-center and top-right-corner page-margin boxes
1368 <td><img
1369 alt="the top right box with margin, border, and padding, nested within the page's top margin"
1370 height=47 src=TopRightMarginBox.png width=181>
1372 <tr>
1373 <th id=top-right-corner-box-def>top-right-corner
1375 <td>a fixed-size box defined by the intersection of the top and right
1376 margins of the page box
1378 <td><img
1379 alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
1380 height=47 src=TopRightCornerMarginBox.png width=181>
1382 <tr id=left-margin-boxes-def>
1383 <th id=left-top-box-def>left-top
1385 <td>a variable-height box filling the left page margin between the
1386 top-left-corner and left-middle page-margin boxes
1388 <td rowspan=3><img
1389 alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin"
1390 height=226 src=LeftMarginBoxes.png width=181>
1392 <tr id=left-middle-box-def>
1393 <th>left-middle
1395 <td>a variable-height box centered vertically between the page's top
1396 and bottom border edges and filling the left page margin between the
1397 left-top and left-bottom page-margin boxes
1399 <tr id=left-bottom-box-def>
1400 <th>left-bottom
1402 <td>a variable-height box filling the left page margin between the
1403 left-middle and bottom-left-corner page-margin boxes
1405 <tr id=right-margin-boxes-def>
1406 <th id=right-top-box-def>right-top
1408 <td>a variable-height box filling the right page margin between the
1409 top-right-corner and right-middle page-margin boxes
1411 <td rowspan=3><img
1412 alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin"
1413 height=226 src=RightMarginBoxes.png width=181>
1415 <tr id=right-middle-box-def>
1416 <th>right-middle
1418 <td>a variable-height box centered vertically between the page's top
1419 and bottom border edges and filling the right page margin between the
1420 right-top and right-bottom page-margin boxes
1422 <tr id=right-bottom-box-def>
1423 <th>right-bottom
1425 <td>a variable-height box filling the right page margin between the
1426 right-middle and bottom-right-corner page-margin boxes
1428 <tr id=bottom-margin-boxes-def>
1429 <th id=bottom-left-corner-box-def>bottom-left-corner
1431 <td>a fixed-size box defined by the intersection of the bottom and left
1432 margins of the page box
1434 <td><img
1435 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"
1436 height=48 src=BottomLeftCornerBox.png width=181>
1438 <tr id=bottom-left-box-def>
1439 <th>bottom-left
1441 <td>a variable-width box filling the bottom page margin between the
1442 bottom-left-corner and bottom-center page-margin boxes
1444 <td><img
1445 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"
1446 height=48 src=BottomLeftMarginBox.png width=181>
1448 <tr id=bottom-center-box-def>
1449 <th>bottom-center
1451 <td>a variable-width box centered horizontally between the page's left
1452 and right border edges and filling the bottom page margin between the
1453 bottom-left and bottom-right page-margin boxes
1455 <td style="vertical-align: middle;"><img
1456 alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
1457 height=48 src=BottomCenterMarginBox.png width=181>
1459 <tr id=bottom-right-box-def>
1460 <th>bottom-right
1462 <td>a variable-width box filling the bottom page margin between the
1463 bottom-center and bottom-right-corner page-margin boxes
1465 <td><img
1466 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"
1467 height=48 src=BottomRightMarginBox.png width=181>
1469 <tr id=bottom-right-corner-box-def>
1470 <th>bottom-right-corner
1472 <td>a fixed-size box defined by the intersection of the bottom and
1473 right margins of the page box
1475 <td><img
1476 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"
1477 height=48 src=BottomRightCornerBox.png width=181>
1478 </table>
1480 <h3 id=margin-at-rules><span class=secno>6.1. </span>At-rules for
1481 page-margin boxes</h3>
1483 <p>Page-margin boxes are created by <a href="#margin-at-rules">margin
1484 at-rules</a> inside the <a href="#page-context">page context</a>. Authors
1485 should put these rules after any declarations in the page context as
1486 legacy clients may not handle declarations after margin at-rules
1487 correctly.
1489 <p>A <dfn id=margin-at-rule>margin at-rule</dfn> consists of an <a
1490 href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the
1491 page-margin box (e.g. <span class=css>‘<code
1492 class=css>@top-left</code>’</span>) and a block of declarations (said
1493 to be in the <dfn id=margin-context>margin context</dfn>).
1495 <div class=example>
1496 <p>The following style sheet establishes a page header containing the
1497 title ("Hamlet") on the left side and the page number, preceded by "Page
1498 ", on the right side:
1500 <pre>
1501 @page {
1502 size: 8.5in 11in;
1503 margin: 10%;
1505 @top-left {
1506 content: "Hamlet";
1507 }
1508 @top-right {
1509 content: "Page " counter(page);
1510 }
1511 }
1512 </pre>
1513 </div>
1515 <h3 id=populating-margin-boxes><span class=secno>6.2. </span>Populating
1516 page-margin boxes</h3>
1518 <p>As with the ‘<code class=css>:before</code>’ and ‘<code
1519 class=css>:after</code>’ pseudo-elements, a specified ‘<code
1520 class=css>content: normal</code>’ on a page-margin box computes to
1521 ‘<code class=css>none</code>’. A page-margin box is <dfn
1522 id=generated>generated</dfn> if and only if the computed value of its
1523 ‘<code class=property>content</code>’ property is not ‘<code
1524 class=property>none</code>’. Otherwise, no box is generated, as for
1525 elements with ‘<code class=css>display: none</code>’.
1527 <p class=note> The ‘<code class=property>display</code>’ property does
1528 not apply to page-margin boxes.
1530 <div class=example>
1531 <p>The following style sheet creates a green box in each corner of the
1532 page except the bottom-left corner.
1534 <pre>
1535 @page {
1536 @top-left-corner { content: " "; border: solid green; }
1537 @top-right-corner { content: url(foo.png); border: solid green; }
1538 @bottom-right-corner { content: counter(page); border: solid green; }
1539 @bottom-left-corner { content: normal; border: solid green; }
1540 }
1541 </pre>
1542 </div>
1544 <h3 id=margin-dimension><span class=secno>6.3. </span>Computing
1545 Page-margin Box Dimensions</h3>
1547 <p>The width and height of each page-margin box is determined by the rules
1548 below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6
1549 for page-margin boxes.
1551 <p>The rules for applying ‘<code class=property>min-height</code>’,
1552 ‘<code class=property>max-height</code>’, ‘<code
1553 class=property>min-width</code>’, and ‘<code
1554 class=property>max-width</code>’ <a href="#CSS21"
1555 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do apply to page-margin
1556 boxes and may imply a recalculation of the width, height, and/or margins
1557 if the dimensions resulting from the specified ‘<code
1558 class=property>width</code>’ or ‘<code
1559 class=property>height</code>’ violate their constraints. If the UA does
1560 not support the ‘<code class=property>min-height</code>’ or ‘<code
1561 class=property>min-width</code>’ properties then it must behave as if
1562 ‘<code class=property>min-height</code>’ and ‘<code
1563 class=property>min-width</code>’ were always zero.
1565 <h4 id=margin-box-terms><span class=secno>6.3.1. </span><a
1566 id=max-margin-dimension></a>Page-Margin Box Layout Terminology</h4>
1568 <p>In addition to the box model definitions in CSS2.1 <a href="#CSS21"
1569 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the sizing terms in CSS
1570 Intrinsic Sizing <a href="#CSS3-SIZING"
1571 rel=biblioentry>[CSS3-SIZING]<!--{{!CSS3-SIZING}}--></a>, the following
1572 terms are defined for use in the subsequent page-margin box calculations:
1574 <dl>
1575 <dt><dfn id=available-width>available width</dfn>
1577 <dd>The sum of the page’s left border width, left padding, <a
1578 href="#page-box">page area</a> width, right padding, and right border
1579 width. In other words, it is the distance between the <a
1580 href="#page-box">page box</a>’s left right border edges. This quantity
1581 is used when calculating dimensions of the top and bottom page-margin
1582 boxes.
1584 <dt><dfn id=available-height>available height</dfn>
1586 <dd>The sum of the page’s top border width, top padding, <a
1587 href="#page-box">page area</a> height, bottom padding, and bottom border
1588 width. In other words, it is the distance between the <a
1589 href="#page-box">page box</a>’s top bottom border edges. This quantity
1590 is used when calculating dimensions of the left and right page-margin
1591 boxes.
1593 <dt><dfn id=outer-width>outer width</dfn>
1595 <dd>The width of the <a
1596 href="http://www.w3.org/TR/CSS21/box.html#outer-edge">outer edge</a>, as
1597 defined in <a href="#CSS21"
1598 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
1600 <dt><dfn id=outer-min-width>outer min width</dfn>
1602 <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
1603 <a href="http://www.w3.org/TR/css3-sizing/#min-content">‘<code
1604 class=css>min-content</code>’</a> is used when the width is ‘<code
1605 class=css>auto</code>’.
1607 <dt><dfn id=outer-max-width>outer max width</dfn>
1609 <dd>Like the <a href="#outer-width"><i>outer width</i></a>, except that
1610 <a href="http://www.w3.org/TR/css3-sizing/#max-content">‘<code
1611 class=css>max-content</code>’</a> is used when ‘<code
1612 class=property>width</code>’ is ‘<code class=css>auto</code>’.
1613 </dl>
1615 <p>The <dfn id=containing-block>containing block</dfn> for a corner
1616 page-margin box is the rectangle defined by the intersection of the two
1617 page margins meeting at that corner.
1619 <p>For all other page-margin boxes, the <dfn
1620 id=containing-block0>containing block</dfn> is the rectangle formed by
1621 the encapsulating page margin minus the containing blocks of the adjacent
1622 corners' page-margin boxes. This means that the size of this containing
1623 block is given in one dimension by the used page margin and in the other
1624 dimension by the <a href="#available-width"><i>available width</i></a>
1625 (for top and bottom page-margin boxes) or <a
1626 href="#available-height"><i>available height</i></a> (for left and right
1627 page-margin boxes).
1629 <h4 id=variable-sizing><span class=secno>6.3.2. </span> Page-Margin Box
1630 Variable Dimension Computation Rules</h4>
1632 <p>The following rules apply to ‘<code
1633 class=property>top-left</code>’, ‘<code
1634 class=property>top-center</code>’ and ‘<code
1635 class=property>top-right</code>’ page-margin boxes, which are referred
1636 to as A, B, and C, respectively, in this section.
1638 <h5 id=variable-auto-margins><span class=secno>6.3.2.1. </span>Margins</h5>
1640 <p>If the ‘<code class=property>margin-left</code>’ or ‘<code
1641 class=property>margin-right</code>’ property of any of the three boxes
1642 computes to ‘<code class=css>auto</code>’, the used value is zero.
1644 <h5 id=variable-auto-sizing><span class=secno>6.3.2.2. </span>Resolving
1645 ‘<code class=css>auto</code>’ widths</h5>
1647 <p>The following algorithm determines the used width of each box. For this
1648 purpose, boxes that are not <a href="#generated"><i>generated</i></a> are
1649 assumed to have a ‘<code class=property>width</code>’ and an <a
1650 href="#outer-width"><i>outer width</i></a> of zero.
1652 <p class=note> Note: The high-level goals are (in order of priority) to
1653 center the middle box (B) if it is generated, to minimize overflow and
1654 overlap, and to distribute space proportionally to the amount of content.
1656 <p>If the middle box (B) is not <a href="#generated"><i>generated</i></a>,
1657 distribute the <a href="#available-width"><i>available width</i></a> to A
1658 and C as follows:
1660 <ul>
1661 <li> If only one box has ‘<code class=css>width: auto</code>’, its
1662 used width is resolved so that the sum of the <a
1663 href="#outer-width"><i>outer width</i></a>s equals <a
1664 href="#available-width"><i>available width</i></a>.
1666 <li id=flex-fit> If A and C both have ‘<code class=css>width:
1667 auto</code>’, distribute the space to each box as follows:
1668 <ol>
1669 <li>If the sum of the outer <i>max-content widths</i> is less than the
1670 <a href="#available-width"><i>available width</i></a>, call that
1671 difference the <i>flex space</i>. Calculate each box's <i>flex
1672 factor</i> as proportional to its outer <i>max-content width</i>, and
1673 set its used outer width to:
1674 <pre><i>max-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
1676 <li>Otherwise if the sum of the outer <i>min-content widths</i> is less
1677 than the <a href="#available-width"><i>available width</i></a>, call
1678 that difference the <i>flex space</i> calculate each box's <i>flex
1679 factor</i> as proportional to its <i>max-content</i> minus
1680 <i>min-content</i>, and set its used outer width to:
1681 <pre><i>min-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
1683 <li>Otherwise, calculate its outer size as in the previous case, but
1684 set each box's <i>flex factor</i> as proportional to its outer
1685 <i>min-content width</i>.
1686 </ol>
1687 In each case, both <i>flex factors</i> are assumed to be ‘<code
1688 class=css>1</code>’ if their sum is equal to zero.
1689 </ul>
1691 <p>If the middle box (B) is <a href="#generated"><i>generated</i></a>,
1692 determine the ‘<code class=css>auto</code>’ widths of A, B, and C as
1693 follows:
1695 <ol>
1696 <li> First, resolve any ‘<code class=css>auto</code>’ width of the
1697 middle box (B): Assume there are two boxes, B and AC, where each of AC's
1698 dimensions is double the maximum of A and C. (This preserves B's
1699 centering.) Distribute the space to these two boxes (B and the imaginary
1700 AC) as described for A and C <a href="#fit2">above</a>.
1702 <li> Then, resolve any ‘<code class=css>auto</code>’ widths of the
1703 side boxes (A and C) by setting that box's outer width to
1704 <pre>(<a
1705 href="#available-width"><i>available width</i></a> − <i>used outer size of B</i>) ÷ 2</pre>
1707 <pre>
1708 </pre>
1709 </ol>
1711 <h5 id=variable-minmax><span class=secno>6.3.2.3. </span>Handling ‘<code
1712 class=property>min-width</code>’ and ‘<code
1713 class=property>max-width</code>’</h5>
1715 <p> The ‘<code class=property>min-width</code>’ and ‘<code
1716 class=property>max-width</code>’ properties <a href="#CSS21"
1717 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> apply to page-margin boxes in
1718 the variable dimension like on normal elements, except that the three
1719 boxes on the same side are considered together.
1721 <p> More precisely:
1723 <ol>
1724 <li> The tentative used widths are calculated (without ‘<code
1725 class=property>min-width</code>’ and ‘<code
1726 class=property>max-width</code>’) following the rules under <a
1727 href="#marginbox-variabledim-with">Resolving ‘<code
1728 class=css>auto</code>’ widths</a> above.
1730 <li> If the tentative used width of any of the three boxes is greater
1731 than ‘<code class=property>max-width</code>’, the rules above are
1732 applied again, but this time using the computed value of ‘<code
1733 class=property>max-width</code>’ as the computed value for ‘<code
1734 class=property>width</code>’.
1736 <li> If the resulting width of any of the three boxes is smaller than
1737 ‘<code class=property>min-width</code>’, the rules above are applied
1738 again, but this time using the value of ‘<code
1739 class=property>min-width</code>’ as the computed value for ‘<code
1740 class=property>width</code>’.
1741 </ol>
1743 <h5 id=variable-position><span class=secno>6.3.2.4. </span>Positioning</h5>
1745 <p> Once the dimensions of the boxes are determined, they are positioned
1746 as follows:
1748 <ul>
1749 <li>The left outer edge of A is flush with the left edge of the
1750 containing block
1752 <li>The outer area of B is centered in the containing block.
1754 <li>The right outer edge of C is flush with the right edge of the
1755 containing block.
1756 </ul>
1758 <h5 id=variable-mapping><span class=secno>6.3.2.5. </span>Boxes on other
1759 sides</h5>
1761 <p>The used values for ‘<code class=property>bottom-left</code>’,
1762 ‘<code class=property>bottom-center</code>’ and ‘<code
1763 class=property>bottom-right</code>’ page-margin boxes are established
1764 by the same rules as for ‘<code class=property>top-left</code>’,
1765 ‘<code class=property>top-center</code>’, and ‘<code
1766 class=property>top-right</code>’, respectively.
1768 <p>The used values for ‘<code class=property>left-top</code>’,
1769 ‘<code class=property>left-middle</code>’ and ‘<code
1770 class=property>left-bottom</code>’ boxes are established by the same
1771 rules, with "width" replaced by "height", "left" by "top", "right" by
1772 "bottom" and "center" by "middle".
1774 <p>The used values for ‘<code class=property>right-top</code>’,
1775 ‘<code class=property>right-middle</code>’ and ‘<code
1776 class=property>right-bottom</code>’ page-margin boxes are established
1777 by the same rules as for ‘<code class=property>left-top</code>’,
1778 ‘<code class=property>left-middle</code>’ and ‘<code
1779 class=property>left-bottom</code>’, respectively.
1781 <h4 id=fixed-sizing><span class=secno>6.3.3. </span>Page-Margin Box Fixed
1782 Dimension Computation Rules</h4>
1784 <p>The rules below are used to calculate the used values of each ‘<code
1785 class=property>top-left-corner</code>’, ‘<code
1786 class=property>top-left</code>’, ‘<code
1787 class=property>top-center</code>’, ‘<code
1788 class=property>top-right</code>’, and ‘<code
1789 class=property>top-right-corner</code>’ page-margin box's ‘<code
1790 class=property>height</code>’, ‘<code
1791 class=property>margin-top</code>’, and ‘<code
1792 class=property>margin-bottom</code>’ properties:
1794 <ol>
1795 <li>The following constraint must hold among the used values of the
1796 margin box's properties:
1797 <p>‘<code class=property>margin-top</code>’ + ‘<code
1798 class=property>border-top-width</code>’ + ‘<code
1799 class=property>padding-top</code>’ + ‘<code
1800 class=property>height</code>’ + ‘<code
1801 class=property>padding-bottom</code>’ + ‘<code
1802 class=property>border-bottom-width</code>’ + ‘<code
1803 class=property>margin-bottom</code>’ = top page margin
1805 <li>If ‘<code class=property>border-top-width</code>’ + ‘<code
1806 class=property>padding-top</code>’ + ‘<code
1807 class=property>height</code>’ (if it is not ‘<code
1808 class=css>auto</code>’) + ‘<code
1809 class=property>padding-bottom</code>’ + ‘<code
1810 class=property>border-bottom-width</code>’, plus ‘<code
1811 class=property>margin-top</code>’ and/or ‘<code
1812 class=property>margin-bottom</code>’ if not ‘<code
1813 class=css>auto</code>’, is larger than the height of the top page
1814 margin, then any ‘<code class=css>auto</code>’ values for ‘<code
1815 class=property>margin-top</code>’ or ‘<code
1816 class=property>margin-bottom</code>’ are, for the following rules,
1817 treated as zero.
1819 <li>If at this point all of ‘<code class=property>height</code>’,
1820 ‘<code class=property>margin-top</code>’, and ‘<code
1821 class=property>margin-bottom</code>’ have a computed value other than
1822 ‘<code class=css>auto</code>’, the values are said to be
1823 "over-constrained". In this case, the specified value of ‘<code
1824 class=property>margin-top</code>’ is treated as ‘<code
1825 class=property>auto</code>’.
1827 <li>If there is now exactly one value specified as ‘<code
1828 class=property>auto</code>’, its used value follows from the equality.
1830 <li>If ‘<code class=property>height</code>’ is set to ‘<code
1831 class=property>auto</code>’, any other ‘<code
1832 class=property>auto</code>’ values become ‘<code
1833 class=css>0</code>’ and ‘<code class=property>height</code>’
1834 follows from the resulting equality
1836 <li>If both ‘<code class=property>margin-top</code>’ and ‘<code
1837 class=property>margin-bottom</code>’ are ‘<code
1838 class=property>auto</code>’, their used values are equal. This
1839 vertically centers the page-margin box content within the top page
1840 margin.
1841 </ol>
1843 <p>The same rules apply to the bottom page-margin boxes
1844 (bottom-left-corner, bottom-left, bottom-center, bottom-right, and
1845 bottom-right-corner), except that in the overconstrained case, the
1846 ‘<code class=property>margin-bottom</code>’ is ignored rather than
1847 the ‘<code class=property>margin-top</code>’.
1849 <p>Analogous rules govern the properties for the left and right
1850 page-margin boxes with respect to ‘<code class=property>width</code>’
1851 (top-left-corner, left-top, left-middle, left-bottom, and
1852 bottom-left-corner; top-right-corner, right-top, right-middle,
1853 right-bottom, bottom-right-corner), with ‘<code
1854 class=property>top</code>’ replaced by ‘<code
1855 class=property>left</code>’, ‘<code class=property>bottom</code>’
1856 replaced by ‘<code class=property>right</code>’, and ‘<code
1857 class=property>height</code>’ replaced by ‘<code
1858 class=property>width</code>’. In the overconstrained case for left
1859 (right) page-margin boxes, the specified value of ‘<code
1860 class=property>margin-left</code>’ (‘<code
1861 class=property>margin-right</code>’) is ignored.
1863 <h3 id=margin-box-ex><span class=secno>6.4. </span>Page-margin box
1864 examples</h3>
1866 <p>The following is a collection of examples of page-margin box usage.
1868 <div class=example>
1869 <p>Here is an example of a page with only a top-left header:
1871 <pre>
1872 @page {
1873 @top-left { content: "Header in Left Cell (top-left)" }
1874 }
1875 </pre>
1877 <p>Because there are no contents defined for the top-center or the
1878 top-right page-margin boxes, the extent of the top-left page-margin box
1879 is allowed to cross the center of the page box.
1881 <p><img alt="Header Example 1" height=177 src=header-ex-1.png width=737>
1882 </div>
1884 <div class=example>
1885 <p>The following is an example of a page with a centered header:
1887 <pre>
1888 @page {
1889 @top-center { content: "Header in Center Cell (top-center)" }
1890 }
1891 </pre>
1893 <p><img alt="Header Example 2" height=177 src=header-ex-2.png width=737>
1894 </div>
1896 <div class=example>
1897 <p>The following is an example of a page with a single header in the
1898 top-right page-margin box:
1900 <pre>
1901 @page {
1902 @top-right { content: "Header in Right Cell (top-right)" }
1903 }
1904 </pre>
1906 <p>Because the content of the center cell is empty, the extent of the
1907 top-right page-margin box is allowed to cross the center of the page
1908 box.
1910 <p><img alt="Header Example 3" height=177 src=header-ex-3.png width=737>
1911 </div>
1913 <div class=example>
1914 <p>The following is an example of a page with a top-center and a top-left
1915 header:
1917 <pre>
1918 @page {
1919 @top-left { content: "Left Cell (top-left)" }
1920 @top-center { content: "Header in Center Cell (top-center)" }
1921 }
1922 </pre>
1924 <p><img alt="Header Example 4" height=177 src=header-ex-4.png width=737>
1925 </div>
1927 <div class=example>
1928 <p>The following is an example of a page with a top-center and a
1929 top-right header:
1931 <pre>
1932 @page {
1933 @top-center { content: "Header in Center Cell (top-center)" }
1934 @top-right { content: "Right Cell (top-right)" }
1935 }
1936 </pre>
1938 <p><img alt="Header Example 5" height=177 src=header-ex-5.png width=737>
1939 </div>
1941 <div class=example>
1942 <p>The following is an example of a page with top-left and top-right
1943 headers:
1945 <pre>
1946 @page {
1947 @top-left { content: "Header in top-left with approx. "
1948 "twice as many words as right cell." }
1949 @top-right { content: "Right cell (top-right)" }
1950 }
1951 </pre>
1953 <p>Because there are no center cell contents, the extent of the top-left
1954 is allowed to cross the center of the page box.
1956 <p><img alt="Header Example 6" height=177 src=header-ex-6.png width=737>
1957 </div>
1959 <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>
1961 <div>
1962 <p> <a href="#properties-list">Appendix A</a> defines the normative list
1963 of CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
1964 <a href="#page-property-list">properties that apply to page boxes</a>.
1965 If a conforming user agent supports any of these properties on block
1966 boxes, then it <em class=RFC2119>MUST</em> also support that property in
1967 the <a href="#page-context"><i>page context</i></a>. This specification
1968 additionally defines the ‘<a href="#size"><code
1969 class=property>size</code></a>’ property that only applies in the page
1970 context.
1972 <p> Properties that apply to the page-margin boxes can also be set within
1973 the page context: if inheritable or explicitly inherited (with the
1974 ‘<code class=css>inherit</code>’ keyword in the margin context),
1975 they will inherit to the page-margin boxes.
1977 <p> The same appendix defines the normative list of CSS 2.1 <a
1978 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a
1979 href="#page-property-list">properties that apply to page-margin
1980 boxes</a>. If a conforming user agent supports any of these properties
1981 on block boxes, then it <em class=RFC2119>MUST</em> also support that
1982 property in the <a href="#margin-context"><i>margin context</i></a>.
1984 <p> Other properties defined by <a href="#CSS21"
1985 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not apply in these
1986 contexts. Behavior for properties not included in CSS 2.1 is undefined.
1988 <p class=note> Note: The intent of leaving other properties undefined is
1989 to allow the gradual addition of appropriate CSS3 properties as they
1990 emerge, without having to update this specification with each addition.
1992 <p><a href="http://www.w3.org/TR/CSS21/cascade.html#value-stages">As with
1993 elements in the document</a>, both the page context and the margin
1994 context have a computed value for every property, even if that property
1995 does not apply to the page or page-margin box.
1997 <p>The normal rules for CSS properties apply with the following
1998 exceptions:
2000 <ul>
2001 <li>page-margin boxes inherit from the page context. The page context
2002 inherits from the root element. However, since the previous revision of
2003 CSS Paged Media Level 3 did not specify this point, an implementation
2004 that sets inherited properties in the page context to their initial
2005 values (as for the root element) is also conformant to CSS Paged Media
2006 Level 3. Note that this exception will be removed in Level 4.
2008 <li>Values in units of ‘<code class=css>em</code>’ and ‘<code
2009 class=css>ex</code>’ are interpreted relative to the font associated
2010 with their context. When used on the ‘<code
2011 class=property>font-size</code>’ property in the margin context, they
2012 are relative to the font of the page context. When used on the ‘<code
2013 class=property>font-size</code>’ property in the page context, they
2014 are relative to the ‘<code class=property>font-size</code>’ of the
2015 root element. However, since a previous revision of CSS Paged Media
2016 Level 3 was ambiguous on this point, an implementation that treats
2017 ‘<code class=css>em</code>’ and ‘<code class=css>ex</code>’ on
2018 ‘<code class=property>font-size</code>’ as relative to the initial
2019 value is also conformant to CSS Paged Media Level 3. Note that this
2020 exception will be removed in Level 4.
2022 <li>Percentage values on the margin and padding properties are relative
2023 to the dimensions of the containing block. For right and left values,
2024 percentages are relative to the width of the containing block; for top
2025 and bottom values, percentages are relative to the height of the
2026 containing block.
2028 <li>The used values of ‘<code class=property>width</code>’ and
2029 ‘<code class=property>height</code>’ have special computation rules
2030 for page boxes and page-margin boxes; see <a href="#page-size">Page
2031 Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box
2032 Dimensions</a>.
2034 <li>The page background is positioned and painted <a href="#painting">as
2035 described above</a>.
2037 <li>The rules for counter scoping are modified <a
2038 href=page-based-counters>as described below</a>.
2040 <li> As on the ‘<code class=css>::before</code>’ and ‘<code
2041 class=css>::after</code>’ pseudo-elements, the ‘<code
2042 class=css>normal</code>’ value of the ‘<code
2043 class=property>content</code>’ property computes to ‘<code
2044 class=css>none</code>’ on page-margin boxes.
2046 <li>On page-margin boxes, the ‘<code
2047 class=property>vertical-align</code>’ property behaves <a
2048 href="http://www.w3.org/TR/CSS21/tables.html#height-layout">as
2049 specified for table cells</a>. It <em>always</em> performs alignment in
2050 the vertical dimension, regardless of writing mode.
2051 </ul>
2053 <p>It is <em class=RFC2119>recommended</em> that user agents establish a
2054 default page margin via the user agent stylesheet that includes any
2055 non-printable area. It is further <em class=RFC2119>recommended</em>
2056 that authors assume that the default page area will not include
2057 unprintable regions.
2059 <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based
2060 counters</h3>
2062 <p>Counters can be defined and controlled within an <span
2063 class=css>‘<code class=css>@page</code>’</span> rule, and used as
2064 content in page-margin boxes. This is useful for maintaining a page
2065 count.
2067 <p>A ‘<code class=property>counter-increment</code>’ within either a
2068 page or margin context causes the counter to increment with the
2069 generation of each page box.
2071 <p>If a counter is reset or incremented within the page context, it is in
2072 scope for all page-margin boxes and obscures all counters of the same
2073 name within the document.
2075 <p>If a counter is reset or incremented within a margin context, it is in
2076 scope for that page-margin box and obscures any counters of the same
2077 name in both the page context and the document.
2079 <p>If a counter that has not been reset or incremented within the margin
2080 context or the page context is used by counter() or counters() in the
2081 margin context, then the resultant value is exactly as if the
2082 page-margin box were an element within the document at the start of the
2083 page, inside the deepest element in the normal flow that spans the page
2084 break. Use of the counter in this way does not affect the calculation of
2085 the counter's value.
2087 <p> A counter named ‘<a href="#page"><code class=css>page</code></a>’
2088 is automatically created and incremented by 1 on every page of the
2089 document, unless the ‘<code class=property>counter-increment</code>’
2090 property in the <a href="#page-context"><i>page context</i></a>
2091 explicitly specifies a different increment for the ‘<a
2092 href="#page"><code class=css>page</code></a>’ counter. The implied
2093 ‘<a href="#page"><code class=css>page</code></a>’ counter is a real
2094 counter, and can be directly affected using the ‘<code
2095 class=property>counter-increment</code>’ and ‘<code
2096 class=property>counter-reset</code>’ properties when named explicitly
2097 in those properties. It can also be used in the ‘<code
2098 class=css>counter()</code>’ and ‘<code
2099 class=css>counters()</code>’ function forms.
2101 <div class=example>
2102 <p>The following rules result in the placement of the current page
2103 number in the middle of the outside margin of each page.
2105 <pre>
2106 @page {
2107 margin: 10%;
2109 @top-center {
2110 font-family: sans-serif;
2111 font-weight: bold;
2112 font-size: 2em;
2113 content: counter(page);
2114 }
2115 }
2116 </pre>
2118 <p>Adding the following rule will make all pages even-numbered.
2120 <pre>
2121 @page {
2122 counter-increment: page 2;
2123 }
2124 </pre>
2125 </div>
2127 <p>Additionally, a counter named ‘<a href="#page"><code
2128 class=css>pages</code></a>’ is automatically created by the UA. Its
2129 value is always the total number of pages in the document. (In
2130 continuous media this is always 1.) The value of ‘<a
2131 href="#page"><code class=css>pages</code></a>’ cannot be manipulated:
2132 while ‘<code class=property>counter-reset</code>’ and ‘<code
2133 class=property>counter-increment</code>’ statements that set it are
2134 valid, they have no effect.
2136 <p>In all other respects, page-associated counters behave as described in
2137 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a
2138 href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a
2139 href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.
2141 <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin
2142 boxes and default values</h3>
2144 <p>Properties used within page or margin contexts take their initial
2145 values from their respective property definitions; however, user agents
2146 must behave as though the values in the following table were established
2147 by rules in the UA default style sheet.
2149 <table class=data id=margin-values
2150 summary="definition of page-margin box default properties">
2151 <caption>Table 2. Default values for Page-Margin Boxes</caption>
2153 <thead>
2154 <tr>
2155 <th>Page-margin box
2157 <th><span class=property>‘<code
2158 class=property>text-align</code>’</span>
2160 <th><span class=property>‘<code
2161 class=property>vertical-align</code>’</span>
2163 <tbody>
2164 <tr>
2165 <td><a href="#top-left-corner-box-def">top-left-corner</a>
2167 <td>right
2169 <td>middle
2171 <tr>
2172 <td><a href="#top-left-box-def">top-left</a>
2174 <td>left
2176 <td>middle
2178 <tr>
2179 <td><a href="#top-center-box-def">top-center</a>
2181 <td>center
2183 <td>middle
2185 <tr>
2186 <td><a href="#top-right-box-def">top-right</a>
2188 <td>right
2190 <td>middle
2192 <tr>
2193 <td><a href="#top-right-corner-box-def">top-right-corner</a>
2195 <td>left
2197 <td>middle
2199 <tr>
2200 <td><a href="#left-top-box-def">left-top</a>
2202 <td>center
2204 <td>top
2206 <tr>
2207 <td><a href="#left-middle-box-def">left-middle</a>
2209 <td>center
2211 <td>middle
2213 <tr>
2214 <td><a href="#left-bottom-box-def">left-bottom</a>
2216 <td>center
2218 <td>bottom
2220 <tr>
2221 <td><a href="#right-top-box-def">right-top</a>
2223 <td>center
2225 <td>top
2227 <tr>
2228 <td><a href="#right-middle-box-def">right-middle</a>
2230 <td>center
2232 <td>middle
2234 <tr>
2235 <td><a href="#right-bottom-box-def">right-bottom</a>
2237 <td>center
2239 <td>bottom
2241 <tr>
2242 <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a>
2244 <td>right
2246 <td>middle
2248 <tr>
2249 <td><a href="#bottom-left-box-def">bottom-left</a>
2251 <td>left
2253 <td>middle
2255 <tr>
2256 <td><a href="#bottom-center-box-def">bottom-center</a>
2258 <td>center
2260 <td>middle
2262 <tr>
2263 <td><a href="#bottom-right-box-def">bottom-right</a>
2265 <td>right
2267 <td>middle
2269 <tr>
2270 <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a>
2272 <td>left
2274 <td>middle
2275 </table>
2277 <div class=example>
2278 <p>This example style sheet could be used to create a centered header
2279 with the current chapter name:
2281 <pre>body {counter-reset: chapter;}
2282 div.chapter {counter-increment: chapter;}
2283 @page {
2284 margin: 10%;
2285 @top-center { content: "Chapter" counter(chapter) }
2286 }
2287 </pre>
2288 </div>
2290 <h2 id=page-size><span class=secno>8. </span>Page Size</h2>
2292 <p>People around the world use many different paper sizes. It is a goal
2293 of this specification that web content should be adaptable to a range of
2294 different sizes without having to write a specific style sheet for each
2295 paper size.
2297 <p>However, in some situations it is important that a certain page size
2298 achieves a certain style. One way to achieve this goal is to utilize the
2299 ‘<a href="#size"><code class=property>size</code></a>’ property,
2300 which indicates that the document should preferentially be displayed on
2301 a surface of a certain size; another method is to use Media Queries <a
2302 href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow
2303 different style sheets to be applied to different page sizes.
2305 <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a
2306 href="#size"><code class=property>size</code></a>’ property</h3>
2308 <table class=propdef summary="definition of the size property">
2309 <tbody>
2310 <tr>
2311 <th>Name:
2313 <td><dfn id=size>size</dfn>
2315 <tr>
2316 <th>Value:
2318 <td><length>{1,2} | auto | [ <page-size> || [ portrait |
2319 landscape] ]
2321 <tr>
2322 <th>Initial:
2324 <td>auto
2326 <tr>
2327 <td><em>Applies to:</em>
2329 <td>page context
2331 <tr>
2332 <th>Inherited:
2334 <td>N/A
2336 <tr>
2337 <th>Percentages:
2339 <td>N/A
2341 <tr>
2342 <th>Media:
2344 <td>paged
2346 <tr>
2347 <td><em>Computed value:</em>
2349 <td>specified value
2350 </table>
2352 <p>This property specifies the target size and orientation of the <a
2353 href="#page-box">page box</a>’s containing block. In the general case,
2354 where one page box is rendered onto one <a href="#page-sheet">page
2355 sheet</a>, the ‘<a href="#size"><code
2356 class=property>size</code></a>’ property also indicates the size of
2357 the destination page sheet.
2359 <p>The size of a page box can either be "absolute" (fixed size) or
2360 "scalable" (i.e., fitting available sheet sizes). The first three values
2361 in the table below can be used to create scalable page boxes. Other
2362 values define a fixed-size page box, and thereby indicate the preferred
2363 output media size. When possible, output should be rendered on the media
2364 size indicated. If the specified size is not available, the rules for <a
2365 href="#renderingpages">transposing a page box to a different size</a>
2366 apply.
2368 <p>If a <a href="#size"><code>size</code></a> property declaration is
2369 qualified by a ‘<code class=css>width</code>’, ‘<code
2370 class=css>height</code>’, ‘<code class=css>device-width</code>’,
2371 ‘<code class=css>device-height</code>’, ‘<code
2372 class=css>aspect-ratio</code>’, ‘<code
2373 class=css>device-aspect-ratio</code>’ or ‘<code
2374 class=css>orientation</code>’ media query <a href="#MEDIAQ"
2375 rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> (or other conditional on
2376 the size of the paper), then the declaration must be <a
2377 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. Media
2378 queries do not honor ‘<a href="#size"><code
2379 class=property>size</code></a>’: they assume the paper size that would
2380 be chosen if no @page rules were specified.
2382 <p class=issue>It would be useful if media queries could respond at least
2383 to sizes specified on an unqualified @page.
2385 <div class=example>
2386 <p>In the following example
2388 <pre>
2389 @page {
2390 size: 4in 6in;
2391 }
2393 @media (max-width: 6in) {
2394 @page {
2395 size: letter;
2396 }
2397 }
2398 </pre>
2400 <p>The second <a href="#size"><code>size</code></a> declaration is
2401 ignored, i.e. the specified value of the <a
2402 href="#size"><code>size</code></a> property is <code>4in 6in</code>.
2403 </div>
2405 <table class=page-sizes>
2406 <tbody>
2407 <tr>
2408 <th>Value
2410 <th>Description
2412 <tr>
2413 <td>auto
2415 <td>The page box will be set to a size and orientation chosen by the
2416 UA. In the usual case, the page box size and orientation is chosen to
2417 match the target media sheet.
2419 <tr>
2420 <td>landscape
2422 <td>Specifies that the page's content be printed in landscape
2423 orientation. The longer sides of the page box are horizontal. If a
2424 <span class=css>‘<code class=css><page-size></code>’</span>
2425 is not specified, the size of the page sheet is chosen by the UA.
2427 <tr>
2428 <td>portrait
2430 <td>Specifies that the page's content be printed in portrait
2431 orientation. The shorter sides of the page box are horizontal. If a
2432 <span class=css>‘<code class=css><page-size></code>’</span>
2433 is not specified, the size of the page sheet is chosen by the UA.
2435 <tr>
2436 <td><length>
2438 <td>The page box will be set to the given absolute dimension(s). If
2439 only one length value is specified, it sets both the width and height
2440 of the page box (i.e., the box is a square). If two length values are
2441 specified, the first establishes the page box width, and the second
2442 the page box height. Values in units of <span class=css>‘<code
2443 class=property>em</code>’</span> and <span class=css>‘<code
2444 class=property>ex</code>’</span> refer to the page context's font.
2445 Negative lengths are illegal.
2447 <tr>
2448 <td><page-size>
2450 <td>A page size can be specified using one of the following media
2451 names. This is the equivalent of specifying the <span
2452 class=css>‘<code class=css><page-size></code>’</span> using
2453 length values. The definition of the the media names comes from
2454 <cite>Media Standardized Names</cite> <a href="#PWGMSN"
2455 rel=biblioentry>[PWGMSN]<!--{{!PWGMSN}}--></a>.
2456 <dl>
2457 <dt>A5
2459 <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm
2460 high.
2462 <dt>A4
2464 <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm
2465 high.
2467 <dt>A3
2469 <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm
2470 high.
2472 <dt>B5
2474 <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm
2475 high.
2477 <dt>B4
2479 <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm
2480 high.
2482 <dt>letter
2484 <dd>Equivalent to the size of North American letter media: 8.5
2485 inches wide and 11 inches high
2487 <dt>legal
2489 <dd>Equivalent to the size of North American legal: 8.5 inches wide
2490 by 14 inches high.
2492 <dt>ledger
2494 <dd>Equivalent to the size of North American ledger: 11 inches wide
2495 by 17 inches high.
2496 </dl>
2497 </table>
2499 <p>The ‘<code class=css><page-size></code>’ names can be used
2500 in conjunction with ‘<code class=property>landscape</code>’ or
2501 ‘<code class=property>portrait</code>’ to indicate both size and
2502 orientation.
2504 <h4 id=some-examples><span class=secno>8.1.1. </span>Some examples:</h4>
2506 <div class=example>
2507 <pre>
2508 @page {
2509 size: A4 landscape;
2510 }
2511 </pre>
2513 <p>The above example sets the width of the page box to be 297mm and the
2514 height to be 210mm. The page box in this example should be rendered on
2515 a page sheet size of 210 mm by 297 mm.
2516 </div>
2518 <div class=example>
2519 <p>In the following example, the outer edges of the page box will align
2520 with the page. The percentage value on the <span
2521 class=property>‘<code class=property>margin</code>’</span> property
2522 is relative to the page size so if the page sheet dimensions are 210mm
2523 x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are
2524 no page borders or padding set in the UA default style sheet, the
2525 resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).
2527 <pre>
2528 @page {
2529 size: auto;/* auto is the initial value */
2530 margin: 10%;
2531 }
2532 </pre>
2533 </div>
2535 <div class=example>
2536 <pre>
2537 @page {
2538 size: 8.5in 11in;/* width height */
2539 }
2540 </pre>
2542 <p>The above example sets the width of the page box to be 8.5 inches and
2543 the height to be 11 inches. This indicates that the page sheet size
2544 should be 8.5"x11" and the orientation ‘<code
2545 class=property>portrait</code>’.
2546 </div>
2548 <h4 id=page-size-media-query><span class=secno>8.1.2. </span>Media
2549 Queries</h4>
2551 <p>This section is informative.
2553 <p>By using Media Queries <a href="#MEDIAQ"
2554 rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can
2555 express different stylistic preferences for different page sizes.
2556 Consider this example:
2558 <div class=example style="font-size: 10pt;">
2559 <pre>
2560 /* style sheet for "A4" printing */
2561 @media print and (width: 21cm) and (height: 29.7cm) {
2562 @page {
2563 margin: 3cm;
2564 }
2565 }
2567 /* style sheet for "letter" printing */
2568 @media print and (width: 8.5in) and (height: 11in) {
2569 @page {
2570 margin: 1in;
2571 }
2572 }
2573 </pre>
2574 </div>
2576 <p>In the example above, "A4" sheets are given a "3cm" page margin, and
2577 "letter" sheets are given a "1in" page margin.
2579 <h3 id=renderingpages><span class=secno>8.2. </span>Rendering page boxes
2580 that do not fit a page sheet</h3>
2582 <p>If a page box does not match the target page sheet dimensions, the
2583 user agent should do one of the following (in order of preference):
2585 <ol>
2586 <li>Render the page box at the indicated size on a larger page sheet.
2588 <li>Rotate the page box 90° if this will make the page box fit the page
2589 sheet.
2591 <li>Scale the page box to fit the page sheet. (The aspect ratio of the
2592 page box <em class=RFC2119>should</em> be preserved.)
2594 <li>Graphically "slice" the page box onto multiple page sheets.
2596 <li>Clip overflowed content (least preferred).
2597 </ol>
2599 <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user
2600 before performing these operations.
2602 <h3 id=positioning-page-box><span class=secno>8.3. </span>Positioning the
2603 page box on the sheet</h3>
2605 <p>When the page box is smaller than the page sheet, the user agent <em
2606 class=RFC2119>SHOULD</em> either:
2608 <ul>
2609 <li>center the page box on the sheet since this will align double-sided
2610 pages and avoid accidental loss of information that is printed near the
2611 edge of the sheet; or
2613 <li>position the page box in the upper left corner of the page sheet (or
2614 another corner, based on the ‘<code
2615 class=property>direction</code>’ and ‘<code
2616 class=property>writing-mode</code>’ properties of the page box) as
2617 this may minimize media consumption.
2618 </ul>
2620 <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user in
2621 this regard.</p>
2622 <!-- "Page selector and page context" -->
2623 <h2 id=page-breaks><span class=secno>9. </span> <a
2624 id=pg-br-before-after></a> <a id=page-break-before></a> <a
2625 id=page-break-after></a> <a id=page-break-inside></a> <a
2626 id=breaks-inside></a> <a id=orphans></a> <a id=widows></a> <a
2627 id=allowed-pg-brk></a> <a id=brk-btw-blocks></a> <a
2628 id=brk-btw-lines></a> <a id=brk-end-block></a> <a id=forced-pg-brk></a>
2629 <a id=best-pg-brk></a> Page Breaks</h2>
2631 <p> The CSS Fragmentation Module <a href="#CSS3-BREAK"
2632 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> module defines
2633 how and where CSS boxes can be <i>fragmented</i>, including across page
2634 breaks. It defines a few properties that indicate where the user agent
2635 <em class=RFC2119>MAY</em> or <em class=RFC2119>MUST</em> break pages,
2636 and on what page (left or right) the subsequent content resumes. Each
2637 page break ends layout in the current <a href="#page-box">page box</a>
2638 and causes remaining pieces of the document tree to be laid out in a new
2639 page box.
2641 <h3 id=using-named-pages><span class=secno>9.1. </span>Using named pages:
2642 ‘<a href="#page"><code class=property>page</code></a>’</h3>
2644 <table class=propdef summary="property definition">
2645 <tbody>
2646 <tr>
2647 <th>Name:
2649 <td><dfn id=page>page</dfn>
2651 <tr>
2652 <th>Value:
2654 <td>auto | <identifier>
2656 <tr>
2657 <th>Initial:
2659 <td>auto
2661 <tr>
2662 <th>Applies to:
2664 <td>boxes that create <a
2665 href="http://www.w3.org/TR/css3-break/#btw-blocks">class 1</a> break
2666 points
2668 <tr>
2669 <th>Inherited:
2671 <td>no (but see prose)
2673 <tr>
2674 <th>Percentages:
2676 <td>N/A
2678 <tr>
2679 <th>Media:
2681 <td>paged
2683 <tr>
2684 <th>Computed value:
2686 <td>specified value
2687 </table>
2689 <p> The ‘<a href="#page"><code class=property>page</code></a>’
2690 property is used to specify a particular type of page (called a <dfn
2691 id=named-page>named page</dfn>) on which an element <em
2692 class=RFC2119>MUST</em> be displayed. If necessary, a <i>forced page
2693 break</i> is introduced and a new page generated of the specified type.
2695 <p class=note> This page can be styled by using the same type name in a
2696 <a href="#page-selectors">page selector</a>.
2698 <p> Page type names are case-sensitive identifiers. However the ‘<code
2699 class=css>auto</code>’ value, being a CSS keyword, is <a
2700 href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
2701 case-insensitive</a>.
2703 <p> The ‘<a href="#page"><code class=property>page</code></a>’
2704 property does not inherit. However, if the ‘<a href="#page"><code
2705 class=property>page</code></a>’ value on an element is ‘<code
2706 class=css>auto</code>’, then its used value is the value specified on
2707 its nearest ancestor with a non-auto value. When specified on the root
2708 element, the used value for ‘<code class=css>auto</code>’ is the
2709 empty string.
2710 <!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
2712 <p> Because a previous version of this specification indicated that the
2713 ‘<a href="#page"><code class=property>page</code></a>’ property is
2714 inherited, an implementation that inherits the ‘<a href="#page"><code
2715 class=property>page</code></a>’ property and treats ‘<code
2716 class=css>auto</code>’ as always naming the empty string remains
2717 conformant to CSS Paged Media Level 3. Note that this exception will be
2718 removed in Level 4. Therefore authors should not explicitly specify the
2719 ‘<code class=css>auto</code>’ value on a descendant of an element
2720 with a non-‘<code class=css>auto</code>’ value, as the resulting
2721 behavior will be unpredictable.
2723 <p> The ‘<a href="#page"><code class=property>page</code></a>’
2724 property works as follows:
2726 <ol>
2727 <li> First, any ‘<code class=css>auto</code>’ values are resolved
2728 against non-‘<code class=css>auto</code>’ ancestors (as specified
2729 above).
2731 <li> Next, a <dfn id=start-page-value>start ‘<code
2732 class=property>page</code>’ value</dfn> and <dfn
2733 id=end-page-value>end ‘<code class=property>page</code>’
2734 value</dfn> is determined for each box as the value (if any) propagated
2735 from its first or last child box (respectively), else the used value on
2736 the box itself. A child propagates its own <a
2737 href="#start-page-value"><i title="start page value">start</i></a> or
2738 <a href="#end-page-value"><i>end ‘<code class=property>page</code>’
2739 value</i></a> if and only if the ‘<a href="#page"><code
2740 class=property>page</code></a>’ property applies to it.
2741 <p class=note> Note: A first or last child <em>box</em> is not always
2742 generated by a first or last child <em>element</em>. For example, an
2743 element could only have a previous sibling with ‘<code
2744 class=css>display: none</code>’ which does not generate any box.
2746 <li> The first printed page’s type is the <a
2747 href="#start-page-value"><i>start ‘<code
2748 class=property>page</code>’ value</i></a> of the root.
2750 <li> If for any two boxes meeting at a <a
2751 href="http://www.w3.org/TR/css3-break/#btw-blocks">Class 1</a> break
2752 point, the <a href="#end-page-value"><i>end ‘<code
2753 class=property>page</code>’ value</i></a> of the box preceding the
2754 break and <a href="#start-page-value"><i>start ‘<code
2755 class=property>page</code>’ value</i></a> of the box succeeding the
2756 break do not match, then a page break is forced between the two boxes,
2757 and content after the break resumes on a page box of the named type.
2758 </ol>
2760 <p class=note> Essentially, the two ‘<a href="#page"><code
2761 class=property>page</code></a>’ values compared are those from the
2762 deepest boxes meeting at the class 1 break point, ignoring any subtrees
2763 rooted by boxes to which the ‘<a href="#page"><code
2764 class=property>page</code></a>’ property does not apply.
2766 <p>See <a href="#CSS3-BREAK"
2767 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> for additional
2768 details on page breaks.
2770 <div class=example>
2771 <p>In this example, the two tables are rendered on landscape pages
2772 (indeed, on the same page, if they fit). The page type "narrow" is used
2773 for the <p> after the second table, as the page properties for
2774 the table element are no longer in effect:
2776 <pre>
2777 @page narrow { size: 9cm 18cm }
2778 @page rotated { size: landscape }
2779 div { page: narrow }
2780 table { page: rotated }
2781 </pre>
2782 with this document:
2783 <pre>
2784 <div>
2785 <table>...</table>
2786 <table>...</table>
2787 <p>This text is rendered on a 'narrow' page</p>
2788 </div>
2789 </pre>
2790 </div>
2792 <div class=example>
2793 <p>In Japanese documents, sometimes different parts of a single document
2794 will have different <i lang=ja-Latn>kihon hanmen</i>. <a href="#JLREQ"
2795 rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> The ‘<a
2796 href="#page"><code class=property>page</code></a>’ property, together
2797 with ‘<code class=css>@page</code>’ rules specifying different page
2798 widths, can accomodate this type of layout:
2800 <pre>
2801 <!DOCTYPE html>
2802 <html lang="ja">
2803 <style>
2804 html { writing-mode: vertical-rl;
2805 line-height: 1.6; }
2806 .main { page: main;
2807 columns: 2; column-gap: 1rem; }
2808 .index { page: index;
2809 columns: 3; column-gap: 1rem; }
2810 @page { margin: auto; /* center kihon hanmen on page */
2811 width: 40rem; } /* 1.6 × 25 lines */
2812 @page main { height: 61rem; } /* 2 × 30 chars + 1 × gap */
2813 @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
2814 </style>
2815 <section class="main"> ... </section>
2816 <section class="index"> ... </section>
2817 </html>
2818 </pre>
2819 </div>
2821 <h2 id=image-properties><span class=secno>10. </span>Image Properties</h2>
2823 <p class=note>This section has been moved to <a href="#CSS3-IMAGES"
2824 rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>.
2826 <h2 class=no-num id=properties-list>Appendix A: Applicable CSS2.1
2827 Properties</h2>
2829 <h3 class=no-num id=page-property-list> CSS 2.1 Properties that apply
2830 within the page context</h3>
2832 <p> This list is described in the <a href="#page-properties">Page
2833 Properties</a> section.
2835 <table class=property-list>
2836 <tbody>
2837 <tr>
2838 <td rowspan=2><a
2839 href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
2840 properties</a>
2842 <td>direction
2844 <tbody>
2845 <tr>
2846 <td rowspan=6><a
2847 href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
2848 properties</a>
2850 <td>background-color
2852 <tr>
2853 <td>background-image
2855 <tr>
2856 <td>background-repeat
2858 <tr>
2859 <td>background-attachment
2861 <tr>
2862 <td>background-position
2864 <tr>
2865 <td>background
2867 <tbody>
2868 <tr>
2869 <td rowspan=20><a
2870 href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
2871 properties</a>
2873 <td>border-top-width
2875 <tr>
2876 <td>border-right-width
2878 <tr>
2879 <td>border-bottom-width
2881 <tr>
2882 <td>border-left-width
2884 <tr>
2885 <td>border-width
2887 <tr>
2888 <td>border-top-color
2890 <tr>
2891 <td>border-right-color
2893 <tr>
2894 <td>border-bottom-color
2896 <tr>
2897 <td>border-left-color
2899 <tr>
2900 <td>border-color
2902 <tr>
2903 <td>border-top-style
2905 <tr>
2906 <td>border-right-style
2908 <tr>
2909 <td>border-bottom-style
2911 <tr>
2912 <td>border-left-style
2914 <tr>
2915 <td>border-short-style
2917 <tr>
2918 <td>border-top
2920 <tr>
2921 <td>border-right
2923 <tr>
2924 <td>border-bottom
2926 <tr>
2927 <td>border-left
2929 <tr>
2930 <td>border
2932 <tbody>
2933 <tr>
2934 <td rowspan=2><a
2935 href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
2936 properties</a>
2938 <td>counter-reset
2940 <tr>
2941 <td>counter-increment
2943 <tbody>
2944 <tr>
2945 <td colspan=2><a
2946 href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
2948 <tbody>
2949 <tr>
2950 <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
2951 properties</a>
2953 <td>font-family
2955 <tr>
2956 <td>font-size
2958 <tr>
2959 <td>font-style
2961 <tr>
2962 <td>font-variant
2964 <tr>
2965 <td>font-weight
2967 <tr>
2968 <td>font
2970 <tbody>
2971 <tr>
2972 <td rowspan=3><a
2973 href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
2974 <a
2975 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
2977 <td>height
2979 <tr>
2980 <td>min-height
2982 <tr>
2983 <td>max-height
2985 <tbody>
2986 <tr>
2987 <td colspan=2><a
2988 href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
2990 <tbody>
2991 <tr>
2992 <td rowspan=5><a
2993 href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
2994 properties</a>
2996 <td>margin-top
2998 <tr>
2999 <td>margin-right
3001 <tr>
3002 <td>margin-bottom
3004 <tr>
3005 <td>margin-left
3007 <tr>
3008 <td>margin
3010 <tbody>
3011 <tr>
3012 <td rowspan=5><a
3013 href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
3014 properties</a>
3016 <td>outline-width
3018 <tr>
3019 <td>outline-style
3021 <tr>
3022 <td>outline-color
3024 <tr>
3025 <td>outline
3027 <tbody>
3028 <tr>
3029 <td rowspan=5><a
3030 href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
3031 properties</a>
3033 <td>padding-top
3035 <tr>
3036 <td>padding-right
3038 <tr>
3039 <td>padding-bottom
3041 <tr>
3042 <td>padding-left
3044 <tr>
3045 <td>padding
3047 <tbody>
3048 <tr>
3049 <td colspan=2><a
3050 href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
3052 <tbody>
3053 <tr>
3054 <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
3055 properties</a>
3057 <td>letter-spacing
3059 <tr>
3060 <td>text-align
3062 <tr>
3063 <td>text-decoration
3065 <tr>
3066 <td>text-indent
3068 <tr>
3069 <td>text-transform
3071 <tr>
3072 <td>white-space
3074 <tr>
3075 <td>word-spacing
3077 <tbody>
3078 <tr>
3079 <td colspan=2><a
3080 href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
3082 <tbody>
3083 <tr>
3084 <td rowspan=3><a
3085 href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
3086 <a
3087 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
3089 <td>width
3091 <tr>
3092 <td>min-width
3094 <tr>
3095 <td>max-width
3096 </table>
3098 <h3 class=no-num id=margin-property-list> CSS 2.1 properties that apply
3099 within the margin contexts</h3>
3101 <p> This list is described in the <a href="#page-properties">Page
3102 Properties</a> section.
3104 <table class=property-list>
3105 <tbody>
3106 <tr>
3107 <td rowspan=2><a
3108 href="http://www.w3.org/TR/CSS21/visuren.html#direction">bidi
3109 properties</a>
3111 <td>direction
3113 <tr>
3114 <td>unicode-bidi
3116 <tbody>
3117 <tr>
3118 <td rowspan=6><a
3119 href="http://www.w3.org/TR/CSS21/colors.html#background-properties">background
3120 properties</a>
3122 <td>background-color
3124 <tr>
3125 <td>background-image
3127 <tr>
3128 <td>background-repeat
3130 <tr>
3131 <td>background-attachment
3133 <tr>
3134 <td>background-position
3136 <tr>
3137 <td>background
3139 <tbody>
3140 <tr>
3141 <td rowspan=20><a
3142 href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
3143 properties</a>
3145 <td>border-top-width
3147 <tr>
3148 <td>border-right-width
3150 <tr>
3151 <td>border-bottom-width
3153 <tr>
3154 <td>border-left-width
3156 <tr>
3157 <td>border-width
3159 <tr>
3160 <td>border-top-color
3162 <tr>
3163 <td>border-right-color
3165 <tr>
3166 <td>border-bottom-color
3168 <tr>
3169 <td>border-left-color
3171 <tr>
3172 <td>border-color
3174 <tr>
3175 <td>border-top-style
3177 <tr>
3178 <td>border-right-style
3180 <tr>
3181 <td>border-bottom-style
3183 <tr>
3184 <td>border-left-style
3186 <tr>
3187 <td>border-short-style
3189 <tr>
3190 <td>border-top
3192 <tr>
3193 <td>border-right
3195 <tr>
3196 <td>border-bottom
3198 <tr>
3199 <td>border-left
3201 <tr>
3202 <td>border
3204 <tbody>
3205 <tr>
3206 <td rowspan=2><a
3207 href="http://www.w3.org/TR/CSS21/generate.html#counters">counter
3208 properties</a>
3210 <td>counter-reset
3212 <tr>
3213 <td>counter-increment
3215 <tbody>
3216 <tr>
3217 <td colspan=2><a href="">content</a>
3219 <tbody>
3220 <tr>
3221 <td colspan=2><a
3222 href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>
3224 <tbody>
3225 <tr>
3226 <td rowspan=6><a href="http://www.w3.org/TR/CSS21/fonts.html">font
3227 properties</a>
3229 <td>font-family
3231 <tr>
3232 <td>font-size
3234 <tr>
3235 <td>font-style
3237 <tr>
3238 <td>font-variant
3240 <tr>
3241 <td>font-weight
3243 <tr>
3244 <td>font
3246 <tbody>
3247 <tr>
3248 <td rowspan=3><a
3249 href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">height</a>
3250 <a
3251 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">properties</a>
3253 <td>height
3255 <tr>
3256 <td>min-height
3258 <tr>
3259 <td>max-height
3261 <tbody>
3262 <tr>
3263 <td colspan=2><a
3264 href="http://www.w3.org/TR/CSS21/visudet.html#line-height">line-height</a>
3266 <tbody>
3267 <tr>
3268 <td rowspan=5><a
3269 href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
3270 properties</a>
3272 <td>margin-top
3274 <tr>
3275 <td>margin-right
3277 <tr>
3278 <td>margin-bottom
3280 <tr>
3281 <td>margin-left
3283 <tr>
3284 <td>margin
3286 <tbody>
3287 <tr>
3288 <td rowspan=5><a
3289 href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">outline
3290 properties</a>
3292 <td>outline-width
3294 <tr>
3295 <td>outline-style
3297 <tr>
3298 <td>outline-color
3300 <tr>
3301 <td>outline
3303 <tbody>
3304 <tr>
3305 <td colspan=2><a
3306 href="http://www.w3.org/TR/CSS21/visufx.html#overflow">overflow</a>
3308 <tbody>
3309 <tr>
3310 <td rowspan=5><a
3311 href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
3312 properties</a>
3314 <td>padding-top
3316 <tr>
3317 <td>padding-right
3319 <tr>
3320 <td>padding-bottom
3322 <tr>
3323 <td>padding-left
3325 <tr>
3326 <td>padding
3328 <tbody>
3329 <tr>
3330 <td colspan=2><a
3331 href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify">quotes</a>
3333 <tbody>
3334 <tr>
3335 <td rowspan=7><a href="http://www.w3.org/TR/CSS21/text.html">text
3336 properties</a>
3338 <td>letter-spacing
3340 <tr>
3341 <td>text-align
3343 <tr>
3344 <td>text-decoration
3346 <tr>
3347 <td>text-indent
3349 <tr>
3350 <td>text-transform
3352 <tr>
3353 <td>white-space
3355 <tr>
3356 <td>word-spacing
3358 <tbody>
3359 <tr>
3360 <td colspan=2><a
3361 href="http://www.w3.org/TR/CSS21/visudet.html#line-height">vertical-align</a>
3363 <tbody>
3364 <tr>
3365 <td colspan=2><a
3366 href="http://www.w3.org/TR/CSS21/visufx.html#visibility">visibility</a>
3368 <tbody>
3369 <tr>
3370 <td rowspan=3><a
3371 href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">width</a>
3372 <a
3373 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">properties</a>
3375 <td>width
3377 <tr>
3378 <td>min-width
3380 <tr>
3381 <td>max-width
3383 <tbody>
3384 <tr>
3385 <td colspan=2><a
3386 href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index</a>
3387 </table>
3389 <h2 class=no-num id=transfer-possibilities>Appendix B: Transfer
3390 Possibilities</h2>
3392 <p>Often, but not always, the page box has a one-to-one correspondence to
3393 the physical surface onto which the document is ultimately rendered. The
3394 CSS3 page model specifies formatting within the page box, but it is the
3395 user agent's responsibility to transfer the page box to the sheet. Some
3396 user agent transfer possibilities that are not addressed by CSS3
3397 include:
3399 <ul id=complex-usecases>
3400 <li>Transferring one page box to one sheet (e.g. single-sided printing);
3402 <li>Transferring two page boxes to the front and back surfaces of the
3403 same sheet (e.g. double-sided printing);
3405 <li>Transferring N (small) page boxes to one sheet (called "N-up");
3407 <li>Transferring one (large) page box to N x M sheets (called "tiling");
3409 <li>Creating signatures. A <dfn id=signature>signature</dfn> is a group
3410 of pages printed on a sheet, which, when folded and trimmed like a
3411 book, appear in their proper sequence;
3413 <li>Printing one document to multiple output trays;
3415 <li>Generating files containing print instructions.
3416 </ul>
3418 <h2 class=no-num id=changes>Changes</h2>
3420 <p> Changes since the <a
3421 href="http://www.w3.org/TR/2006/WD-css3-page-20061010/">10 October 2006
3422 Working Draft</a> are:
3424 <ul>
3425 <li>The first printed page can be <a
3426 href="#using-named-pages">named</a>.
3428 <li>The ‘<code class=css>:blank</code>’ <a
3429 href="#pseudo-classes">pseudo-class</a> was imported from the <a
3430 href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged
3431 Media</a> module.
3433 <li>‘<code class=css>@page</code>’ rules can now take multiple comma
3434 separated selectors, each selector can have multiple pseudo-classes.
3435 <div class=example>
3436 <pre>@page :first, :blank { @bottom-center { content: none } }</pre>
3438 <pre>@page :first:left { @bottom-left { content: none } }</pre>
3439 </div>
3441 <li>Margin boxes are renamed <a href="#margin-boxes">page-margin
3442 boxes</a>, to avoid confusion with the margin area of each box.
3444 <li>The <a href="#variable-sizing">Variable Dimension</a> layout rules
3445 for page-margin boxes have been much simplified to not require
3446 quadratic optimization.
3448 <li>The relative <a href="#painting">painting order</a> of page-margin
3449 boxes and page content has changed.
3451 <li>The description of page breaks and definition of related properties
3452 (except for the ‘<a href="#page"><code
3453 class=property>page</code></a>’ property) have been moved to the CSS
3454 Fragmentation Module. <a href="#CSS3-BREAK"
3455 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>
3457 <li>The ‘<code class=property>fit</code>’ and ‘<code
3458 class=property>fit-position</code>’ properties are renamed to
3459 ‘<code class=property>object-fit</code>’ and ‘<code
3460 class=property>object-position</code>’, redefined to enable
3461 additional use cases, and moved to the CSS3 Image Values and Replaced
3462 Content module. <a href="#CSS3-IMAGES"
3463 rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>
3465 <li>Many miscellaneous clarifications and editorial improvements have
3466 been incorporated.
3467 </ul>
3469 <h2 class=no-num id=references>References</h2>
3471 <h3 class=no-num id=normative-references>Normative References</h3>
3472 <!--begin-normative--> <!-- Sorted by label -->
3473 <dl class=bibliography>
3474 <dt
3475 style="display: none"><!-- keeps the doc valid if the DL is empty -->
3476 <!---->
3478 <dt id=CSS21>[CSS21]
3480 <dd>Bert Bos; et al. <a
3481 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading
3482 Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7
3483 June 2011. W3C Recommendation. URL: <a
3484 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
3485 </dd>
3486 <!---->
3488 <dt id=CSS3-BREAK>[CSS3-BREAK]
3490 <dd>Rossen Atanassov; Elika J. Etemad. <a
3491 href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
3492 Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
3493 Draft. (Work in progress.) URL: <a
3494 href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
3495 </dd>
3496 <!---->
3498 <dt id=CSS3-SIZING>[CSS3-SIZING]
3500 <dd>Tab Atkins Jr.; Elika J. Etemad. <a
3501 href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/"><cite>CSS
3502 Intrinsic & Extrinsic Sizing Module Level 3.</cite></a> 27
3503 September 2012. W3C Working Draft. (Work in progress.) URL: <a
3504 href="http://www.w3.org/TR/2012/WD-css3-sizing-20120927/">http://www.w3.org/TR/2012/WD-css3-sizing-20120927/</a>
3505 </dd>
3506 <!---->
3508 <dt id=CSS3BG>[CSS3BG]
3510 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
3511 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
3512 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
3513 Candidate Recommendation. (Work in progress.) URL: <a
3514 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
3515 </dd>
3516 <!---->
3518 <dt id=MEDIAQ>[MEDIAQ]
3520 <dd>Florian Rivoal. <a
3521 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
3522 Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
3523 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
3524 </dd>
3525 <!---->
3527 <dt id=PWGMSN>[PWGMSN]
3529 <dd>Ron Bergman; Tom Hastings. <a
3530 href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media
3531 Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer
3532 Working Group 5101.1-2002. URL: <a
3533 href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf">ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf</a>
3534 </dd>
3535 <!---->
3537 <dt id=RFC2119>[RFC2119]
3539 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
3540 words for use in RFCs to Indicate Requirement Levels.</cite></a>
3541 Internet RFC 2119. URL: <a
3542 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
3543 </dd>
3544 <!---->
3545 </dl>
3546 <!--end-normative-->
3547 <h3 class=no-num id=informative-references>Informative References</h3>
3548 <!--begin-informative--> <!-- Sorted by label -->
3549 <dl class=bibliography>
3550 <dt
3551 style="display: none"><!-- keeps the doc valid if the DL is empty -->
3552 <!---->
3554 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
3556 <dd>Elika J. Etemad; Tab Atkins Jr. <a
3557 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS
3558 Image Values and Replaced Content Module Level 3.</cite></a> 17 April
3559 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a
3560 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
3561 </dd>
3562 <!---->
3564 <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
3566 <dd>Elika J. Etemad; Koji Ishii. <a
3567 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
3568 Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
3569 Draft. (Work in progress.) URL: <a
3570 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
3571 </dd>
3572 <!---->
3574 <dt id=JLREQ>[JLREQ]
3576 <dd>Yasuhiro Anan; et al. <a
3577 href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/"><cite>Requirements
3578 for Japanese Text Layout.</cite></a> 3 April 2012. W3C Working Group
3579 Note. URL: <a
3580 href="http://www.w3.org/TR/2012/NOTE-jlreq-20120403/">http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a>
3581 </dd>
3582 <!---->
3583 </dl>
3584 <!--end-informative--></div>
3585 </div>