csswg-drafts/css3-page/Overview.src.html at b55d0eb997a01159e6441d0b349b01067ce3415b · w3c/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
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 PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>
CSS Paged Media Module Level 3
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../default.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.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>
</head>
<body>
<div>
<div class="head">
<!--logo-->
<h1>CSS Paged Media Module Level 3</h1>
<h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>
<dl>
  <dt>This version:</dt>    <dd><a href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
    <!-- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->
  <dt>Latest version:</dt>    <dd><a href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a></dd>
  <dt>Previous version:</dt>    <dd><a href="http://www.w3.org/TR/2004/CR-css3-page-20040225/">http://www.w3.org/TR/2004/CR-css3-page-20040225/</a></dd>
  <dt>Editors:</dt>    <dd>Melinda Grant, Hewlett-Packard</dd>
    <dd>H&aring;kon Wium Lie, Opera Software</dd>
    <dd>Elika J. Etemad, Hewlett-Packard</dd>
</dl>

<!--copyright-->

</div>
<hr title="Separator for header">

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

<p>This module describes the page model that partitions a flow into pages. It
builds on the <a href="/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.</p>

<!-- "Status of this document" -->

<h2 class="no-num no-toc" id="status">Status of this Document</h2>

<!--status-->

<p>This document contains the <abbr title="Cascading Style Sheets">CSS3</abbr>
Paged Media Module W3C Last Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a> of [DATE]. The
Last Call period ends on <span class="fudge">TBD</span>.</p>

<p>Relative to the previous Last Call Working Draft, this version incorporates
changes to the formerly named 'fit' and 'fit-position' properties; they are
renamed to 'image-fit' and 'image-position' and redefined to enable additional
use cases. The margin-box sizing algorithm has been reworded to be a bit
simpler, and many miscellaneous clarifications and editorial improvements have
been incorporated.</p>

<p>The 'image-fit' and 'image-position' properties are explicitly identified as at
risk, and may be removed in the next version of the specification.</p>

<p>Expected next revision to this document is another LCWD, driven by the change
in definition of 'image-fit' and 'image-position'.</p>

<p>The <a href="lc2_issues.htm">Disposition of Comments</a>
document contains the current issues list and responses to input received
during this Last Call period.</p>

<h2 class="no-num no-toc" id="contents">Table of Contents</h2><!--begin-toc-->
<!--end-toc-->
<!-- "Introduction" -->
<h2 id="intro">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="/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>

<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. Often,
but not always, the page box has a one-to-one correspondence to the physical
surface onto which the document is ultimately rendered. The CSS3 page model
specifies formatting within the page box, but it is the user agent's
responsibility to transfer the page box to the sheet. Some user agent transfer
possibilities that are not addressed by CSS3 include:</p>
<ul id="complex-usecases">
  <li>Transferring one page box to one sheet (e.g. single-sided printing);</li>
  <li>Transferring two page boxes to the front and back surfaces of the same
  sheet (e.g. double-sided printing);</li>
  <li>Transferring N (small) page boxes to one sheet (called "N-up");</li>
  <li>Transferring one (large) page box to N x M sheets (called "tiling");</li>
  <li>Creating signatures. A <dfn>signature</dfn> is a group of pages printed on
  a sheet, which, when folded and trimmed like a book, appear in their proper
  sequence;</li>
  <li>Printing one document to multiple output trays;</li>
  <li>Generating files containing print instructions.</li>
  </ul>

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

  <h3 id="terminology">Terminology</h3>

  <p>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> [[!RFC2119]]. However, for readability, these words do not appear
  in all uppercase letters in this specification.</p>

  <h2 id="dependencies">Dependencies on other CSS Modules</h2>

  <p>This CSS3 module depends on Cascading Style Sheets Level 2 Revision 1
  [[!CSS21]] for all underlying requirements such as syntax, selectors, box
  model, fonts, etc. It may in the future be updated to depend on other CSS3
  modules rather than on CSS 2.1.</p><!-- @page -->

  <h2 id="page-box-page-rule">Page Boxes: the @page Rule</h2>

  <p>In the page model, the document is transferred into one or more page boxes. The
  <a name="ind-page-box" id="ind-page-box"><span class="index-def" title="page box"><dfn>page box</dfn></span></a> 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 viewport. As for other boxes, a page box consists of margin,
  border, padding, and content areas. The content and margin areas of a page box
  have special functions:</p>

  <ul>
  <li>The content area of a page box is called the <span class="index-def" title="page area"><a name="ind-page-area" id="ind-page-area"><dfn>page
  area</dfn></a></span>. The content of the document is flowed into one or more
  page areas within their corresponding page boxes. The edges of the page area on
  the first page establish the rectangle that is the initial <a href="/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>margin boxes</dfn>.
  Each margin box has its own margin, border, padding and content areas. Margin
  boxes are typically used to display running headers and footers.</li>
</ul>

<p>The properties of a <dfn>page box</dfn> are determined by properties <a href="/TR/CSS21/syndata.html#declaration">declared</a> within the <dfn><a href="#page-context">page context</a></dfn>, which is the <a href="/TR/CSS21/syndata.html#x14">declaration block</a> of the <code>@page</code>
rule. Page boxes differ from other boxes in that the <span class="property">'width'</span> and <span class="property">'height'</span> properties
do not apply to a page box. The size of the page box is specified using the
<span class="property">'size'</span> property in the page context.</p>

<p>Declarations in the page context affect the page box and / or can inherit
to the margin boxes, but they do not apply to or inherit into the
document's content.</p>

<h3 id="page-terms">Page Terminology and the Page Model</h3>

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

<dl&
F891
gt;
  <dt id="page-sheet">Page sheet</dt>
  <dd><img src="PageSheet.png" style="float: right;" alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it"
  height="148" 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">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-box">Page box</dt>
  <dd><img src="PageBox.png" style="float: right;" alt="Illustration of the page box with page area nested within the page padding that is within page border that is within the page margin"
  height="266" width="267"> A page box is derived from the <a href="/TR/CSS21/box.html">box model</a> and contains portions of the document flow
  destined for rendering on a page sheet. The width and height of the page box
  are determined by the size property. As with all CSS boxes, the page box
  consists of margin, border, padding, and content areas. In the simplest and
  usual case, the page box's margin box is congruent with the page sheet. (See
  the <a href="#complex-usecases">transfer possibilities</a> in the <a href="#intro">Introduction</a> for situations where the page box differs from the
  page sheet in values such as size or orientation.)</dd>

  <dt id="page-area">Page area</dt>
  <dd>The page area is a synonym for the content area of the page box. 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.</dd>

  <dt id="margin-box">Margin box</dt>
  <dd>Margin boxes are rectangular regions within the page margin that form
  containing boxes for header/footer content. The following margin boxes are
  defined and illustrated in the diagram below:
  <table id="margin-box-def" class="data" summary="defintion of each of the margin boxes">
    <caption>Table 1 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 src="TopLeftCornerBox.png" alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins"
        height="47" 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 margin boxes</td>
        <td><img src="TopLeftMarginBox.png" alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box"
        height="47" 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
        margin boxes</td>
        <td><img src="TopCenterMarginBox.png" alt="the top center box with margin, border, and padding, centered within the page's top margin"
        height="47" 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 margin boxes</td>
        <td><img src="TopRightMarginBox.png" alt="the top right box with margin, border, and padding, nested within the page's top margin"
        height="47" 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 src="TopRightCornerMarginBox.png" alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin"
        height="47" 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 margin boxes</td>
        <td rowspan="3"><img src="LeftMarginBoxes.png" alt="left-top, left-middle, and left-bottom margin boxes in the page box's left margin"
        height="226" 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 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 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 margin boxes</td>
        <td rowspan="3"><img src="RightMarginBoxes.png" alt="right-top, right-middle, and right-bottom margin boxes in the page box's right margin"
        height="226" 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 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 margin boxes</td>
      </tr>
      <tr id="bottom-margin-boxes-def">
        <th id="bottom-left-corner-box-def">bottom-left-corner</th>
        <td>a fixed-size box defined by the intersection of the bottom and left margins of
        the page box</td>
        <td><img src="BottomLeftCornerBox.png" alt="bottom left corner box with margin, border, and padding, nested within the page margin at the intersection of the left and bottom page margins"
        height="48" width="181"></td>
      </tr>
      <tr id="bottom-left-box-def">
        <th>bottom-left</th>
        <td>a variable-width box filling the bottom page margin between the
        bottom-left-corner and bottom-center margin boxes</td>
        <td><img src="BottomLeftMarginBox.png" alt="bottom left margin box with margin, border, and padding, nested within the page's bottom margin next to the bottom-left-corner box"
        height="48" width="181"></td>
      </tr>
      <tr id="bottom-center-box-def">
        <th>bottom-center</th>
        <td>a variable-width box centered horizontally between the page's left and right
        border edges and filling the bottom page margin between the bottom-left and
        bottom-right margin boxes</td>
        <td style="vertical-align: middle;"><img src="BottomCenterMarginBox.png" alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page"
        height="48" width="181"></td>
      </tr>
      <tr id="bottom-right-box-def">
        <th>bottom-right</th>
        <td>a variable-width box filling the bottom page margin between the bottom-center
        and bottom-right-corner margin boxes</td>
        <td><img src="BottomRightMarginBox.png" alt="bottom right margin box with margin, border, and padding, nested within the page's bottom margin and next to the bottom-right-corner box"
        height="48" width="181"></td>
      </tr>
      <tr id="bottom-right-corner-box-def">
        <th>bottom-right-corner</th>
        <td>a fixed-size box defined by the intersection of the bottom and right margins of
        the page box</td>
        <td><img src="BottomRightCornerBox.png" alt="bottom right corner box with margin, border, and padding, nested within the page margin at the intersection of the right and bottom page margins"
        height="48" width="181"></td>
      </tr>
    </tbody>
  </table>
  </dd>

  <dt id="content-empty">Content-empty page</dt>
  <dd>a page surface whose page area contains no printable content other than
  backgrounds and/or borders. A page surface whose page area contains generated
  content, or content whose visibility is 'hidden', 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 margin-box content
  <em>is</em> a content-empty page.</dd>
</dl>

<h3 id="page-type">Page layouts and more terminology</h3>

<p>Page layouts have many possible realizations. Among the aspects of page layout
that can vary are paper size, orientation of the layout with respect to the
paper, order of the pages, and how the document will be bound. Many of these
depend upon factors not specified by this module, such as the properties of the
print media to be used. The following terminology is used to describe pages and
page treatments:</p>

<dl>

<dt id="page-orientation">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 'portrait' and 'landscape'.</dd>

<dt id="portrait">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">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.</dd>

<dt id="front-side">Front Side</dt>
<dd>Media used as a stack of sheets have two sides known as the front and the back.
Typically, the user agent prints on the front side of the media when using only
one side of the page sheet. Media used from a roll or continuous form will
print only on the front side. <span class="note">CSS does not provide a
mechanism to deal directly with the front and back sides, rather page layouts
must be designed in terms of left and right pages.</span></dd>

<dt id="back-side">Back Side</dt>
<dd>The back side of a sheet medium is the side that cannot be seen when looking at
the front side. Typically, the back side is only used when printing on both
sides of the medium. Unless using special paper stock such as letterhead it
often does not matter which side is the front and which is the back.</dd>

<dt id="duplex-printing">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">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">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 id="page-progression">Page Progression</dt>
<dd>The direction in which the printed pages of a document are sequenced;
<i>e.g.</i>, English typically progresses from left to right.</dd>

<dt id="left-page">Left Page</dt>
<dd>A page that will 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 <span class="css">':left'</span> page
selector.</dd>

<dt id="right-page">Right Page</dt>
<dd>A page that will 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 <span class="css">':right'</span>
page selector.</dd>

<dt id="first-page">First Page</dt>
<dd>The first page in a document. The first page is generally printed on the front
side of a medium. Rules specific to the first page can be specified using the
<span class="css">':first'</span> page selector. A first page can be either a
left page or a right page.</dd>
</dl><!-- the @media rule and @page -->

<h3 id="page-size">Page size</h3>

<p>People around the world use many different paper sizes. It is a goal of this
specification that web content should be adaptable to a range of different
sizes without having to write a specific style sheet for each paper size.</p>

<p>However, in some situations it is important that a certain page size achieves a
certain style. One way to achieve this goal is to utilize the 'size' property,
which indicates that the document should preferentially be displayed on a
surface of a certain size; another method is to use Media Queries [[MEDIAQ]]
which allow different style sheets to be applied to different page sizes.</p>

<h4 id="page-size-prop">Page size: the 'size' property</h4>
<table class="propdef" summary="definition of the size property">
  <tr>
    <th>Name:
    <td><dfn id="size">size</dfn>
  <tr>
    <th>Value:
    <td>[ &lt;length&gt;{1,2} | auto | &lt;page-size&gt; ] || [ portrait | landscape]
  <tr>
    <th>Initial:
    <td>auto
  <tr>
    <td><em>Applies to:</em>
    <td>page context
  <tr>
    <th>Inherited:
    <td>N/A
  <tr>
    <th>Percentages:
    <td>N/A
  <tr>
    <th>Media:
    <td>paged
  <tr>
    <td><em>Computed value:</em>
    <td>specified value
</table>

<p>This property specifies the size and orientation of the containing box for page
content, the <a href="#page-box">page box</a>. In the general case, where one
page box is rendered onto one <a href="#page-sheet">page sheet</a>, the
<span class="property">'size'</span> property also indicates the size of the
destination page sheet.</p>

<p>The size of a page box can either be "absolute" (fixed size) or "relative"
(scalable, i.e., fitting available sheet sizes).</p>

<p>The first three values in the table below can be used to create relative page
boxes.</p>

<p>Other values define a fixed-size page box, and thereby indicate the preferred
output media size. When possible, output should be rendered on the media size
indicated. If the specified size is not available, the smallest available
larger size should be used; if not available, the contents of the page box
should be scaled down to fit the largest smaller page sheet available.</p>

<p>If a <code>size</code> property declaration specifies a page size that would
cause that declaration to not apply (e.g. a media query that qualifies it applies
only to a different paper size) then the declaration must be
<a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
<span class="issue">Is this a reasonable way of dealing with this conflict?</span></p>

<div class="example">
  <p>In the following example
  <pre>
  @page {
    size: 4in 6in;
  }

  @media (max-width: 6in) {
    @page {
      size: letter;
    }
  }
  </pre>
  <p>The second <code>size</code> declaration is ignored, i.e. the specified value
  of the <code>size</code> property is <code>4in 6in</code>.
</div>

<table class="page-sizes">
<tr>
<th>Value</th>
<th>Description</th>
</tr>
<tr>
<td>auto</td>
<td>The page box will be set to a size and orientation chosen by the UA. In the
usual case, the page box size and orientation is chosen to match the target
media sheet.</td>
</tr>
<tr>
<td>landscape</td>
<td>Specifies that the page's content be printed in landscape orientation. The
longer sides of the page box are horizontal. If a <span class="css">'&lt;page-size&gt;'</span> is not specified, the size of the page sheet
is chosen by the UA.</td>
</tr>
<tr>
<td>portrait</td>
<td>Specifies that the page's content be printed in portrait orientation. The
shorter sides of the page box are horizontal. If a <span class="css">'&lt;page-size&gt;'</span> is not specified, the size of the page sheet
is chosen by the UA.</td>
</tr>
<tr>
<td>&lt;length&gt;</td>
<td>The page box will be set to the given absolute dimension(s). If only one length
value is specified, it sets both the width and height of the page box (i.e.,
the box is a square). If two length values are specified, the first establishes
the page box width, and the second the page box height. Values in units of
<span class="css">'em'</span> and <span class="css">'ex'</span> refer to the
page context's font.</td>
</tr>
<tr>
<td>&lt;page-size&gt;</td>
<td>A page size can be specified using one of the following media names. This is
the equivalent of specifying the <span class="css">'&lt;page-size&gt;'</span>
using length values. The definition of the the media names comes from
<cite>Media Standardized Names</cite> [[!PWGMSN]].

<dl>

<dt>A5</dt>
<dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.</dd>

<dt>A4</dt>
<dd>Equivalent to the size of IS0 A4 media: 210 mm wide and 297 mm high.</dd>

<dt>A3</dt>
<dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.</dd>

<dt>B5</dt>
<dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.</dd>

<dt>B4</dt>
<dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.</dd>

<dt>letter</dt>
<dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11
inches high</dd>

<dt>legal</dt>
<dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches
high.</dd>

<dt>ledger</dt>
<dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches
high.</dd>
</dl></td>
</tr>
</table>

<p>The '&lt;page-size&gt;' names can be used in conjunction with 'landscape' or
'portrait' to indicate both size and orientation.</p>

<h4>Some examples:</h4>

<div class="example">
<pre>
@page {
size: A4 landscape;
}
</pre>

<p>The above example sets the width of the page box to be 297mm and the height to
be 210mm. The page box in this example should be rendered on a page sheet size
of 210 mm by 297 mm.</p>
</div>

<div class="example">

<p>In the following example, the outer edges of the page box will align with the
page. The percentage value on the <span class="property">'margin'</span>
property is relative to the page size so if the page sheet dimensions are 210mm
x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page
borders or padding set in the UA default style sheet, the resulting page area
is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).</p>
<pre>
@page {
size: auto;/* auto is the initial value */
margin: 10%;
}
</pre>
</div>

<div class="example">
<pre>
@page {
size: 8.5in 11in;/* width height */
}
</pre>

<p>The above example sets the width of the page box to be 8.5 inches and the
height to be 11 inches. This indicates that the page sheet size should be
8.5"x11" and the orientation 'portrait'.</p>
</div>

<h4 id="page-size-media-query">Media Queries</h4>

<p>This section is informative.</p>

<p>By using Media Queries [[MEDIAQ]], one style sheet can express different
stylistic preferences for different page sizes. Consider this example:</p>

<div class="example" style="font-size: 10pt;">
<pre>
 /* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }

 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }
</pre>
</div>

<p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
sheets are given a "1in" page margin.</p>

<p>In Media Queries, 'width' always refers to the shorter-or-equal length of a
medium, and 'height' to the greater-or-equal medium length. That is, it is not
necessary to write Media Queries that swap the width and height values to make
sure the style sheet is applied.</p>

<h4 id="renderingpages">Rendering page boxes that do not fit a page sheet</h4>

<p>If a page box does not match the target page sheet dimensions, the user agent
<em class="RFC2119">MAY</em> choose (in order of preference) to:</p>

<ol>
  <li>Render the page box at the indicated size on a larger page sheet.</li>
  <li>Rotate the page box 90° if this will make the page box fit the page sheet.</li>
  <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box
  <em class="RFC2119">should</em> be preserved.)</li>
  <li>Reformat the page contents, including 'spilling' onto other page sheets.</li>
  <li>Clip overflowed content (least preferred).</li>
</ol>

<p>The user agent <em class="RFC2119">MAY</em> wish to consult the user before
performing these operations.</p>

<h4 id="positioning-page-box">Positioning the page box on the sheet</h4>

<p>When the page box is smaller than the page size, the user agent <em class="RFC2119">SHOULD</em> either:</p>

<ul>
  <li>center the page box on the sheet since this will align double-sided pages
  and avoid accidental loss of information that is printed near the edge of the
  sheet; or</li>
  <li>position the page box in the upper left corner of the page sheet, as this
  may minimize media consumption.</li>
</ul>

<p>The user agent <em class="RFC2119">MAY</em> wish to consult the user in this
regard.</p><!-- "Page selector and page context" -->

<h3 id="page-selector-and-context">Page Selectors and the Page Context</h3>

<p>Authors can specify various aspects of a page box such as the dimensions,
orientation, and margins within an <span class="css">@page</span> rule. An
<span class="css">@page</span> rule consists of the keyword <span class="css">'@page'</span>, an <em class="RFC2119">OPTIONAL</em> page name followed
with no intervening space by an <em class="RFC2119">OPTIONAL</em> page
pseudo-class and a block of declarations (said to be in the <dfn id="page-context">page context</dfn>).</p>

<p>The <em class="RFC2119">OPTIONAL</em> page name and <em class="RFC2119">OPTIONAL</em> page pseudo-class constitute the <dfn id="page-selector">page selector</dfn>. The page selector specifies for which
pages the declarations apply. In CSS3, page selectors <em class="RFC2119">MAY</em> designate the first page of a document, all left pages, all
right pages, or pages with specific names.</p>

<p>Properties declared within the page context apply to the page box.</p>

<p>If an error is encountered during the processing of a declaration block within
a page or a margin context, the <a href="/TR/CSS21/syndata.html#parsing-errors">Rules for handling parsing errors</a>
apply; that is, valid declarations within the block are applied.</p>

<h4 id="syntax-page-selector">Page selector grammar</h4>

<p>The syntax for a page selector is a specialization of the generic at-rule
defined by CSS 2.1. This grammar extends the at-rule syntax to allow nested
at-rules for @media and @page. User agents <em class="RFC2119">MUST</em> adhere
to the following grammar:</p>

<p>See [[!CSS21]], 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"

<span id="syntax-prod-media">media</span> :
     MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page | ruleset ]* '}' S*
     ;

<span id="syntax-prod-page">page</span> :
     PAGE_SYM S* IDENT? S* pseudo_page? S*
     '{' S* [ margin_box | ruleset ]? [ ';' S* [ margin_box | ruleset ]? ]* '}' S*
     ;

<span id="syntax-prod-pseudo-page">pseudo_page</span> :
     ':' [ "left" | "right" | "first" ]
     ;

<span id="syntax-prod-margin">margin_box</span> :
     margin_sym S* '{' ruleset* '}' S*
     ;

<span id="syntax-prod-margin-sym">margin_sym</span> :
     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>
<p id="page-selector-syntax-restrict">
The following restrictions and relaxations are made to the syntax above:</p>

<ul>
  <li>The value 'auto' <em class="RFC2119">must not</em> be used as a page name
  and <em class="RFC2119">MUST</em> be treated as a syntax error.</li>
</ul>

<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 { ... };
</pre>

<p>The following are examples of 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>

<h4 id="cascading-and-page-context">Cascading in the page context</h4>

<p>Declarations in page and margin contexts <a href="/TR/CSS21/cascade.html">cascade</a> just like declarations in <a href="/TR/CSS21/syndata.html#rule-sets">rule sets</a>.</p>

<p>The specificity of @page rules is computed in a manner analogous to the
computations defined in the <a href="/TR/CSS21/selector.html">Selectors</a>
module:</p>

<ul>
  <li>if the @page rule has a named page, f=1; else f=0</li>
  <li>if the @page rule has a ':first' pseudo-class, g=1; else g=0</li>
  <li>if the @page rule has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
</ul>

<p>Concatenating the three numbers f-g-h gives the specificity.</p>

<p>Properties that are not explicitly set within the page or margin context take
their initial values and do not inherit from any element.</p>

<div class="example">

<p>Some page specificity calculation examples follow:</p>
<pre>
      @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
      @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
      @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
      @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
      @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
      @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
</pre>
</div>

<div class="example">

<p>Consider the following usage example:</p>
<pre>
@page {
margin-left: 3cm;
}

@page :left {
margin-left: 4cm;
}
</pre>

<p>Due to the higher specificity of the pseudo-class selector, the left margin on
left pages will be <span class="css">4;centimeters</span> and all other pages
(the right-facing pages) will have a left margin of <span class="css">3;centimeters</span>.</p>
</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 margin box
and green text in the top-right margin box, while subsequent pages will have
red text in the 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 margin boxes:</p>
<pre>
@page { margin: 25mm;}
@page { font-size: 14pt;}
</pre>
</div>

<h3 id="page-properties">Page Properties</h3>
<div>

<p>The following properties can be used in the <a href="#page-context">page
context</a> to style the appearance of the page box and margin boxes:</p>

<ul>
  <li><a href="/TR/CSS21/colors.html#background-properties">background properties</a></li>
  <li><a href="/TR/CSS21/box.html#border-properties">border properties</a></li>
  <li><a href="/TR/CSS21/colors.html#propdef-color">color</a></li>
  <li><a href="/TR/CSS21/generate.html#counters">counter-reset, counter-increment</a></li>
  <li><a href="/TR/CSS21/fonts.html">font properties</a></li>
  <li><a href="/TR/CSS21/visudet.html#line-height">line-height</a></li>
  <li><a href="/TR/CSS21/box.html#margin-properties">margin properties</a></li>
  <li><a href="/TR/CSS21/box.html#padding-properties">padding properties</a></li>
  <li><a href="#page-size">size</a></li>
  <li><a href="/TR/CSS21/text.html">text properties</a></li>
  <li><a href="/TR/CSS21/visufx.html#visibility">visibility</a></li>

<p>That is, the margin boxes inherit values for inheritable properties from the
page context.</p>

<p>The following properties can be used in the <a href="#margin-at-rule">margin
context</a> to style margin boxes and their content:</p>

<ul>
  <li><a href="/TR/CSS21/colors.html#background-properties">background properties</a>,</li>
  <li><a href="/TR/CSS21/box.html#border-properties">border properties</a>,</li>
  <li><a href="/TR/CSS21/colors.html#propdef-color">color</a>,</li>
  <li><a href="/TR/CSS21/generate.html#content">content</a>,</li>
  <li><a href="/TR/CSS21/fonts.html">font properties</a>,</li>