- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 01 Jul 2011 22:59:47 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv22367
Modified Files:
Overview.html Overview.src.html alternate-spec-style.css
Log Message:
Added resolutions from Tokyo F2F (June 2011 and recent F2F. Changes section details updates
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- Overview.html 9 Jun 2011 18:51:39 -0000 1.9
+++ Overview.html 1 Jul 2011 22:59:44 -0000 1.10
@@ -7,11 +7,17 @@
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Regions Module</title>
- <link href="../default.css" rel=stylesheet type="text/css">
+ <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
+ type="text/css">
+ <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=Stylesheet
+ type="text/css">
<link href=alternate-spec-style.css id=st rel=stylesheet title="additional
spec styles" type="text/css">
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
[...970 lines suppressed...]
close-quote | no-open-quote | no-close-quote ]+ | inherit
@@ -2493,7 +2599,7 @@
<tr>
<td><a class=property href="#content-order">content-order</a>
- <td><float>
+ <td><integer>
<td>0
@@ -2508,7 +2614,7 @@
<tr>
<td><a class=property href="#flow2">flow</a>
- <td><string>
+ <td><ident>
<td>auto
Index: alternate-spec-style.css
===================================================================
RCS file: /sources/public/csswg/css3-regions/alternate-spec-style.css,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- alternate-spec-style.css 31 May 2011 00:06:44 -0000 1.3
+++ alternate-spec-style.css 1 Jul 2011 22:59:44 -0000 1.4
@@ -13,7 +13,7 @@
border-radius: 0.4em;
box-shadow: black 2px 2px 2px;
margin-top: -0.5em;
- left: -1em;
+ left: -1em;
}
div.example {
@@ -142,4 +142,13 @@
#region_styling_illustration {
margin: 0px auto;
width: 70ex;
+}
+
+.event-desc td, .event-desc th {
+ border: 1px solid gray;
+}
+
+.event-desc th {
+ text-align: left;
+ padding: 0.5ex;
}
\ No newline at end of file
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.8
retrieving revision 1.9
diff -u -d -r1.8 -r1.9
--- Overview.src.html 9 Jun 2011 18:50:50 -0000 1.8
+++ Overview.src.html 1 Jul 2011 22:59:44 -0000 1.9
@@ -7,11 +7,17 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Regions Module</title>
- <link href="../default.css" rel="stylesheet" type="text/css">
+ <link href="http://dev.w3.org/csswg/default.css" rel="stylesheet" type=
+ "text/css">
+ <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel="Stylesheet"
+ type="text/css">
<link id="st" href="alternate-spec-style.css" rel="stylesheet" type=
"text/css" title="additional spec styles">
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel="stylesheet"
- type="text/css">
+ <script type="text/javascript" src="style-toggle.js">
+</script>
+ <script src='http://test.csswg.org/harness/annotate.js#css3-regions' type=
+ 'text/javascript'>
+</script>
</head>
<body>
@@ -23,20 +29,19 @@
<h1 id="css-regions-module">CSS Regions Module</h1>
- <h2 class="no-num no-toc" id="longstatus-date">[LONGSTATUS]
+ <h2 class="no-num no-toc" id="longstatus-date">Editor's Draft
[DATE]</h2>
<dl>
<dt>This version:</dt>
<dd><a href=
- "[VERSION]">http://www.w3.org/csswg/css3-regions
- <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/--></a></dd>
+ "[VERSION]">http://www.w3.org/csswg/css3-regions</a></dd>
<dt>Latest version:</dt>
<dd><a href=
- "http://www.w3.org/TR/css3-regions">http://www.w3.org/TR/css3-regions</a></dd>
+ "http://www.w3.org/TR/css3-regions">http://www.w3.org/csswg/css3-regions</a></dd>
<dt>Previous version:</dt>
@@ -47,6 +52,9 @@
<dd class="vcard"><span class="fn">Vincent Hardy</span>,
<span class="org">Adobe Systems, Inc.</span>, <span class=
"email">vhardy@adobe.com</span></dd>
+ <dd class="vcard"><span class="fn">Alex Mogilevsky</span>,
+ <span class="org">Microsoft</span>, <span class=
+ "email">alexmog@microsoft.com</span></dd>
<dt>Authors and Former Editors:</dt>
@@ -87,7 +95,7 @@
called regions. The regions do not necessarily follow the document order.
The CSS Regions module provides an advanced content flow mechanism, which
can be combined with positioning schemes as defined by other CSS modules
- such as the Multi-Column Module [[!CSS3COL]] or the Grid Layout Module
+ such as the Multi-Column Module [[CSS3COL]] or the Grid Layout Module
[[CSS3-GRID-LAYOUT]] to position the regions where content flows.</p>
<h2 class="no-num no-toc" id="status-of-this-document">Status of this
@@ -120,6 +128,8 @@
<h2 id="introduction">Introduction</h2>
+ <p><em>This section is non-normative.</em></p>
+
<p>Capturing the complex layouts of a typical magazine, newspaper, or
textbook requires capabilities beyond those available in existing CSS
modules. This is the purpose of the CSS Regions module.</p>
@@ -127,7 +137,7 @@
<p> </p>
<p>The CSS Regions module can be seen as an extension of the concept of
- multi-column elements. With CSS Multi-column layout [[!CSS3COL]], columns
+ multi-column elements. With CSS Multi-column layout [[CSS3COL]], columns
share the same dimensions and define column boxes organized in rows.
Content flows from one column to the next.</p>
@@ -222,7 +232,8 @@
<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 Media Queries [[MEDIAQ]] which enable or disable
+ flows into. It is a form of context-based styling, similar to <a href=
+ "#CSSMEDIAQUERIES">Media Queries</a> [[MEDIAQ]] 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>
@@ -332,8 +343,8 @@
<p>A container's layout scheme is the strategy used by a container to
position the boxes generated by its children and itself. Examples are the
- normal layout (block and inline formatting) ([[!CSS21]]), table layout
- ([[!CSS21]]), the multi-column layout ([[!CSS3COL]]) or the grid layout
+ normal layout (block and inline formatting) ([[CSS21]]), table layout
+ ([[CSS21]]), the multi-column layout ([[CSS3COL]]) or the grid layout
([[CSS3-GRID-LAYOUT]]).</p>
<h3 id="regions">Regions</h3>
@@ -381,7 +392,7 @@
There is an updated version of these paragraphs in [[CSS3PAGE]] as
well.</p>
- <p>In addition, the CSS Multi-column Layout Module [[!CSS3COL]] defines
+ <p>In addition, the CSS Multi-column Layout Module [[CSS3COL]] defines
unified breaking properties (which this specification extends).</p>
<p>It seems that we should:</p>
@@ -403,21 +414,21 @@
<ol>
<li>In the vertical margin between block-level boxes. When an unforced
- region break occurs here, the <a href="/TR/CSS2/cascade.html#used-value">used
- values</a> of the relevant <a href="/TR/CSS2/box.html#propdef-margin-top" class=
+ region break occurs here, the <a href="cascade.html#used-value">used
+ values</a> of the relevant <a href="box.html#propdef-margin-top" class=
"noxref"><span class="propinst-margin-top">'margin-top'</span></a> and
- <a href="/TR/CSS2/box.html#propdef-margin-bottom" class="noxref"><span class=
+ <a href="box.html#propdef-margin-bottom" class="noxref"><span class=
"propinst-margin-bottom">'margin-bottom'</span></a> properties are set
to '0'. When a forced region break occurs here, the used value of the
- relevant <a href="/TR/CSS2/box.html#propdef-margin-bottom" class=
+ relevant <a href="box.html#propdef-margin-bottom" class=
"noxref"><span class=
"propinst-margin-bottom">'margin-bottom'</span></a> property is set to
- '0'; the relevant <a href="/TR/CSS2/box.html#propdef-margin-top" class=
+ '0'; the relevant <a href="box.html#propdef-margin-top" class=
"noxref"><span class="propinst-margin-top">'margin-top'</span></a> used
value may either be set to '0' or retained.</li>
- <li>Between <a href="/TR/CSS2/visuren.html#line-box">line boxes</a> inside a
- <a href="/TR/CSS2/visuren.html#block-boxes">block container</a> box.</li>
+ <li>Between <a href="visuren.html#line-box">line boxes</a> inside a
+ <a href="visuren.html#block-boxes">block container</a> box.</li>
<li>Between the content edge of a block container box and the outer
edges of its child content (margin edges of block-level children or
@@ -439,7 +450,7 @@
'avoid-region', then breaking here is not allowed.</li>
<li><strong>Rule C:</strong> Breaking at (2) is allowed only if the
- number of <a href="/TR/CSS2/visuren.html#line-box">line boxes</a> between the
+ number of <a href="visuren.html#line-box">line boxes</a> between the
break and the start of the enclosing block box is the value of
'orphans' or more, and the number of line boxes between the break and
the end of the box is the value of 'widows' or more.</li>
@@ -482,7 +493,7 @@
<p>Suppose, for example, that the style sheet contains 'orphans: 4',
'widows: 2', and there are 20 lines (<a href=
- "/TR/CSS2/visuren.html#line-box">line boxes</a>) available at the bottom of the
+ "visuren.html#line-box">line boxes</a>) available at the bottom of the
current region:</p>
<ul>
@@ -491,7 +502,7 @@
<li>If the paragraph contains 21 or 22 lines, the second part of
the paragraph must not violate the <a href=
- "/TR/CSS2/page.html#propdef-widows" class="noxref"><span class=
+ "page.html#propdef-widows" class="noxref"><span class=
"propinst-widows">'widows'</span></a> constraint, and so the second
part must contain exactly two lines</li>
@@ -500,9 +511,9 @@
lines.</li>
</ul>
- <p>Now suppose that <a href="/TR/CSS2/page.html#propdef-orphans" class=
+ <p>Now suppose that <a href="page.html#propdef-orphans" class=
"noxref"><span class="propinst-orphans">'orphans'</span></a> is '10',
- <a href="/TR/CSS2/page.html#propdef-widows" class="noxref"><span class=
+ <a href="page.html#propdef-widows" class="noxref"><span class=
"propinst-widows">'widows'</span></a> is '20', and there are 8 lines
available at the bottom of the current region:</p>
@@ -522,11 +533,11 @@
<p>This section describes the flows to which elements formatted according
to the CSS <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual
Formatting Model</a> and other layout modules (such as Multi-Column Layout
- [[!CSS3COL]]) belong to.</p>
+ [[CSS3COL]]) belong to.</p>
<p>In particular, this section describes the 'generated flow' where
generated content of pseudo-elements is placed and several <dfn id=
- "auto-flows" title="auto flows">'auto flows'</dfn> where children of content
+ "auto-flow" title="auto flows">'auto flows'</dfn> where children of content
elements are automatically placed.</p>
<h4 id="normal-flow">Normal flow</h4>
@@ -584,6 +595,8 @@
"generated-flow-def">generated flow</dfn> which they format visually.</p>
<h3 id="relation-to-document-events">Relation to document events</h3>
+
+ <p><em>This section is non-normative.</em></p>
<p>The CSS Region module does not alter in any way the normal processing of
events in the document tree. In particular, if an event occurs on an
@@ -591,34 +604,11 @@
"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>
- <div class="issue">
- <p>Should we consider having something to be able to add event
- listeners to a region to detect events happening in the range of the
- flow it positions?</p>
- <pre class="code">
-<script>
-var region = ...; // get DOM reference to region
-
-region.addEventListener('click', function (evt) {
- alert('I was able to capture an event from the flow content!');
-}, true /* useCapture */);
-
-region.addEventListener('click', function (evt) {
- alert('I was able to see an event bubble from the flow content!');
-}, false /* useCapture */);
-
-</pre>
-
- <p>Note that this is a complex proposition since it modifies the normal
- bubble and capture event propagation model. However, it seems that it
- would be a worthwhile feature.</p>
- </div>
-
<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
- flow or lets the <a href="#auto-flows">automatic flow assignment</a> take
+ flow or lets the <a href="auto-flows">automatic flow assignment</a> take
place. The ‘content’ property binds a region with a flow. When multiple
regions are bound to the same flow, the 'content-order' property determines
the order in which content flows into the sequence of regions. This
@@ -633,7 +623,8 @@
<h3 id="the-flow-property">The 'flow' property</h3>
<p>The ‘flow’ property places an element into a named flow or automatically
- places it in the appropriate flow (see the Visual Formatting Model and Flows
+ places it in the appropriate flow (see the <a href=
+ "#formatting-model-considerations">Visual Formatting Model and Flows</a>
section). Elements that belong to the same flow are laid out in the regions
associated with that flow.</p>
@@ -647,7 +638,7 @@
<tr>
<th>Value:</th>
- <td><string></td>
+ <td><ident></td>
</tr>
<tr>
@@ -691,20 +682,17 @@
<dt>auto</dt>
<dd>The element is automatically moved to the appropriate flow
- according to the Visual
- Formatting Model and Flows definitions.</dd>
+ according to the <a href="#formatting_model_considerations">Visual
+ Formatting Model and Flows</a> definitions.</dd>
- <dt><string></dt>
+ <dt><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a></dt>
<dd>The element is placed (appended) to the flow with that name. The
element is said to have a <dfn id="specified-flow">specified
- flow</dfn>.</dd>
+ flow</dfn>. The values 'none', 'inherit' and 'initial' and invalid flow
+ names.</dd>
</dl>
- <div class="issue">
- Should the 'flow' property be an identifier and not a string?
- </div>
-
<p>A named flow needs to be associated with one or more regions for its
elements to be visually formatted. If no region is associated with a given
named flow, the elements in the named flow are not rendered: they do not
@@ -765,6 +753,23 @@
<div id="content"></div>
</pre>
</div>
+
+
+ <p>
+ For an <code class=
+ "html"><iframe></code>, an <code class=
+ "html"><object></code> or a <code class=
+ "html"><embed></code> element, the 'flow' property has a different
+ behavior. The effect is similar to turning the 'display' property on the
+ element to 'none' while moving the root element of the referenced document
+ to the named flow.
+
+ </p>
+
+ <div class="issue">
+ Alex to refine the above section on flows and ,frame/object/embed to
+ specify what it means for the CSS cascade and region styling.
+ </div>
<h3 id="the-content-property">The 'content' property</h3>
@@ -781,7 +786,7 @@
<tr>
<th>Value:</th>
- <td>normal | none | from-flow(<string>)| [ <string> |
+ <td>normal | none | from-flow(<ident>)| [ <string> |
<uri> | <counter> | attr(<identifier>) |
open-quote | close-quote | no-open-quote | no-close-quote ]+ |
inherit</td>
@@ -840,13 +845,13 @@
<dd>Computes to 'none' for the ''::before'' and ''::after''
pseudo-elements. For other elements, the element uses the flow assigned
- to its children following the <a href="#auto-flows">automatic flow
+ to its children following the <a href="auto-flows">automatic flow
assignment for the Visual Formatting Model..</a></dd>
<dt><strong><string></strong></dt>
<dd>Text content (see the section on <a href=
- "/TR/CSS2/syndata.html#strings">strings</a>).</dd>
+ "syndata.html#strings">strings</a>).</dd>
<dt><strong><uri></strong></dt>
@@ -857,19 +862,19 @@
<dt><strong><counter></strong></dt>
- <dd><a href="/TR/CSS2/syndata.html#counter">Counters</a> may be specified with
+ <dd><a href="syndata.html#counter">Counters</a> may be specified with
two different functions: 'counter()' or 'counters()'. The former has
two forms: 'counter(<var>name</var>)' or 'counter(<var>name</var>,
<var>style</var>)'. The generated text is the value of the innermost
counter of the given name in scope at this pseudo-element; it is
- formatted in the indicated style
+ formatted in the indicated <a href="#counter-styles">style</a>
('decimal' by default). The latter function also has two forms:
'counters(<var>name</var>, <var>string</var>)' or
'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. The
generated text is the value of all counters with the given name in
scope at this pseudo-element, from outermost to innermost separated by
the specified string. The counters are rendered in the indicated
- style ('decimal' by default). See the
+ <a href="#counter-styles">style</a> ('decimal' by default). See the
section on <a href="#counters">automatic counters and numbering</a> for
more information. The name must not be 'none', 'inherit' or 'initial'.
Such a name causes the declaration to be ignored.</dd>
@@ -895,13 +900,13 @@
string is returned. The case-sensitivity of attribute names depends on
the document language.</dd>
- <dt><dfn id="from-flow-name">from-flow(<string>)</dfn></dt>
+ <dt><dfn id="from-flow-name">from-flow(<ident>)</dfn></dt>
<dd>The element will visually format the available elements in the
- named flow with name <string>. If there is no flow with name
- <string>, then the element is disconnected and does not format
+ 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
+ <ident>, then the element is disconnected and does not format
any children visually. Multiple elements may be associated with the
- same named flow. See the 'content-order' property discussion to
+ same named flow. See the 'content-order' property description to
understand how content segments are associated with different
regions.</dd>
</dl>
@@ -915,7 +920,7 @@
<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(<name>)' is
+ combined with a 'content' value set to 'from-flow(<ident>)' is
undefined.</p>
</div>
@@ -966,7 +971,7 @@
"http://lists.w3.org/Archives/Public/www-style/2011May/0521.html">Mailing
list comment</a></p>
- <p>''content: from-flow(<name>)'' moves an element to a named
+ <p>''content: from-flow(<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>
@@ -997,7 +1002,7 @@
<tr>
<th>Value:</th>
- <td><float></td>
+ <td><integer></td>
</tr>
<tr>
@@ -1038,18 +1043,14 @@
</table>
<dl>
- <dt><float></dt>
+ <dt><integer></dt>
<dd>Specifies the region's priority in the chain it belongs to, i.e..,
the chain of regions associated with the same content flow. Negative
values are allowed.</dd>
</dl>
- <div class="issue">
- Should the type of 'content-order' be ''float'' or ''integer''?
- </div>
-
- <p>If two or more regions with the same 'from-flow( <name>)' value
+ <p>If two or more regions with the same 'from-flow( <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>
@@ -1360,14 +1361,16 @@
<dd>Content flows as it would in a regular content element. If the
content exceeds the container box, it is subject to the <a href=
- "">overflow</a> property's computed value on the region element.</dd>
+ "http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a>
+ property's computed value on the region element.</dd>
<dt>break</dt>
<dd>If the content fits within the <em>region element</em>, then this
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 breaking rules section.</dd>
+ continue in a subsequent region. See the <a href=
+ "#breaking-rules">breaking rules</a> section.</dd>
</dl>
<p>The following code sample illustrates the usage of the 'region-overflow'
@@ -1535,7 +1538,7 @@
<p>The first rule set ''p::region-lines {...}'' uses the
''::regions-line'' pseudo-element. Since all the content is fitted in
- either 'region_1' or 'region_1', this rule set applies to all content
+ either 'region_1' or 'region_2', this rule set applies to all content
lines.</p>
<p>The second rule set ''div {...}'' applies to all <code class=
@@ -1585,7 +1588,7 @@
<p>The specificity of the selectors in a '@region' rule is calculated as
<a href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in
- the CSS Selectors module (see [[!SELECT]]). In other words, the '@region'
+ the CSS Selectors module (see [[SELECT]]). In other words, the '@region'
rule adds an extra condition to the selector's matching, but does not
change the selector's specificity. This is the same behavior as selectors
appearing in '@media' rules declaration blocks (see [[MEDIAQ]]), where the
@@ -1594,8 +1597,8 @@
<p> </p>
<p>Consequently, selectors that match a given element (as describe above),
- participate in the CSS Cascading
- order as defined in [[!CSS21]].</p>
+ 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>
@@ -1637,7 +1640,8 @@
<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> flowWithName(<a href=
+ <a href="#dom-namedflow">NamedFlow</a> <a href=
+"#dom-document-flowwithname">flowWithName(</a><a href=
"http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
};
</pre>
@@ -1646,7 +1650,7 @@
interface offers a representation of the <span>named flow</span>.</p>
<pre class="idl">
interface <a href="#dom-namedflow">NamedFlow</a> {
- readonly attribute boolean <a href="#dom-namedflow-overflow">overflow</a>;
+ readonly attribute boolean <a href="dom-namedflow-overflow">overflow</a>;
};
</pre>
@@ -1659,28 +1663,6 @@
interface, authors can easily check if all content has been fitted into
existing regions. If it has, the overflow property would be true.</p>
- <div class="issue">
- <p>See <a href=
- "http://lists.w3.org/Archives/Public/www-style/2011May/0379.html">Mailing
- list discussion</a>.</p>
-
- <p>Alex has suggested to not have a NamedFlow interface but instead
- expand the Element interface to provide access to the regions (e.g.,
- does the flow fit? which flow elements fall into which region?) and
- pointed out that the <code class="idl">NamedFlow</code> interface
- implies there is only one view on the flow. He asked that we prepare
- for multiple views.</p>
-
- <p>Alex's proposal has been added (see below) but the
- <code class="idl">NamedFlow</code> interface was kept for now because it covers the
- most basic need (does the flow fit?) in the case where regions are not
- elements.</p>
-
- <p>There needs to be a discussion about how to get a single set
- of APIs that would both be 'multi-view' ready and work on elements and
- pseudo-elements.</p>
- </div>
-
<h3 id="extension-to-the-element-interface">Extension to the Element
interface</h3>
@@ -1713,29 +1695,29 @@
Note that the region's <a href=
"http://www.w3.org/TR/CSS21/visufx.html#overflow"><code 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>.</dd>
+ 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>.</dd>
<dt>fit</dt>
<dd>the region element's content fits into the region's <a href=
"http://www.w3.org/TR/CSS21/box.html#box-dimensions">content 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 further fitted in subsequent regions. In particular, in this
- last case, that means the region may have received no content from the
+ 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 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 span to accommodate any content).</dd>
<dt>empty</dt>
<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 'content-order' value.</dd>
+ the <span title="named-flow">named flow</span> was fitted in regions
+ with a lower 'content-order' value.</dd>
</dl>
<p>If an element is not a <span>region</span>, then the <code class=
@@ -1754,29 +1736,47 @@
attribute returns an array with a single <code class="idl"><span title=
"range">Range</span></code> matching the element's full content.</p>
- <div class="issue">
+ <div class="note">
The Element interface extension is only available to regions that are
document elements and not to regions that are pseudo-elements. For
example, when regions are created with a grid layout, this interface
cannot be used because the regions are not document elements but
- pseudo-elements.
+ pseudo-elements. In that situation, the NamedFlow interface can be
+ used.
</div>
<div class="issue">
- <strong>Re-layout event?</strong>
-
- <p>It has been <a href=
- "http://lists.w3.org/Archives/Public/www-style/2011May/0379.html">suggested</a>
- to add a 'layout changed' event to notify any change on the region
- layout or regionOverflow value. Should we add that?</p><strong>Find the
- region containing a particular flow element</strong>
-
<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.
Should we add such an API? How would it work in a 'multi-view' context
as suggested by Alex.</p>
</div>
+
+ <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">NamedFlowEvent</code>s 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>NamedFlowEvent</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>
+ <tr class="assert must"><th>Target</th> <td><code>Element</code></td></tr>
+ <tr class="assert must"><th>Cancelable</th> <td>Yes</td></tr>
+ <tr class="assert must"><th>Default action</th> <td>none</td></tr>
+ <tr class="assert must"><th>Context info</th>
+ <td>
+ <ul>
+ <li><a href="#events-event-type-target"><code class="attribute-name">Event.target</code></a>: region whose layout may have changed</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody></table>
+
<h2 id="integration-with-other-specifications">Integration with other
specifications</h2>
@@ -1837,7 +1837,7 @@
body:before::grid-cell(c),
body:before::grid-cell(d),
body:before::grid-cell(e) {
- content: from-flow('article_flow');
+ content: from-flow(article_flow);
}
</style>
</pre>
@@ -1845,9 +1845,10 @@
<h4 id="css-multi-column-layout">CSS Multi-Column Layout</h4>
- <p>The CSS Multi-Column Layout (see [[!CSS3COL]]) does not specify a
- selector for column regions.</p>
+ <p>The CSS Multi-Column Layout (see [[CSS3COL]]) does not specify a
+ selector for column boxes. Therefore, column boxes cannot be regions.</p>
+<!--
<p> </p>
<p>The CSS Multi-Column specification could offer a pseudo-element selector
@@ -1864,11 +1865,11 @@
}
body:before::nth-column(even) {
- content: from-flow('article_1_flow');
+ content: from-flow(article_1_flow);
}
body:before::nth-column(odd) {
- content: from-flow('article_2_flow');
+ content: from-flow(article_2_flow);
}
</style>
@@ -1881,14 +1882,15 @@
<p>Note that if a column box becomes associated with a flow by its content
property, it is no longer associated to the 'column flow', as discussed
- <a href="#column-flow">before</a>. For example, if the second column in a
+ <a href="column-flow">before</a>. For example, if the second column in a
multi column element was associated with the 'illustration' named flow, the
regular 'column-flow' would thread through the first and third column while
column two would flow content from the 'illustration' named flow.</p>
+-->
<h4 id="css-visual-formatting">CSS Visual Formatting</h4>
- <p>CSS (see [[!CSS21]]) offers a way to visually format content with
+ <p>CSS (see [[CSS21]]) offers a way to visually format content with
different layout schemes: inline and block formatting, float, absolute
positioning, relative positioning or table layout.</p>
@@ -1935,7 +1937,7 @@
related to the following specifications:</p>
<ol>
- <li>CSS Exclusions Module [[CSS3-EXCLUSIONS]]. This module defines a
+ <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
@@ -1943,14 +1945,47 @@
designs, it is expected that the CSS Exclusions module will be commonly
combined with the CSS Regions module.</li>
- <li>CSS Line Grid Module [[CSS3-LINE-GRID]]. This module defines a
+ <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>
</ol>
<h2 id="conformance">Conformance</h2>
+
+ <h2 id="changes">Changes</h2>
+ <h3 id="changes_from_June_09_2011">Changes from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June 09<sup>th</sup> 2011</a> version</h3>
+
+ <ul>
+ <li>Made 'content-order' a <integer> and not a <float> following a working group
+ <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a></li>
+ <li>Added Alex Mogilevsky as an editor</li>
+ <li>Flow names became <indent> instead of <string> following a working group
+ <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li>
+ <li>Removed issue about possibly altering the DOM Events model for region events following
+ a working group
+ <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li>
+ <li>Made the "relation to document events" section informative following a working group
+ <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li>
+ <li>Removed issue in section "The NamedFlow interface" following the working group's
+ <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> to
+ have both NamedFlow and the Element interface extension</li>
+ <li>Following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>:
+ <ul>
+ <li>Turned the first issue in the "Extensions to the Element interface" into a note
+ explaining that the NamedFlow interface can be used when regions are pseudo-elements.</li>
+ <li>Added NamedFlowEvent</li>
+ </ul>
+ </li>
+ <li>Excluded 'none', 'inherit' and 'initial' from the possible identifier names on
+ 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
+ elements.</li>
+ </ul>
+
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
<h2 class="no-num" id="references">References</h2>
Received on Friday, 1 July 2011 22:59:49 UTC