- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 04 Feb 2012 07:19:58 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv6545
Modified Files:
Overview.html Overview.src.html
Log Message:
Addressing bug 15131
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.50
retrieving revision 1.51
diff -u -d -r1.50 -r1.51
--- Overview.html 4 Feb 2012 06:13:11 -0000 1.50
+++ Overview.html 4 Feb 2012 07:19:56 -0000 1.51
@@ -533,20 +533,54 @@
</pre>
- <p>And the following snippet shows an example of elements that will be used
- as regions.
+ <p>And the following snippet shows an example using grid cells to define
+ the region areas:
<pre>
-<div id="region1"></div>
-<div id="region2"></div>
-<div id="region3"></div>
-<div id="region4"></div>
+<style>
+ #page {
+ width: 800px;
+ height: 600px;
+ grid-template: "aaa.e"
+ "....e"
+ "bbb.e"
+ "....e"
+ "c.d.e";
+ grid-rows: 52% 4% 20% 4% 20%;
+ grid-columns: 30% 5% 30% 5% 30%;
+ }
+ #regionA { grid-cell: a; }
+ #region1 { grid-cell: b; }
+ #region2 { grid-cell: c; }
+ #region3 { grid-cell: d; }
+ #region4 { grid-cell: e; }
+</style>
+
+<div id="page">
+ <div id="region1"></div>
+ <div id="region2"></div>
+ <div id="region3"></div>
+ <div id="region4"></div>
+</div>
</pre>
- <p>CSS layout facilities can position and size regions as needed. However,
- there is no existing mechanism to associate the content with the regions
- so that content flows as intended. Figure 2 shows an example of the
- intended visual rendering of the content.
+ <p>Any of the CSS layout facilities can be used to create, position and
+ size regions as needed.
+
+ <div class=note>
+ <p>Using a grid layout (see <a href="#CSS3-GRID-LAYOUT"
+ rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just
+ an example. The example could use a flexible box layout as well, see <a
+ href="#CSS3-FLEXBOX"
+ rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>.</p>
+
+ <p>The CSS regions specification does not define a layout mechanism and is
+ meant to integrate with existing and future CSS layout facilities.</p>
+ </div>
+
+ <p>However, there is no existing mechanism to associate the content with
+ the regions so that content flows as intended. Figure 2 shows an example
+ of the intended visual rendering of the content.
<div class=figure> <img
alt="Sample rendering showing a single thread of text flowing through a chain of regions"
@@ -555,8 +589,18 @@
</div>
<p>The CSS regions module is independent of the layout of regions and the
- mechanism used to create them. However, for simplicity, our example uses
- elements as regions as shown in the previous code snippet.
+ mechanism used to create them. For simplicity, our example uses elements
+ as regions as shown in the previous code snippet.
+
+ <div class=note>
+ <p>While the example uses elements as regions, it is important to note
+ that this is not required for regions. Regions can be pseudo-elements,
+ such as ‘<code class=css>::before</code>’ and ‘<code
+ class=css>::after</code>’. The only requirement for an element or
+ pseudo-element to become a region is that it needs to be subject to CSS
+ styling to receive the ‘<a href="#flow-from"><code
+ class=property>flow-from</code></a>’ property.</p>
+ </div>
<p>The following code example illustrates how the content of the
<code>article</code> element becomes a flow and how the areas ‘<code
@@ -641,6 +685,16 @@
padding: 0px;
}
<strong>}</strong>
+
+
+/*
+ * Style that would apply to region1's normal content but
+ * will not apply to its named flow content.
+ */
+#region1 p {
+ color: red;
+}
+
</style>
</pre>
</div>
@@ -658,6 +712,15 @@
<p class=caption>Different rendering with a different region styling</p>
</div>
+ <p>Finally, note how the ‘<code class=property>red</code>’
+ color specified for <code><p></code> elements under
+ <code>#region1</code> does not apply to content that flows into the
+ region. This specified style does not apply to the named flow content
+ because the <code><p></code> elements in the ‘<code
+ class=property>article</code>’ named flow are not descendants of the
+ <code>#region1</code> element and, consequently, the <code>"#region1
+ p"</code> selector does not apply to these elements.
+
<h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
concepts</h2>
@@ -2161,6 +2224,9 @@
<li>Modified wording about containing block resolution for absolutely
positioned elements in a named flow.
+
+ <li>Modified initial examples as per <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a>
</ul>
<h3 id="changes_from_June_09_2011"><span class=secno>10.2. </span>Changes
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.55
retrieving revision 1.56
diff -u -d -r1.55 -r1.56
--- Overview.src.html 4 Feb 2012 06:13:11 -0000 1.55
+++ Overview.src.html 4 Feb 2012 07:19:56 -0000 1.56
@@ -392,16 +392,47 @@
</pre>
- <p>And the following snippet shows an example of elements that will be used
- as regions.</p>
+ <p>And the following snippet shows an example using grid cells to
+ define the region areas:</p>
<pre>
-<div id="region1"></div>
-<div id="region2"></div>
-<div id="region3"></div>
-<div id="region4"></div>
+<style>
+ #page {
+ width: 800px;
+ height: 600px;
+ grid-template: "aaa.e"
+ "....e"
+ "bbb.e"
+ "....e"
+ "c.d.e";
+ grid-rows: 52% 4% 20% 4% 20%;
+ grid-columns: 30% 5% 30% 5% 30%;
+ }
+ #regionA { grid-cell: a; }
+ #region1 { grid-cell: b; }
+ #region2 { grid-cell: c; }
+ #region3 { grid-cell: d; }
+ #region4 { grid-cell: e; }
+</style>
+
+<div id="page">
+ <div id="region1"></div>
+ <div id="region2"></div>
+ <div id="region3"></div>
+ <div id="region4"></div>
+</div>
</pre>
- <p>CSS layout facilities can position and size regions as needed. However,
+ <p>Any of the CSS layout facilities can be used to create, position and size regions
+ as needed.</p>
+
+ <div class="note">
+ <p>Using a grid layout (see [[CSS3-GRID-LAYOUT]] is just an example.
+ The example could use a flexible box layout as well, see [[CSS3-FLEXBOX]].</p>
+ <p>The CSS regions specification does not define a layout mechanism and is meant
+ to integrate with existing and future CSS layout facilities.</p>
+ </div>
+
+ <p>However,
there is no existing mechanism to associate the content with the regions so
that content flows as intended. Figure 2 shows an example of the intended
visual rendering of the content.</p>
@@ -414,9 +445,18 @@
</div>
<p>The CSS regions module is independent of the layout of regions and
- the mechanism used to create them. However, for simplicity, our example
+ the mechanism used to create them. For simplicity, our example
uses elements as regions as shown in the previous code snippet.</p>
+
+ <div class="note">
+ <p>While the example uses elements as regions, it is important to note that
+ this is not required for regions. Regions can be pseudo-elements,
+ such as '::before' and '::after'. The only requirement for an element
+ or pseudo-element to become a region is that it needs to be subject to
+ CSS styling to receive the 'flow-from' property.</p>
+ </div>
+
<p>The following code example illustrates how the content of the <code>article</code>
element becomes a flow and how the areas 'region1', 'region2', 'region3'
and 'region4' become regions that consume the 'article_flow' content.</p>
@@ -491,6 +531,16 @@
padding: 0px;
}
<strong>}</strong>
+
+
+/*
+ * Style that would apply to region1's normal content but
+ * will not apply to its named flow content.
+ */
+#region1 p {
+ color: red;
+}
+
</style>
</pre>
</div>
@@ -508,6 +558,14 @@
<p class="caption">Different rendering with a different region
styling</p>
</div>
+
+ <p>Finally, note how the 'red' color specified for <code><p></code>
+ elements under <code>#region1</code> does not apply to content that
+ flows into the region. This specified style does not apply to
+ the named flow content because the <code><p></code> elements
+ in the 'article' named flow are not descendants of the <code>#region1</code>
+ element and, consequently, the <code>"#region1 p"</code> selector does
+ not apply to these elements.</p>
<h2 id="css-regions-concepts">CSS regions concepts</h2>
@@ -1846,6 +1904,7 @@
per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 15828</a>.</li>
<li>Modified wording about containing block resolution for absolutely positioned elements in a
named flow.</li>
+ <li>Modified initial examples as per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a></li>
</ul>
Received on Saturday, 4 February 2012 07:20:06 UTC