csswg/css3-regions Overview.src.html,1.13,1.14

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&nbsp;2.1 does <em>not</em> define which of a set of allowed region
-    breaks must be used; CSS&nbsp;2.1 does not forbid a user agent from
-    breaking at every possible break point, or not to break at all. But
-    CSS&nbsp;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(&lt;identifier&gt;)'', ''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>&lt;string&gt;</strong></dt>
 
@@ -924,6 +807,10 @@
         </dd>
     </dl>
 
+    <p>When the 'content' property is set to 'none', 'from-flow', &lt;string&gt;, &lt;uri&gt;,
+        &lt;counter&gt;, 'attr(&lt;identifier&gt;)', 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&nbsp;2.1 does <em>not</em> define which of a set of allowed region
+    breaks must be used; CSS&nbsp;2.1 does not forbid a user agent from
+    breaking at every possible break point, or not to break at all. But
+    CSS&nbsp;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