forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathOverview.html
More file actions
2684 lines (2309 loc) · 164 KB
/
Overview.html
File metadata and controls
2684 lines (2309 loc) · 164 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang=en><head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Paged Media Module Level 3</title>
<link href=../default.css rel=stylesheet type=text/css>
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
<link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css>
</head>
<body class=h-entry>
<style scoped type=text/css>
#margin-values { border-collapse: collapse; }
#margin-values td,
#margin-values th
{
padding: 0.2em;
border: thin solid black;
}
.property-list
{
border: 1px solid black;
padding: .2em;
margin-top: 2em;
}
.property-list td
{
border: 1px solid black;
padding: .1em;
}
.RFC2119
{
text-transform: lowercase;
font-style: italic
}
table.page-sizes
{
border: thin solid;
margin-top: 1.5em;
}
table.page-sizes td
{
border: thin solid;
padding: .5em;
}
table.page-sizes th
{
border: thin solid;
padding: .5em;
background: #ffffaa;
}
</style>
<div class=head>
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
</a></p>
<h1 class="p-name no-ref" id=title>CSS Paged Media Module Level 3</h1>
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
<span class=dt-updated><span class=value-title title=20131010>10 October 2013</span></span></span></h2>
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-page/>http://dev.w3.org/csswg/css-page/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-page/>http://www.w3.org/TR/css3-page/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-page/>http://dev.w3.org/csswg/css-page/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/ rel=previous>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a>
<dt>Feedback:</dt>
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-page%5D%20feedback">www-style@w3.org</a>
with subject line
“<kbd>[css-page] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Melinda Grant</a> (<span class="p-org org">Hewlett-Packard</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Håkon Wium Lie</a> (<span class="p-org org">Opera Software</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Elika J. Etemad</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Simon Sapin</a> (<span class="p-org org">Mozilla, formerly Kozea</span>)<dt>Issue Tracking:<dd><a href=http://www.w3.org/Style/CSS/Tracker/products/13 rel=issues>http://www.w3.org/Style/CSS/Tracker/products/13</a></dl></div>
<div data-fill-with=warning></div>
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.</p>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
<p class=p-summary data-fill-with=abstract>This module describes the page model that partitions a flow into pages. It builds on the <a href=http://www.w3.org/TR/CSS21/box.html>Box model module</a> and introduces and defines the page model and paged media. It adds functionality for pagination, page margins, page size and orientation, headers and footers, widows and orphans, and image orientation. Finally it extends generated content to enable page numbering and running headers / footers.
<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.</p>
<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
<div data-fill-with=status><p>
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
<p>
The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list
<a href="mailto:www-style@w3.org?Subject=%5Bcss-page%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
(see <a href=http://www.w3.org/Mail/Request>instructions</a>)
is preferred for discussion of this specification.
When sending e-mail,
please put the text “css-page” in the subject,
preferably like this:
“[css-page] <em>…summary of comment…</em>”
<p>
This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a>
(part of the <a href=http://www.w3.org/Style/>Style Activity</a>).
<p>
This document was produced by a group operating under
the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>.
W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a>
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent which the individual believes contains <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a>
must disclose the information in accordance with <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div>
<div data-fill-with=at-risk></div>
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>Introduction</a><li><a href=#page-terms><span class=secno>2</span>Page Terminology</a><li><a href=#page-model><span class=secno>3</span>The Page Model</a><ul class=toc><li><a href=#painting><span class=secno>3.1</span>
Page Backgrounds and Painting Order</a><li><a href=#content-outside-box><span class=secno>3.2</span>Content outside the page box</a><li><a href=#progression><span class=secno>3.3</span>Page Progression</a></ul><li><a href=#page-selector-and-context><span class=secno>4</span>
Page Selectors and the Page Context</a><ul class=toc><li><a href=#at-page-rule><span class=secno>4.1</span><span id=page-box-page-rule>
The @page Rule</span></a><li><a href=#page-selectors><span class=secno>4.2</span>Page selectors</a><ul class=toc><li><a href=#spread-pseudos><span class=secno>4.2.1</span><span id=left-right-first></span>
Spread pseudo-classes: <span class=css data-link-type=maybe title=:left>:left</span>, <span class=css data-link-type=maybe title=:right>:right</span></a><li><a href=#first-pseudo><span class=secno>4.2.2</span>
First-page pseudo-class: <span class=css data-link-type=maybe title=:first>:first</span></a><li><a href=#blank-pseudo><span class=secno>4.2.3</span>
Blank-page pseudo-class: <span class=css data-link-type=maybe title=:blank>:blank</span></a></ul><li><a href=#syntax-page-selector><span class=secno>4.3</span>@page rule grammar</a><li><a href=#cascading-and-page-context><span class=secno>4.4</span>Cascading in the page context</a></ul><li><a href=#margin-boxes><span class=secno>5</span>Page-Margin Boxes</a><ul class=toc><li><a href=#margin-at-rules><span class=secno>5.1</span>At-rules for page-margin boxes</a><li><a href=#populating-margin-boxes><span class=secno>5.2</span>Populating page-margin boxes</a><li><a href=#margin-dimension><span class=secno>5.3</span>Computing Page-margin Box Dimensions</a><ul class=toc><li><a href=#margin-box-terms><span class=secno>5.3.1</span><span id=max-margin-dimension></span>Page-Margin Box Layout Terminology</a><li><a href=#variable-sizing><span class=secno>5.3.2</span>
Page-Margin Box Variable Dimension Computation Rules</a><ul class=toc><li><a href=#variable-auto-margins><span class=secno>5.3.2.1</span>Margins</a><li><a href=#variable-auto-sizing><span class=secno>5.3.2.2</span>Resolving <span class=css data-link-type=maybe title=auto>auto</span> widths</a><li><a href=#variable-minmax><span class=secno>5.3.2.3</span>Handling <span class=property data-link-type=propdesc title=min-width>min-width</span> and <span class=property data-link-type=propdesc title=max-width>max-width</span></a><li><a href=#variable-position><span class=secno>5.3.2.4</span>Positioning</a><li><a href=#variable-mapping><span class=secno>5.3.2.5</span>Boxes on other sides</a></ul><li><a href=#fixed-sizing><span class=secno>5.3.3</span>Page-Margin Box Fixed Dimension Computation Rules</a></ul><li><a href=#margin-box-ex><span class=secno>5.4</span>Page-margin box examples</a></ul><li><a href=#page-properties><span class=secno>6</span>Page Properties</a><ul class=toc><li><a href=#page-based-counters><span class=secno>6.1</span>Page-based counters</a><li><a href=#margin-text-alignment><span class=secno>6.2</span>Page-margin boxes and default values</a></ul><li><a href=#page-size><span class=secno>7</span>Page Size</a><ul class=toc><li><a href=#page-size-prop><span class=secno>7.1</span>Page size: the <span class=property data-link-type=propdesc title=size>size</span> property</a><ul class=toc><li><a href=#page-size-media-query><span class=secno>7.1.1</span>Media Queries</a></ul><li><a href=#page-marks-bleed><span class=secno>7.2</span>Page marks and bleed area</a><li><a href=#renderingpages><span class=secno>7.3</span>Rendering page boxes that do not fit a page sheet</a><li><a href=#positioning-page-box><span class=secno>7.4</span>Positioning the page box on the sheet</a></ul><li><a href=#page-breaks><span class=secno>8</span>
<span id=pg-br-before-after></span>
<span id=page-break-before></span>
<span id=page-break-after></span>
<span id=page-break-inside></span>
<span id=breaks-inside></span>
<span id=orphans></span>
<span id=widows></span>
<span id=allowed-pg-brk></span>
<span id=brk-btw-blocks></span>
<span id=brk-btw-lines></span>
<span id=brk-end-block></span>
<span id=forced-pg-brk></span>
<span id=best-pg-brk></span>
Page Breaks
</a><ul class=toc><li><a href=#using-named-pages><span class=secno>8.1</span>Using named pages: <span class=property data-link-type=propdesc title=page>page</span></a></ul><li><a href=#image-properties><span class=secno>9</span>Image Properties</a><li><a href=#properties-list><span class=secno></span>Appendix A: Applicable CSS2.1 Properties</a><ul class=toc><li><a href=#page-property-list><span class=secno></span>
CSS 2.1 Properties that apply within the page context</a><li><a href=#margin-property-list><span class=secno></span>
CSS 2.1 properties that apply within the margin contexts</a></ul><li><a href=#transfer-possibilities><span class=secno></span>Appendix B: Transfer Possibilities</a><li><a href=#changes><span class=secno></span>Changes</a><li><a href=#conformance><span class=secno></span>
Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
Conformance classes</a><li><a href=#partial><span class=secno></span>
Partial implementations</a><li><a href=#experimental><span class=secno></span>
Experimental implementations</a><li><a href=#testing><span class=secno></span>
Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span>
References</a><ul class=toc><li><a href=#normative><span class=secno></span>
Normative References</a><li><a href=#informative><span class=secno></span>
Informative References</a></ul><li><a href=#index><span class=secno></span>
Index</a><li><a href=#property-index><span class=secno></span>
Property index</a><li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>Introduction</span><a class=self-link href=#intro></a></h2>
<p>Paged media (e.g., paper, transparencies, photo album pages, pages
displayed on computer screens as printed output simulations) differ from
<a href=http://www.w3.org/TR/CSS2/media.html#continuous-media-group>continuous media</a>
in that the content of the document is split into one or more discrete
static display surfaces. To handle pages, CSS3 Paged Media describes how:</p>
<p><ul>
<li><a href=#page-breaks>page breaks</a> are created and avoided;</li>
<li>the page properties such as size, orientation, margins, border, and
padding are specified;</li>
<li>headers and footers are established within the page margins;</li>
<li>content such as page counters are placed in the headers and footers; and</li>
<li>orphans and widows can be controlled.</li>
</ul>
<p>This module defines a <a href=#page-model>page model</a> that specifies how a
document is formatted within a rectangular area, called the
<a href=#page-box-page-rule>page box</a>, that has finite width and height.
<p>Although CSS3 does not specify how user agents transfer page boxes to sheets,
it does include certain mechanisms for telling user agents about the intended
page sheet <a href=#page-size>size and orientation</a>. In the general case,
CSS3 assumes that one page box will be transferred to one surface of similar
size.</p>
<p>All properties defined in this specification also accept the
<a href=http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit>inherit</a>
keyword as their value, but for readability it has not been listed explicitly.
<h2 class="heading settled heading" data-level=2 id=page-terms><span class=secno>2 </span><span class=content>Page Terminology</span><a class=self-link href=#page-terms></a></h2>
<p>The following terminology and accompanying diagrams help to describe the
page model:</p>
<dl>
<dt id=page-sheet><a class=self-link href=#page-sheet></a>Page sheet</dt>
<dd><img alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it" height=148 src=PageSheet.png style="float: right;" width=194>The page sheet is one surface of the physical
medium. The illustration to the right shows a representation of the upper-left
corner of a page sheet.</dd>
<dt id=printable-area><a class=self-link href=#printable-area></a>Printable and non-printable areas</dt>
<dd>The non-printable area is the area of a page sheet that a physical device such
as a printer is not capable of marking reliably, usually due to the printer’s
paper handling mechanism. This value is printer dependent and is usually a
small region along each edge of the page sheet. The printable area is the area
of page sheet that a printer <em>is</em> capable of marking reliably. The size
of the printable area is the size of the page sheet reduced by the size of the
non-printable area. A user agent may not know the dimensions of this area for a
particular printing device; but when its dimensions are known, user agents
<em class=RFC2119>MAY</em> adjust the formatting of the document so that
content falls within the printable area. How this adjustment is accomplished is
device dependent within the constraints expressed in the sections
<a href=#renderingpages>Rendering page boxes that do not fit a page sheet</a> and
<a href=#content-outside-box>Content outside the page box</a>.</dd>
<dt id=page-orientation><a class=self-link href=#page-orientation></a>Page Orientation</dt>
<dd>The page orientation is defined by comparing the length of the edges of a
<a href=#page-box>page box</a>. The page box is a rectangle with two
perpendicular edges called the long edge and the short edge. The length of the
long edge is always greater than or equal to the length of the short edge. When
the page box is square, the two edges are of the same length and either can be
used as the long edge with the other being the short edge. This specification
defines page orientations of <span class=css data-link-type=maybe title=portrait>portrait</span> and <span class=css data-link-type=maybe title=landscape>landscape</span>.</dd>
<dt id=portrait><a class=self-link href=#portrait></a>Portrait Orientation</dt>
<dd>A portrait page’s height is greater than or equal to its width. Horizontal
elements are parallel to the short edge and vertical elements to the long edge.</dd>
<dt id=landscape><a class=self-link href=#landscape></a>Landscape Orientation</dt>
<dd>A landscape page’s width is greater than or equal to its height. Horizontal
elements are parallel to the long edge and vertical elements to the short edge.
<span class=note>Note that CSS3 makes no distinction between landscape and
reverse-landscape orientations. However, future versions of CSS may do so.
UAs should consider, when formatting for duplexed printing, the binding edge,
page progression, and ease of reading when choosing between landscape and
reverse-landscape renderings.</span>
</dd>
<dt id=duplex-printing><a class=self-link href=#duplex-printing></a>Duplex Printing</dt>
<dd>Duplex printing prints one page box per side of a page sheet and uses both
sides of the page sheet. This module provides no ability to specify whether a
document is duplex printed, but the concept of left and right pages is based on
the assumption that the document is duplex printed, regardless of whether or
not it actually is.</dd>
<dt id=binding-edge><a class=self-link href=#binding-edge></a>Binding Edge</dt>
<dd>The binding edge is the edge of the page box that is toward the binding if the
material is bound. The binding edge often has a larger margin than the opposite
edge to provide for the space used by the binding. The binding edge can be any
of the four edges. However, page sheets are customarily bound so that the
binding edge of page boxes with portrait orientation is vertical. This module
provides no method to specify the binding edge. In duplex printing, the binding
edge is on opposite sides of the page box for the left and right pages.</dd>
<dt id=facing-pages><a class=self-link href=#facing-pages></a>Facing Pages</dt>
<dd>Facing pages are two sequential pages such that when the document is duplex
printed they are on separate sheets of paper. Typically, the earlier page will
be the back side of one sheet and the later page will be the front side of
another. They are usually laid out so that the binding edges of facing pages
are vertical and adjacent when the pages are placed in their normal reading
orientation.</dd>
<dt><dfn data-dfn-type=dfn data-noexport="" id=left-page>Left Page<a class=self-link href=#left-page></a></dfn></dt>
<dd>A page that would be on the left if it is part of a pair of facing pages as
typically laid out. Page layouts for documents using a left-to-right page
progression have the earlier of the facing pages on the left. Rules specific to
the left page can be specified using the <a class=css data-link-type=maybe href=#valuedef-left title=:left>:left</a> <a data-link-type=dfn href=#page-selector title="page selector">page selector</a>.
</dd>
<dt><dfn data-dfn-type=dfn data-noexport="" id=right-page>Right Page<a class=self-link href=#right-page></a></dfn></dt>
<dd>A page that would be on the right if it is part of a pair of facing pages as
typically laid out. Page layouts for documents using a right-to-left page
progression have the earlier of the facing pages on the right. Rules specific
to the right page can be specified using the <a class=css data-link-type=maybe href=#valuedef-right title=:right>:right</a> <a data-link-type=dfn href=#page-selector title="page selector">page selector</a>.
</dd>
</dl>
<h2 class="heading settled heading" data-level=3 id=page-model><span class=secno>3 </span><span class=content>The Page Model</span><a class=self-link href=#page-model></a></h2>
<p>In the paged media formatting model, the document is transferred into one
or more page boxes. The <dfn data-dfn-type=dfn data-noexport="" id=page-box>page box<a class=self-link href=#page-box></a></dfn> is a specialized CSS
box that maps to a rectangular print media surface, such as a page of paper.
It is roughly analogous to the <a href=http://www.w3.org/TR/CSS21/visuren.html#viewport>viewport</a>.
<img alt="" height=266 src=PageBox.png style="float: right;" width=267>
<p>As with other CSS <a href=http://www.w3.org/TR/CSS21/box.html>boxes</a>, a page box
consists of margin, border, padding, and content areas. The content and
margin areas of a page box have special functions:</p>
<p class=issue id=issue-328fb1d0><a class=self-link href=#issue-328fb1d0></a>
In CSS 2.1, both the page box and page area are simple rectangles.
Neither is a CSS box with margins, borders, and padding.
This CSS box should be distinct from the page box and page area,
which would be its margin area and content area, respectively.
Naming ideas?
<p><ul>
<li>The content area of a page box is called the <dfn data-dfn-type=dfn data-noexport="" id=page-area>page
area<a class=self-link href=#page-area></a></dfn>. The content of the document is flowed into one or more page boxes.
The page area acts as a container for all the boxes generated by the root
element and its descendants that are laid out within a given page box. The
edges of the page area on the first page establish the rectangle that is the
initial <a href=http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>containing block</a>
of the document.</li>
<li>The margin area of a page box is divided into
16 <dfn data-dfn-type=dfn data-noexport="" id=page-margin-box title="page-margin box">page-margin boxes<a class=self-link href=#page-margin-box></a></dfn>.
Each page-margin box has its own margin, border, padding and content areas.
Page-margin boxes are typically used to display running headers and footers.</li>
</ul>
<p>The properties of a <a data-link-type=dfn href=#page-box title="page box">page box</a> are determined by properties
<a href=http://www.w3.org/TR/CSS21/syndata.html#declaration>declared</a> within the
<a data-link-type=dfn href=#page-context title="page context">page context</a>, which is the
<a href=http://www.w3.org/TR/CSS21/syndata.html#x14>declaration block</a> of the
<code>@page</code> rule. Similarly the properties of a <a data-link-type=dfn href=#page-margin-box title="page-margin box">page-margin box</a>
are determined by properties declared within its <a data-link-type=dfn href=#margin-context title="margin context">margin context</a>.
Declarations in the page context can affect the page box and/or inherit
to the page-margin boxes, but they do not apply to or inherit into the
document’s root element or other content.</p>
<p>The <a data-link-type=dfn href=#containing-block title="containing block">containing block</a> of the page box is specified using the <a class=property data-link-type=propdesc href=#propdef-size title=size>size</a>
property in the <a data-link-type=dfn href=#page-context title="page context">page context</a>. The width and horizontal margins
of the page box are then calculated exactly as for a
<a href=http://www.w3.org/TR/CSS21/visudet.html#blockwidth>non-replaced
block element in normal flow</a>. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> The height and vertical margins
of the page box are calculated analogously (instead of using the block height
formulas). In both cases if the values are over-constrained, instead of
ignoring any margins, the containing block is resized to coincide with the
margin edges of the page box.
<h3 class="heading settled heading" data-level=3.1 id=painting><span class=secno>3.1 </span><span class=content>
Page Backgrounds and Painting Order</span><a class=self-link href=#painting></a></h3>
<p>When drawing a page of content, the page layers are painted in the
following painting order (bottommost first):
<ol>
<li>page background
<li>document canvas
<li>page borders
<li>document contents
<li>page-margin boxes
</ol>
<p>In the page model, the page background behaves similar to the root background:
its <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a>
is the entire page box, including its margins (regardless of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-clip title=background-clip>background-clip</a>).
Page backgrounds are anchored within the page box’s padding area by default
(and honor <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-origin title=background-origin>background-origin</a> if the UA supports <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>).
However if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-attachment title=background-attachment>background-attachment</a> is <span class=css data-link-type=maybe title=fixed>fixed</span>
then the image is positioned relative to the page box including its margins
(i.e. the <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-positioning-area title="background positioning area">background positioning area</a>,
like the <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a>, is the page’s margin box).
<p>The document canvas background is drawn as the page box’s background:
by default its <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a> covers the page box’s border box,
and for UAs that support <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>, follows the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-clip title=background-clip>background-clip</a> value specified on the root element.
It remains, however, positioned with respect to the root element
or page area as usual.
<p>
With respect to the page-margin boxes,
the document canvas, page borders, and all of the document contents
are treated as a single element with a <code>z-index</code> value of '0'
that establishes a
<a href=http://www.w3.org/TR/CSS21/visuren.html#x43>stacking context</a>
<a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>:
the page-margin boxes never interleave with parts of the document content
or between the content and the canvas.
They may only paint in front of the document content
or behind the document canvas.
The page background is always painted underneath everything else.
<p>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property applies to page-margin boxes.
Since the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> property does not apply to page-margin boxes,
<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> always affects page-margin boxes as if they were positioned elements
regardless of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> property’s value.
Each page-margin boxes always establishes a stacking context.
<p>The default painting order,
or <a href=http://www.w3.org/TR/CSS21/zindex.html>CSS2.1 Appendix E</a> "tree order",
of page-margin boxes with respect to each other is as follows:
<ol>
<li><span class=css data-link-type=maybe title=@top-left-corner>@top-left-corner</span>
<li><span class=css data-link-type=maybe title=@top-left>@top-left</span>
<li><span class=css data-link-type=maybe title=@top-center>@top-center</span>
<li><span class=css data-link-type=maybe title=@top-right>@top-right</span>
<li><span class=css data-link-type=maybe title=@top-right-corner>@top-right-corner</span>
<li><span class=css data-link-type=maybe title=@right-top>@right-top</span>
<li><span class=css data-link-type=maybe title=@right-middle>@right-middle</span>
<li><span class=css data-link-type=maybe title=@right-bottom>@right-bottom</span>
<li><span class=css data-link-type=maybe title=@bottom-right-corner>@bottom-right-corner</span>
<li><span class=css data-link-type=maybe title=@bottom-right>@bottom-right</span>
<li><span class=css data-link-type=maybe title=@bottom-center>@bottom-center</span>
<li><span class=css data-link-type=maybe title=@bottom-left>@bottom-left</span>
<li><span class=css data-link-type=maybe title=@bottom-left-corner>@bottom-left-corner</span>
<li><span class=css data-link-type=maybe title=@left-bottom>@left-bottom</span>
<li><span class=css data-link-type=maybe title=@left-middle>@left-middle</span>
<li><span class=css data-link-type=maybe title=@left-top>@left-top</span>
</ol>
<p class=note>
Start with <span class=css data-link-type=maybe title=@top-left-corner>@top-left-corner</span>, then go clockwise.
This order is arbitrary but can be overridden with <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a>.
It only has a visible effect when page-margin boxes overlap,
which should not happen in most cases.
<h3 class="heading settled heading" data-level=3.2 id=content-outside-box><span class=secno>3.2 </span><span class=content>Content outside the page box</span><a class=self-link href=#content-outside-box></a></h3>
<p>When formatting content in the page model, some content may end up outside the
page box. For example, an element whose <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#white-space title=white-space>white-space</a> property has the value
<span class=css data-link-type=maybe title=pre>pre</span> can generate a box that is wider than the page box. As another example,
when boxes are positioned absolutely or relatively, they may end up in
"inconvenient" locations. For example, images may be placed on the edge of
the page box or 100,000 meters below the page box. </p>
<p>A specification for the exact formatting of such elements lies outside the
scope of this document. However, it is recommended that authors and user agents
observe the following general principles concerning content outside the page
box:</p>
<p><ul>
<li><p>Content should be allowed slightly beyond the page box to allow pages
to "bleed".
<li><p>User agents <em class=RFC2119>SHOULD</em> avoid generating a large
number of content-empty pages to honor the positioning of elements (e.g.,
printing 100 blank pages is probably neither the author’s nor the user’s
intent).
A <dfn data-dfn-type=dfn data-noexport="" id=content-empty>Content-empty page<a class=self-link href=#content-empty></a></dfn> is a page box whose page
area contains no printable content other than backgrounds and/or borders. A
page box whose page area contains generated content, or content whose
visibility is <span class=css data-link-type=maybe title=hidden>hidden</span>, or invisible content such as a zero-width space is
not a content-empty page. On the other hand, a page containing only a
background and/or borders and/or page-margin box content <em>is</em> a
content-empty page.
<p class=note>Note, however, that generating a small number of empty page
boxes is sometimes necessary to honor the forced-break values for
<a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/page.html#propdef-page-break-before title=page-break-before>page-break-before</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-before title=break-before>break-before</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/page.html#propdef-page-break-after title=page-break-after>page-break-after</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-after title=break-after>break-after</a>.
<a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> <a data-biblio-type=normative data-link-type=biblio href=#css3-break title=css3-break>[CSS3-BREAK]</a></li>
<li><p>Authors <em class=RFC2119>SHOULD NOT</em> position elements in
inconvenient locations just to avoid rendering them. Instead:
<ul>
<li>To suppress box generation entirely, set the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> property to <span class=css data-link-type=maybe title=none>none</span>.</li>
<li>To make a box invisible, set the <span class=property><a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility title=visibility>visibility</a></span>
property.</li>
</ul></li>
<li><p>This specification does not define how boxes positioned outside the page
box are handled. Possibilities include discarding them or creating page boxes
for them at the end of the document.</li>
</ul>
<h3 class="heading settled heading" data-level=3.3 id=progression><span class=secno>3.3 </span><span class=content>Page Progression</span><a class=self-link href=#progression></a></h3>
<p>CSS distinguishes between left pages and right pages on all documents,
whether they are printed duplex or not. Each left page is followed by a
right page and vice versa. Left and right pages can be styled differently
with the <a href=#left-right-first><code>:left</code> and <code>:right</code>
pseudo-classes</a>.
<p>Whether the first page of a document is a left page or a right page
depends on the page progression of the document. The <dfn data-dfn-type=dfn data-noexport="" id=page-progression>page progression<a class=self-link href=#page-progression></a></dfn>
is the direction in which the printed pages of a document would be sequenced
when laid out side-to-side. For example, English and horizontally-set Japanese
typically progress from left to right, whereas Arabic and vertically-set
Japanese pages typically progress from right to left. In documents with
a left-to-right page progression the first page of the document is a right
page, and vice versa.</p>
<p>The page progression direction is determined as follows:</p>
<p><ul>
<li>If text is laid out in horizontal lines, the page progression is the
same as the inline progression.</li>
<li>If text is laid out in vertical lines, the page progression is the
same as the block progression.</li>
</ul>
<p>If the UA supports the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction title=direction>direction</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode title=writing-mode>writing-mode</a> properties
from the CSS 3 Writing Modes Module <a data-biblio-type=informative data-link-type=biblio href=#css3-writing-modes title=css3-writing-modes>[CSS3-WRITING-MODES]</a>, it must
<a href=http://www.w3.org/TR/css3-writing-modes/#page-direction>determine</a>
whether the first page is a left or right page from the values of those
properties on the root element.</p>
<p>
To explicitly force a document to begin printing on a left or right page,
authors can specify a <a href=http://www.w3.org/TR/css3-break/#break-before><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-before title=break-before>break-before</a></a> value
that that propagates a page break to the root. <a data-biblio-type=normative data-link-type=biblio href=#css3-break title=css3-break>[CSS3-BREAK]</a>
The UA must suppress the first (empty) page(s) in this case
(and the <code>:first</code> pseudo-class matches the first printed page).
<div class=example>
<pre>html { break-before: always }
</pre>
<p>
For an HTML document with a left-to-right page progression,
the above style rule will cause the first page of the document
to print on a ':left' page
</p>
<pre>html { break-before: left }
</pre>
<p>
For an HTML document,
the above style rule will cause the first page of the document
to print on a ':left' page,
regardless of the page progression.
</p>
</div>
<h2 class="heading settled heading" data-level=4 id=page-selector-and-context><span class=secno>4 </span><span class=content>
Page Selectors and the Page Context</span><a class=self-link href=#page-selector-and-context></a></h2>
<h3 class="heading settled heading" data-level=4.1 id=at-page-rule><span class=secno>4.1 </span><span class=content><span id=page-box-page-rule>
The @page Rule</span></span><a class=self-link href=#at-page-rule></a></h3>
<p>Authors can specify various aspects of a page box,
such as its dimensions, orientation, and margins,
within an <span class=css data-link-type=maybe title=@page>@page</span> rule.
<span class=css data-link-type=maybe title=@page>@page</span> rules are allowed
wherever <a href=http://www.w3.org/TR/CSS21/syndata.html#rule-sets>rule-sets</a> are allowed.
An <span class=css data-link-type=maybe title=@page>@page</span> rule consists of the keyword <span class=css data-link-type=maybe title=@page>@page</span>,
an <em class=RFC2119>OPTIONAL</em> comma-separated list of
<a href=#page-selectors>page selectors</a>
and a block of declarations
(said to be in the <dfn data-dfn-type=dfn data-noexport="" id=page-context>page context<a class=self-link href=#page-context></a></dfn>).
An <span class=css data-link-type=maybe title=@page>@page</span> rule can also contain other at-rules,
interleaved between declarations.
The current level of this specification
only allows <a href=#margin-at-rules>margin at-rules</a> inside <span class=css data-link-type=maybe title=@page>@page</span>.
<p><span class=css data-link-type=maybe title=@page>@page</span> rules without a selector list apply to every page.
Other <span class=css data-link-type=maybe title=@page>@page</span> rules apply to pages that <a data-link-type=dfn href=#match title=match>match</a>
at least one of their selectors.
Properties declared within the page context apply to the page box.
<p>If an error is encountered during the processing of a declaration block within
a page or a margin context, the <a href=http://www.w3.org/TR/CSS21/syndata.html#parsing-errors>Rules for handling parsing errors</a>
apply; that is, valid declarations within the block are applied.</p>
<h3 class="heading settled heading" data-level=4.2 id=page-selectors><span class=secno>4.2 </span><span class=content>Page selectors</span><a class=self-link href=#page-selectors></a></h3>
<p>A <dfn data-dfn-type=dfn data-noexport="" id=page-selector>page selector<a class=self-link href=#page-selector></a></dfn> is made of
either a <a data-link-type=dfn href=#page-type-selector title="page type selector">page type selector</a>
or a <a data-link-type=dfn href=#page-pseudo-class title="page pseudo-class">page pseudo-class</a>,
followed by zero or more additional <a data-link-type=dfn href=#page-pseudo-class title="page pseudo-classes">page pseudo-classes</a>.
No whitespace is allowed between components of a selector.
The <a data-link-type=dfn href=#page_selector title=page_selector>page selector grammar</a>
and examples can be found below.
<p>A <a data-link-type=dfn href=#page-selector title="page selector">page selector</a> is said to <dfn data-dfn-type=dfn data-noexport="" id=match>match<a class=self-link href=#match></a></dfn> a given page if and only if
all of its components match the page.
<p>A <dfn data-dfn-type=dfn data-noexport="" id=page-type-selector>page type selector<a class=self-link href=#page-type-selector></a></dfn> is
a case-sensitive <a href=http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier>CSS identifier</a> <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>.
It <a data-link-type=dfn href=#match title=matches>matches</a> pages of the <a href=#using-named-pages>named page type</a>
generated by the <a class=property data-link-type=propdesc href=#propdef-page title=page>page</a> property.
<span id=page-selector-syntax-restrict>
A page type name of <span class=css data-link-type=maybe title=auto>auto</span>
(<a href=http://www.w3.org/TR/CSS21/syndata.html#characters>ASCII case-insensitive</a>)
does not make the rule invalid,
but <em class=RFC2119>MUST</em> never match.
</span>
<p>A <dfn data-dfn-type=dfn data-noexport="" id=page-pseudo-class>page pseudo-class<a class=self-link href=#page-pseudo-class></a></dfn> is <a href=http://www.w3.org/TR/CSS21/syndata.html#characters>ASCII case-insensitive</a>
and has the same syntax as <a href=http://www.w3.org/TR/selectors/#pseudo-classes>pseudo-classes</a> in regular Selectors. <a data-biblio-type=normative data-link-type=biblio href=#select title=select>[SELECT]</a>
The various <a data-link-type=dfn href=#page-pseudo-class title="page pseudo-classes">page pseudo-classes</a> are defined below.
<h4 class="heading settled heading" data-level=4.2.1 id=spread-pseudos><span class=secno>4.2.1 </span><span class=content><span id=left-right-first></span>
Spread pseudo-classes: <a class=css data-link-type=maybe href=#valuedef-left title=:left>:left</a>, <a class=css data-link-type=maybe href=#valuedef-right title=:right>:right</a></span><a class=self-link href=#spread-pseudos></a></h4>
<p>When printing double-sided documents,
left and right pages are often formatted differently.
This can be expressed by using the <a class=css data-link-type=maybe href=#valuedef-left title=:left>:left</a> and <a class=css data-link-type=maybe href=#valuedef-right title=:right>:right</a> page pseudo-classes.
<p data-dfn-for=@page data-dfn-type=value>All pages are automatically classified by user agents
as either left pages or right pages,
based on <a href=#progression>page progression</a>.
The <dfn class=css-code data-dfn-for=@page data-dfn-type=value data-export="" id=valuedef-left>:left<a class=self-link href=#valuedef-left></a></dfn> and <dfn class=css-code data-dfn-for=@page data-dfn-type=value data-export="" id=valuedef-right>:right<a class=self-link href=#valuedef-right></a></dfn> pseudo-classes
only <a data-link-type=dfn href=#match title=match>match</a> <a data-link-type=dfn href=#left-page title="left page">left</a> or <a data-link-type=dfn href=#right-page title="right page">right pages</a>,
respectively.
<div class=example>
The following example creates left and right binding edges using these pseudo-classes:
<pre>@page :left {
margin-left: 3cm;
margin-right: 4cm;
}
@page :right {
margin-left: 4cm;
margin-right: 3cm;
}
</pre></div>
<p>If different declarations have been given for left and right pages, the user
agent <em class=RFC2119>MUST</em> honor these declarations even if the user
agent does not transfer the page boxes to left and right sheets (i.e., a
printer that only prints on one side of the medium must nevertheless produce
correctly formatted output).</p>
<div class=note>
<p>
<em><strong>Note.</strong>
Adding declarations to the <a class=css data-link-type=maybe href=#valuedef-left title=:left>:left</a> or <a class=css data-link-type=maybe href=#valuedef-right title=:right>:right</a> pseudo-class
does not necessarily influence whether the document
comes out of the printer double- or single-sided
(which is outside the scope of this specification).</em>
</p>
</div>
<h4 class="heading settled heading" data-level=4.2.2 id=first-pseudo><span class=secno>4.2.2 </span><span class=content>
First-page pseudo-class: <a class=css data-link-type=maybe href=#valuedef-first title=:first>:first</a></span><a class=self-link href=#first-pseudo></a></h4>
<p>The <dfn class=css-code data-dfn-for=@page data-dfn-type=value data-export="" id=valuedef-first>:first<a class=self-link href=#valuedef-first></a></dfn> pseudo-class <a data-link-type=dfn href=#match title=match>matches</a>
the first printed page of a document.
<div class=example>
<pre>@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
</pre></div>
<h4 class="heading settled heading" data-level=4.2.3 id=blank-pseudo><span class=secno>4.2.3 </span><span class=content>
Blank-page pseudo-class: <a class=css data-link-type=maybe href=#valuedef-blank title=:blank>:blank</a></span><a class=self-link href=#blank-pseudo></a></h4>
<p>The <dfn class=css-code data-dfn-for=@page data-dfn-type=value data-export="" id=valuedef-blank>:blank<a class=self-link href=#valuedef-blank></a></dfn> pseudo-class <a data-link-type=dfn href=#match title=match>matches</a>
<a data-link-type=dfn href=#content-empty title="content-empty page">content-empty pages</a>
that appear as a result of
<a href=http://www.w3.org/TR/css3-break/#forced-breaks>forced page breaks</a>.
<div class=note>
<p>Only the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-writing-modes-3/#left title=left>left</a>, <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-writing-modes-3/#right title=right>right</a>, <span class=css data-link-type=maybe title=recto>recto</span> and <span class=css data-link-type=maybe title=verso>verso</span> values
of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-before title=break-before>break-before</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-after title=break-after>break-after</a> properties
can generate pages that match <a class=css data-link-type=maybe href=#valuedef-blank title=:blank>:blank</a>.
</div>
<div class=example>
<p>In this example, forced page break may occur before <code>h1</code> elements.
<pre>h1 { break-before: left }
@page :blank {
@top-center { content: "This page is intentionally left blank" }
}
</pre></div>
<p>
A page matched by <a class=css data-link-type=maybe href=#valuedef-blank title=:blank>:blank</a> can also be matched
by other page pseudo-classes.
<div class=example>
<p>If headers have been specified on all right pages, a blank right
page will be matched by both <code>:blank</code>
and <code>:right</code>. Therefore, margin boxes set on right pages
will have to be removed unless they are wanted on blank pages. Here is
an example where the top center header is removed from blank pages,
while the page number remains:
<pre>h1 { break-before: left }
@page :blank {
@top-center { content: none }
}
@page :right {
@top-center { content: "Preliminary edition" }
@bottom-center { content: counter(page) }
}
</pre>
<p>Due to the higher <a data-link-type=dfn href=#specificity title=specificity>specificity</a> of <code>:blank</code>
over <code>:right</code>, the top center header is removed even
if <code>content: none</code> comes before <code>content: "Preliminary
edition"</code>.
</div>
<div class=note>
<p><em><strong>Note.</strong> Future versions of CSS may include other page
pseudo-classes.</em></p>
</div>
<h3 class="heading settled heading" data-level=4.3 id=syntax-page-selector><span class=secno>4.3 </span><span class=content>@page rule grammar</span><a class=self-link href=#syntax-page-selector></a></h3>
<p>The syntax for the @page rule is a specialization of the generic at-rule
defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules
nested inside @media rules. User agents <em class=RFC2119>MUST</em> adhere
to the following grammar:</p>
<p>See <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>, Section 4.1.1 and Appendix G for the expansion of missing
productions:</p>
<p id=specializatons-of-ATKEYWORD>
All new lexical tokens are specializations of the ATKEYWORD lexical token:</p>
<pre class=lexical>PAGE_SYM ::= "@page"
TOPLEFTCORNER_SYM ::= "@top-left-corner"
TOPLEFT_SYM ::= "@top-left"
TOPCENTER_SYM ::= "@top-center"
TOPRIGHT_SYM ::= "@top-right"
TOPRIGHTCORNER_SYM ::= "@top-right-corner"
BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner"
BOTTOMLEFT_SYM ::= "@bottom-left"
BOTTOMCENTER_SYM ::= "@bottom-center"
BOTTOMRIGHT_SYM ::= "@bottom-right"
BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
LEFTTOP_SYM ::= "@left-top"
LEFTMIDDLE_SYM ::= "@left-middle"
LEFTBOTTOM_SYM ::= "@left-bottom"
RIGHTTOP_SYM ::= "@right-top"
RIGHTMIDDLE_SYM ::= "@right-middle"
RIGHTBOTTOM_SYM ::= "@right-bottom"
<dfn data-dfn-type=dfn data-noexport="" id=media>media<a class=self-link href=#media></a></dfn> :
MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ <a data-link-type=dfn href=#syntax-prod-page title=page_rule>page_rule</a> | ruleset ]* '}' S*
;
<dfn data-dfn-type=dfn data-noexport="" id=syntax-prod-page>page_rule<a class=self-link href=#syntax-prod-page></a></dfn> :
PAGE_SYM S* <a data-link-type=dfn href=#page_selector_list title=page_selector_list>page_selector_list</a> '{' S* <a data-link-type=dfn href=#page_body title=page_body>page_body</a> '}' S*
;
<dfn data-dfn-type=dfn data-noexport="" id=page_selector_list>page_selector_list<a class=self-link href=#page_selector_list></a></dfn> :
[ <a data-link-type=dfn href=#page_selector title=page_selector>page_selector</a> S* [ ',' <a data-link-type=dfn href=#page_selector title=page_selector>page_selector</a> S* ]* ]?
;
<dfn data-dfn-type=dfn data-noexport="" id=page_selector>page_selector<a class=self-link href=#page_selector></a></dfn> :
<a data-link-type=dfn href=#syntax-prod-pseudo-page title=pseudo_page>pseudo_page</a>+ | IDENT <a data-link-type=dfn href=#syntax-prod-pseudo-page title=pseudo_page>pseudo_page</a>*
;
<dfn data-dfn-type=dfn data-noexport="" id=syntax-prod-pseudo-page>pseudo_page<a class=self-link href=#syntax-prod-pseudo-page></a></dfn> :
':' [ "left" | "right" | "first" | "blank" ]
;
<dfn data-dfn-type=dfn data-noexport="" id=page_body>page_body<a class=self-link href=#page_body></a></dfn> : /* Can be empty */
declaration? [ ';' S* <a data-link-type=dfn href=#page_body title=page_body>page_body</a> ]? |
<a data-link-type=dfn href=#syntax-prod-margin title=page_margin_box>page_margin_box</a> <a data-link-type=dfn href=#page_body title=page_body>page_body</a>
;
<dfn data-dfn-type=dfn data-noexport="" id=syntax-prod-margin>page_margin_box<a class=self-link href=#syntax-prod-margin></a></dfn> :
<a data-link-type=dfn href=#syntax-prod-margin-sym title=margin_sym>margin_sym</a> S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
;
<dfn data-dfn-type=dfn data-noexport="" id=syntax-prod-margin-sym>margin_sym<a class=self-link href=#syntax-prod-margin-sym></a></dfn> :
TOPLEFTCORNER_SYM |
TOPLEFT_SYM |
TOPCENTER_SYM |
TOPRIGHT_SYM |
TOPRIGHTCORNER_SYM |
BOTTOMLEFTCORNER_SYM |
BOTTOMLEFT_SYM |
BOTTOMCENTER_SYM |
BOTTOMRIGHT_SYM |
BOTTOMRIGHTCORNER_SYM |
LEFTTOP_SYM |
LEFTMIDDLE_SYM |
LEFTBOTTOM_SYM |
RIGHTTOP_SYM |
RIGHTMIDDLE_SYM |
RIGHTBOTTOM_SYM
;
</pre>
<div class=example>
<p>The following are examples of page selectors (declaration block intentionally
left blank)</p>
<pre>@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
@page:first { ... }
@page toc, index { ... }
@page :blank:first { ... }
</pre>
<p>The following are examples of page-margin boxes
where the declaration blocks are intentionally left blank.</p>
<pre>@page {
@top-left { ... /* document name */ }
@bottom-center { ... /* page number */}
}
@page :left { @left-middle { ... /* page number in left margin */ }}
@page :right{ @right-middle { ... /* page number in right margins of right pages */}}
@page :left { @bottom-left-corner { ... /* left page numbers */ }}
@page :right { @bottom-right-corner { ... /* right page numbers */ }}
@page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
@bottom-right-corner { ... /* empty footer */ } }
</pre></div>
<h3 class="heading settled heading" data-level=4.4 id=cascading-and-page-context><span class=secno>4.4 </span><span class=content>Cascading in the page context</span><a class=self-link href=#cascading-and-page-context></a></h3>
<p>Declarations in page and margin contexts <a href=http://www.w3.org/TR/CSS21/cascade.html>cascade</a> just like declarations in style rule for elements.</p>
<p>The <dfn data-dfn-type=dfn data-noexport="" id=specificity>specificity<a class=self-link href=#specificity></a></dfn> of page a selector is computed in a manner
analogous to the computations defined in
the <a href=http://www.w3.org/TR/CSS21/selector.html>Selectors</a> module:
<p><ul>
<li>Count the number of page type names (= <var>f</var>)
<p class=note>
Given the syntax of page seletors, <var>f</var> can only ever be 0 or 1.
<li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)
<li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
</ul>
<p class=note>
Note: Repeated occurrences of the same pseudo-classes are allowed
and do increase specificity.
<p>
Due to storage limitations,
implementations may have limitations on
the size of <var>f</var>, <var>g</var>, or <var>h</var>.
If so, values higher than the limit must be clamped to that limit,
and not overflow.
<p>
Specificities are compared by comparing the three components in order
(<var>f</var>, <var>g</var>, <var>h</var>):
the specificity with a larger <var>f</var> value is more specific;
if the two <var>f</var> values are tied,
then the two <var>g</var> values are compared, etc.
If all the values are tied, the two specificities are equal.
<div class=example>
<p>Some page specificity calculation examples follow:</p>
<pre>@page { } /* specificity = (0,0,0) */
@page :left { } /* specificity = (0,0,1) */
@page :first { } /* specificity = (0,1,0) */
@page :blank:left { } /* specificity = (0,1,1) */
@page artsy { } /* specificity = (1,0,0) */
@page artsy:left { } /* specificity = (1,0,1) */
@page artsy:first { } /* specificity = (1,1,0) */
</pre></div>
<div class=example>
<p>Consider the following usage example:</p>
<pre>@page :left {
margin-left: 4cm;
}
@page {
margin-left: 3cm;
}
</pre>
<p>Due to the higher specificity of the pseudo-class selector,
the left margin on left pages will be 4cm and all other pages
(the right-facing pages) will have a left margin of 3cm.
</div>
<div class=example>
<p>In this example, the higher specificity of the green rules wins over the red
rule.
Therefore the first page will have blue text in the top-left page-margin box
and green text in the top-right page-margin box,
while subsequent pages will have red text in the page-margin boxes.</p>
<pre>@page :first {
color: green;
@top-left {
content: "foo";
color: blue;
}
@top-right {
content: "bar";
}
}
@page { color: red;
@top-center {
content: "Page " counter(page);
}
}
</pre></div>
<div class=example>
<p>Page contexts cascade, so the following stylesheet would style pages with 25
millimeter margins and 14 point type in the page-margin boxes:</p>
<pre>@page { margin: 25mm;}
@page { font-size: 14pt;}
</pre></div>
<h2 class="heading settled heading" data-level=5 id=margin-boxes><span class=secno>5 </span><span class=content>Page-Margin Boxes</span><a class=self-link href=#margin-boxes></a></h2>
<p>Page-margin boxes are boxes within the page margin that,
like pseudo-elements, can contain generated content.
<p>Page-margin boxes can be used to create page headers and footers,
which are portions of the page set aside for supplementary information
such as the page number or document title.
<div class=example>
<p>Typically, a <dfn data-dfn-type=dfn data-noexport="" id=page-header>page header<a class=self-link href=#page-header></a></dfn> is located at the top of the page
in documents with a predominately horizontal writing direction
and on the side opposite the <a href=#binding-edge>binding edge</a>
for documents with a predominately vertical writing direction.
One possible design of page headers for horizontally written documents uses the
<span class=css data-link-type=maybe title=@top-left-corner>@top-left-corner</span>, <span class=css data-link-type=maybe title=@top-left>@top-left</span>, <span class=css data-link-type=maybe title=@top-center>@top-center</span>, <span class=css data-link-type=maybe title=@top-right>@top-right</span> and <span class=css data-link-type=maybe title=@top-right-corner>@top-right-corner</span>
page-margin boxes.
Another design, for vertically written documents, could use the
<span class=css data-link-type=maybe title=@right-top>@right-top</span>, <span class=css data-link-type=maybe title=@right-middle>@right-middle</span>, and <span class=css data-link-type=maybe title=@right-bottom>@right-bottom</span> page-margin boxes
for <a href=#right-page>right facing pages</a> and
<span class=css data-link-type=maybe title=@left-top>@left-top</span>, <span class=css data-link-type=maybe title=@left-middle>@left-middle</span>, and <span class=css data-link-type=maybe title=@left-bottom>@left-bottom</span>
for <a href=#left-page>left facing pages</a>.
<p>The <dfn data-dfn-type=dfn data-noexport="" id=page-footer>page footer<a class=self-link href=#page-footer></a></dfn> is typically at
the opposite end of the page from the page header.
For example, the design of a horizontally written document with a page header
at the top of the page could use the
<span class=css data-link-type=maybe title=@bottom-left-corner>@bottom-left-corner</span>, <span class=css data-link-type=maybe title=@bottom-left>@bottom-left</span>, <span class=css data-link-type=maybe title=@bottom-center>@bottom-center</span>, <span class=css data-link-type=maybe title=@bottom-right>@bottom-right</span> and <span class=css data-link-type=maybe title=@bottom-right-corner>@bottom-right-corner</span>
page-margin boxes as the page footer.
The design of a vertically written document could use
the page-margin boxes of the binding edge of the page for the page footer.
</div>
<p>Page-margin boxes are positioned with respect to the page area
and are independent of page orientation,
for example the top page-margin boxes are above the page area
in both portrait and landscape orientation.
The various page-margin boxes are defined
and illustrated in the diagram below:
<table class=data id=margin-box-def summary="defintion of each of the page-margin boxes">
<caption>Table 1 Page-Margin Box Definitions</caption>
<thead>
<tr>
<th>Box</th>
<th>Description</th>
<th>Placement</th>
</tr>
</thead>
<tbody>
<tr id=top-margin-boxes-def>
<th id=top-left-corner-box-def>top-left-corner</th>
<td>a fixed-size box defined by the intersection of the top and left margins of the
page box</td>
<td><img alt="the top left corner box with margin, border, and padding, nested within intersection of the page’s top and left margins" height=47 src=TopLeftCornerBox.png width=181></td>
</tr>
<tr id=top-left-box-def>
<th>top-left</th>
<td>a variable-width box filling the top page margin between the top-left-corner
and top-center page-margin boxes</td>
<td><img alt="the top left box with margin, border, and padding, nested in the page’s top margin next to the top left corner box" height=47 src=TopLeftMarginBox.png width=181></td>
</tr>
<tr id=top-center-box-def>
<th>top-center</th>
<td>a variable-width box centered horizontally between the page’s left and right
border edges and filling the page top margin between the top-left and top-right
page-margin boxes</td>
<td><img alt="the top center box with margin, border, and padding, centered within the page’s top margin" height=47 src=TopCenterMarginBox.png width=181></td>
</tr>
<tr id=top-right-box-def>
<th>top-right</th>
<td>a variable-width box filling the top page margin between the top-center and
top-right-corner page-margin boxes</td>
<td><img alt="the top right box with margin, border, and padding, nested within the page’s top margin" height=47 src=TopRightMarginBox.png width=181></td>
</tr>
<tr>
<th id=top-right-corner-box-def>top-right-corner</th>
<td>a fixed-size box defined by the intersection of the top and right margins of
the page box</td>
<td><img alt="the top right corner box with margin, border, and padding, nested within the intersection of the page’s top and right margin" height=47 src=TopRightCornerMarginBox.png width=181></td>
</tr>
<tr id=left-margin-boxes-def>
<th id=left-top-box-def>left-top</th>
<td>a variable-height box filling the left page margin between the top-left-corner
and left-middle page-margin boxes</td>
<td rowspan=3><img alt="left-top, left-middle, and left-bottom page-margin boxes in the page box’s left margin" height=226 src=LeftMarginBoxes.png width=181></td>
</tr>
<tr id=left-middle-box-def>
<th>left-middle</th>
<td>a variable-height box centered vertically between the page’s top and bottom
border edges and filling the left page margin between the left-top and
left-bottom page-margin boxes</td>
</tr>
<tr id=left-bottom-box-def>
<th>left-bottom</th>
<td>a variable-height box filling the left page margin between the left-middle and
bottom-left-corner page-margin boxes</td>
</tr>
<tr id=right-margin-boxes-def>
<th id=right-top-box-def>right-top</th>
<td>a variable-height box filling the right page margin between the
top-right-corner and right-middle page-margin boxes</td>
<td rowspan=3><img alt="right-top, right-middle, and right-bottom page-margin boxes in the page box’s right margin" height=226 src=RightMarginBoxes.png width=181></td>
</tr>
<tr id=right-middle-box-def>
<th>right-middle</th>
<td>a variable-height box centered vertically between the page’s top and bottom
border edges and filling the right page margin between the right-top and
right-bottom page-margin boxes</td>
</tr>
<tr id=right-bottom-box-def>
<th>right-bottom</th>
<td>a variable-height box filling the right page margin between the right-middle
and bottom-right-corner page-margin boxes</td>
</tr>
<tr id=bottom-margin-boxes-def>
<th id=bottom-left-corner-box-def>bottom-left-corner</th>