-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathmedia.src
More file actions
1398 lines (1162 loc) · 52.6 KB
/
media.src
File metadata and controls
1398 lines (1162 loc) · 52.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/WD-html40/sgml/HTML4.dtd">
<html lang="en">
<!-- $Id: media.src,v 1.6 1997-08-12 23:20:56 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Media types</TITLE>
<LINK rel="next" href="flowobj.html">
<LINK rel="previous" href="cascade.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Media types</H1>
The following sections describe the various media that may be the
target of presentation through CSS2.
<!-- What is the definitive list of media types? -->
<H2>Media Dependent Style Sheets</H2>
<P>Different output media can often take advantage of the same
properties. For example, the <span
class="propinst-font-size">'font-size'</span> property is useful both
for SCREEN and PRINT media. However, the two media types are different
enough to require different values on the common property; a document
will typically need a larger font on a computer screen than on paper.
For this reason, it's necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.
<P>There are two ways to do this:
<UL>
<LI>Specify the target medium from a style sheet with the <span
class="index-def" title="@media">@media</span> at-rule.
<div class="example"><P>
<PRE>
@media print {
/* style sheet "foo" goes here */
}
</PRE>
</div>
<LI>Specify the target medium within the object language. For example,
in <a rel="biblioentry" href="./refs.html#ref-HTML40">[HTML40]</a>,
the "media" attribute on the LINK element specifies the target medium
of an external style sheet.
<div class="example"><P>
<PRE>
<LINK rel="stylesheet" type="text/css"
media="print" href="foo.css">
</PRE>
</div>
<P>Please consult the <a rel="biblioentry"
href="./refs.html#ref-HTML40">[HTML40]</a> specification for
information about specifying alternate style sheets according
to different media types.
</UL>
<P>Due to the same media type value, the two examples above are semantically
equivalent.
<p>The <span class="index-inst" title="@media">@media</span>construct
also allows style sheet rules for various media in the same style
sheet:
<pre>
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
</pre>
<p>Any valid MEDIA attribute value is valid on @media.
<H2><a name="the-canvas">The canvas</a></H2>
<!-- Hakon: introduce notion of "viewport"? -->
<P> The <span class="index-def" title="canvas"><em>canvas</em></span>
is the part of the UA's drawing surface onto which
documents are rendered. No structural element of a document
corresponds to the canvas, and this raises two issues when formatting
a document:
<UL>
<LI> from where should the dimensions of the canvas be set?
<LI> when the document doesn't cover the whole canvas, how should this
area be rendered?
</UL>
<P> A reasonable answer to the first question is that the initial size
of the canvas is based on the window size, but CSS2 leaves this issue
for the UA to decide. It is also reasonable to expect the UA to change
the canvas size when the window is resized, but this is also outside
the scope of CSS2.
<H3>The HTML canvas</H3>
<P> HTML extensions have set a precedent for the second question:
attributes on the BODY element set the background of the whole
canvas. To support designers' expectations, CSS2 introduces a special
rule to find the canvas background:
<BLOCKQUOTE>
If the <span class="propinst-background">'background'</span> value of the
HTML element is different from 'transparent' then use it, else use
the <span class="propinst-background">'background'</span> value of the BODY
element. If the resulting value is 'transparent', the rendering is
undefined.
</BLOCKQUOTE>
<P> This rule allows the following, for example:
<div class="example"><P>
<PRE>
<HTML style="background: url(http://style.com/marble.png)">
<BODY style="background: red">
</PRE>
<P> In the example above, the canvas will be covered with
"marble". The background of the BODY element (which may or may not
fully cover the canvas) will be red.
</div>
<P> Until other means of addressing the canvas become available, it is
recommended that canvas properties are set on the BODY element.
<H2><a name="the-page">The page: printing with CSS</a></H2>
CSS2 introduces a set of mechanisms for improved support of printing
from the Web. These extensions let style sheets express page breaks,
page boxes, and media dependencies.
<H3>Background to printing</H3>
<P>No one has yet invented a cheaper, more reliable, more portable,
more convenient, or more universally acceptable "reader" of
information than the printed page. Modern printers are getting much
cheaper while overall quality is rising dramatically, especially in
desktop color printers.
<P>The screen is a very different type of output medium from paper.
It is unreasonable to expect information formatted for one medium to
look optimal on the other medium. Screens are smaller, more dynamic,
and more difficult to read. They may be multimedia and even
interactive. Paper is more dense, slower, and completely static. Print
resolution is usually much higher than screen resolution. As just one
example, it has been shown that sans serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper.
<P>One aspect of the Web involves competition and it is very
important for Web publishers to not only attract a readers attention,
but to keep them interested and get them to return. Web pages must not
only be functional, but interesting, esthetically appealing, and eye
catching. Consequently, the best Web pages are very active, involving
many forms of multimedia.
<P>On the other hand, printed pages are completely static by nature.
While they may contain both text, graphics, and images, they may not
contain video, animation, or sound.
<P>The best web pages for screen display make the worst web pages for
print<i>. Therefore, the most active web pages must be converted to
static pages prior to printing.</i> If this is not done just right,
the intent of the author may be distorted and critical information may
be lost. If the information is not too significant, then perhaps this
can be done automatically by the user agent.
<P>Where the best output for both media is a necessity, the author
must provide two versions of the content: an active version for screen
display and a separate static version for printing. While this is
definitely more work, many publishers on the Web are willing to go to
whatever lengths are necessary to attract and keep customers. Perhaps
future authoring tools will allow for the simultaneous production of
both pages. In any case, a simple and convenient method for the user
to find the print version is mandatory.
<P>Printing by itself and multimedia by itself are two difficult and
highly developed disciplines already. The intersection of these two
features does not lend itself to a single, universal solution. Rather
a range of solutions is required to meet the various needs of many
types of Web publishers.
<H3>The page model</H3>
<P>In the previous section, we defined the term <span
class="index-inst" title="canvas">"canvas"</span> as a surface with a
fixed width but infinitely long. In order to cope with printing, we
introduce the notion of the <span class="index-def"
title="page"><em>page</em></span>, which is a rectangular surface
(i.e., fixed width and fixed height. The following sections describe
mechanisms that authors may use to tell user agents how to alter the
<a href="./flowobj.html">visual flow model</a> so that elements are
correctly positioned on individual pages.
<P>Note that a "page" is an abstract rectangle that may or may not
correspond to the size of a physical "sheet" of paper. Once a page has
been formatted, it is the user agent's responsibility to transfer
pages to paper. The transfer may vary in complexity. Some transfer
possibilities include:
<ul>
<li>One page to one sheet of paper.
<li>Two pages to one sheet of paper (double-sided printing).
<li>N (small) pages to one sheet of paper.
<li>One (large) page to N sheets of paper (called <span
class="index-def" title="n-up"><em>n-up</em></span>
printing).
<li>Signatures (a group of pages
printed on a sheet, which when folded and trimmed will appear in their
proper sequence).
<li>Printing to alternate paper trays.
<li>Printing to a file.
</ul>
<P>The transfer mechanism from page to sheet lies beyond the scope of
this specification. However, the user agent does need to target
a certain size and orientation when printing, and this is known as the
<span class="index-def" title="print target"><EM>print
target</EM></span>. The user will typically set set the target size
and orientation in the <EM>Print</EM> dialogue box of the UA. There
will often, but not always, be a correlation between the target size
and the sheet size.
<H3>Page breaks</H3>
<P>Two new properties indicate where the UA should break pages, and on
what page (left or right) the subsequent content should resume. These
new properties have been designed to support the <span
class="index-def" title="print medium|medium, print">PRINT</span>
medium, but can also be applied to other paged media, for example
<span class="index-def" title="projector medium|medium,
projector">PROJECTOR</span> medium.
<P>Page breaks may only occur between lines as formatted on
<a href="#the-canvas">the canvas</a>.
<P>The <span
class="propinst-page-break-before">'page-break-before'</span> and
<span class="propinst-page-break-after">'page-break-after'</span>
properties cause page breaks to occur. A mechanism to suppress page
breaks is under discussion, but the syntax is not yet defined.
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-page-break-before">
<span class="index-def" title="'page-break-before', definition of">
'page-break-before'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>page-break-before</TR>
<TR><TH align="right">Value:<TD>auto | always | left | right</TR>
<TR><TH align="right">Initial:<TD>auto</TR>
<TR><TH align="right">Applies to:<TD>block level and inline elements
except those within tables</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<P>The values mean the following:
<dl>
<dt>auto</dt>
<dd>do a page break before the element only if necessary <SPAN CLASS=change>(e.g. if
there is no remaining space on the current page)</SPAN></dd>
<dt>always</dt>
<dd>always do a page break before the element </dd>
<dt>left</dt>
<dd>do one or two page breaks before the element until a blank left page is reached </dd>
<dt>right</dt>
<dd>do one or two page breaks before the element until a blank right page is reached </dd>
</dl>
<p>If there are conflicts between this property and the <span
class="propinst-page-break-after">'page-break-after'</span> value on
the next element (as formatted on the canvas), the value that results
in the largest number of page breaks will be used.
<div class="example"><P>
<p>For example, a page break may be inserted in the document before
all H1 elements:
<pre>
<STYLE>
H1 { page-break-before: always }
</STYLE>
...
<H1 CLASS=chapter>
...
</pre>
</div>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-page-break-after">
<span class="index-def" title="'page-break-after', definition of">
'page-break-after'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>page-break-after</TR>
<TR><TH align="right">Value:<TD>auto | always | left | right</TR>
<TR><TH align="right">Initial:<TD>auto</TR>
<TR><TH align="right">Applies to:<TD>block level and inline elements
except those within tables</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<P>The values mean the following:
<dl>
<dt>auto</dt>
<dd>do a page break after the element only if necessary <SPAN CLASS=change>(e.g. if
there is no remaining space on the current page)</SPAN></dd>
<dt>always</dt>
<dd>always do a page break after the element </dd>
<dt>left</dt>
<dd>do one or two page breaks after the element until a blank left page is reached </dd>
<dt>right</dt>
<dd>do one or two page breaks after the element until a blank right page is reached </dd>
</dl>
<p>If there are conflicts between this property and the <span
class="propinst-page-break-before">'page-break-before'</span> value on
the previous element (as formatted on the canvas), the value that
results in the largest number of page breaks will be used.
<div class="example"><P>
For example, in HTML, a hard page break may be inserted in the document with
the BR element as follows:
<pre>
<STYLE>
BR.page { page-break-after: always }
</STYLE>
...
<BR CLASS=page>
...
</pre>
</div>
<H3>Page boxes</H3>
<p>Normally, CSS declarations are attached to elements. For example,
to set the font size of a paragraph, a <span
class="propinst-font-size">'font-size'</span> declaration can be
attached to a P element. To accommodate object languages that have no
element that corresponds to the page (e.g., HTML), CSS allows authors
to assign page information through the <span class="index-def"
title="@page">@page</span> rule.
<div class="example"><P>
For example, the following @page rule sets the margins of the page to 2cm.
<pre>
@page { margin: 2cm }
</pre>
</div>
<p>Declarations inside the curly braces of the @page rule apply to the
pages of a document. These declarations are said to be in the <span
class="index-def" title="page-context"><em>page context</em></span>,
and they describe a page into which the elements of the document are
flowed according to the <a href="./flowobj.html">visual flow
model</a>. This is known as the <span class="index-def" title="page
box"><em>page box</em></span> Indeed, the page is a box similar to the
boxes that surround each element and some of the same properties that
affect boxes (see the section on the <a
href="flowobj.html#box-model">box model</a>) apply to pages, namely:
<ul>
<li><span class="propinst-margin-top">'margin-top'</span>
<li><span class="propinst-margin-right">'margin-right'</span>
<li><span class="propinst-margin-bottom">'margin-bottom'</span>
<li><span class="propinst-margin-left">'margin-left'</span>
<li><span class="propinst-margin">'margin'</span>
</ul>
<p>In addition, the page context allows the <span
class="propinst-size">'size'</span> property to set the size of the
page box and the <span class="propinst-marks">'marks'</span> property
to set crop and cross marks.
<P>The diagram below shows the relationships between the sheet, page
box and margin properties.
<PRE>
____________________________
| |<- sheet
| ______________________ |
| | A | |
| | ______________ |<-+-- page box
| | | | | |
| | D | | B | |
| | | | | |
| | | |<--+--+-- page box minus margins
| | | | | |
| | | | | |
| | | | | |
| | |______________| | | A: margin-top
| | C | | B: margin-right
| |______________________| | C: margin-bottom
| | D: margin-left
|____________________________|
</PRE>
<p>Note that while the margins are <EM>outside</EM> the boxes
surrounding <SPAN CLASS=change>elements</SPAN>, they are
<EM>inside</EM> the page boxes.
<div class="note"><P>
<em>In the future, the <a
href="./flowobj.html#border-properties">border properties</a> and <a
href="./flowobj.html#padding-properties">padding properties</a> may
also be supported.
</em>
</div>
<P>The CSS2 rules for collapsing vertical margins apply to page
margins as well (see the section on <a
href="flowobj2.html#collapsing-margin">collapsing margins</a> for more
information). For example, the margin of the upper element on a page
will be collapsed with the page margin.
<p>The page context has no notion of fonts, so 'em' and 'ex' units are
not allowed. Percentage values on the margin properties are relative
to the page box. All other units associated with the respective CSS2
properties are allowed.
<P>Due to negative margin values (either on the page box or on
elements) or <a href="flowobj.html#absolute-positioning">absolute
positioning</a> content may end up outside the page box, but this
content may be cut -- by the UA, by the printer or ultimately by the
paper cutter.
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-size">
<span class="index-def" title="'size', definition of">
'size'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>size</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<length>"><span
class="value-inst-length"><length></span></span> | auto | portrait | landscape</TR>
<TR><TH align="right">Initial:<TD>auto</TR>
<TR><TH align="right">Applies to:<TD>page context</TR>
<TR><TH align="right">Inherited:<TD>N/A</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<P>This property describes the size and orientation of a page box.
Page boxes can be either absolute or relative. Typically, relative
page boxes are used for scalable presentations that make optimal use
of the target size, while absolute page boxes are used only when it is
important to achieve very accurate formatting.
<P>For most printouts, document scalability (i.e., fitting available
sheet sizes) is more important than achieving exact dimensions and
<span class="index-def" title="relative page box|page box, relative"><em>relative page
boxes</em></span> allow style sheet designers to easily achieve this.
<P>Three keyword values describe relative page boxes:
<DL>
<DT>auto
<DD>the page box will be set to the target's size and orientatation.
This is the initial value of the property.
<div class="example"><P>
<pre>
@page {
size: auto;
margin: 10%;
}
</pre>
<p>In the above example, the outer edges of the page box will align
with the target. (Since 'auto' is the initial value on <span
class="propinst-size">'size'</span>, it is normally not necessary to
set this value.) The percentage value on the <span
class="propinst-margin">'margin'</span> property is relative to the
target size so if the target is 21.0cm x 29.7cm (a.k.a. A4), the
margins are 2.10cm and 2.97cm.
</div>
<DT>landscape
<DD>the page box will have the same size as the target, and the normal
direction of print occurs across the largest dimension of the target.
Thus, the target orientation will be ignored.
<DT>portrait
<DD>the page box will have the same size as the target, and the normal
direction of print occurs across the shortest dimension of the target.
Thus, the target orientation will be ignored.
</DL>
<P><span class="index-def" title="absolute page box|page box, absolute"><EM>Absolute
page boxes</em></span> are described with one or two length
values.
<div class="example"><P>
For example:
<PRE>
@page {
size: 8.5in 11in; /* width height */
}
</PRE>
<P>The above example set the width of the page box to be 8.5in and the
height to be 11in. If only one length value is specified, it sets both
the width and height of the page box. Since the page box has no
"parent" percentage values are not allowed on the 'size' property.
<P>The page box in the above example will need a target size of
8.5"x11" or bigger to be printed.
</div>
<P>If the page box does not fit the target, the UA may choose to:
<UL>
<LI>rotate the page box 90° if this will make the page box fit the target
<LI>scale the page to fit the target
</UL>
<P>The UA should consult the user before performing these operations.
<P>When the page box is smaller than the target size, the UA is free
to place the page box anywhere on the sheet. However, it is
recommended that the page box is centered 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.
<div class="note"><P>
<em><strong>Note.</strong>
Typically, 8.5"x11" sheet size will be available in North
America, while printers in other parts of the world are more likely to
have the A4 sheet size available.
</em>
</div>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-marks">
<span class="index-def" title="'marks', definition of">
'marks'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>marks</TR>
<TR><TH align="right">Value:<TD>crop || cross | none</TR>
<TR><TH align="right">Initial:<TD>none</TR>
<TR><TH align="right">Applies to:<TD>page context</TR>
<TR><TH align="right">Inherited:<TD>N/A</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<p>In high-quality printing, various marks are often added outside the
page box. <span class="index-def" title="crop marks"><EM>Crop
marks</EM></span> indicate where the page should be cut and <span
class="index-def" title="cross marks"><EM>cross marks</em></span>
(also known as register marks or registration marks) are used to align
sheets. This property describes what marks should be printed on the
page outside the outer edges of the page box.
<P>Marks are only visible on absolute page boxes. In relative page
boxes the page box will be aligned with the target and the marks
will be outside the printable area.
<P>The size, style and position of cross marks is UA dependent.
<h3>Pseudo-class page boxes</H3>
<P>When printing double-sided documents, the page boxes on left and
right pages should be different. This can be expressed through the
pseudo-class mechanism.
<P>All pages are automatically classified into either the
<span class="index-def" title=":left|pseudo class, :left">:left</span>
or <span class="index-def" title=":right|pseudo class, :right">:right</span>
pseudo-class.
<div class="example"><P>
<PRE>
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
</PRE>
</div>
<P>Adding declarations to the :left or :right pseudo-class does not
influence whether the document comes out of the printer double- or
single-sided (which is outside the scope of this specification). If
different declarations have been given for left and right pages, these
declarations will be honored even if the printer only prints
single-sided. Subsequently, for example, the intended design can be
achieved by copying the single-sided sheets onto double-side sheets.
<P>Whether the first page of a document is :left or :right
depends on the major writing direction of the document and is
outside the scope of this document. However, to force a :left or :right
first page, authors may insert a page break before the element
at the top of the document tree (e.g., the HTML element in HTML).
<div class="note"><P>
<em><strong>Note.</strong>
More named paged (e.g., :first) may be added to future versions of CSS.
</em>
</div>
<h3>Cascading in the page context</H3>
<P>Declarations in the page context cascade just like normal CSS2
declarations.
<div class="example"><P>
Consider the following example:
<PRE>
@page {
margin-left: 3cm;
}
@page :left {
margin-left: 4cm;
}
</PRE>
<P>Due to the higher specificity of the pseudo-class selector (see the
section on <a href="cascase.html#cascading-order">cascading order</a>
for details), the left margin on left pages will be '4cm' and all
other pages (i.e., the right pages) will have a left margin of '3cm'.
</div>
<H2><a name="aural">ACSS: Aural cascading style sheets</a></H2>
<p>Those of us who are sighted are accustomed to visual presentation
of documents, frequently on a bitmapped display. This is not the only
possible presentation method, however. Aural presentation, using a
combination of speech synthesis and 'audio icons', provides an
alternative presentation. This form of presentation is already in
current use by the blind and print-impaired communities.
<p>Often such aural presentation occurs by converting the document to
plain text and feeding this to a 'screen reader' -- software or
hardware that simply reads all the characters on the screen. This
results in less effective presentation than would be the case if the
<em>document structure</em> were retained. A benefit of separating the
content (e.g., the HTML) and the visual presentation (the stylesheet)
is that other types of presentation can also be offered as options
(other stylesheets). Stylesheet properties for aural presentation can
be used together with visual properties (mixed media) or as an aural
alternative to visual presentation.
<p>Besides the obvious accessibility issues for the blind, there are
other large markets for aural presentation:
<dl>
<dt>in-car use
<dd><i>keep your eyes on the road ahead, Jack, and search the web for
recommended hotels in the next town up ahead</i>
<dt>industrial and medical documentation systems (intranets)
<dd><i>my hands and eyes are otherwise occupied with your triple bypass
but I would still like your medication records</i>
<dt>home entertainment
<dd><i>images, headlines, movies are fine on the widescreen TV but I
don't want to read body text off the screen from the couch; speak it
to me (perhaps throuh the 5 speaker home theater set-up)</i>
<dt>the illiterate
<dd><i>I understand everything you say, but I don't read very well</i>
</dl>
<p>Hence, aural or mixed aural/visual presentation is likely to increase
in importance over the next few years. Realizing that the aural
rendering is essentially independent of the visual rendering:
<ul>
<li>Allows orthogonal aural and visual views.
<li>Allows browsers to optionally implement both aural and visual
views to produce truly multimodal documents.
</ul>
<H3>Volume properties</H3>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-volume">
133E
<span class="index-def" title="'volume', definition of">
'volume'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>volume</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<percentage>"><span
class="value-inst-percentage"><percentage></span></span> | silent | x-soft | soft | medium | loud | x-loud</TR>
<TR><TH align="right">Initial:<TD>medium</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>yes</TR>
<TR><TH align="right">Percentage values:<TD>relative to user-specified
mapping</TR>
</TABLE>
</DIV>
<P>The legal range of percentage values is 0% to 100%. Note that '0%'
<strong>does not mean the same as "silent"</strong>. 0% represents the
<em>minimum audible</em> volume level and 100% corresponds to the
<em>maximum comfortable</em> level.
<P>There is a fixed mapping between keyword values and percentages:
<UL>
<li>'silent' = no sound at all, the element is spoken silently
<LI>'x-soft' = '0%'
<LI>'soft' = '25%'
<LI>'medium' = '50%'
<LI>'loud' = '75%'
<LI>'x-loud' = '100%'
</UL>
<P><span class="index-def" title="volume">Volume</span>refers to the
median volume of the waveform. In other words, a highly inflected
voice at a volume of 50 might peak well above that. The overall values
are likely to be human adjustable for comfort, for example with a
physical volume control (which would increase both the 0% and 100%
values proportionately); what this property does is adjust the dynamic
range.
<p>The UA should allow the values corresponding to 0% and
100% to be set by the listener. No one setting is universally
applicable; suitable values depend on the equipment in use (speakers,
headphones), the environment (in car, home theater, library) and
personal preferences. Some examples:
<ul>
<li>A browser for in-car use has a setting for when there is lots
of background noise. 0% would map to a fairly high level and 100% to a
quite high level. The speech is easily audible over the road noise but
the overall dynamic range is compressed. Plusher cars with better
insulation allow a wider dynamic range.
<li>Another speech browser is being used in the home, late at night,
(don't annoy the neighbors) or in a shared study room. 0% is set to
a very quiet level and 100% to a fairly quiet level, too. As with the first
example, there is a low slope; the dynamic range is reduced. The
actual volumes are low here, wheras they were high in the first
example.
<li>In a quiet and isolated house, an expensive hi-fi home theatre
setup. 0% is set fairly low and 100% to quite high; there is wide
dynamic range.
</ul>
<p>The same authors stylesheet could be used in all cases, simply by
mapping the 0 and 100 points suitably at the client side.
<p>If an element has a volume of silent, it is spoken silently. It
takes up the same time as if it had been spoken, including any pause
before and after the element, but no sound is generated. This may be
used in language teaching applications, for example. A pause is
generated for the pupil to speak the element themselves. Note that since
the value of this property is inherited, child elements will also
be silent. Child elements may however set the volume to a non-silent
value and will then be spoken.
<p>To inhibit the speaking of an element and all it's children so that
it takes no time at all (for example, to get the effect of collapsing
and expanding lists) set the <span
class="propinst-display">'display'</span> property to 'none'. When
using the rule <tt>display: none</tt> the element takes up <em>no
time</em>; it is not represented as a pause the length of the spoken
text.
<H3>Pause properties</H3>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-pause-before">
<span class="index-def" title="'pause-before', definition of">
'pause-before'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>pause-before</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<time>"><span
class="value-inst-time"><time></span></span> |
<span class="index-inst" title="<percentage>"><span class="value-inst-percentage"><percentage></span></span></TR>
<TR><TH align="right">Initial:<TD>UA specific</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>see description below</TR>
</TABLE>
</DIV>
<P>This property specifies the pause before an element is spoken. It
may be given in an absolute units (seconds, milliseconds) or as a
relative value, in which case it is relative to the reciprocal of the
<span class="propinst-speech-rate">'speech-rate'</span> property. If
speech-rate is 120 words per minute (i.e., a word takes half a second,
500 milliseconds) then a <span
class="propinst-pause-before">'pause-before'</span> of 100% means a
pause of 500 ms and a <span
class="propinst-pause-before">'pause-before'</span> of 20% means
100ms.
<p>Using relative units gives more robust stylesheets in the face of
large changes in speech-rate and is recommended practice.
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-pause-after">
<span class="index-def" title="'pause-after', definition of">
'pause-after'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>pause-after</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<time>"><span
class="value-inst-time"><time></span></span> |
<span class="index-inst" title="<percentage>"><span class="value-inst-percentage"><percentage></span></span></TR>
<TR><TH align="right">Initial:<TD>UA specific</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>see description below</TR>
</TABLE>
</DIV>
<P>This property specifies the pause after an element is
spoken. Values are specified the same way as <span
class="propinst-pause-before">'pause-before'</span>.
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-pause">
<span class="index-def" title="'pause', definition of">
'pause'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>pause</TR>
<TR><TH align="right">Value:<TD>[<span class="index-inst"
title="<time>"><span
class="value-inst-time"><time></span></span> |
<span class="index-inst" title="<percentage>"><span
class="value-inst-percentage"><percentage></span></span> ]{1,2}</TR>
<TR><TH align="right">Initial:<TD>UA specific</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>see descriptions of <span
class="propinst-pause-before">'pause-before'</span>
and <span class="propinst-pause-after">'pause-after'</span></TR>
</TABLE>
</DIV>
<P>The <span class="propinst-pause">'pause'</span> property is a
shorthand for setting <span
class="propinst-pause-before">'pause-before'</span> and <span
class="propinst-pause-after">'pause-after'</span>. If two values are
given, the first value is <span
class="propinst-pause-before">'pause-before'</span> and the second is
<span class="propinst-pause-after">'pause-after'</span>. If only one
value is given, it applies to both properties.
<div class="example"><P>
Examples:
<PRE>
H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */
H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */
H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */
</PRE>
</div>
<H3>Cue properties</H3>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-cue-before">
<span class="index-def" title="'cue-before', definition of">
'cue-before'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>cue-before</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<url>"><span
class="value-inst-url"><url></span></span> | none</TR>
<TR><TH align="right">Initial:<TD>none</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-cue-after">
<span class="index-def" title="'cue-after', definition of">
'cue-after'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>cue-after</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<url>"><span
class="value-inst-url"><url></span></span> | none</TR>
<TR><TH align="right">Initial:<TD>none</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<P>Auditory icons are another way to distinguish semantic
elements. Sounds may be played before, and/or after the element to
delimit it.
<div class="example"><P>
For example:
<PRE>
A {cue-before: url(bell.aiff); cue-after: url(dong.wav) }
H1 {cue-before: url(pop.au); cue-after: url(pop.au) }
</pre>
</div>
<!--
The <tt>:before</tt> and <tt>:after</tt> pseudo-elements (see
frostings document) could be used to generate this content, rather
than using two special-purpose properties. This would be more
general.</p>
-->
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-cue">
<span class="index-def" title="'cue', definition of">
'cue'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>cue</TR>
<TR><TH align="right">Value:<TD><span
class="propinst-cue-before"><'cue-before'></span> || <span class="propinst-cue-after"><'cue-after'></span></TR>
<TR><TH align="right">Initial:<TD>see individual values</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>
<P>The same sound can be used both before and after, using the
shorthand <span class="propinst-cue">'cue'</span> property.
<div class="example"><P>
The following two rules are equivalent:
<PRE>
H1 {cue-before: url(pop.au); cue-after: url(pop.au) }
H1 {cue: url(pop.au) }
</pre>
</div>
<H3>Mixing properties</H3>
<DIV class="propdef">
<H4 class=propname>
<a name="propdef-play-during">
<span class="index-
3DD5
def" title="'play-during', definition of">
'play-during'</span></a></H4>
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>play-during</TR>
<TR><TH align="right">Value:<TD><span class="index-inst"
title="<url>"><span
class="value-inst-url"><url></span></span> |
mix? repeat? | auto | none</TR>
<TR><TH align="right">Initial:<TD>auto</TR>
<TR><TH align="right">Applies to:<TD>all elements</TR>
<TR><TH align="right">Inherited:<TD>no</TR>
<TR><TH align="right">Percentage values:<TD>N/A</TR>
</TABLE>
</DIV>