- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 04 Aug 2011 21:45:29 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv19248
Modified Files:
Overview.src.html
Log Message:
Incorporated resolutions from the Seattle, July 2011 F2F meeting
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Overview.src.html 18 Jul 2011 23:01:35 -0000 1.12
+++ Overview.src.html 4 Aug 2011 21:45:26 -0000 1.13
@@ -213,21 +213,21 @@
<style>
#article {
- <strong>flow: article_flow;</strong>
+ <strong>flow-into: article_flow;</strong>
}
<region1_sel>, <region2_sel>,
<region3_sel>, <region4_sel> {
- <strong>content: from-flow(article_flow);</strong>
+ <strong>content: flow-from(article_flow);</strong>
}
</style>
</pre>
</div>
<p>The above stylesheet directs the ''#article'' element to a named flow
- called 'article_flow' by setting the 'flow' property. Then, content is
+ called 'article_flow' by setting the 'flow-into' property. Then, content is
"poured" from that named flow into the desired regions by setting the
- regions' 'content' property to ''from-flow(article_flow)''.</p>
+ regions' 'content' property to ''flow-from(article_flow)''.</p>
<h3 id="region-styling">Regions Styling</h3>
@@ -625,7 +625,7 @@
region can be controlled by the “break” properties. Finally, styling that
is unique to the region can be specified by ‘region-style’ rules.</p>
- <h3 id="the-flow-property">The 'flow' property</h3>
+ <h3 id="the-flow-into-property">The 'flow-into' property</h3>
<p>The ‘flow’ property places an element into a named flow or automatically
places it in the appropriate flow (see the <a href=
@@ -711,7 +711,7 @@
sibling of it's ancestor for the purpose of layout in the regions taking
content from this flow.</p>
- <p>The 'flow' property does not affect the CSS cascade and inheritance for
+ <p>The 'flow-into' property does not affect the CSS cascade and inheritance for
the elements on which it is specified. The flow property affects the visual
formatting of elements associated to a named flow and of regions getting
their content from a named flow.</p>
@@ -742,11 +742,11 @@
#region1, #region2 {
width: 200px;
height: 200px;
- content: from-flow(body_text);
+ content: flow-from(body_text);
}
#content {
- flow: body_text;
+ flow-into: body_text;
}
</style>
@@ -795,7 +795,7 @@
<tr>
<th>Value:</th>
- <td>normal | none | from-flow(<ident>)| [ <string> |
+ <td>normal | none | flow-from(<ident>)| [ <string> |
<uri> | <counter> | attr(<identifier>) |
open-quote | close-quote | no-open-quote | no-close-quote ]+ |
inherit</td>
@@ -909,7 +909,7 @@
string is returned. The case-sensitivity of attribute names depends on
the document language.</dd>
- <dt><dfn id="from-flow-name">from-flow(<ident>)</dfn></dt>
+ <dt><dfn id="flow-from-name">flow-from(<ident>)</dfn></dt>
<dd>The element will visually format the available elements in the
named flow with name <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>. If there is no flow with name
@@ -917,7 +917,11 @@
any children visually. Multiple elements may be associated with the
same named flow. See the 'content-order' property description to
understand how content segments are associated with different
- regions.</dd>
+ regions.
+ <br />
+ If the element is not a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a>, the value evaluates to 'normal'. This might be expanded in future versions of the specification
+ to allow other types of containers to receive flow content.
+ </dd>
</dl>
<div class="note">
@@ -929,16 +933,19 @@
<p>In particular, note that the behavior of a '::before' or '::after'
pseudo-element with a 'display' value that makes it an inline element
- combined with a 'content' value set to 'from-flow(<ident>)' is
+ combined with a 'content' value set to 'flow-from(<ident>)' is
undefined.</p>
</div>
- <div class="issue">
- <p><strong>content: from-flow(<low-name>) v.s. from-flow: <flow-name></strong></p>
+ <div class="issue resolved">
+ <p><a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">Third resolution on
+ Regions at the Seattle Face to Face meeting, July 2011</a>
+
+ <p><strong>content: flow-from(<flow-name>) v.s. flow-from: <flow-name></strong></p>
<p><a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">WG Conference Call, CSSWG Minutes and Resolutions 2011-06-15</a>.</p>
- <p>See <a href="http://wiki.csswg.org/spec/css3-regions#contentfrom-flow-flow-name-vs-from-flowflow-name">issue</a></p>
+ <p>See <a href="http://wiki.csswg.org/spec/css3-regions#contentflow-flow-from-name-vs-flow-fromflow-name">issue</a></p>
</div>
<div class="issue">
<p>Should we consider adding the ability to do the following:</p>
@@ -967,11 +974,11 @@
<style>
.quote {
- flow: "quotes";
+ flow-into: "quotes";
}
.pull-out {
- content: from-flow(quotes);
+ content: flow-from(quotes);
content-consume: atomic;
}
</style>
@@ -982,17 +989,20 @@
</ul>
</div>
- <div class="issue">
+ <div class="issue resolved">
+ <p><a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">First resolution on
+ Regions at the Seattle Face to Face meeting, July 2011</a>
+
<p><a href=
"http://lists.w3.org/Archives/Public/www-style/2011May/0521.html">Mailing
list comment</a></p>
- <p>''content: from-flow(<ident>)'' moves an element to a named
+ <p>''content: flow-from(<ident>)'' moves an element to a named
flow. Should we allow the content to be copied to a flow instead of
moved to a flow. For example:</p>
<div class="code">
- #quote_A { flow: "quotes"; content: contents; }
+ #quote_A { flow-into: "quotes"; content: contents; }
</div>
<p>would keep ''#quote_A'' in the normal flow but also copy its content
@@ -1066,7 +1076,7 @@
values are allowed.</dd>
</dl>
- <p>If two or more regions with the same 'from-flow( <ident>)' value
+ <p>If two or more regions with the same 'flow-from( <ident>)' value
for their 'content' property, they are first sorted according to their
'content-order' value. If multiple regions in have the same 'content-order'
value, they are sorted according to the document order.</p>
@@ -1398,11 +1408,11 @@
<pre>
<style>
#article {
- flow: "article";
+ flow-into: "article";
}
#region_1, #region_2 {
- content: from-flow(article);
+ content: flow-from(article);
<strong>region-overflow: break;</strong> /* or none */
<strong>overflow: visible;</strong> /* or hidden */
}
@@ -1421,7 +1431,7 @@
<table style="border: 1px solid gray;width: 100%;" summary=
"Different values for the region-overflow property - Illustration.">
<tr>
- <td>''flow: "article"''</td>
+ <td>''flow-into: "article"''</td>
<td><code class="html">region_1</code> and <code class=
"html">region_2</code></td>
@@ -1495,11 +1505,11 @@
<pre>
<style>
#div_1 {
- <strong>flow: "article_flow";</strong>
+ <strong>flow-into: article_flow;</strong>
}
<region1_sel>, <region2_sel> {
- <strong>content: from-flow(article_flow);</strong>
+ <strong>content: flow-from(article_flow);</strong>
}
/* region style RSA */
@@ -1697,7 +1707,7 @@
readonly attribute <a href=
"http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> <a href="#dom-element-regionoverflow">regionOverflow</a>;
getter <a href="#">Range</a>[] <a href=
-"#dom-element-getregionflowranges">getRegionFlowRanges</a>;
+"#dom-element-getregionflowranges">getRegionFlowRanges()</a>;
};
</pre>
@@ -1766,7 +1776,9 @@
used.
</div>
- <div class="issue">
+ <div class="issue resolved">
+ <p><a href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was created
+ to add the API to the specification draft.</p>
<p>It has been <a href=
"http://lists.w3.org/Archives/Public/www-style/2011May/0379.html">suggested</a>
to add an API to find which region displays an element in a named flow.
@@ -1822,17 +1834,18 @@
<h4 id="css-grid-layout">CSS Grid Layout</h4>
- <p>The CSS Grid Layout specification (see [[CSS3-GRID-LAYOUT]]) defines a
- <a href=
- "http://www.w3.org/TR/css3-grid-layout/#grid-cell-pseudo-element-selector">grid-cell
- pseudo-element</a> selector for grid cells. Consequently, grid cells can be
- a region.</p>
+ <p>The CSS Grid Layout specification (see [[CSS3-GRID-LAYOUT]]) does not define a
+ pseudo-element for grid cells. Consequently, grid cells cannot directly be a region.</p>
+ <p>However, it is possible to simply add a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a> to a grid
+ cell to make it a region.</p>
<p>The following example shows how CSS Grid Layout could be use to create
regions and position them to create the example given in the
introduction.</p>
- <div class="issue">
+ <div class="issue resolved">
+ <p><a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">Issue resolved during the July 2011 Seattle Face to Face Meeting</a>.</p>
+
There is a pending issue in the CSS Grid Layout module draft (section
7.2) about whether or not grid cells should generate a box and have an
associated 'display' property. To completely allow the use-case
@@ -1843,24 +1856,40 @@
<div class="example">
<pre>
<style>
-body:before {
+#grid {
display: grid;
grid-template: "aae"
"bbe"
"cde";
}
-body:before::grid-cell(a) {
+#a { grid-cell: 'a'}
+#b { grid-cell: 'b'}
+#c { grid-cell: 'c'}
+#d { grid-cell: 'd'}
+#e { grid-cell: 'e'}
+
+#a::before {
content: url('illustration.png');
}
-body:before::grid-cell(b),
-body:before::grid-cell(c),
-body:before::grid-cell(d),
-body:before::grid-cell(e) {
- content: from-flow(article_flow);
+#b, #c, #d, #e {
+ content: flow-from(article_flow);
}
</style>
+
+<html>
+ <body>
+ <div id="article">...</div>
+ <div id="grid">
+ <div id="a"/>
+ <div id="b"/>
+ <div id="c"/>
+ <div id="d"/>
+ <div id="e"/>
+ </div>
+ </body>
+</html>
</pre>
</div>
@@ -1886,11 +1915,11 @@
}
body:before::nth-column(even) {
- content: from-flow(article_1_flow);
+ content: flow-from(article_1_flow);
}
body:before::nth-column(odd) {
- content: from-flow(article_2_flow);
+ content: flow-from(article_2_flow);
}
</style>
@@ -1922,11 +1951,11 @@
<pre>
<style>
#article {
- flow: article_flow;
+ flow-into: article_flow;
}
#region_1, #region_2, #region_3, #region_4 {
- content: from-flow(article_flow);
+ content: flow-from(article_flow);
}
#region_1 {
@@ -2003,7 +2032,7 @@
the flow property following <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0583.html">discussion</a> on the mailing list.</li>
<li>Simplified integration discussion on multi-column layout and just state that since
column boxes are not addressable by selectors, they cannot be regions.</li>
- <li>Added specification of how the 'flow' property interacts with object, embed and iframe
+ <li>Added specification of how the 'flow-into' property interacts with object, embed and iframe
elements.</li>
<li>Excluded 'default' from the possible identifier names on the flow property because it
<a href="http://www.w3.org/TR/2006/WD-css3-values-20060919/#keywords">may get reserved</a>.</li>
@@ -2016,6 +2045,20 @@
<li>Renamed NamedFlowEvent to NamedFlowUpdate to avoid having 'Event' in the event name.</li>
<li>Added description for special behavior of iframe/object/embed as
flow source</li>
+ <li>Removed issue on copying content to a named flow instead of moving elements to named
+ flow following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
+ <li>Removed issue on content:flow-from v.s., flow-from property following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
+ <li>Renamed 'flow' to 'flow-into' following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
+ <li>Updated the css3-grid-align example following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a> that
+ it should use <div> instead of grid-cell pseudo elements that were removed
+ from the CSS Grid Layout specification.</li>
+ <li>Renamed 'from-flow' to 'flow-from' following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
+ <li>Limited the applicability of 'content: flow-from()' to block container box and added
+ a note that this might be expanded in the future, following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
+ <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>
+
</ul>
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
Received on Thursday, 4 August 2011 21:45:30 UTC