Skip to content

Commit b39da95

Browse files
fantasaifantasai
committed
Rewrite page painting order section per discussions on www-style: <http://lists.w3.org/Archives/Public/www-style/2012Jun/0432.html>
1 parent 7172db5 commit b39da95

2 files changed

Lines changed: 130 additions & 80 deletions

File tree

‎css3-page/Overview.html‎

Lines changed: 80 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,14 @@
8787

8888
<h1>CSS Paged Media Module Level 3</h1>
8989

90-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 12 June 2012</h2>
90+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 22 June 2012</h2>
9191

9292
<dl>
9393
<dt>This version:
9494

9595
<dd><a
9696
href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
97-
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-page-20120612/">http://www.w3.org/TR/2012/WD-css3-page-20120612</a></dd> -->
97+
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-page-20120622/">http://www.w3.org/TR/2012/WD-css3-page-20120622</a></dd> -->
9898

9999
<dt>Latest version:
100100

@@ -179,7 +179,7 @@ <h2 class="no-num no-toc" id=status>Status of this Document</h2>
179179
<p>This document contains the <abbr
180180
title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
181181
Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
182-
of 12 June 2012. The Last Call period ends on <span
182+
of 22 June 2012. The Last Call period ends on <span
183183
class=fudge>TBD</span>.</p>
184184

185185
<p>Relative to the previous Last Call Working Draft, this version has
@@ -220,12 +220,12 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
220220
<li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page
221221
Model</a>
222222
<ul class=toc>
223-
<li><a href="#content-outside-box"><span class=secno>4.1.
224-
</span>Content outside the page box</a>
225-
226-
<li><a href="#painting"><span class=secno>4.2. </span>Page Backgrounds
223+
<li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
227224
and Painting Order</a>
228225

226+
<li><a href="#content-outside-box"><span class=secno>4.2.
227+
</span>Content outside the page box</a>
228+
229229
<li><a href="#progression"><span class=secno>4.3. </span>Page
230230
Progression</a>
231231
</ul>
@@ -585,7 +585,67 @@ <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>
585585
instead of ignoring any margins, the containing block is resized to
586586
coincide with the margin edges of the page box.
587587

588-
<h3 id=content-outside-box><span class=secno>4.1. </span>Content outside
588+
<h3 id=painting><span class=secno>4.1. </span> Page Backgrounds and
589+
Painting Order</h3>
590+
591+
<p>When drawing a page of content, the page layers are painted in the
592+
following painting order (bottommost first):
593+
594+
<ol>
595+
<li>page background
596+
597+
<li>document canvas
598+
599+
<li>page borders
600+
601+
<li>document contents
602+
603+
<li>margin boxes
604+
</ol>
605+
606+
<p>In the page model, the page background behaves similar to the root
607+
background: its <a
608+
href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background
609+
painting area</i></a> is the entire page box, including its margins.
610+
Background images are positioned under similar rules as the root element.
611+
By default, they are anchored within the page box's padding area (and
612+
honor ‘<code class=property>background-origin</code>’ if the UA
613+
supports <a href="#CSS3BG"
614+
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>). However if ‘<code
615+
class=property>background-attachment</code>’ is ‘<code
616+
class=css>fixed</code>’ then the image is positioned relative to the
617+
page box including its margins (i.e. the <a
618+
href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background
619+
positioning area</i></a>, like the <i>background painting area</i>, is
620+
the page's margin box).
621+
622+
<p>The document canvas background is drawn as the page box's background:
623+
by default its <i>background painting area</i> is the page box's border
624+
box. (For UAs that support <a href="#CSS3BG"
625+
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>, it follows the ‘<code
626+
class=property>background-clip</code>’ value specified on the root
627+
element.) It remains, however, positioned with respect to the root
628+
element or page area as usual.
629+
630+
<p>The UA may support the <code>z-index</code> property for margin boxes.
631+
With respect to the margin boxes, the document canvas, page borders, and
632+
all of the document contents are treated as a single element with a
633+
<code>z-index</code> value of ‘<code class=css>0</code>’: the margin
634+
boxes never interleave with parts of the document content or between the
635+
content and the canvas. They may only paint in front of the document
636+
content or behind the document canvas. The page background is always
637+
painted underneath everything else. Since the <code>position</code>
638+
property does not apply to margin boxes, <code>z-index</code> always
639+
affects margin boxes as if they were positioned elements regardless of
640+
the <code>position</code> property's value.
641+
642+
<p>The default painting order, or <a
643+
href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree
644+
order", of margin boxes with respect to each other is not specified.
645+
However, the margin boxes are defined to come after the page box and its
646+
contents. <span class=issue>Suggestions here are welcome.</span>
647+
648+
<h3 id=content-outside-box><span class=secno>4.2. </span>Content outside
589649
the page box</h3>
590650

591651
<p>When formatting content in the page model, some content may end up
@@ -649,38 +709,6 @@ <h3 id=content-outside-box><span class=secno>4.1. </span>Content outside
649709
page boxes for them at the end of the document.
650710
</ul>
651711

652-
<h3 id=painting><span class=secno>4.2. </span>Page Backgrounds and
653-
Painting Order</h3>
654-
655-
<p>When drawing a page of content, the page background and borders are
656-
painted first (underneath). Margin-boxes are painted over (on top of) the
657-
page box. The root element then paints the canvas and the document
658-
contents within the page padding box.</p>
659-
660-
<p>The exact painting order of margin boxes is not specified, however it
661-
is <em class=RFC2119>recommended</em> that when margin boxes overlap,
662-
paint order should place center/middle margin boxes on top of corner
663-
margin boxes, which are in turn painted on top of other boxes. More
664-
precisely, in terms of the algorithm in <a
665-
href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> the
666-
exact "tree order" of margin boxes is not defined, but it is recommended
667-
that center/middle boxes be after corner boxes, which should themselves
668-
be after other boxes.</p>
669-
670-
<p>The UA may support the <code>z-index</code> property for margin boxes.
671-
In this case the root element, together with the canvas background and
672-
all of the document contents, are treated as a single element with a
673-
<code>z-index</code> value of ‘<code class=css>0</code>’: the margin
674-
boxes never interleave with parts of the document content, they may only
675-
paint in front of or behind the document content and its canvas. The page
676-
box itself generates a new stacking context and is treated as the parent
677-
of all the margin boxes as well as the document content. In other words,
678-
nothing ever paints behind the page box backgrounds or borders. Since the
679-
<code>position</code> property does not apply to margin boxes,
680-
<code>z-index</code> always affects margin boxes as if they were
681-
positioned elements regardless of the <code>position</code> property's
682-
value. <span class=issue>Mark this at-risk.</span></p>
683-
684712
<h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>
685713

686714
<p>CSS distinguishes between left pages and right pages on all documents,
@@ -1815,12 +1843,8 @@ <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>
18151843
and <a href="#margin-box-dimensions">Computing Margin Box
18161844
Dimensions</a>.
18171845

1818-
<li>The page background covers the entire page box, including the page
1819-
margins. Background images are positioned as for any other box, by
1820-
default anchored within the page box's padding area; however if
1821-
‘<code class=property>background-attachment</code>’ is ‘<code
1822-
class=property>fixed</code>’ then the image is positioned relative to
1823-
the page box including its margins.
1846+
<li>The page background is positioned and painted <a href="#painting">as
1847+
described above</a>.
18241848

18251849
<li>The rules for counter scoping are modified <a
18261850
href=page-based-counters>as described below</a>.
@@ -3641,6 +3665,16 @@ <h3 class=no-num id=normative-references>Normative References</h3>
36413665
</dd>
36423666
<!---->
36433667

3668+
<dt id=CSS3BG>[CSS3BG]
3669+
3670+
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
3671+
href="http://www.w3.org/TR/2012/CR-css3-background-20120417/"><cite>CSS
3672+
Backgrounds and Borders Module Level 3.</cite></a> 17 April 2012. W3C
3673+
Candidate Recommendation. (Work in progress.) URL: <a
3674+
href="http://www.w3.org/TR/2012/CR-css3-background-20120417/">http://www.w3.org/TR/2012/CR-css3-background-20120417/</a>
3675+
</dd>
3676+
<!---->
3677+
36443678
<dt id=MEDIAQ>[MEDIAQ]
36453679

36463680
<dd>Florian Rivoal. <a

‎css3-page/Overview.src.html‎

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,54 @@ <h2 id="page-box-page-rule">The Page Model</h2>
335335
ignoring any margins, the containing block is resized to coincide with the
336336
margin edges of the page box.
337337

338+
<h3 id="painting">
339+
Page Backgrounds and Painting Order</h3>
340+
341+
<p>When drawing a page of content, the page layers are painted in the
342+
following painting order (bottommost first):
343+
344+
<ol>
345+
<li>page background
346+
<li>document canvas
347+
<li>page borders
348+
<li>document contents
349+
<li>margin boxes
350+
</ol>
351+
352+
<p>In the page model, the page background behaves similar to the root background:
353+
its <a href="http://www.w3.org/TR/css3-background/#background-painting-area"><i>background painting area</i></a>
354+
is the entire page box, including its margins.
355+
Background images are positioned under similar rules as the root element.
356+
By default, they are anchored within the page box's padding area
357+
(and honor 'background-origin' if the UA supports [[!CSS3BG]]).
358+
However if 'background-attachment' is ''fixed''
359+
then the image is positioned relative to the page box including its margins
360+
(i.e. the <a href="http://www.w3.org/TR/css3-background/#background-positioning-area"><i>background positioning area</i></a>,
361+
like the <i>background painting area</i>, is the page's margin box).
362+
363+
<p>The document canvas background is drawn as the page box's background:
364+
by default its <i>background painting area</i> is the page box's border box.
365+
(For UAs that support [[!CSS3BG]], it follows the 'background-clip' value specified on the root element.)
366+
It remains, however, positioned with respect to the root element
367+
or page area as usual.
368+
369+
<p>The UA may support the <code>z-index</code> property for margin boxes.
370+
With respect to the margin boxes,
371+
the document canvas, page borders, and all of the document contents
372+
are treated as a single element with a <code>z-index</code> value of '0':
373+
the margin boxes never interleave with parts of the document content
374+
or between the content and the canvas.
375+
They may only paint in front of the document content or behind the document canvas.
376+
The page background is always painted underneath everything else.
377+
Since the <code>position</code> property does not apply to margin boxes,
378+
<code>z-index</code> always affects margin boxes as if they were positioned
379+
elements regardless of the <code>position</code> property's value.
380+
381+
<p>The default painting order,
382+
or <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree order",
383+
of margin boxes with respect to each other is not specified.
384+
However, the margin boxes are defined to come after the page box and its contents.
385+
<span class="issue">Suggestions here are welcome.</span>
338386

339387
<h3 id="content-outside-box">Content outside the page box</h3>
340388

@@ -381,35 +429,6 @@ <h3 id="content-outside-box">Content outside the page box</h3>
381429
for them at the end of the document.</li>
382430
</ul>
383431

384-
<h3 id="painting">Page Backgrounds and Painting Order</h3>
385-
386-
<p>When drawing a page of content, the page background and borders are painted
387-
first (underneath). Margin-boxes are painted over (on top of) the page box.
388-
The root element then paints the canvas and the document contents within the
389-
page padding box.</p>
390-
391-
<p>The exact painting order of margin boxes is not specified, however it is
392-
<em class="RFC2119">recommended</em> that when margin boxes overlap, paint
393-
order should place center/middle margin boxes on top of corner margin boxes,
394-
which are in turn painted on top of other boxes. More precisely, in terms of
395-
the algorithm in <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS2.1
396-
Appendix E</a> the exact "tree order" of margin boxes is not defined, but it
397-
is recommended that center/middle boxes be after corner boxes, which should
398-
themselves be after other boxes.</p>
399-
400-
<p>The UA may support the <code>z-index</code> property for margin boxes. In
401-
this case the root element, together with the canvas background and all of
402-
the document contents, are treated as a single element with a <code>z-index</code>
403-
value of '0': the margin boxes never interleave with parts of the document
404-
content, they may only paint in front of or behind the document content and
405-
its canvas. The page box itself generates a new stacking context and is treated
406-
as the parent of all the margin boxes as well as the document content. In
407-
other words, nothing ever paints behind the page box backgrounds or borders.
408-
Since the <code>position</code> property does not apply to margin boxes,
409-
<code>z-index</code> always affects margin boxes as if they were positioned
410-
elements regardless of the <code>position</code> property's value.
411-
<span class="issue">Mark this at-risk.</span></p>
412-
413432
<h3 id="progression">Page Progression</h3>
414433

415434
<p>CSS distinguishes between left pages and right pages on all documents,
@@ -1272,11 +1291,8 @@ <h2 id="page-properties">Page Properties</h2>
12721291
<li>The used values of 'width' and 'height' have special computation rules
12731292
for page boxes and margin boxes; see <a href="#page-size">Page Size</a>
12741293
and <a href="#margin-box-dimensions">Computing Margin Box Dimensions</a>.
1275-
<li>The page background covers the entire page box, including the page margins.
1276-
Background images are positioned as for any other box, by default anchored
1277-
within the page box's padding area; however if
1278-
'background-attachment' is 'fixed' then the image is positioned relative to
1279-
the page box including its margins.</li>
1294+
<li>The page background is positioned and painted
1295+
<a href="#painting">as described above</a>.
12801296
<li>The rules for counter scoping are modified <a href="page-based-counters">as
12811297
described below</a>.</li>
12821298
<li>As on the '::before' and '::after' pseudo-classes, the ''normal'' value of

0 commit comments

Comments
 (0)