More work on regions visual formatting details

--HG--
extra : rebase_source : bdf2e45342c6982ed5b9bdfb7ac2f51cc6875eee

Author: vhardy

css3-regions/Overview.html

@@ -224,13 +224,13 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 March 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 March 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-regions-20120329/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2012/ED-css3-regions-20120330/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -436,22 +436,41 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
     <ul class=toc>
      <li><a href="#regions-flow-content-box"><span class=secno>7.1.
       </span>The Region Flow Content Box (RFBC)</a>
-
-     <li><a href="#rfbc-width-computation"><span class=secno>7.2. </span>RFCB
-      &lsquo;<code class=property>width</code>&rsquo; resolution</a>
-
-     <li><a href="#rfcb-height-computation"><span class=secno>7.3.
-      </span>RFCB intrinsic &lsquo;<code class=property>height</code>&rsquo;
-      resolution</a>
       <ul class=toc>
-       <li><a href="#rfcb=height-resolution-phase-1"><span class=secno>7.3.1.
-        </span>RFCB intrinsic &lsquo;<code
-        class=property>height</code>&rsquo; resolution, Phase 1</a>
+       <li><a href="#rfbc-width-computation"><span class=secno>7.1.1.
+        </span>RFCB &lsquo;<code class=property>width</code>&rsquo;
+        resolution</a>
+      </ul>
 
-       <li><a href="#rfcb-height-resolution-phase-2"><span class=secno>7.3.2.
-        </span>RFCB &lsquo;<code class=property>height</code>&rsquo;
-        resolution Phase 2</a>
+     <li><a href="#regions-visual-formatting-steps"><span class=secno>7.2.
+      </span>Regions visual formatting steps</a>
+      <ul class=toc>
+       <li><a href="#rfcb-height-computation"><span class=secno>7.2.1.
+        </span>Step 1: RFCB intrinsic &lsquo;<code
+        class=property>height</code>&rsquo; resolution</a>
+        <ul class=toc>
+         <li><a href="#rfcb-intrinsic-height-resolution-phase-1"><span
+          class=secno>7.2.1.1. </span>RFCB intrinsic &lsquo;<code
+          class=property>height</code>&rsquo; resolution, Phase 1</a>
+
+         <li><a href="#rfcb-intrinsic-height-resolution-phase-2"><span
+          class=secno>7.2.1.2. </span>RFCB intrinsic &lsquo;<code
+          class=property>height</code>&rsquo; resolution Phase 2</a>
+        </ul>
+
+       <li><a href="#regions-boxes-layout"><span class=secno>7.2.2.
+        </span>Step 2: regions boxes layout</a>
+
+       <li><a href="#named-flows-layout"><span class=secno>7.2.3. </span>Step
+        3: named flows layout</a>
       </ul>
+
+     <li><a href="#regions-visual-formatting-implementation-note"><span
+      class=secno>7.3. </span>Regions visual formatting: implementation
+      note</a>
+
+     <li><a href="#regions-visual-formatting-examples"><span class=secno>7.4.
+      </span>Regions visual formatting example</a>
     </ul>
 
    <li><a href="#relation-to-document-events"><span class=secno>8.
@@ -2341,14 +2360,15 @@ <h4 id=cssomview-offset-attributes><span class=secno>6.4.2. </span><code
   <h2 id=regions-visual-formatting-details><span class=secno>7.
    </span>Regions visual formatting details</h2>
 
-  <p>Regions are can be laid out by CSS as any other boxes. However,
-   <span>regions</span> get their content from their generated content and
-   the fragment of the flow they layout, instead of getting it from their
-   generated content and descendant content in regular visual formatting.
+  <p>Regions are laid out by CSS and take part in the normal box model and
+   other layouts offered by CSS modules such as flexible boxes (<a
+   href="#CSS3-FLEXBOX"
+   rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>). However,
+   <span>regions</span> layout a fragment of their named flow instead of
+   laying out descendant content as happens with other boxes.
 
-  <p>This section describes the model for rendering <span>region</span>
-   content and uses that model to describe how to resolve
-   <span>regions</span> sizes.
+  <p>This section describes the model for laying out <span>regions</span> and
+   for laying out named flow content into regions.
 
   <h3 id=regions-flow-content-box><span class=secno>7.1. </span>The Region
    Flow Content Box (RFBC)</h3>
@@ -2357,32 +2377,44 @@ <h3 id=regions-flow-content-box><span class=secno>7.1. </span>The Region
 
   <ul>
    <li>The boxes generated by its <code class=css>::before</code> and <code
-    class=css>::after</code> pseudo-elements
+    class=css>::after</code> pseudo-elements, if any.
 
-   <li>The <def>region flow content box (<def>RFBC</def>) which contains the
-    fragment of the flow that the region receives.</def>
+   <li>The anonymous <def>region flow content box (called <def>RFCB</def> in
+    this document) which contains the fragment of the named flow that the
+    region receives.</def>
   </ul>
 
   <div class=figure> <img src="images/RFCB.svg" width=600px>
    <p class=caption>The Region Flow Content Box (RFCB)</p>
   </div>
 
-  <p>Laying out a <span>region</span> box follows the normal processing rules
-   as any other container box.
+  <p>Laying out a <span>region</span> container box follows the normal
+   processing rules as any other <a
+   href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container
+   box</a>.
 
-  <p>The <span>RFCB</span> behaves like a <a
-   href="http://www.w3.org/TR/CSS2/visudet.html#blockwidth">block-level
-   non-replaced element</a> in normal flow with regards to its &lsquo;<code
-   class=property>width</code>&rsquo;.
+  <p>With regards to resolving sizes:
 
-  <p>The <span>RFCB</span> behaves like a <a
-   href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
-   element</a> with regards to its height and computing the
-   <span>RFCB</span>&lsquo;<code class=css>s <a href="">intrinsic height</a>
-   require special processing as described in the following sections.</code>
+  <ul>
+   <li>The <span>RFCB</span> behaves like a <a
+    href="http://www.w3.org/TR/CSS2/visudet.html#blockwidth">block-level
+    non-replaced element</a> with regards to its &lsquo;<code
+    class=property>width</code>&rsquo;.
+
+   <li>The <span>RFCB</span> behaves like a <a
+    href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
+    element</a> with regards to its height. Computing the
+    <span>RFCB</span>&lsquo;<code class=css>s <a href="">intrinsic height</a>
+    require special processing and is the first step in the process <a
+    href="#regions-visual-formatting-steps">detailed later</a>.</code>
+  </ul>
+
+  <h4 id=rfbc-width-computation><span class=secno>7.1.1. </span>RFCB
+   &rsquo;width' resolution</h4>
 
-  <h3 id=rfbc-width-computation><span class=secno>7.2. </span>RFCB
-   &rsquo;width' resolution</h3>
+  <p>At various points in the visual formatting of documents containing
+   regions, the &lsquo;<code class=property>width</code>&rsquo; of RFCBs need
+   to be resolved. In all cases, the resolution is done as follows.
 
   <p>The &lsquo;<code class=property>width</code>&rsquo; of an
    <span>RFCB</span> is based on its <code class=css>min-content</code>,
@@ -2391,31 +2423,53 @@ <h3 id=rfbc-width-computation><span class=secno>7.2. </span>RFCB
    <em>shrink-to-fit</em>) sizes, as <a href="">defined</a> in the CSS
    Writing Modes Module <a href="#CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>).
-   For an <span>RFCB</span>, these sizes are computed based on the entire
-   associated <a href="#named-flow0">named flow</a> content.
+   <strong>These sizes are computed based on the <em>entire</em> associated
+   <a href="#named-flow0">named flow</a> content</strong>.
 
   <p>This is consistent with the <a
    href="http://www.w3.org/TR/css3-break/#varying-size-boxes">box model for
    breaking</a> (<a href="#CSS3-BREAK"
    rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>).
 
-  <p>This means that all <span>regions</span> associated with a <a
+  <p>As a consequence, all <span>regions</span> associated with a <a
    href="#named-flow0">named flow</a> share the same <code
    class=css>min-content</code> and <code class=css>max-content</code>
    measures.
 
-  <h3 id=rfcb-height-computation><span class=secno>7.3. </span>RFCB intrinsic
-   &lsquo;<code class=property>height</code>&rsquo; resolution</h3>
+  <h3 id=regions-visual-formatting-steps><span class=secno>7.2.
+   </span>Regions visual formatting steps</h3>
 
-  <p>The resolution of an RFCB's &lsquo;<code
-   class=property>height</code>&rsquo; requires a two phase process. This
-   process is a <em>conceptual</em> description of what the resolution should
-   yield and implementations should optimize to reduce the number of steps
-   and phases necessary wherever possible.
+  <p>Formatting documents that contain <a href="#named-flow0">named flows</a>
+   laid out in regions is a three step process:
 
-  <h4 id="rfcb=height-resolution-phase-1"><span class=secno>7.3.1.
+  <ul>
+   <li><em>Step 1: RFCB intrinsic height resolution</em>. In this step, the
+    intrinsic heigh of regions flow content boxes is resolved.
+
+   <li><em>Step 2: document and regions layout</em>. In this step, the
+    document content is laid out, including regions and their regions flow
+    content boxes. However, named flow content is not laid out in regions
+    yet.
+
+   <li><em>Step 3: named flow layout</em>. In this step, the content of <a
+    href="#named-flow0">named flows</a> is laid out in their respective
+    <span>region chains</span>.
+  </ul>
+
+  <div class=figure> <img src="images/regions-layout-three-steps.svg"
+   width=600px>
+   <p class=caption>Regions visual formatting steps</p>
+  </div>
+
+  <h4 id=rfcb-height-computation><span class=secno>7.2.1. </span>Step 1: RFCB
+   intrinsic &lsquo;<code class=property>height</code>&rsquo; resolution</h4>
+
+  <p>Conceptually, resolving the intrinsic &lsquo;<code
+   class=property>height</code>&rsquo; of an RFCB is a two phase process.
+
+  <h5 id=rfcb-intrinsic-height-resolution-phase-1><span class=secno>7.2.1.1.
    </span>RFCB intrinsic &lsquo;<code class=property>height</code>&rsquo;
-   resolution, Phase 1</h4>
+   resolution, Phase 1</h5>
 
   <p>The document is laid out with a <a
    href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height
@@ -2424,8 +2478,9 @@ <h4 id="rfcb=height-resolution-phase-1"><span class=secno>7.3.1.
    <span>regions</span>. This phase yields resolved position and sizes for
    all regions and their RFCBs in the document.
 
-  <h4 id=rfcb-height-resolution-phase-2><span class=secno>7.3.2. </span>RFCB
-   &lsquo;<code class=property>height</code>&rsquo; resolution Phase 2</h4>
+  <h5 id=rfcb-intrinsic-height-resolution-phase-2><span class=secno>7.2.1.2.
+   </span>RFCB intrinsic &lsquo;<code class=property>height</code>&rsquo;
+   resolution Phase 2</h5>
 
   <p><a href="#named-flow0">Named flows</a> are laid out in
    <span>regions</span>. For <span>regions</span> whose <a
@@ -2446,13 +2501,18 @@ <h4 id=rfcb-height-resolution-phase-2><span class=secno>7.3.2. </span>RFCB
    class=property>overflow</code>&rsquo; computes to &lsquo;<code
    class=property>visible</code>&rsquo;</a> section and the <a
    href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated
-   cases</a> section).
+   cases</a> section). During this phase, generated content is laid out
+   according to the <a
+   href="file:///Users/vhardy/work/W3C/mercurial/csswg/css3-regions/Overview.html#processing-model">rules</a>
+   described earlier in this document.
 
   <p>This new used &lsquo;<code class=property>height</code>&rsquo; is the
    intrinsic &lsquo;<code class=property>height</code>&rsquo; of the
    <span>RFCB</span> (which behaves like a <a
    href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
-   element</a> with regards to sizing).
+   element</a> with regards to its &lsquo;<code
+   class=property>height</code>&rsquo; in the following steps of the
+   process).
 
   <div class=note>It is important to note that during the Phase 2 of the
    resolution of the RFCB's intrinsic &lsquo;<code
@@ -2464,6 +2524,78 @@ <h4 id=rfcb-height-resolution-phase-2><span class=secno>7.3.2. </span>RFCB
    resolved, the RFCB is treated as block-level replaced element for
    &lsquo;<code class=property>height</code>&rsquo; computation.</div>
 
+  <h4 id=regions-boxes-layout><span class=secno>7.2.2. </span>Step 2: regions
+   boxes layout</h4>
+
+  <p>In this step, the document is laid out according to the normal CSS
+   layout rules. RFCB boxes, as described before, are treated as <a
+   href="http://www.w3.org/TR/CSS2/visudet.html#blockwidth">block-level
+   non-replaced element</a> in normal flow with regards to their &lsquo;<code
+   class=property>width</code>&rsquo; and as <a
+   href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
+   element</a> with regards to their height. The &lsquo;<code
+   class=property>intrinsic</code>&rsquo; height for regions computed in step
+   1 may be used in this step (it may not be needed, for example if the
+   region's computed &lsquo;<code class=property>height</code>&rsquo; is not
+   <code class=css>auto</code>)
+
+  <p>At the end of this step, regions are laid out and ready to receive
+   content from their associated named flows.
+
+  <h4 id=named-flows-layout><span class=secno>7.2.3. </span>Step 3: named
+   flows layout</h4>
+
+  <p>In this final step, the content of named flows is laid out in the
+   <span>regions</span>&lsquo;<code class=css> RFCBs along with the generated
+   content boxes.</code>
+
+  <h3 id=regions-visual-formatting-implementation-note><span class=secno>7.3.
+   </span>Regions visual formatting: implementation note</h3>
+
+  <p>The process for resolving an RFCB&rsquo;s &lsquo;<code
+   class=property>height</code>&rsquo; and the three step process used to
+   layout documents containing regions and named flows are
+   <em>conceptual</em> descriptions of what the layout should yield and
+   implementations should optimize to reduce the number of steps and phases
+   necessary wherever possible.
+
+  <h3 id=regions-visual-formatting-examples><span class=secno>7.4.
+   </span>Regions visual formatting example</h3>
+
+  <p>This section is non-normative.
+
+  <p>This example considers a document where content flows between three
+   regions, and region boxes are intermixed with the normal document content.
+
+  <div class=example>
+   <pre>
+            
+        </pre>
+  </div>
+
+  <p>The following figure shows the visual result for the example
+
+  <div class=figure> <img alt="Regions visual formatting example"
+   src="images/regions-visual-formatting-example.png" width=400px>
+   <p class=caption>Region visual formatting example</p>
+  </div>
+
+  <div class=figure> <img alt="Regions visual formatting example"
+   src="images/intrinsic-height-phase-1.png" width=370px>
+   <p class=caption>Step 1: Resolving intrinsic height (Phase 1)</p>
+  </div>
+
+  <div class=figure> <img alt="Step 1: Resolving intrinsic height (Phase 2)"
+   src="images/intrinsic-height-phase-2.png" width=370px>
+   <p class=caption>Step 1: Resolving intrinsic height (Phase 2)</p>
+  </div>
+
+  <div class=figure> <img
+   alt="Step 2: Layout document and regions without named flows"
+   src="images/regions-visual-formatting-step-2.png" width=370px>
+   <p class=caption>Step 2: Layout document and regions without named flows</p>
+  </div>
+
   <h2 id=relation-to-document-events><span class=secno>8. </span>Relation to
    document events</h2>