csswg-drafts/css-page/Overview.html at 0e99b149f69604daf101b49f7f00804d40cfee3e · xfq/csswg-drafts · GitHub

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
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 PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en>
 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
  <title> CSS Paged Media Module Level 3</title>

  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   rel=dcterms.rights>
  <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
  <meta content=text name=dcterms.type>
  <meta content=2013-06-08 name=dcterms.date>
  <meta content="Melinda Grant" name=dcterms.creator>
  <meta content="Håkon Wium Lie" name=dcterms.creator>
  <meta content="Elika J. Etemad" name=dcterms.creator>
  <meta content="Simon Sapin" name=dcterms.creator>
  <meta content=W3C name=dcterms.publisher>
  <meta content="http://dev.w3.org/csswg/css3-page/" name=dcterms.identifier>
  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
  <link href="../default.css" rel=stylesheet type="text/css">
  <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
  <style type="text/css">
  .keyword { font-weight:bold }
  .equation { padding: 2% }
  table.equation {text-align:center}
  td, th { vertical-align: top }
  pre { font-size: 1em; }

  #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;
  }

  .editorial
  {
                display: block;
                font-family: arial, helvetica, sans-serif;
      font-size: 80%;
      margin-left: .5in;
      margin-right: 1in ;
      padding: 0.125in;
      background: #FFFFDD ;
  }

  .editorial:after { content: "Ed."}
  .RFC2119
  {
                text-transform: lowercase;
                font-style: italic
  }

  em em.RFC2119
  {
                text-transform: lowercase;
                font-style: normal
  }

  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>

 <body class=h-entry>
  <div>
   <div class=head> <!--begin-logo-->
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    <h1 class=p-name>CSS Paged Media Module Level 3</h1>

    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
     class=dt-updated><span class=value-title title=20130608> 8 June
     2013</span></span></h2>

    <dl>
     <dt>This version:

     <dd><a class=u-url
      href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
     <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130608</a></dd> -->

     <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/css3-page/">http://dev.w3.org/csswg/css3-page/</a>

     <dt>Previous version:

     <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>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>

     <dt>Feedback:

     <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>Editors:

     <dd class="p-author h-card vcard"> <span class="p-name fn">Melinda
      Grant</span>, <span class="p-org org">Hewlett-Packard</span>

     <dd class="p-author h-card vcard"> <span class="p-name fn">Håkon Wium
      Lie</span>, <span class="p-org org">Opera Software</span>

     <dd class="p-author h-card vcard"> <span class="p-name fn">Elika J.
      Etemad</span>, <span class="p-org org">Mozilla</span>

     <dd class="p-author h-card vcard"> <span class="p-name fn">Simon
      Sapin</span>, <span class="p-org org">Kozea</span>
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>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>
    <!--end-copyright--></div>

   <hr title="Separator for header">

   <h2 class="no-num no-toc" id=abstract>Abstract</h2>

   <p> <span class=p-summary> 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. </span></p>
   <!-- "Status of this document" -->
   <h2 class="no-num no-toc" id=status>Status of this Document</h2>
   <!--begin-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=%5Bcss3-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 “css3-page” in the subject, preferably like this:
    “[<!---->css3-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>.</p>
   <!--end-status-->
   <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span>Introduction</a>

    <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>

    <li><a href="#page-terms"><span class=secno>3. </span>Page
     Terminology</a>

    <li><a href="#page-model"><span class=secno>4. </span>The Page Model</a>
     <ul class=toc>
      <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
       and Painting Order</a>

      <li><a href="#content-outside-box"><span class=secno>4.2.
       </span>Content outside the page box</a>

      <li><a href="#progression"><span class=secno>4.3. </span>Page
       Progression</a>
     </ul>

    <li><a href="#page-selector-and-context"><span class=secno>5. </span>
     Page Selectors and the Page Context</a>
     <ul class=toc>
      <li><a href="#at-page-rule"><span class=secno>5.1. </span> The @page
       Rule</a>

      <li><a href="#page-selectors"><span class=secno>5.2. </span>Page
       selectors</a>
       <ul class=toc>
        <li><a href="#spread-pseudos"><span class=secno>5.2.1. </span> Spread
         pseudo-classes: ‘<code class=css>:left</code>’, ‘<code
         class=css>:right</code>’</a>

        <li><a href="#first-pseudo"><span class=secno>5.2.2. </span>
         First-page pseudo-class: ‘<code class=css>:first</code>’</a>

        <li><a href="#blank-pseudo"><span class=secno>5.2.3. </span>
         Blank-page pseudo-class: ‘<code class=css>:blank</code>’</a>
       </ul>

      <li><a href="#syntax-page-selector"><span class=secno>5.3. </span>@page
       rule grammar</a>

      <li><a href="#cascading-and-page-context"><span class=secno>5.4.
       </span>Cascading in the page context</a>
     </ul>

    <li><a href="#margin-boxes"><span class=secno>6. </span>Page-Margin
     Boxes</a>
     <ul class=toc>
      <li><a href="#margin-at-rules"><span class=secno>6.1. </span>At-rules
       for page-margin boxes</a>

      <li><a href="#populating-margin-boxes"><span class=secno>6.2.
       </span>Populating page-margin boxes</a>

      <li><a href="#margin-dimension"><span class=secno>6.3. </span>Computing
       Page-margin Box Dimensions</a>
       <ul class=toc>
        <li><a href="#margin-box-terms"><span class=secno>6.3.1.
         </span>Page-Margin Box Layout Terminology</a>

        <li><a href="#variable-sizing"><span class=secno>6.3.2. </span>
         Page-Margin Box Variable Dimension Computation Rules</a>
         <ul class=toc>
          <li><a href="#variable-auto-margins"><span class=secno>6.3.2.1.
           </span>Margins</a>

          <li><a href="#variable-auto-sizing"><span class=secno>6.3.2.2.
           </span>Resolving ‘<code class=css>auto</code>’ widths</a>

          <li><a href="#variable-minmax"><span class=secno>6.3.2.3.
           </span>Handling ‘<code class=property>min-width</code>’ and
           ‘<code class=property>max-width</code>’</a>

          <li><a href="#variable-position"><span class=secno>6.3.2.4.
           </span>Positioning</a>

          <li><a href="#variable-mapping"><span class=secno>6.3.2.5.
           </span>Boxes on other sides</a>
         </ul>

        <li><a href="#fixed-sizing"><span class=secno>6.3.3.
         </span>Page-Margin Box Fixed Dimension Computation Rules</a>
       </ul>

      <li><a href="#margin-box-ex"><span class=secno>6.4. </span>Page-margin
       box examples</a>
     </ul>

    <li><a href="#page-properties"><span class=secno>7. </span>Page
     Properties</a>
     <ul class=toc>
      <li><a href="#page-based-counters"><span class=secno>7.1.
       </span>Page-based counters</a>

      <li><a href="#margin-text-alignment"><span class=secno>7.2.
       </span>Page-margin boxes and default values</a>
     </ul>

    <li><a href="#page-size"><span class=secno>8. </span>Page Size</a>
     <ul class=toc>
      <li><a href="#page-size-prop"><span class=secno>8.1. </s
133E
pan>Page size:
       the ‘<code class=property>size</code>’ property</a>
       <ul class=toc>
        <li><a href="#some-examples"><span class=secno>8.1.1. </span>Some
         examples:</a>

        <li><a href="#page-size-media-query"><span class=secno>8.1.2.
         </span>Media Queries</a>
       </ul>

      <li><a href="#renderingpages"><span class=secno>8.2. </span>Rendering
       page boxes that do not fit a page sheet</a>

      <li><a href="#positioning-page-box"><span class=secno>8.3.
       </span>Positioning the page box on the sheet</a>
     </ul>

    <li><a href="#page-breaks"><span class=secno>9. </span> Page Breaks </a>
      <li><a href="#using-named-pages"><span class=secno>9.1. </span>Using
       named pages: ‘<code class=property>page</code>’</a>
     </ul>

    <li><a href="#image-properties"><span class=secno>10. </span>Image
     Properties</a>

    <li class=no-num><a href="#properties-list">Appendix A: Applicable CSS2.1
     Properties</a>
     <ul class=toc>
      <li class=no-num><a href="#page-property-list"> CSS 2.1 Properties that
       apply within the page context</a>

      <li class=no-num><a href="#margin-property-list"> CSS 2.1 properties
       that apply within the margin contexts</a>
     </ul>

    <li class=no-num><a href="#transfer-possibilities">Appendix B: Transfer
     Possibilities</a>

    <li class=no-num><a href="#changes">Changes</a>

    <li class=no-num><a href="#references">References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       References</a>

      <li class=no-num><a href="#informative-references">Informative
       References</a>
     </ul>
   </ul>
   <!--end-toc--> <!-- "Introduction" -->
   <h2 id=intro><span class=secno>1. </span>Introduction</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:

   <ul>
    <li><a href="#page-breaks">page breaks</a> are created and avoided;

    <li>the page properties such as size, orientation, margins, border, and
     padding are specified;

    <li>headers and footers are established within the page margins;

    <li>content such as page counters are placed in the headers and footers;
     and

    <li>orphans and widows can be controlled.
   </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>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 id=conformance><span class=secno>2. </span>Conformance</h2>

   <p>All of the text in this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. The keywords
    "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em
    class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em
    class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em
    class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>",
    "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when
    used in this document are to be interpreted as described in <cite>RFC
    2119</cite> <a href="#RFC2119"
    rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>. However, for
    readability, these words do not appear in all uppercase letters in this
    specification.

   <p>Examples in this specification are introduced with the words "for
    example" or are set apart from the normative text with
    <code>class="example"</code>, like this:

   <div class=example>
    <p>This is an example of an informative example.
   </div>

   <p>Informative notes begin with the word "Note" and are set apart from the
    normative text with <code>class="note"</code>, like this:

   <p class=note>Note, this is an informative note.

   <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>

   <p>The following terminology and accompanying diagrams help to describe
    the page model:

   <dl>
    <dt id=page-sheet>Page sheet

    <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.

    <dt id=printable-area>Printable and non-printable areas

    <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>.

    <dt id=page-orientation>Page Orientation

    <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 ‘<code
     class=property>portrait</code>’ and ‘<code
     class=property>landscape</code>’.

    <dt id=portrait>Portrait Orientation

    <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.

    <dt id=landscape>Landscape Orientation

    <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>

    <dt id=duplex-printing>Duplex Printing

    <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.

    <dt id=binding-edge>Binding Edge

    <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.

    <dt id=facing-pages>Facing Pages

    <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.

    <dt><dfn id=left-page>Left Page</dfn>

    <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 href="#left"><code class=css>:left</code></a>’ <a
     href="#page-selector"><i>page selector</i></a>.

    <dt><dfn id=right-page>Right Page</dfn>

    <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 href="#right"><code class=css>:right</code></a>’ <a
     href="#page-selector"><i>page selector</i></a>.
   </dl>

   <h2 id=page-model><span class=secno>4. </span>The Page Model</h2>

   <p>In the paged media formatting model, the document is transferred into
    one or more page boxes. The <dfn id=page-box>page box</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 class=issue> 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?

   <ul>
    <li>The content area of a page box is called the <dfn id=page-area>page
     area</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>The margin area of a page box is divided into 16 <dfn
     id=page-margin-boxes>page-margin boxes</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.
   </ul>

   <p>The properties of a <a href="#page-box"><i>page box</i></a> are
    determined by properties <a
    href="http://www.w3.org/TR/CSS21/syndata.html#declaration">declared</a>
    within the <a href="#page-context"><i>page context</i></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
    <i>page-margin box</i> are determined by properties declared within its
    <a href="#margin-context"><i>margin context</i></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>The <a href="#containing-block0"><i>containing block</i></a> of the
    page box is specified using the ‘<a href="#size"><code
    class=property>size</code></a>’ property in the <a
    href="#page-context"><i>page context</i></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 href="#CSS21"
    rel=biblioentry>[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 id=painting><span class=secno>4.1. </span> Page Backgrounds and
    Painting Order</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
    href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background
    painting area</i></a> is the entire page box, including its margins
    (regardless of ‘<code class=property>background-clip</code>’). Page
    backgrounds are anchored within the page box's padding area by default
    (and honor ‘<code class=property>background-origin</code>’ if the UA
    supports <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code
    class=property>background-attachment</code>’ is ‘<code
    class=css>fixed</code>’ then the image is positioned relative to the
    page box including its margins (i.e. the <a
    href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background
    positioning area</i></a>, like the <i>background painting area</i>, is
    the page's margin box).

   <p>The document canvas background is drawn as the page box's background:
    by default its <i>background painting area</i> covers the page box's
    border box, and for UAs that support <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, follows the ‘<code
    class=property>background-clip</code>’ 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 ‘<code class=css>0</code>’ that
    establishes a <a
    href="http://www.w3.org/TR/CSS21/visuren.html#x43">stacking context</a>
    <a href="#CSS21" rel=biblioentry>[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 ‘<code class=property>z-index</code>’ property applies to
    page-margin boxes. Since the ‘<code class=property>position</code>’
    property does not apply to page-margin boxes, ‘<code
    class=property>z-index</code>’ always affects page-margin boxes as if
    they were positioned elements regardless of the ‘<code
    class=property>position</code>’ 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>‘<code class=css>@top-left-corner</code>’

    <li>‘<code class=css>@top-left</code>’

    <li>‘<code class=css>@top-center</code>’

    <li>‘<code class=css>@top-right</code>’

    <li>‘<code class=css>@top-right-corner</code>’

    <li>‘<code class=css>@right-top</code>’

    <li>‘<code class=css>@right-middle</code>’

    <li>‘<code class=css>@right-bottom</code>’

    <li>‘<code class=css>@bottom-right-corner</code>’

    <li>‘<code class=css>@bottom-right</code>’

    <li>‘<code class=css>@bottom-center</code>’

    <li>‘<code class=css>@bottom-left</code>’

    <li>‘<code class=css>@bottom-left-corner</code>’

    <li>‘<code class=css>@left-bottom</code>’

    <li>‘<code class=css>@left-middle</code>’

    <li>‘<code class=css>@left-top</code>’
   </ol>

   <p class=note> Start with ‘<code class=css>@top-left-corner</code>’,
    then go clockwise. This order is arbitrary but can be overridden with
    ‘<code class=property>z-index</code>’. It only has a visible effect
    when page-margin boxes overlap, which should not happen in most cases.

   <h3 id=content-outside-box><span class=secno>4.2. </span>Content outside
    the page box</h3>

   <p>When formatting content in the page model, some content may end up
    outside the page box. For example, an element whose ‘<code
    class=property>white-space</code>’ property has the value ‘<code
    class=property>pre</code>’ 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>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:

   <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 id=content-empty>Content-empty page</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 ‘<code
      class=property>hidden</code>’, 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
      ‘<code class=property>page-break-before</code>’/‘<code
      class=property>break-before</code>’ and ‘<code
      class=property>page-break-after</code>’/‘<code
      class=property>break-after</code>’. <a href="#CSS21"
      rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3-BREAK"
      rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>

    <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 <span
       class=property>‘<code class=property>display</code>’</span>
       property to <span class=css>‘<code
       class=property>none</code>’</span>.

      <li>To make a box invisible, set the <span class=property>‘<code
       class=property>visibility</code>’</span> property.
     </ul>

    <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.
   </ul>

   <h3 id=progression><span class=secno>4.3. </span>Page Progression</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
    id=page-progression>page progression</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>The page progression direction is determined as follows:

   <ul>
    <li>If text is laid out in horizontal lines, the page progression is the
     same as the inline progression.

    <li>If text is laid out in vertical lines, the page progression is the
     same as the block progression.
   </ul>

   <p>If the UA supports the ‘<code class=property>direction</code>’ and
    ‘<code class=property>writing-mode</code>’ properties from the CSS 3
    Writing Modes Module <a href="#CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a&
1DDA
gt;, 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> 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">‘<code
    class=property>break-before</code>’</a> value that that propagates a
    page break to the root. <a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> The UA must
    suppress the first (empty) page(s) in this case (and the <a
    href="#first"><code>:first</code></a> 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 ‘<a
     href="#left"><code class=css>:left</code></a>’ page

    <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 ‘<a href="#left"><code
     class=css>:left</code></a>’ page, regardless of the page progression.
   </div>

   <h2 id=page-selector-and-context><span class=secno>5. </span> Page
    Selectors and the Page Context</h2>

   <h3 id=at-page-rule><span class=secno>5.1. </span><a
    id=page-box-page-rule></a> The @page Rule</h3>

   <p>Authors can specify various aspects of a page box, such as its
    dimensions, orientation, and margins, within an ‘<code
    class=css>@page</code>’ rule. ‘<code class=css>@page</code>’ rules
    are allowed wherever <a
    href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a>
    are allowed. An ‘<code class=css>@page</code>’ rule consists of the
    keyword ‘<code class=css>@page</code>’, 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 id=page-context>page context</dfn>). An ‘<code
    class=css>@page</code>’ 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
    ‘<code class=css>@page</code>’.

   <p>‘<code class=css>@page</code>’ rules without a selector list apply
    to every page. Other ‘<code class=css>@page</code>’ rules apply to
    pages that <a href="#match"><i>match</i></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.

   <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>

   <p>A <dfn id=page-selector>page selector</dfn> is made of either a <a
    href="#page-type-selector"><i>page type selector</i></a> or a <a
    href="#page-pseudo-class"><i>page pseudo-class</i></a>, followed by zero
    or more additional <a href="#page-pseudo-class"><i>page
    pseudo-classes</i></a>. No whitespace is allowed between components of a
    selector. The <a href="#page_selector"><i title="page_selector">page
    selector grammar</i></a> and examples can be found below.

   <p>A <a href="#page-selector"><i>page selector</i></a> is said to <dfn
    id=match>match</dfn> a given page if and only if all of its components
    match the page.

   <p>A <dfn id=page-type-selector>page type selector</dfn> is a
    case-sensitive <a
    href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">CSS
    identifier</a> <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. It <a
    href="#match"><i>matches</i></a> pages of the <a
    href="#using-named-pages">named page type</a> generated by the ‘<a
    href="#page"><code class=property>page</code></a>’ property. <span
    id=page-selector-syntax-restrict> A page type name of ‘<code
    class=css>auto</code>’ (<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 id=page-pseudo-class>page pseudo-class</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 href="#SELECT"
    rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> The various <a
    href="#page-pseudo-class"><i>page pseudo-classes</i></a> are defined
    below.

   <h4 id=spread-pseudos><span class=secno>5.2.1. </span><a
    id=left-right-first></a> Spread pseudo-classes: ‘<a href="#left"><code
    class=css>:left</code></a>’, ‘<a href="#right"><code
    class=css>:right</code></a>’</h4>

   <p>When printing double-sided documents, left and right pages are often
    formatted differently. This can be expressed by using the ‘<a
    href="#left"><code class=css>:left</code></a>’ and ‘<a
    href="#right"><code class=css>:right</code></a>’ page pseudo-classes.

   <p>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 id=left>‘<code
    class=css>:left</code>’</dfn> and <dfn id=right>‘<code
    class=css>:right</code>’</dfn> pseudo-classes only <a
    href="#match"><i>match</i></a> <a href="#left-page"><i
    title="left page">left</i></a> or <a href="#right-page"><i
    title="right page">right pages</i></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).

   <div class=note>
    <p> <em><strong>Note.</strong> Adding declarations to the ‘<a
     href="#left"><code class=css>:left</code></a>’ or ‘<a
     href="#right"><code class=css>:right</code></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>
   </div>

   <h4 id=first-pseudo><span class=secno>5.2.2. </span> First-page
    pseudo-class: ‘<a href="#first"><code class=css>:first</code></a>’</h4>

   <p>The <dfn id=first>‘<code class=css>:first</code>’</dfn>
    pseudo-class <a href="#match"><i title=match>matches</i></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 id=blank-pseudo><span class=secno>5.2.3. </span> Blank-page
    pseudo-class: ‘<a href="#blank"><code class=css>:blank</code></a>’</h4>

   <p>The <dfn id=blank>‘<code class=css>:blank</code>’</dfn>
    pseudo-class <a href="#match"><i title=match>matches</i></a> <a
    href="#content-empty"><i title="content-empty page">content-empty
    pages</i></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 href="#left"><code class=css>left</code></a>’, ‘<a
     href="#right"><code class=css>right</code></a>’, ‘<code
     class=css>recto</code>’ and ‘<code class=css>verso</code>’ values
     of the ‘<code class=property>break-before</code>’ and ‘<code
     class=property>break-after</code>’ properties can generate pages that
     match ‘<a href="#blank"><code class=css>:blank</code></a>’.
   </div>