spec/css3-regions/complex-layout-example: edited

Author: astearns

spec/css3-regions/complex-layout-example.txt

@@ -2,10 +2,36 @@ This large example served as the motivational example in the introduction of the
 
 === Intro ===
 
+Displaying the complex layouts of a typical magazine, newspaper, or textbook on the web requires capabilities beyond those available in existing CSS modules. Dynamic magazine layout in particular requires flexibility in placement of boxes for content flows. This is one purpose of the CSS regions module. 
+
+Consider the layout illustrated in this figure. 
+
 {{:spec:css3-regions:intro-example-layout.png?nolink&300|}}
 
+The designer’s intent is to position an image in box A and to flow an article’s content from box 1 through boxes 2, 3 and 4. Note that the second box should have two columns, and the image is not contained in the article. Box 4 should auto-size to render the remainder of the article content that did not fit in the earlier boxes.
+
+The next figure shows an example of the intended visual rendering of the content. 
+
 {{:spec:css3-regions:regions-intro-rendering.png?nolink&300|}}
 
+There is no existing mechanism in CSS to associate the content with these boxes arranged in this manner so that content flows as intended. The CSS regions module properties provide that mechanism.
+
+The following example illustrates how an <article> element is placed in a named flow and how boxes marked with "region1", "region2", "region3" and "region4" IDs become CSS Regions that consume the "article-flow" content. 
+
+<code css>
+<style>
+  article {
+    flow-into: article-flow;
+  }
+
+  #region1, #region2, #region3, #region4 {
+    flow-from: article-flow;
+  }
+</style>
+</code>
+
+The "article-flow" value on the flow-into property directs the article element to the "article-flow" named flow. Setting the flow-from property on block containers to "article-flow" makes them CSS Regions and associates the resulting region chain with the named flow: the flow is "poured" into the region chain. 
+
 === Code ===
 
 This was originally included in Appendix A with this note: