- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 22 Nov 2011 17:09:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv11995
Modified Files:
Overview.html Overview.src.html style-toggle.js
Log Message:
Added resolutions from last F2F meeting
Index: style-toggle.js
===================================================================
RCS file: /sources/public/csswg/css3-regions/style-toggle.js,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- style-toggle.js 29 Oct 2011 01:02:28 -0000 1.5
+++ style-toggle.js 22 Nov 2011 17:09:21 -0000 1.6
@@ -20,7 +20,7 @@
window.onload = function() {
var st = document.getElementById('st');
var divHead = document.getElementById('div-head');
- var defaultText = additionalStyleText;
+ var defaultText = defaultStyleText;
toggle = document.createElement('a');
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.28
retrieving revision 1.29
diff -u -d -r1.28 -r1.29
--- Overview.html 29 Oct 2011 01:02:28 -0000 1.28
+++ Overview.html 22 Nov 2011 17:09:21 -0000 1.29
@@ -9,8 +9,8 @@
<link href=default.css rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
- <link disabled href=alternate-spec-style.css id=st
- rel="alternate stylesheet" title="additional spec styles" type="text/css">
+ <link href=alternate-spec-style.css id=st rel=stylesheet
+ title="additional spec styles" type="text/css">
<script src=style-toggle.js type="text/javascript"></script>
<style type="text/css">
@@ -61,25 +61,27 @@
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p>
- <h1 id=css-regions-module>CSS Regions Module</h1>
+ <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 October
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 November
2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-regions-20111029/">http://www.w3.org/csswg/css3-regions</a>
+ href="http://www.w3.org/TR/2011/ED-css3-regions-20111122/">http://www.w3.org/csswg/css3-regions</a>
<dt>Latest version:
<dd><a
- href="http://www.w3.org/TR/css3-regions">http://www.w3.org/csswg/css3-regions</a>
+ href="http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a>
<dt>Previous version:
- <dd>none
+ <dd><a
+ href="http://www.w3.org/TR/2011/WD-css3-regions-20111124/">http://www.w3.org/TR/2011/WD-css3-regions-20111124/</a>
+
<dt>Editors:
@@ -160,6 +162,12 @@
W3C Patent Policy</a>.</p>
<!--end-status-->
+ <p>This draft is related to the drafts about Multi-column Layout <a
+ href="#CSSMULTICOL">[CSSMULTICOL]</a>, Grid Layout <a
+ href="#CSS3GRID">[CSS3GRID]</a>, Flexible Box Layout <a
+ href="#CSS3FLEXBOX">[CSS3FLEXBOX]</a>, and Template Layout <a
+ href="#CSSTEMPLATELAYOUT">[CSSTEMPLATELAYOUT]</a>.
+
<h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
<!--begin-toc-->
@@ -192,12 +200,6 @@
<ul class=toc>
<li><a href="#the-flow-into-property"><span class=secno>4.1. </span>The
‘<code class=property>flow-into</code>’ property</a>
- <ul class=toc>
- <li><a href="#flow-into-and-ltiframegt-ltobjectgt-ltem"><span
- class=secno>4.1.1. </span>‘<code
- class=property>flow-into</code>’ and <iframe>,
- <object>, <embed></a>
- </ul>
<li><a href="#the-flow-from-property"><span class=secno>4.2. </span>The
‘<code class=property>flow-from</code>’ property</a>
@@ -245,11 +247,13 @@
<li><a href="#relation-to-other-specifications"><span class=secno>7.
</span>Relation to other specifications</a>
- <li><a href="#conformance"><span class=secno>8. </span>Conformance</a>
+ <li><a href="#usecases"><span class=secno>8. </span>Use Cases</a>
- <li><a href="#changes"><span class=secno>9. </span>Changes</a>
+ <li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
+
+ <li><a href="#changes"><span class=secno>10. </span>Changes</a>
<ul class=toc>
- <li><a href="#changes_from_June_09_2011"><span class=secno>9.1.
+ <li><a href="#changes_from_June_09_2011"><span class=secno>10.1.
</span>Changes from June 09<sup>th</sup> 2011 version</a>
</ul>
@@ -334,6 +338,16 @@
</pre>
+ <p>And the following snippet shows an example of elements that will be used
+ as regions.
+
+ <pre>
+<div id="region1"></div≫
+<div id="region2"></div≫
+<div id="region3"></div≫
+<div id="region4"></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
@@ -345,14 +359,17 @@
<p class=caption>Sample rendering for desired layout</p>
</div>
- <p>Since the CSS regions module is independent of the layout of regions and
- the mechanism used to create them, the following assumes there is a CSS
- selector for the regions and, for the purpose of the example, the
- selectors for regions 1, 2, 3 and 4 show as ‘<code
- class=css><region1_sel></code>’, ‘<code
- class=css><region2_sel></code>’, ‘<code
- class=css><region3_sel></code>’ and ‘<code
- class=css><region4_sel></code>’ respectively.
+ <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.
+
+ <p>The following code example illustrates how the content of the
+ <code>article</code> element becomes a flow and how the areas ‘<code
+ class=css>region1</code>’, ‘<code
+ class=css>region2</code>’, ‘<code
+ class=css>region3</code>’ and ‘<code
+ class=css>region4</code>’ become regions that consume the
+ ‘<code class=css>article_flow</code>’ content.
<div class=example>
<pre>
@@ -362,8 +379,7 @@
<strong>flow-into: article_flow;</strong>
}
-<region1_sel>, <region2_sel>,
-<region3_sel>, <region4_sel> {
+#region1, #region2, #region3, #region4 {
<strong>flow-from: article_flow;</strong>
}
</style>
@@ -377,19 +393,18 @@
class=css>article_flow</code>’ named flow. Setting the elements'
‘<a href="#flow-from"><code
class=property>flow-from</code></a>’ property to ‘<code
- class=css>article_flow</code>’ makes them regions and associates
- these regions with the named flow: the flow is ‘<code
+ class=css>article_flow</code>’ on elements makes them regions and
+ associates these regions with the named flow: the flow is ‘<code
class=css>poured</code>’ into the desired regions.
<h3 id=region-styling><span class=secno>1.2. </span>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="#CSSMEDIAQUERIES">Media Queries</a> <a href="#MEDIAQ"
- rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which enable or disable
- selectors depending on the rendering context. With region styling,
- additional selectors may apply depending on the region into which content
- flows.
+ flows into. It is a form of context-based styling, similar to Media
+ Queries <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>
+ which enable or disable selectors depending on the rendering context. With
+ region styling, additional selectors may apply depending on the region
+ into which content flows.
<p>In our example, the designer wants to make text flowing into region 1
larger, bold and dark blue. In addition, <code
@@ -418,7 +433,7 @@
* Additional styling to apply to content when it falls into
* region1
*/
-<strong>@region <region1_sel> {</strong>
+<strong>@region #region1 {</strong>
#article {
font-weight: bold;
color: #0C3D5F;
@@ -457,8 +472,8 @@
<p class=index id=region title=region>A region is an element that generates
a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
- container box</a> and has an associated <em>named flow</em> (see the
- ‘<a href="#flow-from"><code
+ container box</a> and has an associated <a href="#named-flow0"><em>named
+ flow</em></a> (see the ‘<a href="#flow-from"><code
class=property>flow-from</code></a>’ property).
<div class="issue moved">
@@ -472,7 +487,7 @@
<h3 id=named-flow><span class=secno>2.2. </span>Named flow</h3>
- <p>A <def name=named-flow>named flow</def> is the ordered sequence of
+ <p>A <dfn id=named-flow0>named flow</dfn> is the ordered sequence of
elements associated with a flow with a given identifier. Elements in a
named flow are ordered according to the document order.
@@ -500,8 +515,8 @@
<p><span title=region>Regions</span> are organized in to a <span
title=region-chain>region chain</span>.
- <p>Each region in turn consumes content from its associated <span
- title=named-flow>named flow</span>. The named flow content is positioned
+ <p>Each region in turn consumes content from its associated <a
+ href="#named-flow0">named flow</a>. The named flow content is positioned
in the <dfn id=current-region title=current-region>current region</dfn>
until a natural or forced region break occurs, at which point the <a
href="#current-region" title=current-region>current region</a> becomes the
@@ -657,46 +672,6 @@
unintended results.</p>
</div>
- <h4 id=flow-into-and-ltiframegt-ltobjectgt-ltem><span class=secno>4.1.1.
- </span>‘<a href="#flow-into"><code
- class=property>flow-into</code></a>’ and <iframe>,
- <object>, <embed></h4>
-
- <div class=issue-marker><a
- href="http://wiki.csswg.org/spec/css3-regions?&#issue-19special-behavior-of-iframe-flow">Issue-19</a></div>
-
- <p>Optionally, implementations can support the ‘<a
- href="#flow-into"><code class=property>flow-into</code></a>’
- property on the <iframe>, <object> and <embed> elements.
-
- <p> If the ‘flow-into’ property is specified on an <code
- class=html><iframe></code>, an <code
- class=html><object></code> or a <code
- class=html><embed></code> element, the ‘display’ property is
- computed to ‘none’ and the referenced document within the element is
- used as the named flow. In the case of the <code
- class=html><object></code> element if fallback occurs and the
- fallback element has a referenced document then that document is used as
- the named flow, otherwise the fallback element itself is added to the
- named flow.
-
- <p> Any properties set on the <code class=html><iframe></code>/<code
- class=html><object></code>/<code class=html><embed></code>
- elements (including margin, border, padding, background) have no effect.
- This redirection of content does not change representation of the elements
- in the document tree, just as for any other source of named flow; in this
- case the <code class=html><iframe></code> still provides security
- checks for script in content (and sandbox if required). Events and CSS
- cascading work the same way as in a documents hosted in regular <code
- class=html><iframe></code>s.
-
- <p> Region styling applies to content coming from <code
- class=html><iframe></code>/<code
- class=html><object></code>/<code class=html><embed></code>
- sources the same way it applies to other flow content.
-
- <p><br>
-
<p>The ‘<a href="#flow-into"><code
class=property>flow-into</code></a>’ property does not apply to the
<code class=css>::first-line</code> and <code
@@ -712,9 +687,6 @@
href="#flow-from"><code class=property>flow-from</code></a>’
property</h3>
- <div class=issue-marker><a
- href="http://wiki.csswg.org/spec/css3-regions?&#issue-18interplay-of-flow-from-and-content">Issue-18</a></div>
-
<p>The ‘<a href="#flow-from"><code
class=property>flow-from</code></a>’ property makes an element a
region and associates it with a named flow.
@@ -776,9 +748,14 @@
<dt><strong><ident></strong>
- <dd> The element becomes a <span>region</span> and is ordered in a
- <span>region chain</span> according to its document order. The content
- from the flow with the <a
+ <dd> If the ‘<code class=property>content</code>’ property
+ computes to something else than ‘<code
+ class=property>normal</code>’, the element does not become a
+ region. If the ‘<code class=property>content</code>’ property
+ computes to ‘<code class=property>normal</code>’, then the
+ element becomes a <span>region</span> and is ordered in a <span>region
+ chain</span> according to its document order. The content from the flow
+ with the <a
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>
name will be <a href="#region-flow-break">broken into segments</a> and
visually formatted in the <a
@@ -799,7 +776,7 @@
class=property>flow-from</code></a>’ property is set to a valid
<ident> value, even if there is no content contributing to the
referenced flow. For example:</p>
- <code></code>
+
<pre>
<style>
.article{
@@ -821,89 +798,8 @@
empty named flow and, consequently, its children are not formatted
visually.</div>
- <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>.
- Superseded by resolution during
-
- <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#contentflow-flow-from-name-vs-flow-fromflow-name">issue</a></p>
- </div>
-
- <div class="issue stale">
- <p>NOTE: stale issue because the spec. now contains a way to address these
- requirements.</p>
-
- <p>Should we consider adding the ability to do the following:</p>
-
- <ul>
- <li>Support repeatable content. For example, have a repeatable heading at
- the start of each region where content flows.
-
- <li>Support flow breaking marks. It might be very useful to support a
- <em>mark</em> (such as "<code class=html>...</code>") at the region
- breaking points to indicate that content has been broken out and is
- continuing on a different region.</li>
- <!--
- <li>Support "atomic pull-outs". For example, we could have a named
- flow made of a set of atomic quotes that should be placed, one by
- one, in discrete regions. In that use case, we would need a
- property to specify that content should be taken atomically from
- the flow. May be something like the following.
- <pre class="code">
-<div id="quote_1" class="quote">...</div>
-...
-<div id="quote_n" class="quote">...</div>
-
-<div id="pull-out-1" class="pull-out"></div>
-...
-<div id="pull-out-n" class="pull-out"></div>
-
-<style>
-.quote {
- flow-into: "quotes";
-}
-
-.pull-out {
- content: flow-from(quotes);
- content-consume: atomic;
-}
-</style>
-
-</pre>
- </li>
- -->
- </ul>
- </div>
-
- <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>‘<code class=css>content: flow-from(<ident>)</code>’
- 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-into: "quotes"; content: contents; }</div>
-
- <p>would keep ‘<code class=css>#quote_A</code>’ in the normal
- flow but also copy its content to the ‘<code
- class=css>quotes</code>’ flow. This essentially clones the node and
- raises questions regarding DOM access, CSSOM view and the computed style.</p>
- </div>
+ <div class=issue-marker><a
+ href="http://wiki.csswg.org/spec/css3-regions#issue-23should-regions-be-non-breakable">Issue-23</a></div>
<p><span title=region>Regions</span> create a new <a
href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking
@@ -927,13 +823,15 @@
model.</p>
</div>
- <p> Floats or other exclusions (see [[CSS3EXCLUSIONS]]) potentially impact
- the content laid out in regions, just as for non-regions.
+ <p> Floats or other exclusions (see <a href="#CSS3-EXCLUSIONS"
+ rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>)
+ potentially impact the content laid out in regions, just as for
+ non-regions.
<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>
+ class=html>body_text</code> <a href="#named-flow0">named flow</a> wraps
+ around the <code class=html>#float</code> box.</p>
<pre>
<style>
@@ -1252,8 +1150,8 @@
<p>The ‘<a href="#region-overflow"><code
class=property>region-overflow</code></a>’ property controls the
- behavior of the <em id=last-region>last region</em> associated with a
- <span>named flow</span>.
+ behavior of the <em id=last-region>last region</em> associated with a <a
+ href="#named-flow0">named flow</a>.
<dl>
<dt>auto
@@ -1271,8 +1169,8 @@
property has no effect. If the content does not fit within the
<em>region element</em>, the content breaks as if flow was going to
continue in a subsequent region. See the <a
- href="#breaking-rules">breaking rules</a> section. A forced region break
- takes precedence over a natural break point.</p>
+ href="#regions-flow-breaking-rules">breaking rules</a> section. A forced
+ region break takes precedence over a natural break point.</p>
<p>Flow content that follows the last break in the last region, if any is
not rendered.</p>
@@ -1365,9 +1263,6 @@
<h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
rule</h3>
- <div class=issue-marker><a
- href="http://wiki.csswg.org/spec/css3-regions?&#issue-14region-lines-pseudo-selector">Issue-14</a></div>
-
<p>An ‘<code class=css>@region</code>’ rule contains style
declarations specific to particular regions.
@@ -1396,7 +1291,7 @@
<p>Only a limited list of properties can be set in a region style rule:
<div class=issue-marker><a
- href="http://wiki.csswg.org/spec/css3-regions?&#issue-20list-of-region-style-properties">Issue-20</a></div>
+ href="http://wiki.csswg.org/spec/css3-regions#issue-20list-of-region-style-properties">Issue-20</a></div>
<ol>
<li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>
@@ -1553,7 +1448,7 @@
</div>
<div class="issue moved"> <a
- href="http://wiki.csswg.org/spec/css3-regions?&#issue-14region-lines-pseudo-selector">Moved
+ href="http://wiki.csswg.org/spec/css3-regions#issue-14region-lines-pseudo-selector">Moved
to specification Wiki</a>. There is <a
href="http://lists.w3.org/Archives/Public/www-style/2011May/0518.html">concern</a>
that the ‘<code class=css>first-line</code>’ precedent is
@@ -1573,8 +1468,9 @@
the rule does not influence the selectors' specificity.
<p>Consequently, selectors that match a given element (as describe above),
- participate in the <a href="CSS2.1%20section%206.4.1">CSS Cascading
- order</a> as defined in <a href="#CSS21"
+ participate in the <a
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS
+ Cascading order</a> as defined in <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<div class=note> Region styling does not apply to nested regions. If a
@@ -1655,23 +1551,24 @@
<h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
interface</h3>
- <p>The <code class=idl>getFlowByName<a
+ <p>The <code class=idl>getFlowByName</code> method on the <a
href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document"><code
class=idl>Document</code></a> interface provides access to the document's
- <span title=named-flow>named flow</span> instances.</code>
+ <a href="#named-flow0">named flow</a> instances.
<pre class=idl>
[Supplemental] interface <a
href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document">Document</a> {
<a
- href="#dom-namedflow">NamedFlow</a> <a
- href="#dom-document-getflowbyname">getFlowByName(</a><a
+ href="#dom-namedflow">NamedFlow</a>
+getFlowByName(<a
href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
};
</pre>
<p>The <dfn id=dom-namedflow><code class=idl>NamedFlow</code></dfn>
- interface offers a representation of the <span>named flow</span>.
+ interface offers a representation of the <a href="#named-flow0">named
+ flow</a>.
<pre class=idl>
interface <a href="#dom-namedflow">NamedFlow</a> {
@@ -1744,8 +1641,8 @@
class=idl>overflow</code></a> property value can be used to control the
visibility of the overflowing content. This means that the region is the
last one in the <span title=region-chain>region chain</span> and not able
- to fit the remaining content from the <span title=named-flow>named
- flow</span>.
+ to fit the remaining content from the <a href="#named-flow0">named
+ flow</a>.
<dt>‘<code class=property>fit</code>’
@@ -1754,17 +1651,17 @@
box</a>. It does not overflow. If the region is the last one in the <span
title=region-chain>region chain</span>, it means that the content fits
without overflowing. If the region is not the last one in the region
- chain, that means the <span title=named-flow>named flow</span> content is
+ chain, that means the <a href="#named-flow0">named flow</a> content is
further fitted in subsequent regions. In particular, in this last case,
- that means the region may have received no content from the <span
- title=named-flow>named flow</span> (for example if the region is too
+ that means the region may have received no content from the <a
+ href="#named-flow0">named flow</a> (for example if the region is too
small to accommodate any content).
<dt>‘<code class=property>empty</code>’
<dd>the region element has no content and is empty. All content from the
- <span title=named-flow>named flow</span> was fitted in regions with a
- lower document order.
+ <a href="#named-flow0">named flow</a> was fitted in regions with a lower
+ document order.
<dt>‘<code class=property>undefined</code>’
@@ -1812,9 +1709,6 @@
Targets</a> dispatch <code class=idl>regionLayoutUpdate</code> events when
there is a possible layout change of their named flow segment.
- <div class=issue-marker><a
- href="http://wiki.csswg.org/spec/css3-regions?&#issue-10should-the-regionlayoutupdate-event-by-sync-or-async">Issue-10</a></div>
-
<table border=0 cellpadding=2 cellspacing=0 class=event-desc
summary="This table contains information about the semantics of the given event type">
<tbody>
@@ -1826,7 +1720,7 @@
<tr class="assert must">
<th>Interface
- <td><a href="#events-UIEvent"><code>UIEvent</code></a>
+ <td><code>UIEvent</code>
<tr class="assert must">
<th>Sync / Async
@@ -1858,9 +1752,8 @@
<td>
<ul>
- <li><a href="#events-event-type-target"><code
- class=attribute-name>Event.target</code></a>: region whose layout may
- have changed
+ <li><code class=attribute-name>Event.target</code>: region whose
+ layout may have changed
</ul>
</table>
@@ -1872,25 +1765,33 @@
related to the following specifications:
<ol>
- <li>CSS Exclusions Module [[CSS3EXCLUSIONS]]. This module defines a
- generic way to define arbitrarily shaped exclusions into which content
- can flow or around which content can flow. This can be seen as an
- extension to the way CSS floats provide rectangular areas into which
- content flows and around which content flows. In advanced layout designs,
- it is expected that the CSS Exclusions module will be commonly combined
- with the CSS regions module.
+ <li>CSS Exclusions Module <a href="#CSS3-EXCLUSIONS"
+ rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>. This
+ module defines a generic way to define arbitrarily shaped exclusions into
+ which content can flow or around which content can flow. This can be seen
+ as an extension to the way CSS floats provide rectangular areas into
+ which content flows and around which content flows. In advanced layout
+ designs, it is expected that the CSS Exclusions module will be commonly
+ combined with the CSS regions module.
- <li>CSS Line Grid Module [[CSS3LINEGRID]]. This module defines a concept
- of line grid to align the position of lines in different elements. The
- line grid functionality is related and needed for aligning content
- flowing in separate regions.
+ <li>CSS Line Grid Module <a href="#CSS3-LINE-GRID"
+ rel=biblioentry>[CSS3-LINE-GRID]<!--{{CSS3-LINE-GRID}}--></a>. This
+ module defines a concept of line grid to align the position of lines in
+ different elements. The line grid functionality is related and needed for
+ aligning content flowing in separate regions.
</ol>
- <h2 id=conformance><span class=secno>8. </span>Conformance</h2>
+ <h2 id=usecases><span class=secno>8. </span>Use Cases</h2>
- <h2 id=changes><span class=secno>9. </span>Changes</h2>
+ <p>Use cases are described on <a
+ href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this
+ page</a>.
- <h3 id="changes_from_June_09_2011"><span class=secno>9.1. </span>Changes
+ <h2 id=conformance><span class=secno>9. </span>Conformance</h2>
+
+ <h2 id=changes><span class=secno>10. </span>Changes</h2>
+
+ <h3 id="changes_from_June_09_2011"><span class=secno>10.1. </span>Changes
from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June
09<sup>th</sup> 2011</a> version</h3>
@@ -2134,6 +2035,23 @@
<li>Added additional DOM interface following <a
href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.
+
+ <li>Clarified that a region becomes a region only if its ‘<code
+ class=property>content</code>’ property computes to normal,
+ following the resolution of <a
+ href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue
+ 22</a>.
+
+ <li>Removed text about special iframe behavior as a result of <a
+ href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.
+
+ <li>Made the selectors explicit in the initial section code examples,
+ following discussion in <a
+ href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October
+ 2011</a> face to face meeting.
+
+ <li>Added section on use cases following <a
+ href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.
</ul>
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -2220,6 +2138,16 @@
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
<!---->
+ <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
+
+ <dd>Vincent Hardy. <a
+ href="http://dev.w3.org/csswg/css3-exclusions/"><cite>CSS Exclusions
+ Module.</cite></a> Proposal for a CSS module. (Retrieved 15 November
+ 2011) URL: <a
+ href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a>
+ </dd>
+ <!---->
+
<dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
<dd>Alex Mogilevsky; et al. <a
@@ -2230,6 +2158,15 @@
</dd>
<!---->
+ <dt id=CSS3-LINE-GRID>[CSS3-LINE-GRID]
+
+ <dd>Koji Ishii. <a href="http://dev.w3.org/csswg/css-line-grid/"><cite>CSS
+ Line Grid Module.</cite></a> Proposal for a CSS module. (Retrieved 26
+ October 2011) URL: <a
+ href="http://dev.w3.org/csswg/css-line-grid/">http://dev.w3.org/csswg/css-line-grid/</a>
+ </dd>
+ <!---->
+
<dt id=CSS3PAGE>[CSS3PAGE]
<dd>Håkon Wium Lie; Melinda Grant. <a
@@ -2297,6 +2234,9 @@
<li><a href="#dom-namedflow"><code class=idl>NamedFlow</code></a>, <a
href="#dom-namedflow" title=NamedFlow><strong>6.1.</strong></a>
+ <li>named flow, <a href="#named-flow0"
+ title="named flow"><strong>2.2.</strong></a>
+
<li><a href="#dom-namedflow-overflow"><code class=idl>overflow</code></a>,
<a href="#dom-namedflow-overflow"
title=overflow><strong>6.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.31
retrieving revision 1.32
diff -u -d -r1.31 -r1.32
--- Overview.src.html 21 Nov 2011 23:14:38 -0000 1.31
+++ Overview.src.html 22 Nov 2011 17:09:21 -0000 1.32
@@ -6,9 +6,14 @@
<title>CSS Regions Module Level 3</title>
<link rel="stylesheet" type="text/css" href="default.css">
- <link id="st" href="alternate-spec-style.css" rel="alternate stylesheet"
+
+ <link rel="stylesheet" type="text/css"
+ href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
+
+ <link id="st" href="alternate-spec-style.css" rel="stylesheet"
type="text/css" title="additional spec styles">
+
<script type="text/javascript" src="style-toggle.js"></script>
<style type="text/css">
@@ -53,10 +58,6 @@
display: none;
}
</style>
-
-
- <link rel="stylesheet" type="text/css"
- href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
</head>
@@ -197,6 +198,15 @@
</pre>
+ <p>And the following snippet shows an example of elements that will be used
+ as regions.</p>
+ <pre>
+<div id="region1"></div≫
+<div id="region2"></div≫
+<div id="region3"></div≫
+<div id="region4"></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
@@ -209,12 +219,13 @@
<p class="caption">Sample rendering for desired layout</p>
</div>
- <p>Since the CSS regions module is independent of the layout of regions and
- the mechanism used to create them, the following assumes there is a CSS
- selector for the regions and, for the purpose of the example, the selectors
- for regions 1, 2, 3 and 4 show as ''<region1_sel>'',
- ''<region2_sel>'', ''<region3_sel>'' and
- ''<region4_sel>'' respectively.</p>
+ <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.</p>
+
+ <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>
<div class="example">
<pre>
@@ -224,8 +235,7 @@
<strong>flow-into: article_flow;</strong>
}
-<region1_sel>, <region2_sel>,
-<region3_sel>, <region4_sel> {
+#region1, #region2, #region3, #region4 {
<strong>flow-from: article_flow;</strong>
}
</style>
@@ -234,7 +244,8 @@
<p>The 'article_flow' value on the 'flow-into' property directs the ''#article''
element to the 'article_flow' named flow. Setting the elements' 'flow-from' property
- to 'article_flow' makes them regions and associates these regions with the named flow: the flow is
+ to 'article_flow' on elements makes them regions and associates these regions
+ with the named flow: the flow is
''poured'' into the desired regions.</p>
<h3 id="region-styling">Regions styling</h3>
@@ -273,7 +284,7 @@
* Additional styling to apply to content when it falls into
* region1
*/
-<strong>@region <region1_sel> {</strong>
+<strong>@region #region1 {</strong>
#article {
font-weight: bold;
color: #0C3D5F;
@@ -487,38 +498,6 @@
</div>
- <h4>'flow-into' and <iframe>, <object>, <embed></h4>
- <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-19special-behavior-of-iframe-flow">Issue-19</a></div>
-
- <p>Optionally, implementations can support the 'flow-into' property on the <iframe>, <object>
- and <embed> elements.</p>
-
- <p>
- If the ‘flow-into’ property is specified on an
- <code class=
- "html"><iframe></code>, an <code class=
- "html"><object></code> or a <code class=
- "html"><embed></code> element, the
- ‘display’ property is computed to ‘none’ and the referenced document within the element is used as the named flow.
- In the case of the <code class="html"><object></code> element if fallback occurs and the fallback element has a referenced document then that
- document is used as the named flow, otherwise the fallback element itself is added to the named flow.
- </p>
- <p>
- Any properties set on the <code class=
- "html"><iframe></code>/<code class=
- "html"><object></code>/<code class=
- "html"><embed></code> elements (including margin, border, padding, background) have no effect.
- This redirection of content does not change representation of the elements in the document tree, just as for any other
- source of named flow; in this case the <code class="html"><iframe></code> still provides security checks for script in content (and sandbox if required).
- Events and CSS cascading work the same way as in a documents hosted in regular <code class="html"><iframe></code>s.
- </p>
- <p>
- Region styling applies to content coming from <code class=
- "html"><iframe></code>/<code class=
- "html"><object></code>/<code class=
- "html"><embed></code> sources the same way it applies to other flow content.
- </p>
-
<p>The 'flow-into' property does not apply to the <code class="css">::first-line</code> and <code class="css">::first-character</code>.</p>
<p>The effect of 'flow-into' on generated content such as <code class="css">::marker</code>,
@@ -527,10 +506,8 @@
<h3 id="the-flow-from-property">The 'flow-from' property</h3>
- <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-18interplay-of-flow-from-and-content">Issue-18</a></div>
-
<p>The 'flow-from' property makes an element a region and associates it with a named flow.</p>
- <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-12should-we-allow-multi-column-elements-to-be-regions">Issue-12</a></div>
+ <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions?&#issue-12should-we-allow-multi-column-elements-to-be-regions">Issue-12</a></div>
<table class="propdef" summary="flow-from property definition">
<tr>
@@ -593,7 +570,9 @@
<dt><strong><ident></strong></dt>
<dd>
- The element becomes a <span>region</span> and is ordered in a
+ If the 'content' property computes to something else than 'normal', the element
+ does not become a region.
+ If the 'content' property computes to 'normal', then the element becomes a <span>region</span> and is ordered in a
<span>region chain</span> according to its document order. The content from the flow with the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>
name will be <a href="#region-flow-break">broken into segments</a> and visually formatted in the
<a href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a> of the regions in the region chain. If there is no flow with name
@@ -630,82 +609,8 @@
selector is still associated with that empty named flow and, consequently, its children
are not formatted visually.
</div>
- <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>. Superseded by resolution during
-
- <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#issue-1-contentfrom-flow-flow-name-vs-flow-fromflow-name">issue</a></p>
- </div>
- <div class="issue stale">
- <p>NOTE: stale issue because the spec. now contains a way to address these
- requirements.</p>
-
- <p>Should we consider adding the ability to do the following:</p>
-
- <ul>
- <li>Support repeatable content. For example, have a repeatable
- heading at the start of each region where content flows.</li>
-
- <li>Support flow breaking marks. It might be very useful to support
- a <em>mark</em> (such as "<code class="html">...</code>") at the
- region breaking points to indicate that content has been broken out
- and is continuing on a different region.</li><!--
- <li>Support "atomic pull-outs". For example, we could have a named
- flow made of a set of atomic quotes that should be placed, one by
- one, in discrete regions. In that use case, we would need a
- property to specify that content should be taken atomically from
- the flow. May be something like the following.
- <pre class="code">
-<div id="quote_1" class="quote">...</div>
-...
-<div id="quote_n" class="quote">...</div>
-
-<div id="pull-out-1" class="pull-out"></div>
-...
-<div id="pull-out-n" class="pull-out"></div>
-
-<style>
-.quote {
- flow-into: "quotes";
-}
-
-.pull-out {
- content: flow-from(quotes);
- content-consume: atomic;
-}
-</style>
-
-</pre>
- </li>
- -->
- </ul>
- </div>
-
- <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: 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-into: "quotes"; content: contents; }
- </div>
-
- <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>
- </div>
+ <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-23should-regions-be-non-breakable">Issue-23</a></div>
<p><span title="region">Regions</span> create a new <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. <span title="region">Regions</span> establish a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>.</p>
@@ -1175,8 +1080,6 @@
<h3 id="the-at-region-style-rule">The @region rule</h3>
- <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-14region-lines-pseudo-selector">Issue-14</a></div>
-
<p>An '@region' rule contains style declarations specific to particular
regions.</p>
@@ -1535,8 +1438,6 @@
<p>Region <a href="http://www.w3.org/TR/DOM-Level-3-Events/#glossary-event">Event Targets</a>
dispatch <code class="idl">regionLayoutUpdate</code> events when there is a possible layout change of their named flow segment.</p>
- <div class='issue-marker'><a href="http://wiki.csswg.org/spec/css3-regions#issue-10should-the-regionlayoutupdate-event-by-sync-or-async">Issue-10</a></div>
-
<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>regionLayoutUpdate</code></strong></td></tr>
@@ -1576,6 +1477,11 @@
elements. The line grid functionality is related and needed for
aligning content flowing in separate regions.</li>
</ol>
+
+ <h2 id="usecases">Use Cases</h2>
+
+ <p>Use cases are described on <a href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this
+ page</a>.</p>
<h2 id="conformance">Conformance</h2>
@@ -1693,6 +1599,13 @@
Also allowed the 'inherit' value on 'flow-from' and 'flow-into' (same email).</li>
<li>Added note about nested region styling following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0650.html">a mailing list discussion</a>.</li>
<li>Added additional DOM interface following <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.</li>
+ <li>Clarified that a region becomes a region only if its 'content' property computes to
+ normal, following the resolution of <a href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue 22</a>.</li>
+ <li>Removed text about special iframe behavior as a result of
+ <a href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.</li>
+ <li>Made the selectors explicit in the initial section code examples, following
+ discussion in <a href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October 2011</a> face to face meeting.</li>
+ <li>Added section on use cases following <a href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.</li>
</ul>
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
Received on Tuesday, 22 November 2011 17:09:35 UTC