8000 [css-page] Clarifications to interaction of bleed and page backgrounds · w3c/csswg-drafts@83f4253 · GitHub
Skip to content

Commit 83f4253

Browse files
fantasaifantasai
committed
[css-page] Clarifications to interaction of bleed and page backgrounds
--HG-- extra : rebase_source : 106fb44d5e84f24be7b430bb7f2a3530dfa15f49
1 parent 89fd183 commit 83f4253

3 files changed

Lines changed: 80 additions & 27 deletions

File tree

‎css-page/Overview.html‎

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,48 @@
33
<title>CSS Paged Media Module Level 3</title>
44
<link href=../default.css rel=stylesheet type=text/css>
55
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
6-
<link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css>
6+
<style>
7+
body {
8+
background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
9+
background-attachment: fixed;
10+
color: black;
11+
font-family: sans-serif;
12+
margin: 0 auto;
13+
max-width: 50em;
14+
padding: 2em 1em 2em 70px;
15+
}
16+
:link { color: #00C; background: transparent }
17+
:visited { color: #609; background: transparent }
18+
a[href]:active { color: #C00; background: transparent }
19+
a[href]:hover { background: #ffa }
20+
21+
a[href] img { border-style: none }
22+
23+
h1, h2, h3, h4, h5, h6 { text-align: left }
24+
h1, h2, h3 { color: #005A9C; }
25+
h1 { font: 170% sans-serif }
26+
h2 { font: 140% sans-serif }
27+
h3 { font: 120% sans-serif }
28+
h4 { font: bold 100% sans-serif }
29+
h5 { font: italic 100% sans-serif }
30+
h6 { font: small-caps 100% sans-serif }
31+
32+
.hide { display: none }
33+
34+
div.head { margin-bottom: 1em }
35+
div.head h1 { margin-top: 2em; clear: both }
36+
div.head table { margin-left: 2em; margin-top: 2em }
37+
38+
p.copyright { font-size: small }
39+
p.copyright small { font-size: small }
40+
41+
pre { margin-left: 2em }
42+
dt { font-weight: bold }
43+
44+
ul.toc, ol.toc {
45+
list-style: none;
46+
}
47+
</style>
748
</head>
849
<body class=h-entry>
950
<style scoped type=text/css>
@@ -56,18 +97,20 @@
5697
<div class=head>
5798
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
5899
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
59-
</a></p>
100+
</a>
101+
</p>
60102
<h1 class="p-name no-ref" id=title>CSS Paged Media Module Level 3</h1>
61103
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
62-
<span class=dt-updated><span class=value-title title=20131010>10 October 2013</span></span></span></h2>
104+
<span class=dt-updated><span class=value-title title=20131112>12 November 2013</span></span></span></h2>
63105
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-page/>http://dev.w3.org/csswg/css-page/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-page/>http://www.w3.org/TR/css3-page/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-page/>http://dev.w3.org/csswg/css-page/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/ rel=previous>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a>
64106
<dt>Feedback:</dt>
65107
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-page%5D%20feedback">www-style@w3.org</a>
66108
with subject line
67109
“<kbd>[css-page] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
68110
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Melinda Grant</a> (<span class="p-org org">Hewlett-Packard</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Håkon Wium Lie</a> (<span class="p-org org">Opera Software</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Elika J. Etemad</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:>Simon Sapin</a> (<span class="p-org org">Mozilla, formerly Kozea</span>)<dt>Issue Tracking:<dd><a href=http://www.w3.org/Style/CSS/Tracker/products/13 rel=issues>http://www.w3.org/Style/CSS/Tracker/products/13</a></dl></div>
69111
<div data-fill-with=warning></div>
70-
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.</p>
112+
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
113+
</p>
71114
<hr title="Separator for header">
72115
</div>
73116

@@ -148,6 +191,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
148191

149192

150193

194+
151195
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>Introduction</span><a class=self-link href=#intro></a></h2>
152196

153197
<p>Paged media (e.g., paper, transparencies, photo album pages, pages
@@ -336,14 +380,14 @@ <h3 class="heading settled heading" data-level=3.1 id=painting><span class=secno
336380
</ol>
337381

338382
<p>In the page model, the page background behaves similar to the root background:
339-
its <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a>
340-
is the entire page box, including its margins (regardless of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-clip title=background-clip>background-clip</a>).
383+
its <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a> is the <a data-link-type=dfn href=#bleed-area title="bleed area">bleed area</a>,
384+
which covers the entire page box, including its margins (regardless of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-clip title=background-clip>background-clip</a>).
341385
Page backgrounds are anchored within the page box’s padding area by default
342386
(and honor <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-origin title=background-origin>background-origin</a> if the UA supports <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>).
343387
However if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-attachment title=background-attachment>background-attachment</a> is <span class=css data-link-type=maybe title=fixed>fixed</span>
344388
then the image is positioned relative to the page box including its margins
345-
(i.e. the <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-positioning-area title="background positioning area">background positioning area</a>,
346-
like the <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a>, is the page’s margin box).
389+
(i.e. the <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-positioning-area title="background positioning area">background positioning area</a>
390+
is the page’s margin box).
347391

348392
<p>The document canvas background is drawn as the page box’s background:
349393
by default its <a data-link-spec=css-backgrounds data-link-type=dfn href=http://dev.w3.org/csswg/css-backgrounds-4/#background-painting-area title="background painting area">background painting area</a> covers the page box’s border box,
@@ -1071,7 +1115,7 @@ <h3 class="heading settled heading" data-level=5.2 id=populating-margin-boxes><s
10711115
a specified 'content: normal' on a page-margin box computes to <span class=css data-link-type=maybe title=none>none</span>.
10721116
A page-margin box is <dfn data-dfn-type=dfn data-noexport="" id=generated>generated<a class=self-link href=#generated></a></dfn>
10731117
if and only if the computed value of its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property is not <span class=css data-link-type=maybe title=none>none</span>.
1074-
Otherwise, no box is generated, as for elements with <a class="css css-code" data-link-type=property href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display: none</a>.
1118+
Otherwise, no box is generated, as for elements with <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display: none</a>.
10751119

10761120
<p class=note>
10771121
The <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> property does not apply to page-margin boxes.
@@ -1134,11 +1178,11 @@ <h4 class="heading settled heading" data-level=5.3.1 id=margin-box-terms><span c
11341178
as defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>.
11351179

11361180
<dt><dfn data-dfn-type=dfn data-noexport="" id=min-content-width>min-content width<a class=self-link href=#min-content-width></a></dfn></dt>
1137-
<dd>Whichever of <a data-link-spec=css-sizing data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-measure title="min-content measure">min-content measure</a>
1181+
<dd>Whichever of <a data-link-spec=css-sizing data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-measuremin-measuremin-content-size title="min-content measure">min-content measure</a>
11381182
or <a data-link-spec=css-sizing data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-extent title="min-content extent">min-content extent</a> is the physical width.
11391183

11401184
<dt><dfn data-dfn-type=dfn data-noexport="" id=max-content-width>max-content width<a class=self-link href=#max-content-width></a></dfn></dt>
1141-
<dd>Whichever of <a data-link-spec=css-sizing data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-measure title="max-content measure">max-content measure</a>
1185+
<dd>Whichever of <a data-link-spec=css-sizing data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-measuremax-measuremax-content-size title="max-content measure">max-content measure</a>
11421186
or <a data-link-spec=css-sizing data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-extent title="max-content extent">max-content extent</a> is the physical width.
11431187

11441188
<dt><dfn data-dfn-type=dfn data-noexport="" id=outer-min-width>outer min width<a class=self-link href=#outer-min-width></a></dfn></dt>
@@ -1937,7 +1981,7 @@ <h3 class="heading settled heading" data-level=7.2 id=page-marks-bleed><span cla
19371981

19381982
<p>The <a class=property data-link-type=propdesc href=#propdef-marks title=marks>marks</a> property from <a data-biblio-type=informative data-link-type=biblio href=#css2 title=css2>[CSS2]</a> is part of this specification.
19391983

1940-
<table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-marks>marks<a class=self-link href=#propdef-marks></a></dfn><tr><th>Value:<td>[ crop || cross ] | none<tr><th>Initial:<td>none<tr><th>Applies to:<td>page context<tr><th>Inherited:<td>no<tr><th>Media:<td>visual, paged<tr><th>Computed value:<td>as specified</table>
1984+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-marks>marks<a class=self-link href=#propdef-marks></a></dfn><tr><th>Value:<td>[ crop || cross ] | none<tr><th>Initial:<td>none<tr><th>Applies to:<td>page context<tr><th>Inherited:<td>no<tr><th>Media:<td>visual, paged<tr><th>Computed value:<td>as specified</table>
19411985
<p>This property adds crop and/or cross marks to the document. Crop
19421986
marks indicate where the page should be cut. Cross marks are used to
19431987
align sheets.
@@ -1951,10 +1995,12 @@ <h3 class="heading settled heading" data-level=7.2 id=page-marks-bleed><span cla
19511995
<pre>@page { marks: crop cross }
19521996
</pre></div>
19531997

1954-
<table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-bleed>bleed<a class=self-link href=#propdef-bleed></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a><tr><th>Initial:<td>6pt<tr><th>Applies to:<td>page context<tr><th>Inherited:<td>no<tr><th>Media:<td>visual, paged<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>refer to width of page box</table>
1955-
<p>This property specifies the extent of the page bleed area outside
1956-
the page box. This property only has effect if crop marks are enabled.
1998+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-bleed>bleed<a class=self-link href=#propdef-bleed></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a><tr><th>Initial:<td>6pt<tr><th>Applies to:<td>page context<tr><th>Inherited:<td>no<tr><th>Media:<td>visual, paged<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>refer to width of page box</table>
1999+
<p>This property specifies the extent of the page <dfn data-dfn-type=dfn data-noexport="" id=bleed-area>bleed area<a class=self-lin A0B2 k href=#bleed-area></a></dfn> outside the page box;
2000+
in other words the extent beyond the page box at which the page rendering is clipped.
2001+
This property only has effect if crop marks are enabled.
19572002

2003+
<p class=issue id=issue-2a27e9ba><a class=self-link href=#issue-2a27e9ba></a>Can bleed be negative?
19582004

19592005
<h3 class="heading settled heading" data-level=7.3 id=renderingpages><span class=secno>7.3 </span><span class=content>Rendering page boxes that do not fit a page sheet</span><a class=self-link href=#renderingpages></a></h3>
19602006

@@ -1988,7 +2034,7 @@ <h3 class="heading settled heading" data-level=7.4 id=positioning-page-box><span
19882034
</ul>
19892035

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

19932039
<h2 class="heading settled heading" data-level=8 id=page-breaks><span class=secno>8 </span><span class=content>
19942040
<span id=pg-br-before-after></span>
@@ -2069,7 +2115,7 @@ <h3 class="heading settled heading" data-level=8.1 id=using-named-pages><span cl
20692115
When specified on the root element,
20702116
the used value for <span class=css data-link-type=maybe title=auto>auto</span> is the empty string.
20712117

2072-
<!-- See http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#named3 -->
2118+
20732119

20742120
<p>
20752121
Because a previous version of this specification
@@ -2600,6 +2646,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
26002646
<li>available width, <a href=#available-width title="section 5.3.1">5.3.1</a>
26012647
<li>:blank, <a href=#valuedef-blank title="section 4.2.3">4.2.3</a>
26022648
<li>bleed, <a href=#propdef-bleed title="section 7.2">7.2</a>
2649+
<li>bleed area, <a href=#bleed-area title="section 7.2">7.2</a>
26032650
<li>containing block, <a href=#containing-block title="section 5.3.1">5.3.1</a>
26042651
<li>Content-empty page, <a href=#content-empty title="section 3.2">3.2</a>
26052652
<li>end page value, <a href=#end-page-value title="section 8.1">8.1</a>
@@ -2650,21 +2697,21 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
26502697

26512698
<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
26522699
Property index</span><a class=self-link href=#property-index></a></h2>
2653-
<div data-fill-with=property-index><table class=proptable><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Computed value<tbody>
2700+
<div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Computed value<tbody>
26542701
<tr><th scope=row><a data-property="">size</a><td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]<td>auto<td>page context<td>N/A<td>N/A<td>paged<td>specified value
26552702
<tr><th scope=row><a data-property="">marks</a><td>[ crop || cross ] | none<td>none<td>page context<td>no<td><td>visual, paged<td>as specified
26562703
<tr><th scope=row><a data-property="">bleed</a><td>&lt;length&gt;<td>6pt<td>page context<td>no<td>refer to width of page box<td>visual, paged<td>as specified
26572704
<tr><th scope=row><a data-property="">page</a><td>auto | &lt;identifier&gt;<td>auto<td>boxes that create class A break points<td>no (but see prose)<td>N/A<td>paged<td>specified value</table></div>
26582705

26592706

2660-
</div><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><p class=issue>
2707+
</div><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>
26612708
In CSS 2.1, both the page box and page area are simple rectangles.
26622709
Neither is a CSS box with margins, borders, and padding.
26632710
This CSS box should be distinct from the page box and page area,
26642711
which would be its margin area and content area, respectively.
26652712
Naming ideas?
26662713

2667-
<a href=#issue-328fb1d0> ↵ </a><div class=issue>
2714+
<a href=#issue-328fb1d0> ↵ </a></div><div class=issue>
26682715
<p>It would be useful if media queries could respond at least
26692716
to sizes specified on an unqualified @page.
26702717

@@ -2681,4 +2728,6 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
26812728
</p><a href=#issue-a5b67d5f> ↵ </a></div>
26822729

26832730

2684-
</div>
2731+
<div class=issue>Can bleed be negative?
2732+
2733+
<a href=#issue-2a27e9ba> ↵ </a></div></div>

0 commit comments

Comments
 (0)