- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 09 Aug 2011 21:17:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv19537
Modified Files:
Overview.src.html
Log Message:
Incorporated changes from discussions on the mailing list and with co-editor
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Overview.src.html 8 Aug 2011 23:56:58 -0000 1.14
+++ Overview.src.html 9 Aug 2011 21:17:10 -0000 1.15
@@ -229,7 +229,7 @@
"poured" from that named flow into the desired regions by setting the
regions' 'content' property to ''flow-from(article_flow)''.</p>
- <h3 id="region-styling">Regions Styling</h3>
+ <h3 id="region-styling">Regions styling</h3>
<p>Region styling allows content to be styled depending on the region it
flows into. It is a form of context-based styling, similar to <a href=
@@ -299,7 +299,7 @@
styling</p>
</div>
- <h2 id="css-regions-concepts">CSS Regions Concepts</h2>
+ <h2 id="css-regions-concepts">CSS regions concepts</h2>
<h3 id="regions">Regions</h3>
@@ -316,7 +316,7 @@
<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>
+ <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
@@ -377,7 +377,7 @@
([[CSS3-GRID-LAYOUT]]).</p>
-->
- <h3 id="regions-flow-breaking-rules">Regions 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 difference is that
@@ -480,7 +480,7 @@
"http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">event's
bubble and capture phases</a> happen following the document tree order.</p>
- <h2 id="properties-and-rules">Properties and Rules</h2>
+ <h2 id="properties-and-rules">Properties and rules</h2>
<p>The main CSS Regions module properties are the ‘flow’ and 'content'
properties. The ‘flow’ property places an element into a specific named
@@ -508,7 +508,7 @@
<tr>
<th>Name:</th>
- <td><dfn id="flow2">flow</dfn></td>
+ <td><dfn id="flow-into">flow-into</dfn></td>
</tr>
<tr>
@@ -592,7 +592,11 @@
<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>
+ <p><span title="region">Regions</span> create a new stacking context.</p>
+
+ <p>
+ Floats or other exclusions (see [[CSS3EXCLUSIONS]]) potentially impact the
+ content laid out in regions, just as for non-regions.</p>
<div class="note">
<p>This note is informative.</p>
@@ -606,45 +610,56 @@
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>
- <div class="example">
- <p>In the following example, the inline content coming from the
- <code class="html">content</code> <span title="named-flow">named
- flow</span> wraps around the <code class="html">#float</code> box.</p>
- <pre>
-<style>
-#float {
- float: left;
- width: 100px;
- height: 300px;
-}
+ <div class="example">
+ <p>In the following example, the inline content coming from the
+ <code class="html">body_text</code> <span title="named-flow">named
+ flow</span> wraps around the <code class="html">#float</code> box.</p>
+ <pre>
+ <style>
+ #float {
+ float: left;
+ width: 100px;
+ height: 300px;
+ }
-#region1, #region2 {
- width: 200px;
- height: 200px;
- content: flow-from(body_text);
-}
+ #region1, #region2 {
+ width: 200px;
+ height: 200px;
+ content: flow-from(body_text);
+ }
-#content {
- flow-into: body_text;
-}
-</style>
+ #content {
+ flow-into: body_text;
+ }
+ </style>
-<div id="float"></div>
+ <div id="float"></div>
-<div id="region1"></div>
-<div id="region2"></div>
+ <div id="region1"></div>
+ <div id="region2"></div>
-<div id="content"></div>
-</pre>
+ <div id="content"></div>
+ </pre>
+ </div>
+
+ <div class="note">
+ <p>This note is informative.</p>
+ <p>It is important to understand that the 'flow-into' property moves an
+ element into the flow and the interplay with selectors should be understood.
+ For example, </p>
+ <pre>table {flow-into: table-content}</pre>
+ <p>will
+ move all tables in the 'table-content' named flow. However, the</p>
+ <pre>table * {flow-into: table-content}</pre>
+ <p>selector will move all
+ the descendants of table elements in the 'table-content' named flow. This will make all
+ the descendants of table elements siblings in the named flow. Having the descendants become siblings
+ in the named flow results
+ in a different processing (see the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS 2.1's anonymous table objects</a>). This note illustrates how authors must exercise caution when choosing a particular
+ selector for setting the 'flow-into' property to avoid unintended results.</p>
</div>
+
<p>
@@ -894,7 +909,7 @@
<p>would keep ''#quote_A'' in the normal flow but also copy its content
to the ''quotes'' flow. This essentially clones the node and raises
- questions regarding DOM access, CSSOM View and the computed style.</p>
+ questions regarding DOM access, CSSOM view and the computed style.</p>
</div>
<h3 id="the-content-order-property">The 'content-order' property</h3>
@@ -1662,7 +1677,36 @@
participate in the <a href="CSS2.1%20section%206.4.1">CSS Cascading
order</a> as defined in [[!CSS21]].</p>
- <h2 id="cssom_view_and_css_regions">CSSOM View and CSS Regions</h2>
+ <h2 id="pseudo_elements">Pseudo-elements</h2>
+
+ <p>It can be useful to visually mark the content to highlight
+ that content is flowing from region to region. For example, a marker such
+ as <em>'continues on page 3'</em> clearly indicates, at the end of a
+ region, that there is more content in the flow which can be found
+ on 'page 3' (in this example, the notion of page is application specific).</p>
+
+ <p>The '::region-before' and
+ '::region-after' pseudo-elements let content authors mark the beginning and
+ end of a region with such markers.</p>
+
+ <p>The '::region-before' and '::region-after' pseudo-element are distinct from the
+ '::before' and '::after' pseudo elements (see [[!SELECT]]) in the way they are
+ processed, as explained in the next section.</p>
+
+ <h3 id="region-markers-processing-model">Region markers processing model</h3>
+
+ <p>The '::region-before' and '::region-after' pseudo-elements are laid out prior
+ to laying out other content in the region. They are used as exclusions
+ (see [[CSS3EXCLUSIONS]]) when laying out the content.</p>
+
+
+ <h3 id="the-region-before-and-region-after-pseudo-elements">The ::region-before and ::region-after pseudo-elements</h3>
+
+ <p>The '::region-before' and '::region-after' pseudo-elements have the same definition
+ as the <a href="http://www.w3.org/TR/css3-selectors/#gen-content">'::before' and '::after'</a> pseudo-elements from the CSS3 Selectors specification ([[!SELECT]]). However, their processing model is
+ different, as explained in the previous section.</p>
+
+ <h2 id="cssom_view_and_css_regions">CSSOM view and CSS regions</h2>
<p>Since content may flow into multiple regions, authors need a way to
determine if there are enough regions to flow all the content from a named
@@ -1820,15 +1864,14 @@
as suggested by Alex.</p>
</div>
- <h3 id="region-flow-layout-events">Region Flow Layout Events</h3>
+ <h3 id="region-flow-layout-events">Region flow layout events</h3>
<p>Region <a href="http://www.w3.org/TR/DOM-Level-3-Events/#glossary-event">Event Targets</a>
- dispatch <code class="idl">NamedFlowUpdate</code>s when there is a possible layout change of their named flow
- segment.</p>
+ dispatch <code class="idl">regionLayoutUpdate</code> events when there is a possible layout change of their named flow segment.</p>
<table class="event-desc" border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0">
<tbody><tr class="assert must"><th>Type</th>
- <td class="eventname"><strong><code>NamedFlowUpdate</code></strong></td></tr>
+ <td class="eventname"><strong><code>regionLayoutUpdate</code></strong></td></tr>
<tr class="assert must"><th>Interface</th> <td><a href="#events-UIEvent"><code>UIEvent</code></a></td></tr>
<tr class="assert must"><th>Sync / Async</th> <td>Sync</td></tr>
<tr class="assert must"><th>Bubbles</th> <td>Yes</td></tr>
@@ -1859,7 +1902,7 @@
be selectable with a CSS selector and accept the content property as
defined in this specification.</p>
- <h3 id="integration-examples">Integration Examples</h3>
+ <h3 id="integration-examples">Integration examples</h3>
<p>Authors can use different methods to layout regions in CSS. Some
solutions can be expressed with CSS only and not require document changes,
@@ -2076,7 +2119,7 @@
<li>Added a note that a 'NamedFlow' instance is live.</li>
<li>Added an 'undefined' string value to the regionOverflow property on the Element interface
extension.</li>
- <li>Renamed NamedFlowEvent to NamedFlowUpdate to avoid having 'Event' in the event name.</li>
+ <li>Renamed NamedFlowEvent to regionLayoutUpdate 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
@@ -2109,6 +2152,9 @@
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>Added the ::region-before and a ::region-after pseudo-elements.</li>
+ <li>Added note of caution when using selectors and the 'flow-into' property following
+ a <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0191.html">mailing list discussion</a>.</li>
</ul>
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
Received on Tuesday, 9 August 2011 21:17:14 UTC