- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 21 Feb 2012 13:51:42 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-break
In directory hutz:/tmp/cvs-serv29305
Modified Files:
Overview.html Overview.src.html
Log Message:
Address some comments on the draft, adjusting prose as necessary. Add pictures for varying-width box model, allow scrolling elements to be unbreakable, improve widows/orphans wording, make fragmentation hooks for other specs to use clearer.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-break/Overview.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- Overview.html 4 Feb 2012 18:21:36 -0000 1.18
+++ Overview.html 21 Feb 2012 13:51:39 -0000 1.19
@@ -12,19 +12,19 @@
<body>
<div class=head> <!--begin-logo-->
- <p id=x><a href="http://www.w3.org/"><img alt=W3C height=48
+ <p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1 id=css-fragmentation-module>CSS Fragmentation Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 February
[...1330 lines suppressed...]
<li>avoid break values, <a href="#avoid-break-values"
title="avoid break values"><strong>3.1.</strong></a>
@@ -1439,7 +1453,7 @@
<li>region break, <a href="#region-break"
title="region break"><strong>4.2.</strong></a>
- <li>renderer, <a href="#renderer" title=renderer><strong>5.2.</strong></a>
+ <li>renderer, <a href="#renderer" title=renderer><strong>6.2.</strong></a>
<li>spread break, <a href="#spread-break"
@@ -1448,7 +1462,7 @@
<li>style sheet
<ul>
<li>as conformance class, <a href="#style-sheet"
- title="style sheet, as conformance class"><strong>5.2.</strong></a>
+ title="style sheet, as conformance class"><strong>6.2.</strong></a>
</ul>
<li>widows, <a href="#widows" title=widows><strong>3.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-break/Overview.src.html,v
retrieving revision 1.19
retrieving revision 1.20
diff -u -d -r1.19 -r1.20
--- Overview.src.html 4 Feb 2012 18:21:36 -0000 1.19
+++ Overview.src.html 21 Feb 2012 13:51:39 -0000 1.20
@@ -151,10 +151,11 @@
<p>
Each <dfn>fragmentation break</dfn> (hereafter, <dfn>break</dfn>) ends
- layout in the current <i>fragmenter</i> and causes the remaining content
- of the fragmented flow to be laid out in the next <i>fragmenter</i>, in
- some cases causing a new fragmenter to be generated to hold the deferred
- content.
+ layout of the fragmented box in the current <i>fragmenter</i> and
+ causes the remaining content to be laid out in the next <i>fragmenter</i>,
+ in some cases causing a new fragmenter to be generated to hold the
+ deferred content. When multiple flows are laid out in parallel,
+ fragmentation is performed independently in each flow.
</p>
<p>
@@ -164,6 +165,7 @@
F<sub>2</sub> is the <a href="#break-types">type of break</a> created
by the fragmentation context that split F, not the type of break
normally created by F's own fragmentation context.
+ </p>
<p class="note">
Breaking inline content into lines is another form of fragmentation,
@@ -174,8 +176,8 @@
the 'box-decoration-break' property in [[CSS3BACKGROUND]].
</p>
-<h2 id="breaking-controls">
-Breaking Controls</h2>
+<h2 id="controlling-breaks">
+Controlling Breaks</h2>
<p>
The following sections explain how breaks are controlled in a fragmented
@@ -185,9 +187,9 @@
the subsequent content should resume.
</p>
-<h3 id="explicit-break-properties">
-Breaking before, after or inside elements: the 'break-before', 'break-after', 'break-inside'
-properties.</h3>
+<h3 id="break-controls">
+Forced breaks and keep-together: the 'break-before', 'break-after', 'break-inside'
+properties</h3>
<table class="propdef" summary="property definition">
<tr>
@@ -357,12 +359,13 @@
<p>
User Agents must apply these properties to block-level boxes and to table rows,
table row groups, and—in the case of 'break-inside'—block containers
- in the normal flow of the root element. User agents should also apply these properties
- to floated boxes whose containing block is in the normal flow of the root element.
- User agents may also apply these properties to other boxes.
+ in the normal flow of the root fragmented element. User agents should also apply
+ these properties to floated boxes whose containing block is in the normal flow
+ of the root fragmented element. User agents may also apply these properties to
+ other boxes.
</p>
-<h3 id="breaks-inside">
+<h3 id="widows-orphans">
Breaks inside elements: 'orphans', 'widows'</h3>
<table class="propdef" summary="property definition">
@@ -436,12 +439,13 @@
</table>
<p>
- The 'orphans' property specifies the minimum number of line boxes in a block container
- that must be left at the end of a <i>fragment</i>, unless this is the last <i>fragment</i>
- of the box. The 'widows' property specifies the minimum number of line boxes of
- a block container that must be left at the start of a <i>fragment</i>, unless this
- is the last <i>fragment</i> of the box. Examples of how they are used to control
- fragmentation breaks are given below.
+ The 'orphans' property specifies the minimum number of line boxes in
+ a block container that must be left in a <i>fragment</i> before a
+ fragment break. The 'widows' property specifies the minimum number
+ of line boxes of a block container that must be left in a
+ <i>fragment</i> after a break. Examples of how they are used to
+ control fragmentation breaks are given
+ <a href="widows-orphans-example">below</a>.
</p>
<p>
Only positive integers are allowed as values of 'orphans' and 'widows'. Negative
@@ -453,7 +457,7 @@
simply becomes that all lines in the block must be kept together.
</p>
-<h2 id="breaking-rules">
+<h2 id="break-rules">
Rules for Breaking</h2>
<p>
@@ -469,28 +473,45 @@
Possible Break Points</h3>
<p>
- Fragmentation breaks boxes in the block flow dimension.
- Breaks may occur at the following places:
+ Fragmentation splits boxes in the block flow dimension.
+ In block-and-inline flow, breaks may occur at the following places:
</p>
- <ol>
- <li id="btw-blocks">
- Between sibling block-level boxes (or rows in a table).
- </li>
- <li id="btw-lines">
- Between line boxes inside a block container box (if the lines are
- perpendicular to the fragmenter's block flow direction); or between
- column boxes in a multi-column element or table (if the columns are
- perpendicular to the fragmenter's block flow direciton).
- </li>
- <li id="end-block">
+ <dl>
+ <dt id="btw-blocks">Class 1</dt>
+ <dd>
+ Between sibling boxes of the following types:
+ <dl>
+ <dt>When the block flow direction of the siblings' parent is parallel
+ to that of the fragmentation context</dt>
+ <dd>
+ block-level boxes, table row group boxes, table row boxes, multi-column
+ column row boxes
+ </dd>
+ <dt>When the block flow direction of the siblings' parent is parallel
+ to that of the fragmentation context</dt>
+ <dd>
+ table column group boxes, table column boxes, multi-column column boxes
+ </dd>
+ </dd>
+ <dt id="btw-lines">Class 2</dt>
+ <dd>
+ Between line boxes inside a block container box.
+ </dd>
+ <dt id="end-block">Class 3</dt>
+ <dd>
Between the content edge of a block box and the outer edges of its
child content (margin edges of block-level children or line box
edges for inline-level children) <em>if</em> there is a (non-zero)
gap between them.
- </li>
- </ol>
+ </dd>
+ </dl>
+
+ <p class="note">
+ Other layout models may add breakpoints to the above classes.
+ </p>
+
<p>
- Since breaks are usually only possible between siblings (1), not between
+ Since breaks are only allowed between siblings (1), not between
a child and its parent, a 'break-before' value on a first-child box is
propagated to its parent. Likewise a 'break-after' value on a last-child
box is propagated to its parent.
@@ -501,10 +522,11 @@
in order to avoid losing content off the edge of the page.
</p>
<p>
- The UA is not required to fragment the scrollable contents of elements
- with 'overflow' set to ''auto'' or ''scroll'' and may instead graphically
- slice their contents as necessary to fragment the element. In such cases
- it must treat the element as having ''break-inside: avoid''.
+ The UA is not required to fragment the contents of scrollable elements
+ e.g. those with 'overflow' set to ''auto'' or ''scroll'', and may instead
+ either graphically slice their contents as necessary to fragment the element
+ or treat the element as unbreakable and overflow the fragmenter. In
+ such cases it must treat the element as having ''break-inside: avoid''.
</p>
<h3 id="break-types">
@@ -559,12 +581,13 @@
value</i>.
</p>
<p>
- When multiple <i>forced break values</i> apply, they combine such all types
- of break are honored and no content-empty page boxes are generated, except
- for at most one content-empty page as may be required by the ''right'' or
- ''left'' values to position ensuing content on a right- or left-facing page.
+ When multiple <i>forced break values</i> apply to a single break point,
+ they combine such all types of break are honored and no content-empty
+ page boxes are generated, except for at most one content-empty page as
+ may be required by the ''right'' or ''left'' values to position ensuing
+ content on a right- or left-facing page.
When ''left'' and ''right'' are both combined, the value specified on the
- latest element in document order wins.
+ latest element in the flow wins.
</p>
<p class="note">
A page break must also occur at <a href="#brk-btw-blocks">(1)</a>
@@ -621,13 +644,13 @@
dropped as well, to find still more break points.
</p>
-<h3 id="best-pg-brk">
+<h3 id="best-breaks">
Optimizing Unforced Breaks</h3>
<p>While CSS3 requires that a fragmented flow must break at allowed
break points in order to avoid overflowing the fragmenters in its
- fragmentation context, it does not define <em>which</em> of a set of
- possible <a href="#unforced-breaks">allowed breaks</a> must be taken.
+ fragmentation context, it does not define whether content breaks
+ at a particular <a href="#unforced-breaks">allowed break</a>.
However, it is recommended that user agents observe the following
guidelines (while recognizing that they are sometimes contradictory):
</p>
@@ -637,7 +660,7 @@
to be equally filled with content.</li>
<li>Avoid breaking inside a replaced element.</li>
</ul>
- <div class="example">
+ <div class="example" id="widows-orphans-example">
<p>
Suppose, for example, that the style sheet contains ''orphans : 4'',
''widows : 2'', and there are 20 lines (line boxes) available
@@ -680,8 +703,8 @@
</ul>
</div>
-<h3 id="breaking-boxes">
-Box Model for Breaking</h3>
+<h2 id="breaking-boxes">
+Box Model for Breaking</h2>
<p>
When a flow is fragmented into varying-size fragmenters, the following
@@ -711,21 +734,76 @@
<li><strong class="issue">Option A:</strong>
Fragments of boxes that began on a previous fragmenter must start at
the top of the new fragmenter.
- If this results in multiple floats side-by-side that would otherwise
+ If this results in multiple boxes side-by-side that would otherwise
be staggered (if they were not continuations) in order to fit, the
- floats' widths are reduced (on that fragmenter only) in proportion to
+ elements' widths are reduced (on that fragmenter only) in proportion to
their original widths until they fit. However they are not reduced
past their min-content width.
+ <div class="figure">
+ <pre>First page
+<!-- -->+----------------------------------+
+<!-- -->|########### ......... ############|
+<!-- -->|# # ..... # #|
+<!-- -->|# left # ....... # right #|
+<!-- -->|# float # ......... # float #|
+<!-- -->|# # ........ # #|
+<!-- -->|# # ......... # #|
+<!-- -->|# # ........ # #|
+<!-- -->|#,,,,,,,,,# ......... #,,,,,,,,,,#|
+<!-- -->+----------------------------------+
+<!-- -->
+<!-- -->Second page
+<!-- -->
+<!-- -->+-----------------+
+<!-- -->|#``````##```````#|
+<!-- -->|# left ## right #|
+<!-- -->|# float## float #|
+<!-- -->|# cont.## cont. #|
+<!-- -->|#################|
+<!-- -->|.................|
+<!-- -->|............... |
+<!-- -->|.................|
+<!-- -->|.... |</pre>
+ </div>
</li>
<li><strong class="issue">Option B:</strong>
Fragments of boxes that began on a previous fragmenter must obey
placement rules with the additional constraint that fragments must
not be positioned above the before edge of the fragmenter and must
otherwise be placed as high as possible while not violating other
- constraints. If this results in a float's continuation fragment
+ constraints. If this results in a box's continuation fragment
shifting away from the before edge of the fragmenter, then
''box-decoration-break: clone'', if specified, wraps the fragment
with the box's margin in addition to its padding and border.
+ <div class="figure">
+ <pre>First page
+<!-- -->+----------------------------------+
+<!-- -->|########### ......... ############|
+<!-- -->|# # ..... # #|
+<!-- -->|# left # ....... # right #|
+<!-- -->|# float # ......... # float #|
+<!-- -->|# # ........ # #|
+<!-- -->|# # ......... # #|
+<!-- -->|# # ........ # #|
+<!-- -->|#,,,,,,,,,# ......... #,,,,,,,,,,#|
+<!-- -->+----------------------------------+
+<!-- -->
+<!-- -->Second page
+<!-- -->
+<!-- -->+-----------------+
+<!-- -->|#`````````# .... |
+<!-- -->|# left # ... |
+<!-- -->|# float # .... |
+<!-- -->|# cont. # .... |
+<!-- -->|########### ... |
+<!-- -->|.... #``````````#|
+<!-- -->|... # right #|
+<!-- -->|.... # float #|
+<!-- -->|.... # cont. #|
+<!-- -->|.... ############|
+<!-- -->|............... |
+<!-- -->|....... |</pre>
+ </div>
</li>
</ul>
@@ -762,9 +840,9 @@
</li>
<li><strong class="issue">Option B:</strong>
A block-level continuation fragment may be placed below the top of
- the page if, e.g. it establishes a block formatting context root
- that is placed beside a float and both continue onto a narrower page
- that is too narrow to hold both of them side-by-side.
+ the page if, e.g. it establishes a block formatting context and
+ is placed beside a float and both it and the float continue onto
+ a narrower page that is too narrow to hold both of them side-by-side.
</li>
<li><strong class="issue">Option B:</strong>
Content adjacent to a preceding float on one page may wind up above
Received on Tuesday, 21 February 2012 13:51:44 UTC