forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprint.src
More file actions
557 lines (448 loc) · 20.1 KB
/
Copy pathprint.src
File metadata and controls
557 lines (448 loc) · 20.1 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: print.src,v 1.8 1997-09-24 22:14:02 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Printing with style sheets</TITLE>
<LINK rel="next" href="sample.html">
<LINK rel="previous" href="aural.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center"><a name="the-page">Printing with style sheets</a></H1>
<p>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.
<H2>Background to printing</H2>
<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.
<H2>The page model</H2>
<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 (called <span
class="index-def" title="n-up"><em>n-up</em></span>
printing).
<li>One (large) page to N x M sheets of paper (called "tiling").
<li>Signatures (a group of pages
printed on a sheet, which, when folded and trimmed like a book, 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.
<H2>Page breaks</H2>
<P>Four properties indicate where the UA may or should break pages, and on
what page (left or right) the subsequent content should resume. These
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.
<h3>Page break properties</h3>
<H4><a name="propdef-page-break-before">'page-break-before'</a></H4>
<!-- #include src=properties/page-break-before.srb -->
<!--
<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>
-->
<H4><a name="propdef-page-break-after">'page-break-after'</a></H4>
<!-- #include src=properties/page-break-after.srb -->
<P>The values mean the following:
<dl>
<dt><strong>auto</strong></dt>
<dd>neither force nor forbid a page break before (resp., after) the element
<dt><strong>always</strong></dt>
<dd>always do a page break before, resp. after the element </dd>
<dt><strong>avoid</strong></dt>
<dd>avoid a page break before, resp. after the element.
<dt><strong>left</strong></dt>
<dd>do one or two page breaks before, resp. after the element until a
blank left page is reached </dd>
<dt><strong>right</strong></dt>
<dd>do one or two page breaks before, resp. after the element until a
blank right page is reached </dd>
</dl>
<p>See <a href="#allowed-page-breaks">"Allowed page breaks"</a> below
for the exact rules on how these values cause or avoid a page break.
<H4><a name="propdef-orphan">'orphan'</a></H4>
<!-- #include src=properties/orphan.srb -->
<H4><a name="propdef-widow">'widow'</a></H4>
<!-- #include src=properties/widow.srb -->
<P>These properties specify the minimum number of lines of a paragraph
that must be left at the bottom (<span
class="propinst-orphan">'orphan'</span>) and top (<span
class="propinst-widow">'widow'</span>) of a page.
<h3><a name="allowed-page-breaks">Allowed page breaks</a></h3>
<p>Page breaks cannot occur inside positioned elements. In the main
flow, page breaks can occur at the following places:
<ol>
<li>
In the vertical margin between block-level elements. When a page
break occurs here, the margin disappears (becomes zero).
<li>
Between lines inside a block-level element.
</ol>
<p>These breaks are subject to the following rules:
<ol style="list-style: upper-roman">
<li>
Breaking at (1) is only allowed if the <span
class="propinst-break-after">'break-after'</span> and <span
class="propinst-break-before">'break-before'</span> properties of all
the elements that meet at this margin allow it, which is when at least
one of them has the value 'always', 'left', or 'right', or when all of them are
'auto'.
<li>
Breaking at (2) is only allowed if the number of lines between the
break and the start of the block is <span
class="propinst-orphan">'orphan'</span> or more, and the number of
lines between the break and the end of the block is <span
class="propinst-widow">'widow'</span> or more.
</ol>
<p>There is an exception to both rules:
<ol style="list-style: upper-roman">
<li value=3>
Breaking at (1) and (2) is also allowed if, between the last page break
and the next one that would be allowed under (A) and (B), there is so
much content that it can't fit on a page.
</ol>
<h3>Forced page breaks</h3>
<p>A page break <em>must</em> occur at (1) if, among the <span
class="propinst-break-after">'break-after'</span> and <span
class="propinst-break-before">'break-before'</span> properties of all
the elements that meet at this margin, there is at least one with the value
'always', 'left', or 'right'.
<h3>"Best" page breaks</h3>
<p>CSS does <em>not</em> define which of the page break allowed by
(A), (B) or (C) should be used. In particular, CSS does not forbid a
UA from breaking at every possible break point, or not to break at all. But
CSS does recommend that UAs observe the following heuristics (while
recognizing that they are sometimes contradictory):
<ul>
<li>
Break as few times as possible.
<li>
Make all pages that don't end with a forced break appear to have about
the same height.
<li>
Avoid breaking inside a block that has a border.
<li>
Avoid breaking inside a table.
<li>
Avoid breaking inside a floating element
</ul>
<div class="example"><P>
Suppose, for example, that <span
class="propinst-orphan">'orphan'</span>=4, <span
class="propinst-widow">'widow'</span>=2, and
there are 20 lines available at the bottom of the current page:
<ul>
<li>If the paragraph contains 20 lines or fewer, it should be placed on
the current page.
<li>If the paragraph contains 21 - 22 lines, the second part of the
paragraph must not violate the <span
class="propinst-widow-desc">'widow'</span> constraint, and so the
second part should contain exactly two lines
<li>If the paragraph contains 23 lines or more, the first part should
contain 20 lines and the second part the remaining lines.
</ul>
<P>Now suppose that <span class="propinst-orphan">'orphan'</span>=10,
<span class="propinst-widow">'widow'</span>=20,
and there are 8 lines available at the bottom of the current page:
<ul>
<li>If the paragraph contains 8 lines or less, it should be placed on
the current page.
<li>If the paragraph contains 9 or more lines, it cannot be split, so it
should move to the next page as a whole.
</ul>
</div>
<H2>Page boxes: the @page rule</H2>
<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:
<img src="./images/page-info.gif" alt="Illustration of sheet, page box, and margin properties.">
<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.
<h3>@page properties</h3>
<H4><a name="propdef-size">'size'</a></H4>
<!-- #include src=properties/size.srb -->
<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 orientation.
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>
<H4><a name="propdef-marks">'marks'</a></H4>
<!-- #include src=properties/marks.srb -->
<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.
<h2>Pseudo-class page boxes</H2>
<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>
<h2>Cascading in the page context</H2>
<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="cascade.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>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->