- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 09 May 2011 22:08:47 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv14804
Modified Files:
Overview.html Overview.src.html alternate-spec-style.css
Log Message:
Editorial changes (typos, references) and a couple more issues
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Overview.html 9 May 2011 18:22:24 -0000 1.4
+++ Overview.html 9 May 2011 22:08:45 -0000 1.5
@@ -259,7 +259,7 @@
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
<p>Capturing the complex layouts of a typical magazine, newspaper, or
- textbook requires capabilities beyond those possible with existing CSS
+ textbook requires capabilities beyond those available in existing CSS
modules. This is the purpose of the CSS Regions module.
<p>
@@ -279,7 +279,7 @@
<p>
<p>However, for more complex layouts, content needs to flow from one area
- of the page to the next without limitation of the areas sizes and
+ of the page to the next without limitation of the areas' sizes and
positions. These arbitrary areas are the target of specific content flows.
In this document these areas are called regions, and the content flows are
called named flows. Regions are based on the rectangular geometry of the
@@ -306,7 +306,7 @@
1, 2, 3 and 4.
<pre>
-<div id="article">
+<div <em>id="article"</em>>
<h1>Introduction</h1>
<p>This is an example ...</p>
@@ -331,13 +331,14 @@
<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 region and, for the purpose of the example, the selectors
- for regions 1, 2, 3 and 4 are showing as <<code>region1_sel</code>>,
- <<code>region2_sel</code>>, <<code>region3_sel</code>> and
- <<code>region4_sel</code>> respectively. Such a selector could be an
- id selector (e.g., "#region_1") or a grid cell selector (e.g.,
- ""#myGrid::grid-cell([cell-name])") if using the CSS Grid Layout module,
- for example.
+ selector for the regions and, for the purpose of the example, the
+ selectors for regions 1, 2, 3 and 4 are showing as
+ <<code>region1_sel</code>>, <<code>region2_sel</code>>,
+ <<code>region3_sel</code>> and <<code>region4_sel</code>>
+ respectively. Such a selector could be an id selector (e.g.,
+ <code>#region_1</code>) or a grid cell selector (e.g.,
+ <code>#myGrid::grid-cell([cell-name])</code>) if using the CSS Grid Layout
+ module, for example.
<div class=example>
<pre>
@@ -371,8 +372,8 @@
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 match an element depending on the region into
- which it flows.
+ additional selectors may apply depending on the region into which content
+ flows.
<p>In our example, the designer wants to make text that falls into region 1
larger, bold and dark blue. In addition, <h1> headers should be
@@ -419,9 +420,9 @@
</div>
<p>The ‘<code class=css>@region_style</code>’ rule for region 1
- limits its selectors to elements that flow into region 1. The following
+ limits its selectors to content flowing into region 1. The following
figure shows how the rendering changes if we do not increase the font size
- nor make it bold for content falling into region 1. As more content can be
+ nor make it bold for content flowing into region 1. As more content can be
fitted, more content is subject to the contextual selectors, resulting in
more dark blue text into region 1.
@@ -492,6 +493,9 @@
‘<a href="#content-from"><code
class=property>content</code></a>’ property).
+ <div class=issue> Should it be possible to allow inline elements to also be
+ regions?</div>
+
<h3 id=flow-breaking-rules><span class=secno>2.3. </span>Flow breaking
rules</h3>
@@ -519,41 +523,46 @@
</ol>
<div class=issue> The above describes the simple case. It should explain
- how breaks influence this recursion.</div>
+ how breaks influence this recursion. It should also discuss how boxes are
+ split in general.</div>
- <div class=issue> Should the model provide a way to balance regions, as in
- the <a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>
- module?</div>
+ <div class=issue> Should the model provide a way to <a
+ href="http://www.w3.org/TR/css3-multicol/#column-fill">balance</a>
+ regions, as in the <a href="#CSS3COL"
+ rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> module?</div>
<div class=issue> Is there a way to allow regions to be generated when
content that does not fit into the last region remains. This would be
analogous to the way the additional columns are generated when a
- multi-column box overflows (see <a href="#CSS3COL"
+ multi-column box <a
+ href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol">
+ overflows</a> (see <a href="#CSS3COL"
rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>).</div>
<h3 id=formatting-model-considerations><span class=secno>2.4. </span>The
Visual Formatting Model and Flows</h3>
- <p>This section describes the flows that elements formatted according to
- the CSS <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual
+ <p>This section describes the flows to whichi 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
- <a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>) may
- belong to.
+ <a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>) belong
+ to.
- <p>The following describes the ‘<a href="#generated-flow-def"><code
- class=css>generated flow</code></a>’ where generated content of
- pseudo-elements is placed and several <dfn id=auto-flow title="auto
- flows">‘<code class=css>auto flows</code>’</dfn> where
- children of content elements are automatically placed.
+ <p>In particular, this section describes the ‘<a
+ href="#generated-flow-def"><code class=css>generated
+ flow</code></a>’ where generated content of pseudo-elements is
+ placed and several <dfn id=auto-flow title="auto flows">‘<code
+ class=css>auto flows</code>’</dfn> where children of content
+ elements are automatically placed.
<h4 id=normal-flow><span class=secno>2.4.1. </span>Normal flow</h4>
<p>In the CSS formatting model, elements are by default placed in the <dfn
- id=normal-flow-def>normal flow</dfn> of their container. Also, by default,
+ id=normal-flow-def>normal flow</dfn> of their container. Also by default,
a container element gets its content from its <a
href="#normal-flow-def"><em>normal flow</em></a>. This means that by
- default, a container element will visually format its children element and
- will be the only container associated with that flow.
+ default, a container element will visually format its children elements
+ and will be the only container associated with its normal flow.
<p>Note that floats and relatively positioned elements, in this model, are
part of the same flow of content and flow into the same container but are
@@ -570,7 +579,7 @@
<p>If a container has children in the <a href="#normal-flow-def"><em>normal
flow</em></a> and in the <a href="#positioned-flow-def"><em>positioned
- flow</em></a>, it applies different positioning schemes to each flows.
+ flow</em></a>, it applies different positioning schemes to each flow.
<p>The <a href="#positioned-flow-def"><em>positioned flow</em></a> is one
of the <a href="#auto-flow"><em>auto flows</em></a>.
@@ -585,12 +594,12 @@
‘<a href="#column-flow-def"><code class=css>column
flow</code></a>’, which is the content of the element).
- <div class=issue> Need to add a <dfn id=grid-cell-flow>grid cell flow</dfn>
- section.</div>
-
<p>The <a href="#column-flow-def"><em>column flow</em></a> is one of the <a
href="#auto-flow"><em>auto flows</em></a>.
+ <div class=issue> Need to add a <dfn id=grid-cell-flow>grid cell flow</dfn>
+ section.</div>
+
<h4 id=generated-flow><span class=secno>2.4.4. </span>Generated flow</h4>
<p>In the CSS formatting model, when the <code>::before</code> or
@@ -615,10 +624,10 @@
<p>The main CSS Regions module properties are the ‘flow’ and ‘<a
href="#content-from"><code class=property>content</code></a>’
- properties. The ‘flow’ property is used to place an element into a
- specific named flow or lets the <a href=auto-flows>automatic flow
- assignment</a> take place. The ‘content’ property is bind regions with
- a flow. When multiple regions are bound to the same flow, the ‘<a
+ properties. The ‘flow’ property is places an element into a specific
+ named 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 ‘<a
href="#content-order"><code class=property>content-order</code></a>’
property determines the order in which content flows into the sequence of
regions. This sequences of regions is called a <dfn
@@ -635,9 +644,9 @@
<p>The ‘flow’ property places an element into a named flow or
automatically places it in the appropriate flow (see the <a
- href="#formatting-model-considerations">Formatting Model
- Considerations</a> section). Elements that belong to the same flow are
- laid out in the regions associated with that flow.
+ 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.
<table class=propdef summary="flow property definition">
<tbody>
@@ -968,7 +977,7 @@
class=property>break-inside</code></a>’</h3>
<p>When content is laid out in multiple regions, the user agent must
- determine where content break occur. The problem of breaking content into
+ determine where content breaks occur. The problem of breaking content into
segments fitting in regions is similar to breaking content into pages or
columns.
@@ -1193,7 +1202,7 @@
deteriorated. It such cases, it might be useful to provide some
flexibility in the order in which content is pulled from the flow. For
example, it might be good to allow a non breakable table to be moved to
- the next region where it fits and show more of the content that precedes
+ the next region where it fits and show more of the content that follows
that table in the flow in the previous region. This could be achieved with
a <code>flow-priority: flexible</code> setting, for example.</div>
@@ -1289,6 +1298,10 @@
</ul>
</div>
+ <div class=issue> This list of properties may be too limiting. For example,
+ it prohibits the use of <code>display: run-in</code> as in the examples
+ given earlier in this draft.</div>
+
<p>The selectors for style declarations in a ‘<code
class=css>@region-style</code>’ rule only match an element if the
element flows into one of the regions in the rule selector.
@@ -1323,8 +1336,8 @@
example to get red text in region A and blue text in region B. The
intention is to have the red text styling applied to the range that flows
into region A and the blue text styling applied to the range that flows
- into region B. This means that the selector really matches elements, so
- to speak.</p>
+ into region B. This means that the selector really matches segments of
+ elements, so to speak.</p>
</div>
<h2 id="om_regions"><span class=secno>4. </span>CSSOM View and CSS Regions</h2>
@@ -1340,15 +1353,18 @@
accommodate for the additional space required to fit the larger text or
reduce the number of regions for smaller text.
- <p>The CSS OM View ([[CSSOMVIEW]]) specification defines extensions to the
- <code>Element</code> interface that would let an author find out if the
- last region overflows its content boundaries (by comparing its
- ‘<code class=property>scrollHeight</code>’ with its
- ‘<code class=property>contentHeight</code>’). However, this
- assumes the region is a document element, which may not always be the
- case. For example, as described in a later section, a grid cell (see
- [[CSSGRID]]) may be a region, but it is a pseudo-element, not an document
- element. Therefore, it is not possible to access its ‘<code
+ <p>The CSS OM View (<a href="#CSSOM-VIEW"
+ rel=biblioentry>[CSSOM-VIEW]<!--{{CSSOM-VIEW}}--></a>) specification
+ defines extensions to the <code>Element</code> interface that would let an
+ author find out if the last region overflows its content boundaries (by
+ comparing its ‘<code class=property>scrollHeight</code>’ with
+ its ‘<code class=property>contentHeight</code>’). However,
+ this assumes the region is a document element, which may not always be the
+ case. For example, as described in a later section, a grid cell (see <a
+ href="#CSS3-GRID-LAYOUT"
+ rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>) may be
+ a region, but it is a pseudo-element, not an document element. Therefore,
+ it is not possible to access its ‘<code
class=property>scrollHeight</code>’ or ‘<code
class=property>contentHeight</code>’.
@@ -1358,6 +1374,13 @@
exists for elements children of a multi-column container.</p>
</div>
+ <div class=issue>
+ <p>Should we use the <code>Range</code> interface and definition to
+ interface with the flow segments, to represent how the flow gets broken
+ into segments, and to represent what matches the
+ <code>@region-style</code> selectors?</p>
+ </div>
+
<p>
<p>To address this need, this specification proposes to add a method to the
@@ -1416,9 +1439,12 @@
<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.
- <div class=issue> To completely allow the use-case presented in the
- introduction, ::grid-cell pseudo elements should also allow box sizing
- properties which they do not at the moment.</div>
+ <div class=issue> 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 ‘<code class=property>display</code>’
+ property. To completely allow the use-case presented in the introduction,
+ <code>::grid-cell</code> pseudo elements should allow box sizing
+ properties and behave as block level elements.</div>
<div class=example>
<pre>
@@ -1447,7 +1473,8 @@
<h4 id=css-multi-column-layout><span class=secno>5.2.2. </span>CSS
Multi-Column Layout</h4>
- <p>The CSS Multi-Column Layout (see [[CSSMULTICOL]]) does not specify a
+ <p>The CSS Multi-Column Layout (see <a href="#CSS3COL"
+ rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>) does not specify a
selector for column regions.
<p>
@@ -1494,7 +1521,8 @@
<h4 id=css-flexible-box-layout-module><span class=secno>5.2.3. </span>CSS
Flexible Box Layout Module</h4>
- <p>The CSS Flexible Box Layout Module (see [[CSS3FLEXBOX]]) aranges
+ <p>The CSS Flexible Box Layout Module (see <a href="#CSS3-FLEXBOX"
+ rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>) aranges
elements vertically or horizontally depending on various properties.
<p>The following example shows how CSS Flexible Box Layout could be use to
@@ -1666,6 +1694,16 @@
</dd>
<!---->
+ <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]
+
+ <dd>Tab Atkins Jr.; Alex Mogilevsky; L. David Baron. <a
+ href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/"><cite>Flexible
+ Box Layout Module.</cite></a> 22 March 2011. W3C Working Draft. (Work in
+ progress.) URL: <a
+ href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a>
+ </dd>
+ <!---->
+
<dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
<dd>Alex Mogilevsky; et al. <a
@@ -1686,6 +1724,16 @@
</dd>
<!---->
+ <dt id=CSSOM-VIEW>[CSSOM-VIEW]
+
+ <dd>Anne van Kesteren. <a
+ href="http://www.w3.org/TR/2009/WD-cssom-view-20090804/"><cite>CSSOM View
+ Module.</cite></a> 4 August 2009. W3C Working Draft. (Work in progress.)
+ URL: <a
+ href="http://www.w3.org/TR/2009/WD-cssom-view-20090804/">http://www.w3.org/TR/2009/WD-cssom-view-20090804/</a>
+ </dd>
+ <!---->
+
<dt id=DOM-LEVEL-2-TRAVERSAL-RANGE>[DOM-LEVEL-2-TRAVERSAL-RANGE]
<dd>Joe Kesselman; et al. <a
Index: alternate-spec-style.css
===================================================================
RCS file: /sources/public/csswg/css3-regions/alternate-spec-style.css,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- alternate-spec-style.css 4 May 2011 05:32:27 -0000 1.1
+++ alternate-spec-style.css 9 May 2011 22:08:45 -0000 1.2
@@ -37,7 +37,7 @@
padding-left: 1em;
position: relative;
color: gray;
- width: 50%;
+ padding-right: 10em;
}
div.issue:before {
@@ -60,3 +60,12 @@
color: gray;
float: right;
}
+
+pre.idl {
+ background: #f4f4f4;
+ padding: 0.5em;
+ margin: 1em 0;
+ border: thin solid #999;
+ position: relative;
+ clear: both;
+}
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- Overview.src.html 5 May 2011 17:57:18 -0000 1.3
+++ Overview.src.html 9 May 2011 22:08:45 -0000 1.4
@@ -123,7 +123,7 @@
<h2 id="introduction">Introduction</h2>
<p>Capturing the complex layouts of a typical magazine, newspaper, or
- textbook requires capabilities beyond those possible with existing CSS
+ textbook requires capabilities beyond those available in existing CSS
modules. This is the purpose of the CSS Regions module.</p>
<p> </p>
@@ -142,7 +142,7 @@
<p> </p>
<p>However, for more complex layouts, content needs to flow from one area
- of the page to the next without limitation of the areas sizes and
+ of the page to the next without limitation of the areas' sizes and
positions. These arbitrary areas are the target of specific content flows.
In this document these areas are called regions, and the content flows are
called named flows. Regions are based on the rectangular geometry of the
@@ -166,7 +166,7 @@
<p>The following code snippet shows the content to flow between the regions
1, 2, 3 and 4.</p>
<pre>
-<div id="article">
+<div <em>id="article"</em>>
<h1>Introduction</h1>
<p>This is an example ...</p>
@@ -192,13 +192,13 @@
<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 region and, for the purpose of the example, the selectors
+ selector for the regions and, for the purpose of the example, the selectors
for regions 1, 2, 3 and 4 are showing as <<code>region1_sel</code>>,
<<code>region2_sel</code>>, <<code>region3_sel</code>> and
<<code>region4_sel</code>> respectively. Such a selector could be an
- id selector (e.g., "#region_1") or a grid cell selector (e.g.,
- ""#myGrid::grid-cell([cell-name])") if using the CSS Grid Layout module,
- for example.</p>
+ id selector (e.g., <code>#region_1</code>) or a grid cell selector (e.g.,
+ <code>#myGrid::grid-cell([cell-name])</code>) if using the CSS Grid Layout
+ module, for example.</p>
<div class="example">
<pre>
@@ -228,8 +228,8 @@
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 match an element depending on the region into
- which it flows.</p>
+ additional selectors may apply depending on the region into which content
+ flows.</p>
<p>In our example, the designer wants to make text that falls into region 1
larger, bold and dark blue. In addition, <h1> headers should be
@@ -275,12 +275,12 @@
</pre>
</div>
- <p>The '@region_style' rule for region 1 limits its selectors to elements
- that flow into region 1. The following figure shows how the rendering
- changes if we do not increase the font size nor make it bold for content
- falling into region 1. As more content can be fitted, more content is
- subject to the contextual selectors, resulting in more dark blue text into
- region 1.</p>
+ <p>The '@region_style' rule for region 1 limits its selectors to content
+ flowing into region 1. The following figure shows how the rendering changes
+ if we do not increase the font size nor make it bold for content flowing
+ into region 1. As more content can be fitted, more content is subject to
+ the contextual selectors, resulting in more dark blue text into region
+ 1.</p>
<div class="figure">
<img src="images/region-styling.png" width="450" alt=
@@ -345,6 +345,10 @@
box</a> and has an associated <em>named flow</em> (see the 'content'
property).</p>
+ <div class="issue">
+ Could inline elements also be regions?
+ </div>
+
<h3 id="flow-breaking-rules">Flow breaking rules</h3>
<p>This section describes how container boxes consume content from a flow.
@@ -371,42 +375,46 @@
<div class="issue">
The above describes the simple case. It should explain how breaks
- influence this recursion.
+ influence this recursion. It should also discuss how boxes are split in
+ general.
</div>
<div class="issue">
- Should the model provide a way to balance regions, as in the
- [[CSS3COL]] module?
+ Should the model provide a way to <a href=
+ "http://www.w3.org/TR/css3-multicol/#column-fill">balance</a> regions,
+ as in the [[CSS3COL]] module?
</div>
<div class="issue">
Is there a way to allow regions to be generated when content that does
not fit into the last region remains. This would be analogous to the
way the additional columns are generated when a multi-column box
- overflows (see [[CSS3COL]]).
+ <a href=
+ "http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol">
+ overflows</a> (see [[CSS3COL]]).
</div>
<h3 id="formatting-model-considerations">The Visual Formatting Model and
Flows</h3>
- <p>This section describes the flows that 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]]) may belong to.</p>
+ <p>This section describes the flows to whichi 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>
- <p>The following describes the 'generated flow' where generated content of
- pseudo-elements is placed and several <dfn id="auto-flow" title=
- "auto flows">'auto flows'</dfn> where children of content elements are
- automatically placed.</p>
+ <p>In particular, this section describes the 'generated flow' where
+ generated content of pseudo-elements is placed and several <dfn id=
+ "auto-flow" title="auto flows">'auto flows'</dfn> where children of content
+ elements are automatically placed.</p>
<h4 id="normal-flow">Normal flow</h4>
<p>In the CSS formatting model, elements are by default placed in the
- <dfn id="normal-flow-def">normal flow</dfn> of their container. Also, by
+ <dfn id="normal-flow-def">normal flow</dfn> of their container. Also by
default, a container element gets its content from its <em>normal
flow</em>. This means that by default, a container element will visually
- format its children element and will be the only container associated with
- that flow.</p>
+ format its children elements and will be the only container associated with
+ its normal flow.</p>
<p>Note that floats and relatively positioned elements, in this model, are
part of the same flow of content and flow into the same container but are
@@ -422,7 +430,7 @@
<p>If a container has children in the <em>normal flow</em> and in the
<em>positioned flow</em>, it applies different positioning schemes to each
- flows.</p>
+ flow.</p>
<p>The <em>positioned flow</em> is one of the <em>auto flows</em>.</p>
@@ -434,12 +442,12 @@
multiple regions (column boxes) get their content from a single flow (the
element's 'column flow', which is the content of the element).</p>
+ <p>The <em>column flow</em> is one of the <em>auto flows</em>.</p>
+
<div class="issue">
Need to add a <dfn id="grid-cell-flow">grid cell flow</dfn> section.
</div>
- <p>The <em>column flow</em> is one of the <em>auto flows</em>.</p>
-
<h4 id="generated-flow">Generated flow</h4>
<p>In the CSS formatting model, when the <code>::before</code> or
@@ -462,12 +470,12 @@
<h2 id="regions-properties">Properties and Rules</h2>
<p>The main CSS Regions module properties are the ‘flow’ and 'content'
- properties. The ‘flow’ property is used to place an element into a specific
- named flow or lets the <a href="auto-flows">automatic flow assignment</a>
- take place. The ‘content’ property is bind regions 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 sequences of regions is called a <dfn>chain of regions</dfn>.</p>
+ properties. The ‘flow’ property is places an element into a specific named
+ 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
+ sequences of regions is called a <dfn>chain of regions</dfn>.</p>
<p> </p>
@@ -479,7 +487,7 @@
<p>The ‘flow’ property places an element into a named flow or automatically
places it in the appropriate flow (see the <a href=
- "#formatting-model-considerations">Formatting Model Considerations</a>
+ "#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>
@@ -813,7 +821,7 @@
'break-inside'</h3>
<p>When content is laid out in multiple regions, the user agent must
- determine where content break occur. The problem of breaking content into
+ determine where content breaks occur. The problem of breaking content into
segments fitting in regions is similar to breaking content into pages or
columns.</p>
@@ -1053,7 +1061,7 @@
might be useful to provide some flexibility in the order in which
content is pulled from the flow. For example, it might be good to allow
a non breakable table to be moved to the next region where it fits and
- show more of the content that precedes that table in the flow in the
+ show more of the content that follows that table in the flow in the
previous region. This could be achieved with a <code>flow-priority:
flexible</code> setting, for example.
</div>
@@ -1137,6 +1145,12 @@
</ul>
</div>
+ <div class="issue">
+ This list of properties may be too limiting. For example, it prohibits
+ the use of <code>display: run-in</code> as in the examples given
+ earlier in this draft.
+ </div>
+
<p>The selectors for style declarations in a '@region-style' rule only
match an element if the element flows into one of the regions in the rule
selector.</p>
@@ -1168,7 +1182,7 @@
intention is to have the red text styling applied to the range that
flows into region A and the blue text styling applied to the range that
flows into region B. This means that the selector really matches
- elements, so to speak.</p>
+ segments of elements, so to speak.</p>
</div>
<h2 id="om_regions">CSSOM View and CSS Regions</h2>
@@ -1184,14 +1198,14 @@
the additional space required to fit the larger text or reduce the number
of regions for smaller text.</p>
- <p>The CSS OM View ([[CSSOMVIEW]]) specification defines extensions to the
+ <p>The CSS OM View ([[CSSOM-VIEW]]) specification defines extensions to the
<code>Element</code> interface that would let an author find out if the
last region overflows its content boundaries (by comparing its
'scrollHeight' with its 'contentHeight'). However, this assumes the region
is a document element, which may not always be the case. For example, as
- described in a later section, a grid cell (see [[CSSGRID]]) may be a
- region, but it is a pseudo-element, not an document element. Therefore, it
- is not possible to access its 'scrollHeight' or 'contentHeight'.</p>
+ described in a later section, a grid cell (see [[CSS3-GRID-LAYOUT]]) may be
+ a region, but it is a pseudo-element, not an document element. Therefore,
+ it is not possible to access its 'scrollHeight' or 'contentHeight'.</p>
<div class="issue">
<p>Since an element may be split into multiple regions, there should be
@@ -1199,6 +1213,13 @@
exists for elements children of a multi-column container.</p>
</div>
+ <div class="issue">
+ <p>Should we use the <code>Range</code> interface and definition to
+ interface with the flow segments, to represent how the flow gets broken
+ into segments, and to represent what matches the
+ <code>@region-style</code> selectors?</p>
+ </div>
+
<p> </p>
<p>To address this need, this specification proposes to add a method to the
@@ -1253,9 +1274,12 @@
introduction.</p>
<div class="issue">
+ 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 presented in the introduction,
- ::grid-cell pseudo elements should also allow box sizing properties
- which they do not at the moment.
+ <code>::grid-cell</code> pseudo elements should allow box sizing properties
+ and behave as block level elements.
</div>
<div class="example">
@@ -1284,7 +1308,7 @@
<h4>CSS Multi-Column Layout</h4>
- <p>The CSS Multi-Column Layout (see [[CSSMULTICOL]]) does not specify a
+ <p>The CSS Multi-Column Layout (see [[CSS3COL]]) does not specify a
selector for column regions.</p>
<p> </p>
@@ -1327,7 +1351,7 @@
<h4>CSS Flexible Box Layout Module</h4>
- <p>The CSS Flexible Box Layout Module (see [[CSS3FLEXBOX]]) aranges
+ <p>The CSS Flexible Box Layout Module (see [[CSS3-FLEXBOX]]) aranges
elements vertically or horizontally depending on various properties.</p>
<p>The following example shows how CSS Flexible Box Layout could be use to
Received on Monday, 9 May 2011 22:08:50 UTC