- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 08 Aug 2011 23:57:00 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv15119
Modified Files:
Overview.src.html
Log Message:
Incorporated comments from Anton Prowse, discussions from July 12, 13 on www-style mailing list
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.13
retrieving revision 1.14
diff -u -d -r1.13 -r1.14
--- Overview.src.html 4 Aug 2011 21:45:26 -0000 1.13
+++ Overview.src.html 8 Aug 2011 23:56:58 -0000 1.14
@@ -15,8 +15,8 @@
"text/css" title="additional spec styles">
<script type="text/javascript" src="style-toggle.js">
</script>
- <script src='http://test.csswg.org/harness/annotate.js#CSS3-REGIONS_DEV' type=
- 'text/javascript'>
+ <!-- <script src='http://test.csswg.org/harness/annotate.js#CSS3-REGIONS_DEV' type=
+ 'text/javascript'> -->
</script>
</head>
@@ -299,12 +299,41 @@
styling</p>
</div>
- <h2 id="css-regions-model">CSS Regions Model</h2>
+ <h2 id="css-regions-concepts">CSS Regions Concepts</h2>
- <h3 id="named-flows">Named flows</h3>
+ <h3 id="regions">Regions</h3>
+
+ <p class="index" title="region" id="region">A region is an element that
+ generates a <a href=
+ "http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
+ box</a> and has an associated <em>named flow</em> (see the 'content'
+ property).</p>
+
+ <p>A <span title="region">region</span>'s intrinsic width is zero.</p>
+
+ <div class="issue">
+ There was a recent discussion on intrinsic sizing of regions which
+ <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0629.html">has not been resolved</a>.
+ </div>
+
+ <h3 id="named-flow">Named Flow</h3>
+
+ <p>A <def name="named-flow">named flow</def> is the ordered sequence of elements
+ associated with a flow with a given identifier. Elements in a named flow are ordered
+ according to the document order.</p>
+
+ <p>Elements are placed into a named flow with the 'flow-into' property.
+ The elements in a named flow are laid out in the chain of regions that
+ are associated with this named flow. The 'content-order' property defines how <span title=
+ "region">regions</span> are organized in to a <span title=
+ "region-chain">region chain</span>.</p>
+
+ <p>Content from a named flow is broken up between regions according to the
+ regions flow breaking rules.</p>
+<!--
<p>In the <a href="http://www.w3.org/TR/CSS21/visuren.html">CSS formatting
- model</a>, elements can be in the <em>normal flow</em> or out of the
+ model</a>, elements and pseudo-elements can be in the <em>normal flow</em> or out of the
<em>(normal) flow</em>. Boxes generated by elements in the normal flow are
subject to their container box's normal layout scheme. Boxes generated by
elements out of the normal flow are subject to a different layout scheme.
@@ -346,28 +375,14 @@
normal layout (block and inline formatting) ([[CSS21]]), table layout
([[CSS21]]), the multi-column layout ([[CSS3COL]]) or the grid layout
([[CSS3-GRID-LAYOUT]]).</p>
+-->
- <h3 id="regions">Regions</h3>
-
- <p class="index" title="region" id="region">A region is an element that
- generates a <a href=
- "http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
- box</a> and has an associated <em>named flow</em> (see the 'content'
- property).</p>
-
- <p>A <span title="region">region</span>'s intrinsic width is zero.</p>
-
- <div class="issue">
- There was a recent discussion on intrinsic sizing of regions which
- <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0629.html">has not been resolved</a>.
- </div>
-
- <h3 id="flow-breaking-rules">Flow breaking rules</h3>
+ <h3 id="regions-flow-breaking-rules">Regions Flow Breaking Rules</h3>
<p>Breaking a named flow across multiple regions is similar to breaking a
- document's content across multiple pages. One important difference is that
+ document's content across multiple pages. One difference is that
page boxes are generated based on the available content whereas regions are
- a predefined set of recipients for the named flow content.</p>
+ a predefined set of recipient boxes for the named flow content.</p>
<h4 id="breaking-a-named-flow-and-determining-the-current-flow-region">
Breaking a named flow and determining the current flow region</h4>
@@ -377,9 +392,9 @@
"region-chain">region chain</span>.</p>
<p>Each region in turn consumes content from its associated <span title=
- "named-flow">named flow</span>. This means that the named flow content is
+ "named-flow">named flow</span>. The named flow content is
positioned in the <dfn title="current-region">current region</dfn> until a
- region break occurs, at which point the <span title=
+ natural or forced region break occurs, at which point the <span title=
"current-region">current region</span> becomes the next one in the
<span title="region-chain">region chain</span>. If there is no more
<span>region</span> in the region chain and there is still content in the
@@ -387,151 +402,7 @@
'region-overflow' property on the last <span>region</span> in the
chain.</p>
- <p>The following sections define where region breaks may happen when
- positioning a named flow across <span title="region">regions</span> in a
- <span title="region-chain">region chain</span>.</p>
-
- <div class="issue">
- <p>The sections on "Allowed region breaks", "Forced region breaks" and
- ""Best" region breaks" are adapted from the [[!CSS21]] specification.
- There is an updated version of these paragraphs in [[CSS3PAGE]] as
- well.</p>
-
- <p>In addition, the CSS Multi-column Layout Module [[CSS3COL]] defines
- unified breaking properties (which this specification extends).</p>
-
- <p>It seems that we should:</p>
-
- <ol>
- <li>Define a common set of rules for breaking content that accounts
- for pages, columns and regions.</li>
-
- <li>Define the properties for breaking content in a single
- specification as well.</li>
-
- <li>Specify how column, page and region breaks interact.</li>
- </ol>
- </div>
-
- <h4 id="allowed-region-breaks">Allowed region breaks</h4>
-
- <p>In a named flow, region breaks can occur at the following places:</p>
-
- <ol>
- <li>In the vertical margin between block-level boxes. When an unforced
- region break occurs here, the <a href="cascade.html#used-value">used
- values</a> of the relevant <a href="box.html#propdef-margin-top" class=
- "noxref"><span class="propinst-margin-top">'margin-top'</span></a> and
- <a href="box.html#propdef-margin-bottom" class="noxref"><span class=
- "propinst-margin-bottom">'margin-bottom'</span></a> properties are set
- to '0'. When a forced region break occurs here, the used value of the
- relevant <a href="box.html#propdef-margin-bottom" class=
- "noxref"><span class=
- "propinst-margin-bottom">'margin-bottom'</span></a> property is set to
- '0'; the relevant <a href="box.html#propdef-margin-top" class=
- "noxref"><span class="propinst-margin-top">'margin-top'</span></a> used
- value may either be set to '0' or retained.</li>
-
- <li>Between <a href="visuren.html#line-box">line boxes</a> inside a
- <a href="visuren.html#block-boxes">block container</a> box.</li>
-
- <li>Between the content edge of a block container box and the outer
- edges of its child content (margin edges of block-level children or
- line box edges for inline-level children) if there is a (non-zero) gap
- between them.</li>
- </ol>
-
- <p>These breaks are subject to the following rules:</p>
-
- <ul>
- <li><strong>Rule A:</strong> Breaking at (1) is allowed only if the
- 'break-after' 'break-before' properties of all the elements generating
- boxes 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>
-
- <li><strong>Rule B:</strong> However, if all of them are 'auto' and a
- common ancestor of all the elements has a 'break-inside' value of
- 'avoid-region', then breaking here is not allowed.</li>
-
- <li><strong>Rule C:</strong> Breaking at (2) is allowed only if the
- number of <a href="visuren.html#line-box">line boxes</a> between the
- break and the start of the enclosing block box is the value of
- 'orphans' or more, and the number of line boxes between the break and
- the end of the box is the value of 'widows' or more.</li>
-
- <li><strong>Rule D:</strong> In addition, breaking at (2) or (3) is
- allowed only if the 'break-inside' property of the element and all its
- ancestors is 'auto'.</li>
- </ul>
-
- <p>If the above does not provide enough break points to keep content from
- overflowing the region boxes, then rules A, B and D are dropped in order to
- find additional breakpoints.</p>
-
- <p>If that still does not lead to sufficient break points, rule C is
- dropped as well, to find still more break points.</p>
-
- <h4 id="forced-region-breaks">Forced region breaks</h4>
-
- <p>A region break <em>must</em> occur at (1) if, among the 'break-after'
- and 'break-before' properties of all the elements generating boxes that
- meet at this margin, there is at least one with the value 'always', 'left',
- or 'right'.</p>
-
- <h4 id="best-region-breaks">"Best" region breaks</h4>
-
- <p>CSS 2.1 does <em>not</em> define which of a set of allowed region
- breaks must be used; CSS 2.1 does not forbid a user agent from
- breaking at every possible break point, or not to break at all. But
- CSS 2.1 does recommend that user agents observe the following
- heuristics (while recognizing that they are sometimes contradictory):</p>
-
- <ul>
- <li>Break as few times as possible.</li>
-
- <li>Avoid breaking inside a replaced element.</li>
- </ul>
-
- <div class="example">
- <p style="display:none">Example(s):</p>
-
- <p>Suppose, for example, that the style sheet contains 'orphans: 4',
- 'widows: 2', and there are 20 lines (<a href=
- "visuren.html#line-box">line boxes</a>) available at the bottom of the
- current region:</p>
-
- <ul>
- <li>If a paragraph at the end of the current region contains 20
- lines or fewer, it should be placed on the current region.</li>
-
- <li>If the paragraph contains 21 or 22 lines, the second part of
- the paragraph must not violate the <a href=
- "page.html#propdef-widows" class="noxref"><span class=
- "propinst-widows">'widows'</span></a> constraint, and so the second
- part must contain exactly two lines</li>
-
- <li>If the paragraph contains 23 lines or more, the first part
- should contain 20 lines and the second part the remaining
- lines.</li>
- </ul>
-
- <p>Now suppose that <a href="page.html#propdef-orphans" class=
- "noxref"><span class="propinst-orphans">'orphans'</span></a> is '10',
- <a href="page.html#propdef-widows" class="noxref"><span class=
- "propinst-widows">'widows'</span></a> is '20', and there are 8 lines
- available at the bottom of the current region:</p>
-
- <ul>
- <li>If a paragraph at the end of the current region contains 8
- lines or fewer, it should be placed on the current region.</li>
-
- <li>If the paragraph contains 9 lines or more, it cannot be split
- (that would violate the orphan constraint), so it should move as a
- block to the next region.</li>
- </ul>
- </div>
-
+<!--
<h3 id="the-visual-formatting-model-and-flows">The Visual Formatting Model
and Flows</h3>
@@ -598,7 +469,7 @@
''attr(<identifier>)'', ''open-quote'', ''close-quote'',
''no-open-quote'' or ''no-close-quote'', they create a <dfn id=
"generated-flow-def">generated flow</dfn> which they format visually.</p>
-
+-->
<h3 id="relation-to-document-events">Relation to document events</h3>
<p><em>This section is non-normative.</em></p>
@@ -719,11 +590,27 @@
<p>The containing block for absolutely positioned descendants of an element
with a specified flow is the region into which the element is rendered.</p>
- <p>All the elements participating inside a named flow are rendered as
- children of an anonymous block that spans across all the regions associated
- with the specified named flow. The elements flowed inside the same named
- flow are taken in document order.</p>
+ <p>The elements flowed inside the same named flow are taken in document order.</p>
+ <p>span title="region">Regions</span> create a new stacking context.</p>
+
+ <div class="note">
+ <p>This note is informative.</p>
+ <p>With regions, an element may be split across multiple regions and these
+ regions may overlap (for example if they are absolutely positioned).
+ So fragments of the same element can overlap each other.
+ Since each element has a single z-index, it would be required to
+ find another mechanism to decide in which order the
+ fragments are rendered. Since each region creates a new stacking
+ context, it is clear that each region is rendered separately and their
+ rendering order follows the regular CSS rendering model.
+ </p>
+ </div>
+
+ <p>
+ Floats or other exclusions (see [[CSS3EXCLUSIONS]]) potentially impact the
+ content laid out in regions, just as for non-regions.</p>
+
<p><span title="region">Regions</span> create a new stacking context, but
inherit the floats that are already defined by the parent context.</p>
@@ -845,17 +732,13 @@
<dd>For ''::before'' and ''::after'' pseudo-elements, the
pseudo-element is not generated. For other elements, the element will
- not get any content for its visual formatting. If the children of the
- element are not directed to a flow referenced by another region, then
- they are not visually formatted. An element with its value set to
- 'none' is said to be <dfn>disconnected</dfn></dd>
+ not get any content for its visual formatting</dd>
<dt><strong>normal</strong></dt>
<dd>Computes to 'none' for the ''::before'' and ''::after''
- pseudo-elements. For other elements, the element uses the flow assigned
- to its children following the <a href="auto-flows">automatic flow
- assignment for the Visual Formatting Model..</a></dd>
+ pseudo-elements. For other elements, the element formats its
+ children as defined by the CSS Visual Formatting Model [[CSS21]].</a></dd>
<dt><strong><string></strong></dt>
@@ -924,6 +807,10 @@
</dd>
</dl>
+ <p>When the 'content' property is set to 'none', 'from-flow', <string>, <uri>,
+ <counter>, 'attr(<identifier>)', open-quote, close-quote, no-open-quote or no-close-quote, the document children of the element are not visually formatted unless they are directed to a named flow
+ referenced by one or more regions.</p>
+
<div class="note">
<p>The 'content' property applies to block-level elements and the
'::before' and '::after' pseudo elements. User agents may apply the
@@ -1326,6 +1213,153 @@
overflow. In that case the 'overflow' property specified on the region
element should be used to determine how to render the overflow.</p>
+
+ <p>The following sections define where region breaks may happen when
+ positioning a named flow across <span title="region">regions</span> in a
+ <span title="region-chain">region chain</span>.</p>
+
+ <h4 id="allowed-region-breaks">Allowed region breaks</h4>
+
+ <div class="issue">
+ <p>The sections on "Allowed region breaks", "Forced region breaks" and
+ ""Best" region breaks" are adapted from the [[!CSS21]] specification.
+ There is an updated version of these paragraphs in [[CSS3PAGE]] as
+ well.</p>
+
+ <p>In addition, the CSS Multi-column Layout Module [[CSS3COL]] defines
+ unified breaking properties (which this specification extends).</p>
+
+ <p>It seems that we should:</p>
+
+ <ol>
+ <li>Define a common set of rules for breaking content that accounts
+ for pages, columns and regions.</li>
+
+ <li>Define the properties for breaking content in a single
+ specification as well.</li>
+
+ <li>Specify how column, page and region breaks interact.</li>
+ </ol>
+ </div>
+
+
+ <p>In a named flow, region breaks can occur at the following places:</p>
+
+ <ol>
+ <li>In the vertical margin between block-level boxes. When an unforced
+ region break occurs here, the <a href="cascade.html#used-value">used
+ values</a> of the relevant <a href="box.html#propdef-margin-top" class=
+ "noxref"><span class="propinst-margin-top">'margin-top'</span></a> and
+ <a href="box.html#propdef-margin-bottom" class="noxref"><span class=
+ "propinst-margin-bottom">'margin-bottom'</span></a> properties are set
+ to '0'. When a forced region break occurs here, the used value of the
+ relevant <a href="box.html#propdef-margin-bottom" class=
+ "noxref"><span class=
+ "propinst-margin-bottom">'margin-bottom'</span></a> property is set to
+ '0'; the relevant <a href="box.html#propdef-margin-top" class=
+ "noxref"><span class="propinst-margin-top">'margin-top'</span></a> used
+ value may either be set to '0' or retained.</li>
+
+ <li>Between <a href="visuren.html#line-box">line boxes</a> inside a
+ <a href="visuren.html#block-boxes">block container</a> box.</li>
+
+ <li>Between the content edge of a block container box and the outer
+ edges of its child content (margin edges of block-level children or
+ line box edges for inline-level children) if there is a (non-zero) gap
+ between them.</li>
+ </ol>
+
+ <p>These breaks are subject to the following rules:</p>
+
+ <ul>
+ <li><strong>Rule A:</strong> Breaking at (1) is allowed only if the
+ 'break-after' 'break-before' properties of all the elements generating
+ boxes 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>
+
+ <li><strong>Rule B:</strong> However, if all of them are 'auto' and a
+ common ancestor of all the elements has a 'break-inside' value of
+ 'avoid-region', then breaking here is not allowed.</li>
+
+ <li><strong>Rule C:</strong> Breaking at (2) is allowed only if the
+ number of <a href="visuren.html#line-box">line boxes</a> between the
+ break and the start of the enclosing block box is the value of
+ 'orphans' or more, and the number of line boxes between the break and
+ the end of the box is the value of 'widows' or more.</li>
+
+ <li><strong>Rule D:</strong> In addition, breaking at (2) or (3) is
+ allowed only if the 'break-inside' property of the element and all its
+ ancestors is 'auto'.</li>
+ </ul>
+
+ <p>If the above does not provide enough break points to keep content from
+ overflowing the region boxes, then rules A, B and D are dropped in order to
+ find additional breakpoints.</p>
+
+ <p>If that still does not lead to sufficient break points, rule C is
+ dropped as well, to find still more break points.</p>
+
+ <h4 id="forced-region-breaks">Forced region breaks</h4>
+
+ <p>A region break <em>must</em> occur at (1) if, among the 'break-after'
+ and 'break-before' properties of all the elements generating boxes that
+ meet at this margin, there is at least one with the value 'always', 'left',
+ or 'right'.</p>
+
+ <h4 id="best-region-breaks">"Best" region breaks</h4>
+
+ <p>CSS 2.1 does <em>not</em> define which of a set of allowed region
+ breaks must be used; CSS 2.1 does not forbid a user agent from
+ breaking at every possible break point, or not to break at all. But
+ CSS 2.1 does recommend that user agents observe the following
+ heuristics (while recognizing that they are sometimes contradictory):</p>
+
+ <ul>
+ <li>Break as few times as possible.</li>
+
+ <li>Avoid breaking inside a replaced element.</li>
+ </ul>
+
+ <div class="example">
+ <p style="display:none">Example(s):</p>
+
+ <p>Suppose, for example, that the style sheet contains 'orphans: 4',
+ 'widows: 2', and there are 20 lines (<a href=
+ "visuren.html#line-box">line boxes</a>) available at the bottom of the
+ current region:</p>
+
+ <ul>
+ <li>If a paragraph at the end of the current region contains 20
+ lines or fewer, it should be placed on the current region.</li>
+
+ <li>If the paragraph contains 21 or 22 lines, the second part of
+ the paragraph must not violate the <a href=
+ "page.html#propdef-widows" class="noxref"><span class=
+ "propinst-widows">'widows'</span></a> constraint, and so the second
+ part must contain exactly two lines</li>
+
+ <li>If the paragraph contains 23 lines or more, the first part
+ should contain 20 lines and the second part the remaining
+ lines.</li>
+ </ul>
+
+ <p>Now suppose that <a href="page.html#propdef-orphans" class=
+ "noxref"><span class="propinst-orphans">'orphans'</span></a> is '10',
+ <a href="page.html#propdef-widows" class="noxref"><span class=
+ "propinst-widows">'widows'</span></a> is '20', and there are 8 lines
+ available at the bottom of the current region:</p>
+
+ <ul>
+ <li>If a paragraph at the end of the current region contains 8
+ lines or fewer, it should be placed on the current region.</li>
+
+ <li>If the paragraph contains 9 lines or more, it cannot be split
+ (that would violate the orphan constraint), so it should move as a
+ block to the next region.</li>
+ </ul>
+ </div>
+
<h3 id="the-region-overflow-property">The region-overflow property</h3>
<table class="propdef" summary="break-after property definition">
@@ -2058,7 +2092,23 @@
<li>Removed issue about API to find which region displays an element in a named flow
since <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was
created to add this API.</li>
-
+ <li>In the 'flow' property description, removed the required wrapper anonymous
+ block as agreed on <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0161.html">mailing list discussion</a>.</li>
+ <li>Reworded the paragraph on how regions create a new stacking context, as
+ per the <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0025.html">mailing list discussion</a></li>.
+ <li>Reworked the "CSS Regions Model" section to now be "CSS Regions Layout". Moved the
+ definition of a region as the first sub-section.</li>
+ <li>Removed the "Visual Formatting Model and Flows" section to match the new Regions Model
+ (now CSS Regions Layout) section.</li>
+ <li>Moved the sections on allowed region breaks, forced region breaks and "best" regions
+ breaks to follow the property definitions to follow the formatting of the paged
+ media section in CSS 2.1.</li>
+ <li>Added note about why regions create a new stacking context following the discussion
+ on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li>
+ <li>Removed sentence about content:none making elements disconnected following the
+ discussion on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li>
+ <li>Removed sentence about content:none making elements disconnected following the
+ discussion on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li>
</ul>
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
Received on Monday, 8 August 2011 23:57:02 UTC