- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 09 Jun 2011 18:51:41 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv10631
Modified Files:
Overview.html
Log Message:
Generated. Do not edit!
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.8
retrieving revision 1.9
diff -u -d -r1.8 -r1.9
--- Overview.html 8 Jun 2011 18:56:26 -0000 1.8
+++ Overview.html 9 Jun 2011 18:51:39 -0000 1.9
@@ -7,17 +7,11 @@
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Regions Module</title>
- <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="../default.css" rel=stylesheet 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>
- <script defer src="http://test.csswg.org/harness/annotate.js#css3-regions"
- type="text/javascript">
-</script>
+ <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
+ type="text/css">
<body>
<div class=head id=div-head> <!--begin-logo-->
@@ -26,18 +20,19 @@
<h1 id=css-regions-module>CSS Regions Module</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 08 June 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 09 June 2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-regions-20110608/">http://www.w3.org/csswg/css3-regions</a>
+ href="http://www.w3.org/TR/2011/ED-css3-regions-20110609/">http://www.w3.org/csswg/css3-regions
+ <!--http://www.w3.org/TR/2011/WD-css3-regions-20110609/--></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:
@@ -397,12 +392,11 @@
<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
@@ -591,27 +585,27 @@
<ol>
<li>In the vertical margin between block-level boxes. When an unforced
- region break occurs here, the <a href="cascade.html#used-value">used
- values</a> of the relevant <a class=noxref
- href="box.html#propdef-margin-top"><span
+ region break occurs here, the <a
+ href="/TR/CSS2/cascade.html#used-value">used values</a> of the relevant
+ <a class=noxref href="/TR/CSS2/box.html#propdef-margin-top"><span
class=propinst-margin-top>‘<code
class=property>margin-top</code>’</span></a> and <a class=noxref
- href="box.html#propdef-margin-bottom"><span
+ href="/TR/CSS2/box.html#propdef-margin-bottom"><span
class=propinst-margin-bottom>‘<code
class=property>margin-bottom</code>’</span></a> properties are set
to ‘<code class=css>0</code>’. When a forced region break
occurs here, the used value of the relevant <a class=noxref
- href="box.html#propdef-margin-bottom"><span
+ href="/TR/CSS2/box.html#propdef-margin-bottom"><span
class=propinst-margin-bottom>‘<code
class=property>margin-bottom</code>’</span></a> property is set to
‘<code class=css>0</code>’; the relevant <a class=noxref
- href="box.html#propdef-margin-top"><span
+ href="/TR/CSS2/box.html#propdef-margin-top"><span
class=propinst-margin-top>‘<code
class=property>margin-top</code>’</span></a> used value may either
be set to ‘<code class=css>0</code>’ or retained.
- <li>Between <a href="visuren.html#line-box">line boxes</a> inside a <a
- href="visuren.html#block-boxes">block container</a> box.
+ <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>Between the content edge of a block container box and the outer edges
of its child content (margin edges of block-level children or line box
@@ -641,10 +635,10 @@
allowed.
<li><strong>Rule C:</strong> Breaking at (2) is allowed only if 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 ‘<code
- class=property>orphans</code>’ or more, and the number of line
- boxes between the break and the end of the box is the value of
+ of <a href="/TR/CSS2/visuren.html#line-box">line boxes</a> between the
+ break and the start of the enclosing block box is the value of
+ ‘<code class=property>orphans</code>’ or more, and the number
+ of line boxes between the break and the end of the box is the value of
‘<code class=property>widows</code>’ or more.
<li><strong>Rule D:</strong> In addition, breaking at (2) or (3) is
@@ -693,8 +687,8 @@
<p>Suppose, for example, that the style sheet contains ‘<code
class=css>orphans: 4</code>’, ‘<code class=css>widows:
2</code>’, and there are 20 lines (<a
- href="visuren.html#line-box">line boxes</a>) available at the bottom of
- the current region:</p>
+ href="/TR/CSS2/visuren.html#line-box">line boxes</a>) available at the
+ bottom of the current region:</p>
<ul>
<li>If a paragraph at the end of the current region contains 20 lines or
@@ -702,7 +696,8 @@
<li>If the paragraph contains 21 or 22 lines, the second part of the
paragraph must not violate the <a class=noxref
- href="page.html#propdef-widows"><span class=propinst-widows>‘<code
+ href="/TR/CSS2/page.html#propdef-widows"><span
+ class=propinst-widows>‘<code
class=property>widows</code>’</span></a> constraint, and so the
second part must contain exactly two lines
@@ -710,11 +705,13 @@
contain 20 lines and the second part the remaining lines.
</ul>
- <p>Now suppose that <a class=noxref href="page.html#propdef-orphans"><span
+ <p>Now suppose that <a class=noxref
+ href="/TR/CSS2/page.html#propdef-orphans"><span
class=propinst-orphans>‘<code
class=property>orphans</code>’</span></a> is ‘<code
class=css>10</code>’, <a class=noxref
- href="page.html#propdef-widows"><span class=propinst-widows>‘<code
+ href="/TR/CSS2/page.html#propdef-widows"><span
+ class=propinst-widows>‘<code
class=property>widows</code>’</span></a> is ‘<code
class=css>20</code>’, and there are 8 lines available at the bottom
of the current region:</p>
@@ -741,7 +738,7 @@
<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
+ placed and several <dfn id=auto-flows title="auto flows">‘<code
class=css>auto flows</code>’</dfn> where children of content
elements are automatically placed.
@@ -759,7 +756,7 @@
positioned in different ways.
<p>The <a href="#normal-flow-def"><em>normal flow</em></a> is one of the <a
- href="#auto-flow"><em>auto flows</em></a>.
+ href="#auto-flows"><em>auto flows</em></a>.
<h4 id=positioned-flow><span class=secno>2.4.2. </span>Positioned flow</h4>
@@ -772,8 +769,8 @@
flow</em></a> and in the <em>positioned flow</em>, it applies different
positioning schemes to each flow.
- <p>The <em>positioned flow</em> is one of the <a href="#auto-flow"><em>auto
- flows</em></a>.
+ <p>The <em>positioned flow</em> is one of the <a
+ href="#auto-flows"><em>auto flows</em></a>.
<h4 id=column-flow><span class=secno>2.4.3. </span>Column flow</h4>
@@ -786,7 +783,7 @@
flow</code></a>’, which is the content of the element).
<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>.
+ href="#auto-flows"><em>auto flows</em></a>.
<div class=issue> Need to add a <dfn id=grid-cell-flow>grid cell flow</dfn>
section.</div>
@@ -848,7 +845,7 @@
<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 places an element into a specific
- named flow or lets the <a href=auto-flows>automatic flow assignment</a>
+ 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>’
@@ -866,10 +863,9 @@
href="#flow2"><code class=property>flow</code></a>’ property</h3>
<p>The ‘flow’ property places an element into a named flow or
- automatically places it in the appropriate flow (see the <a
- href="#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.
+ automatically places it in the appropriate flow (see the Visual Formatting
+ Model and Flows 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>
@@ -918,8 +914,7 @@
<dt>auto
<dd>The element is automatically moved to the appropriate flow according
- to the <a href="#formatting_model_considerations">Visual Formatting Model
- and Flows</a> definitions.
+ to the Visual Formatting Model and Flows definitions.
<dt><string>
@@ -1069,13 +1064,13 @@
‘<code class=css>::before</code>’ and ‘<code
class=css>::after</code>’ pseudo-elements. For other elements, the
element uses the flow assigned to its children following the <a
- href=auto-flows>automatic flow assignment for the Visual Formatting
+ href="#auto-flows">automatic flow assignment for the Visual Formatting
Model..</a>
<dt><strong><string></strong>
<dd>Text content (see the section on <a
- href="syndata.html#strings">strings</a>).
+ href="/TR/CSS2/syndata.html#strings">strings</a>).
<dt><strong><uri></strong>
@@ -1086,25 +1081,26 @@
<dt><strong><counter></strong>
- <dd><a href="syndata.html#counter">Counters</a> may be specified with two
- different functions: ‘<code class=css>counter()</code>’ or
- ‘<code class=css>counters()</code>’. The former has two
- forms: ‘<code class=css>counter(<var>name</var>)</code>’ or
+ <dd><a href="/TR/CSS2/syndata.html#counter">Counters</a> may be specified
+ with two different functions: ‘<code
+ class=css>counter()</code>’ or ‘<code
+ class=css>counters()</code>’. The former has two forms:
+ ‘<code class=css>counter(<var>name</var>)</code>’ or
‘<code class=css>counter(<var>name</var>,
<var>style</var>)</code>’. 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 <a href="#counter-styles">style</a>
- (‘<code class=property>decimal</code>’ by default). The
- latter function also has two forms: ‘<code
- class=css>counters(<var>name</var>, <var>string</var>)</code>’ or
- ‘<code class=css>counters(<var>name</var>, <var>string</var>,
+ is formatted in the indicated style (‘<code
+ class=property>decimal</code>’ by default). The latter function
+ also has two forms: ‘<code class=css>counters(<var>name</var>,
+ <var>string</var>)</code>’ or ‘<code
+ class=css>counters(<var>name</var>, <var>string</var>,
<var>style</var>)</code>’. 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 <a href="#counter-styles">style</a>
- (‘<code class=property>decimal</code>’ by default). See the
- section on <a href="#counters">automatic counters and numbering</a> for
- more information. The name must not be ‘<code
+ are rendered in the indicated style (‘<code
+ class=property>decimal</code>’ by default). See the section on <a
+ href="#counters">automatic counters and numbering</a> for more
+ information. The name must not be ‘<code
class=property>none</code>’, ‘<code
class=property>inherit</code>’ or ‘<code
class=property>initial</code>’. Such a name causes the declaration
@@ -1593,8 +1589,7 @@
<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 <a href="#breaking-rules">breaking rules</a>
- section.
+ subsequent region. See the breaking rules section.
</dl>
<p>The following code sample illustrates the usage of the ‘<a
@@ -1835,8 +1830,7 @@
<p>
<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 CSS Cascading order as defined in <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<h2 id="cssom_view_and_css_regions"><span class=secno>4. </span>CSSOM View
@@ -1888,7 +1882,7 @@
<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-flowwithname">flowWithName(</a><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
+ <a href="#dom-namedflow">NamedFlow</a> flowWithName(<a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
};
</pre>
@@ -1897,7 +1891,7 @@
<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>
@@ -2133,7 +2127,7 @@
<p>Note that if a column box becomes associated with a flow by its content
property, it is no longer associated to the ‘<a
href="#column-flow-def"><code class=css>column flow</code></a>’, as
- discussed <a href=column-flow>before</a>. For example, if the second
+ discussed <a href="#column-flow">before</a>. For example, if the second
column in a multi column element was associated with the ‘<code
class=property>illustration</code>’ named flow, the regular
‘<code class=property>column-flow</code>’ would thread through
@@ -2191,18 +2185,20 @@
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>7. </span>Conformance</h2>
@@ -2259,6 +2255,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 11 May 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
@@ -2269,6 +2275,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 11 May
+ 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
@@ -2315,7 +2330,7 @@
<!--begin-index-->
<ul class=indexlist>
- <li>auto flows, <a href="#auto-flow" title="auto
+ <li>auto flows, <a href="#auto-flows" title="auto
flows"><strong>2.4.</strong></a>
<li>break-after, <a href="#break-after"
Received on Thursday, 9 June 2011 18:51:49 UTC