index.html 83.7 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head profile="http://www.w3.org/2006/03/hcard"><meta
  content="text/html; charset=utf-8" http-equiv=Content-Type>

  <title>CSS Regions Module Level 3</title>
  <link href=default.css rel=stylesheet type="text/css">

  <style type="text/css">

  /* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
  /* The fonts are not applied if only loaded from the alternate stylesheet    */

  /* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */
  @import url(fonts/Droid-Serif-fontfacekit/stylesheet.css);
  @import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css);

  /*
  @import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
  @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
  */

         a.toggle {
             position: fixed;
             top: 0.5em;
             right: 0.5em;
         	font-size: smaller;
         	color: gray;
         	opacity: 0.2;
         }

         a.toggle:hover {
             opacity: 1;
             color: #46A4E9;
         }

         .issue.resolved, .issue.stale, .issue.moved {
             display: none;
         }


         #region-style-example p, #region-style-example pre {
         	clear: both;
         }

         #region_styling_illustration {
         	margin: 0px auto;
         	width: 70ex;
         }

         .big.note {
             font-size: 1.2em;
             line-height: 1.3em;
             color: #2f2f2f;
         }

         .big.note:before {
             content: "NOTE";
             display: block;
             color: rgba(0, 0, 0, 0.15);
             font-weight: bold;
             margin-bottom: 0.5em;
         }

       </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">
  <link href=alternate-spec-style.css id=st rel=stylesheet
  title="additional spec styles" type="text/css">

 <body>
  <div class=head id=div-head> <!--begin-logo-->
   <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 Level 3</h1>

   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 29 November
    2011</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a>

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a>

    <dt>Previous version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">http://www.w3.org/TR/2011/WD-css3-regions-20110609/</a>


    <dt>Editors:

    <dd class=vcard><span class=fn>Vincent Hardy</span>, <span
     class=org>Adobe Systems, Inc.</span>, <span
     class=email>vhardy@adobe.com</span>

    <dd class=vcard><span class=fn>Alex Mogilevsky</span>, <span
     class=org>Microsoft</span>, <span
     class=email>alexmog@microsoft.com</span>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym
    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>The CSS regions module allows content to flow across multiple areas
   called regions. The regions are not necessarily contiguous in 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 <a href="#CSS3COL"
   rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> or the Grid Layout Module
   <a href="#CSS3-GRID-LAYOUT"
   rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> to
   position the regions where content flows.

  <h2 class="no-num no-toc" id=status-of-this-document>Status of this
   document</h2>

  <p class="big note">This document uses an experimental style sheet. We
   welcome your feedback on the styles at <a
   href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-regions&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-regions<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This draft is related to the drafts about Multi-column Layout <a
   href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, Grid
   Layout <a href="#CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>, Flexible Box Layout <a
   href="#CSS3-FLEXBOX"
   rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>, and Template
   Layout <a href="#CSS3LAYOUT"
   rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>.

  <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
    <ul class=toc>
     <li><a href="#named-flows-and-regions"><span class=secno>1.1.
      </span>Named flows and regions</a>

     <li><a href="#region-styling"><span class=secno>1.2. </span>Regions
      styling</a>
    </ul>

   <li><a href="#css-regions-concepts"><span class=secno>2. </span>CSS
    regions concepts</a>
    <ul class=toc>
     <li><a href="#regions"><span class=secno>2.1. </span>Regions</a>

     <li><a href="#named-flow"><span class=secno>2.2. </span>Named flow</a>

     <li><a href="#regions-flow-breaking-rules"><span class=secno>2.3.
      </span>Regions flow breaking rules</a>
    </ul>

   <li><a href="#relation-to-document-events"><span class=secno>3.
    </span>Relation to document events</a>

   <li><a href="#properties-and-rules"><span class=secno>4. </span>Properties
    and rules</a>
    <ul class=toc>
     <li><a href="#the-flow-into-property"><span class=secno>4.1. </span>The
      &lsquo;<code class=property>flow-into</code>&rsquo; property</a>

     <li><a href="#the-flow-from-property"><span class=secno>4.2. </span>The
      &lsquo;<code class=property>flow-from</code>&rsquo; property</a>
      <ul class=toc>
       <li><a href="#auto-width-on-regions"><span class=secno>4.2.1.
        </span>Auto width on regions</a>

       <li><a href="#auto-height-on-regions"><span class=secno>4.2.2.
        </span>Auto height on regions</a>
      </ul>

     <li><a href="#region-flow-break"><span class=secno>4.3. </span>Region
      flow break properties: &lsquo;<code
      class=property>break-before</code>&rsquo;, &lsquo;<code
      class=property>break-after</code>&rsquo;, &lsquo;<code
      class=property>break-inside</code>&rsquo;</a>

     <li><a href="#the-region-overflow-property"><span class=secno>4.4.
      </span>The region-overflow property</a>

     <li><a href="#the-at-region-style-rule"><span class=secno>4.5.
      </span>The @region rule</a>
    </ul>

   <li><a href="#pseudo_elements"><span class=secno>5.
    </span>Pseudo-elements</a>
    <ul class=toc>
     <li><a href="#processing-model"><span class=secno>5.1. </span>Processing
      model</a>
    </ul>

   <li><a href="#cssom_view_and_css_regions"><span class=secno>6.
    </span>CSSOM view and CSS regions</a>
    <ul class=toc>
     <li><a href="#the-namedflow-interface"><span class=secno>6.1. </span>The
      NamedFlow interface</a>

     <li><a href="#extension-to-the-element-interface"><span class=secno>6.2.
      </span>Extension to the Element interface</a>

     <li><a href="#region-flow-layout-events"><span class=secno>6.3.
      </span>Region flow layout events</a>
    </ul>

   <li><a href="#relation-to-other-specifications"><span class=secno>7.
    </span>Relation to other specifications</a>

   <li><a href="#usecases"><span class=secno>8. </span>Use Cases</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>10.1.
      </span>Changes from June 09<sup>th</sup> 2011 version</a>
    </ul>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property-index">Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

  <p><em>This section is non-normative.</em>

  <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>The CSS regions module can be seen as an extension of the concept of
   multi-column elements. With CSS Multi-column layout <a href="#CSS3COL"
   rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, columns share the same
   dimensions and define column boxes organized in rows. Content flows from
   one column to the next.

  <p>The multi-column model is an example of flowing content from one area to
   another, where the areas are the multi-column element's column boxes and
   the flow is made of the multi-column element's children.

  <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
   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
   CSS box model. Elements in a named flow are taken out of the normal visual
   formatting and rendered in a chain of regions.

  <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
   and regions</h3>

  <p>Consider the layout illustrated in figure 1.

  <div class=figure> <img
   alt="multiple chained regions which should receive content from a flow"
   src="images/regions-intro.svg" width=400>
   <p class=caption>Layout requiring sophisticated content flow</p>
  </div>

  <p>The designer's intent is to position an image in region &lsquo;<code
   class=property>A</code>&rsquo; and to flow an article's text from region
   &lsquo;<code class=css>1</code>&rsquo;, to region &lsquo;<code
   class=css>2</code>&rsquo;, &lsquo;<code class=css>3</code>&rsquo; and
   &lsquo;<code class=css>4</code>&rsquo;.

  <p>The following code snippet shows the content to flow between the regions
   1, 2, 3 and 4.

  <pre>
&lt;div <em>id="article"</em>&gt;
  &lt;h1&gt;Introduction&lt;/h1&gt;
  &lt;p&gt;This is an example ...&lt;/p&gt;

  &lt;h1&gt;More Details&lt;/h1&gt;
  &lt;p&gt;This illustrates ...&lt;/p&gt;
  &lt;p&gt;Then, the example ...&lt;/p&gt;
  &lt;p&gt;Finally, this ...&lt;/p&gt;
&lt;/div&gt;

</pre>

  <p>And the following snippet shows an example of elements that will be used
   as regions.

  <pre>
&lt;div id="region1"&gt;&lt;/div&gt;
&lt;div id="region2"&gt;&lt;/div&gt;
&lt;div id="region3"&gt;&lt;/div&gt;
&lt;div id="region4"&gt;&lt;/div&gt;
    </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 visual rendering of the content.

  <div class=figure> <img
   alt="Sample rendering showing a single thread of text flowing through a chain of regions"
   src="images/regions-intro-rendering.png" width=450>
   <p class=caption>Sample rendering for desired layout</p>
  </div>

  <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 &lsquo;<code
   class=css>region1</code>&rsquo;, &lsquo;<code
   class=css>region2</code>&rsquo;, &lsquo;<code
   class=css>region3</code>&rsquo; and &lsquo;<code
   class=css>region4</code>&rsquo; become regions that consume the
   &lsquo;<code class=css>article_flow</code>&rsquo; content.

  <div class=example>
   <pre>
&lt;style&gt;

#article {
    <strong>flow-into: article_flow;</strong>
}

#region1, #region2, #region3, #region4 {
    <strong>flow-from: article_flow;</strong>
}
&lt;/style&gt;
</pre>
  </div>

  <p>The &lsquo;<code class=css>article_flow</code>&rsquo; value on the
   &lsquo;<a href="#flow-into"><code
   class=property>flow-into</code></a>&rsquo; property directs the
   &lsquo;<code class=css>#article</code>&rsquo; element to the &lsquo;<code
   class=css>article_flow</code>&rsquo; named flow. Setting the elements'
   &lsquo;<a href="#flow-from"><code
   class=property>flow-from</code></a>&rsquo; property to &lsquo;<code
   class=css>article_flow</code>&rsquo; on elements makes them regions and
   associates these regions with the named flow: the flow is &lsquo;<code
   class=css>poured</code>&rsquo; 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 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
   class=html>&lt;h1&gt;</code> headers should be crimson.

  <p>This design can be expressed with region styling as shown below.

  <div class=example>
   <pre>
&lt;style&gt;
/*
 * Default article styling.
 */
#article {
    color:#777;
    text-align: justify;
}

#article h1 {
    border-left: 1px solid #777;
    padding-left: 2ex;
    display: run-in;
}

/*
 * Additional styling to apply to content when it falls into
 * region1
 */
<strong>@region #region1 {</strong>
    #article {
        font-weight: bold;
        color: #0C3D5F;
        font-size: larger;
    }

    #article h1 {
        color: crimson;
        border: none;
        padding: 0px;
    }
<strong>}</strong>
&lt;/style&gt;
</pre>
  </div>

  <p>The &lsquo;<code class=css>@region</code>&rsquo; 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.

  <div class=figure> <img
   alt="Illustrate how changing region styling affects the flow of content."
   src="images/region-styling.png" width=450>
   <p class=caption>Different rendering with a different region styling</p>
  </div>

  <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
   concepts</h2>

  <p><em>This section is non-normative.</em>

  <h3 id=regions><span class=secno>2.1. </span>Regions</h3>

  <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 <a href="#named-flow0"><em>named
   flow</em></a> (see the &lsquo;<a href="#flow-from"><code
   class=property>flow-from</code></a>&rsquo; property).

  <div class="issue moved">
   <p>See <a
    href="http://wiki.csswg.org/spec/css3-regions#issue-2-auto-sizing-of-regions"></a></p>
   .
   <p>There was a recent discussion on intrinsic sizing of regions which <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0629.html">has
    not been resolved</a></p>
   .</div>

  <h3 id=named-flow><span class=secno>2.2. </span>Named flow</h3>

  <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.

  <p>Elements are placed into a named flow with the &lsquo;<a
   href="#flow-into"><code class=property>flow-into</code></a>&rsquo;
   property. The elements in a named flow are laid out in the chain of
   regions that are associated with this named flow. <span
   title=region>Regions</span> are organized in to a <span
   title=region-chain>region chain</span> according to the document order.

  <p>Content from a named flow is broken up between regions according to the
   regions flow breaking rules.

  <h3 id=regions-flow-breaking-rules><span class=secno>2.3. </span>Regions
   flow breaking rules</h3>

  <p>Breaking a named flow across multiple regions is similar to breaking a
   document's content across multiple pages (see <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>) or a multi-column
   element's content across column boxes (see <a href="#CSS3COL"
   rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>). One difference is that
   page boxes are generated based on the available content whereas regions
   are a predefined set of recipient boxes for the named flow content.

  <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 <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
   next one in the <span title=region-chain>region chain</span>. If there are
   no more <span>region</span>s in the region chain and there is still
   content in the flow, the positioning of the remaining content is
   controlled by the &lsquo;<a href="#region-overflow"><code
   class=property>region-overflow</code></a>&rsquo; property on the last
   <span>region</span> in the chain.

  <h2 id=relation-to-document-events><span class=secno>3. </span>Relation to
   document events</h2>

  <p><em>This section is normative.</em>

  <p>The CSS regions module does not alter the normal processing of events in
   the document tree. In particular, if an event occurs on an element that is
   part of a named flow, the <a
   href="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.

  <h2 id=properties-and-rules><span class=secno>4. </span>Properties and
   rules</h2>

  <p><em>This section is normative.</em>

  <h3 id=the-flow-into-property><span class=secno>4.1. </span>The &lsquo;<a
   href="#flow-into"><code class=property>flow-into</code></a>&rsquo;
   property</h3>

  <p>The ‘flow-into’ property can place an element into a named flow.
   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>
    <tr>
     <th>Name:

     <td><dfn id=flow-into>flow-into</dfn>

    <tr>
     <th>Value:

     <td>&lt;ident&gt; | none | inherit

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td>any element

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>as specified
  </table>

  <dl>
   <dt>none

   <dd>The element is not moved to a named flow and normal CSS processing
    takes place.

   <dt><a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>

   <dd>The element is placed into the flow with the name &lsquo;<code
    class=css>&lt;ident&gt;</code>&rsquo;. The element is said to have a <dfn
    id=specified-flow>specified flow</dfn>. The values &lsquo;<code
    class=property>none</code>&rsquo;, &lsquo;<code
    class=property>inherit</code>&rsquo;, &lsquo;<code
    class=property>default</code>&rsquo;, &lsquo;<code
    class=property>auto</code>&rsquo; and &lsquo;<code
    class=property>initial</code>&rsquo; are invalid flow names.
  </dl>

  <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
   generate boxes and are not displayed.

  <p>The children of an element with a specified flow may themselves have a
   specified flow.

  <p>If an element has the same specified flow as one of its ancestors, it
   becomes a sibling of it's ancestor for the purpose of layout in the
   regions laying out content from that flow.

  <p>The &lsquo;<a href="#flow-into"><code
   class=property>flow-into</code></a>&rsquo; property does not affect the
   CSS cascade and inheritance for the elements on which it is specified. The
   &lsquo;<a href="#flow-into"><code
   class=property>flow-into</code></a>&rsquo; property affects the visual
   formatting of elements placed into a named flow and of regions laying out
   content from a named flow.

  <p>The edges of the first region in a region chain associated with a named
   flow establish the rectangle that is the initial containing block of the
   named flow.

  <p>The first region defines the <a
   href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing
   mode</a> for the entire flow. The writing mode on subsequent regions is
   ignored.

  <p>Elements in a named flow are sequenced in document order.

  <div class=note>
   <p><em>This note is informative.</em></p>

   <p>The &lsquo;<a href="#flow-into"><code
    class=property>flow-into</code></a>&rsquo; property moves an element into
    the flow and the interplay with selectors should be considered carefully.</p>

   <p>For example,</p>

   <pre>table {flow-into: table-content}</pre>

   <p>will move all tables in the &lsquo;<code
    class=property>table-content</code>&rsquo; named flow. However, the</p>

   <pre>table * {flow-into: table-content}</pre>

   <p>selector will move all the descendants of table elements in the
    &lsquo;<code class=property>table-content</code>&rsquo; named flow. This
    will make all the descendants of table elements siblings in the named
    flow. Having the descendants become siblings in the named flow results in
    a different processing (see the <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS
    2.1&lsquo;<code class=css>s anonymous table objects</code></a>). This
    note illustrates how authors must exercise caution when choosing a
    particular selector for setting the &rsquo;flow-into' property to avoid
    unintended results.</p>
  </div>

  <p>The &lsquo;<a href="#flow-into"><code
   class=property>flow-into</code></a>&rsquo; property does not apply to the
   <code class=css>::first-line</code> and <code
   class=css>::first-character</code>.

  <p>The effect of &lsquo;<a href="#flow-into"><code
   class=property>flow-into</code></a>&rsquo; on generated content such as
   <code class=css>::marker</code>, <code class=css>::before</code> and <code
   class=css>::after</code> is undefined. This may change depending on
   implementation feedback.

  <h3 id=the-flow-from-property><span class=secno>4.2. </span>The &lsquo;<a
   href="#flow-from"><code class=property>flow-from</code></a>&rsquo;
   property</h3>

  <p>The &lsquo;<a href="#flow-from"><code
   class=property>flow-from</code></a>&rsquo; property makes an element a
   region and associates it with a named flow.

  <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">
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flow-from>flow-from</dfn>

    <tr>
     <th>Value:

     <td>&lt;ident&gt; | none | inherit

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td>Elements that generate a <a
      href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
      container box</a>. <br>
      This might be expanded in future versions of the specification to allow
      other types of containers to receive flow content.

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>as specified
  </table>

  <dl>
   <dt><strong>none</strong>

   <dd>The element is not a <span title=region>region</span>.

   <dt><strong>&lt;ident&gt;</strong>

   <dd> If the &lsquo;<code class=property>content</code>&rsquo; property
    computes to something else than &lsquo;<code
    class=property>normal</code>&rsquo;, the element does not become a
    region. If the &lsquo;<code class=property>content</code>&rsquo; property
    computes to &lsquo;<code class=property>normal</code>&rsquo;, 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">&lt;ident&gt;</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 &lt;ident&gt;, then the element does not format any content
    visually. <br>
    Likewise, if the element is part of the flow with name &lt;ident&gt;,
    then the element does not format any content visually.
  </dl>

  <p class=note>A region's document children are not visually formatted
   unless they are directed to a named flow referenced by one or more
   regions.

  <div class=note>
   <p>An element becomes a region when its &lsquo;<a href="#flow-from"><code
    class=property>flow-from</code></a>&rsquo; property is set to a valid
    &lt;ident&gt; value, even if there is no content contributing to the
    referenced flow. For example:</p>

   <pre>
&lt;style&gt;
  .article{
    flow-into: thread;
  }
  .region{
    flow-from: thread;
  }
&lt;/style&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div class=region&gt;div content&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
        </pre>
   There is no element matching the <code>.article</code> selector and
   therefore no content in the <code>thread</code> flow. However, the element
   matching the <code>.region</code> selector is still associated with that
   empty named flow and, consequently, its children are not formatted
   visually.</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>If the &lsquo;<code class=property>content</code>&rsquo; property is
   defined on a region, it has no effect on the region's visual formatting.

  <div class=note>
   <p><em>This note is informative.</em></p>

   <p>With regions, an element may be split across multiple regions and these
    regions may overlap (for example if they are absolutely positioned). So
    fragments of the same element can overlap each other. Since each element
    has a single z-index, it would be required to find another mechanism to
    decide in which order the  fragments are rendered. Since each region
    creates a new stacking context, it is clear that each region is rendered
    separately and their rendering order follows the regular CSS rendering
    model.</p>
  </div>

  <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> <a href="#named-flow0">named flow</a> wraps
    around the <code class=html>#float</code> box.</p>

   <pre>
    &lt;style&gt;
    #float {
        float: left;
        width: 100px;
        height: 300px;
    }

    #region1, #region2 {
        width: 200px;
        height: 200px;
        flow-from: body_text;
    }

    #content {
        flow-into: body_text;
    }
    &lt;/style&gt;

    &lt;div id="float"&gt;&lt;/div&gt;

    &lt;div id="region1"&gt;&lt;/div&gt;
    &lt;div id="region2"&gt;&lt;/div&gt;

    &lt;div id="content"&gt;&lt;/div&gt;
    </pre>
  </div>

  <h4 id=auto-width-on-regions><span class=secno>4.2.1. </span>Auto width on
   regions</h4>

  <p>If a region's &lsquo;<code class=property>width</code>&rsquo; property
   is computed to &lsquo;<code class=property>auto</code>&rsquo;, its
   resolved value is computed based on the region's <em>::before</em> and
   <em>::after</em> generated content only.

  <h4 id=auto-height-on-regions><span class=secno>4.2.2. </span>Auto height
   on regions</h4>

  <p>If a region's &lsquo;<code class=property>height</code>&rsquo; property
   is computed to &lsquo;<code class=property>auto</code>&rsquo;, its
   resolved value is computed based on the region's <em>::before</em> and
   <em>::after</em> generated content only.

  <h3 id=region-flow-break><span class=secno>4.3. </span>Region flow break
   properties: &lsquo;<a href="#break-before"><code
   class=property>break-before</code></a>&rsquo;, &lsquo;<a
   href="#break-after"><code class=property>break-after</code></a>&rsquo;,
   &lsquo;<a href="#break-inside"><code
   class=property>break-inside</code></a>&rsquo;</h3>

  <p>User agents laying out content in multiple regions must 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>Each break ends layout in the current region and causes remaining pieces
   of content from the named flow to be visually formatted in the following
   region in the region chain. Note that there is no region break in the last
   region associated with a named flow.

  <p>The following extends the &lsquo;<a href="#break-before"><code
   class=property>break-before</code></a>&rsquo;, &lsquo;<a
   href="#break-after"><code class=property>break-after</code></a>&rsquo; and
   &lsquo;<a href="#break-inside"><code
   class=property>break-inside</code></a>&rsquo; properties from the <a
   href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>
   specification to account for regions. The additional values are described
   below.

  <table class=propdef summary="break-before property definition">
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=break-before>break-before</dfn>

    <tr>
     <td><em>Value:</em>

     <td>auto | always | avoid | left | right | page | column | region |
      avoid-page | avoid-column | avoid-region

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>block-level elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>paged

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <table class=propdef summary="break-after property definition">
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=break-after>break-after</dfn>

    <tr>
     <td><em>Value:</em>

     <td>auto | always | avoid | left | right | page | column | region |
      avoid-page | avoid-column | avoid-region

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>block-level elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>paged

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <table class=propdef summary="break-inside property definition">
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=break-inside>break-inside</dfn>

    <tr>
     <td><em>Value:</em>

     <td>auto | avoid | avoid-page | avoid-column | avoid-region

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td>block-level elements

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>paged

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>These properties describe page, column and region break behavior
   before/after/inside the generated box. These values are normatively
   defined in <a href="#CSS3COL"
   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>:

  <dl>
   <dt>auto

   <dd>Neither force nor forbid a page/column break before (after, inside)
    the generated box.

   <dt>always

   <dd>Always force a page break before (after) the generated box.

   <dt>avoid

   <dd>Avoid a page/column break before (after, inside) the generated box.

   <dt>left

   <dd>Force one or two page breaks before (after) the generated box so that
    the next page is formatted as a left page.

   <dt>right

   <dd>Force one or two page breaks before (after) the generated box so that
    the next page is formatted as a right page.

   <dt>page

   <dd>Always force a page break before (after) the generated box.

   <dt>column

   <dd>Always force a column break before (after) the generated box.

   <dt>avoid-page

   <dd>Avoid a page break before (after, inside) the generated box.

   <dt>avoid-column

   <dd>Avoid a column break before (after, inside) the generated box.
  </dl>

  <p>This specification adds the following new values:

  <dl>
   <dt>region

   <dd>Always force a region break before (after) the generated box.

   <dt>avoid-region

   <dd>Avoid a region break before (after, inside) the generated box.
  </dl>

  <p>When a break splits a box, the box's margins, borders, and padding have
   no visual effect where the split occurs. However, the margin immediately
   after a forced page/column/region break will be preserved. A forced
   page/column/region break is a break that does not occur naturally.

  <p><strong>Note:</strong> When the &lsquo;<code
   class=property>avoid</code>&rsquo; value is used, regions may overflow. In
   that case the &lsquo;<a href="#dom-namedflow-overflow"><code
   class=property>overflow</code></a>&rsquo; property specified on the region
   element should be used to determine how to render the overflow.

  <h3 id=the-region-overflow-property><span class=secno>4.4. </span>The
   region-overflow property</h3>

  <table class=propdef summary="break-after property definition">
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=region-overflow>region-overflow</dfn>

    <tr>
     <td><em>Value:</em>

     <td>auto | break

    <tr>
     <td><em>Initial:</em>

     <td>auto

    <tr>
     <td><em>Applies to:</em>

     <td><em title="region element">region elements</em>

    <tr>
     <td><em>Inherited:</em>

     <td>no

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Media:</em>

     <td>paged

    <tr>
     <td><em>Computed&nbsp;value:</em>

     <td>specified value
  </table>

  <p>The &lsquo;<a href="#region-overflow"><code
   class=property>region-overflow</code></a>&rsquo; property controls the
   behavior of the <em id=last-region>last region</em> associated with a <a
   href="#named-flow0">named flow</a>.

  <dl>
   <dt>auto

   <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="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a>
    property's computed value on the region element. Region breaks must be
    ignored on the last region.

   <dt>break

   <dd>
    <p>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="#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>
  </dl>

  <p>The &lsquo;<a href="#region-overflow"><code
   class=property>region-overflow</code></a>&rsquo; property does not
   influence the size of the region it applies to.

  <p>The following code sample illustrates the usage of the &lsquo;<a
   href="#region-overflow"><code
   class=property>region-overflow</code></a>&rsquo; property.

  <div class=example>
   <pre>
&lt;style&gt;
#article {
    flow-into: "article";
}

#region_1, #region_2 {
    flow-from: article;
    <strong>region-overflow: break;</strong> /* or none */
    <strong>overflow: visible;</strong> /* or hidden */
}

&lt;/style&gt;

&lt;div id="article"&gt;...&lt;/div&gt;

&lt;div id="region_1"&gt;&lt;/div&gt;
&lt;div id="region_2"&gt;&lt;/div&gt;

</pre>
  </div>

  <div class=figure>
   <table style="border: 1px solid gray;width: 100%;"
    summary="Different values for the region-overflow property - Illustration.">
    <tbody>
     <tr>
      <td>&lsquo;<code class=css>flow-into: "article"</code>&rsquo;

      <td><code class=html>region_1</code> and <code
       class=html>region_2</code>

      <td>&lsquo;<code class=css>region-overflow: auto</code>&rsquo;<br>
       &lsquo;<code class=css>overflow:visible</code>&rsquo;

     <tr>
      <td rowspan=3 style="vertical-align: top;"><img
       alt="regions receiving the flow content"
       src="images/region-overflow-flow.png">

      <td><img alt="result if region-overflow is set to 'break'"
       src="images/region-overflow-regions.png">

      <td><img alt="regions receiving the flow content"
       src="images/region-overflow-auto-overflow-visible.png">

     <tr>
      <td>&lsquo;<code class=css>region-overflow: break</code>&rsquo;

      <td>&lsquo;<code class=css>region-overflow: auto</code>&rsquo;<br>
       &lsquo;<code class=css>overflow:hidden</code>&rsquo;

     <tr>
      <td><img alt="result if region-overflow is set to 'break'"
       src="images/region-overflow-break.png">

      <td><img alt="regions receiving the flow content"
       src="images/region-overflow-auto-overflow-hidden.png">
   </table>

   <p class=caption>Different values for the region-overflow property</p>
  </div>

  <div class=note>
   <p>The &lsquo;<a href="#dom-namedflow-overflow"><code
    class=property>overflow</code></a>&rsquo; property is honored on a
    region: if region content overflows, such as the borders of elements on
    the last line, the &lsquo;<a href="#dom-namedflow-overflow"><code
    class=property>overflow</code></a>&rsquo; property controls the
    visibility of the overflowing content. See the &lsquo;<a
    href="#dom-namedflow-overflow"><code
    class=property>overflow</code></a>&rsquo; property definition (<a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>).</p>
  </div>

  <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
   rule</h3>

  <p>An &lsquo;<code class=css>@region</code>&rsquo; rule contains style
   declarations specific to particular regions.

  <pre>
@region &lt;selector&gt; {
    ... CSS styling rules ...
}
    </pre>

  <p>The &lsquo;<code class=css>@region</code>&rsquo; rule consists of the
   keyword &lsquo;<code class=css>@region</code>&rsquo; followed by a <a
   href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
   and a declarations block. The &lsquo;<code class=css>@region</code>&rsquo;
   rule and the selector constitute the region's &lsquo;<code class=css>flow
   segment</code>&rsquo; selector. The region's flow segment selector
   specifies which range of elements in the flow are subject to the following
   declaration blocks: it applies to the range (see <a
   href="#DOM-LEVEL-2-TRAVERSAL-RANGE"
   rel=biblioentry>[DOM-LEVEL-2-TRAVERSAL-RANGE]<!--{{DOM-LEVEL-2-TRAVERSAL-RANGE}}--></a>)
   from the region's flow that flows in the selected region(s).

  <p>Elements that are fully or partially in the &lsquo;<code class=css>flow
   segment</code>&rsquo; may match any of the selectors found in the style
   rule.

  <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>

  <ol>
   <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>

   <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a>

   <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background
    property</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">&lsquo;<code
    class=property>word-spacing</code>&rsquo;</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">&lsquo;<code
    class=property>letter-spacing</code>&rsquo;</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">&lsquo;<code
    class=property>text-decoration</code>&rsquo;</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">&lsquo;<code
    class=property>text-transform</code>&rsquo;</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">&lsquo;<code
    class=property>line-height</code>&rsquo;</a>

   <li><a href="http://www.w3.org/TR/css3-background/#borders">border
    properties</a>

   <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner
    properties</a>

   <li><a href="http://www.w3.org/TR/css3-background/#border-images">border
    images properties</a>

   <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin
    properties</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding
    properties</a>

   <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">&lsquo;<code
    class=property>text-shadow</code>&rsquo; property</a>

   <li><a
    href="http://www.w3.org/TR/css3-background/#the-box-shadow">&lsquo;<code
    class=property>box-shadow</code>&rsquo; property</a>

   <li><a
    href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">&lsquo;<code
    class=property>box-decoration-break</code>&rsquo; property</a>

   <li><a
    href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">&lsquo;<code
    class=property>width</code>&rsquo; property</a>
  </ol>

  <div class=example id=region-style-example>
   <p>In the following example, the named flow &lsquo;<code
    class=css>article_flow</code>&rsquo; flows through &lsquo;<code
    class=css>region_1</code>&rsquo; and &lsquo;<code
    class=css>region_2</code>&rsquo;.</p>

   <pre>
&lt;style&gt;
    #div_1 {
        <strong>flow-into: article_flow;</strong>
    }

    &lt;region1_sel&gt;, &lt;region2_sel&gt; {
        <strong>flow-from: article_flow;</strong>
    }

    /* region style RSA */
    <strong>@region &lt;region1_sel&gt;, &lt;region2_sel&gt;</strong> {
        div {...}
        p {...}
    }

    /* region style RSB */
    <strong>@region &lt;region1_sel&gt;</strong> {
        p {...}
    }

&lt;/style&gt;

&lt;div id="div_1"&gt;
    &lt;p id="p_1"&gt;...&lt;/p&gt;
    &lt;p id="p_2"&gt;...&lt;/p&gt;
&lt;/div&gt;


</pre>

   <div id="region_styling_illustration"> <img
    alt="Illustration showing how a named flow content fits into regions to illustrate the @region styling."
    id="region_styling_img_2" name="region_styling_img_2"
    src="images/region-styling-2.png">
    <ul class=swatch-list>
     <li><span class=swatch style="background:#1C75BC">&nbsp;</span>div div_1

     <li><span class=swatch style="background:crimson">&nbsp;</span>paragraph
      p_1

     <li><span class=swatch style="background:white">&nbsp;</span>paragraph
      p_2

     <li><span class=swatch style="background:#E6E7E8">&nbsp;</span>range of
      flow that fits into region_1

     <li><span class=swatch style="background:#BCBEC0">&nbsp;</span>range of
      flow that fits into region_2
    </ul>
   </div>

   <p>The region style &lsquo;<code class=css>RSA</code>&rsquo; applies to
    flow content that is laid out in either &lsquo;<code
    class=css>region_1</code>&rsquo; or &lsquo;<code
    class=css>region_2</code>&rsquo;.</p>

   <p>The first rule set &lsquo;<code class=css>div {...}</code>&rsquo;
    applies to all <code class=html>&lt;div&gt;</code> elements that fit
    partially or fully into &lsquo;<code class=css>region_1</code>&rsquo; or
    &lsquo;<code class=css>region_2</code>&rsquo;. <code
    class=html>div_1</code> is split between &lsquo;<code
    class=css>region_1</code>&rsquo; and &lsquo;<code
    class=css>region_2</code>&rsquo; and gets the style from this style rule.</p>

   <p>The second rule set &lsquo;<code class=css>p {...}</code>&rsquo;
    applies to all <code class=html>&lt;p&gt;</code> elements that fit into
    &lsquo;<code class=css>region_1</code>&rsquo; or &lsquo;<code
    class=css>region_2</code>&rsquo;. In our example, both <code
    class=html>p_1</code> and <code class=html>p_2</code> are selected.</p>

   <p>The region style &lsquo;<code class=css>RSB</code>&rsquo; applies to
    flow content that fits in &lsquo;<code class=css>region_1</code>&rsquo;.</p>

   <p>The first rule set &lsquo;<code class=css>p {...}</code>&rsquo; matches
    <code class=html>p_1</code> and <code class=html>p_2</code> because these
    paragraphs flow into &lsquo;<code class=css>region_1</code>&rsquo;. Only
    the segment of <code class=html>p_2</code> that flows into <code
    class=html>region_1</code> is styled with this rule.</p>
  </div>

  <div class="issue stale">
   <p>Making issue stale because this issue has not been raised on the
    mailing list and we will wait for implementation feedback. Is the
    proposed restriction that elements are only selected selector in a rule
    set appearing in an @region rule sufficient?
  </div>

  <div class="issue moved"> <a
   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 &lsquo;<code class=css>first-line</code>&rsquo; precedent is
   underspecified and that more specification is needed in addition to
   referencing the existing precedent.</div>

  <p>The specificity of the selectors in a &lsquo;<code
   class=css>@region</code>&rsquo; rule is calculated as <a
   href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the
   CSS Selectors module (see <a href="#SELECT"
   rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the
   &lsquo;<code class=css>@region</code>&rsquo; 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
   &lsquo;<code class=css>@media</code>&rsquo; rules declaration blocks (see
   <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where
   the rule does not influence the selectors' specificity.

  <p>Consequently, selectors that match a given element (as describe above),
   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
   region &lsquo;<code class=property>A</code>&rsquo; receives content from a
   flow that contains region &lsquo;<code class=property>B</code>&rsquo;, the
   content that flows into &lsquo;<code class=property>B</code>&rsquo; does
   not receive the region styling specified for region &lsquo;<code
   class=property>A</code>&rsquo;.</div>

  <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>

  <p><em>This section is normative.</em>

  <p>It can be useful to visually mark the content to highlight that a
   content thread is flowing from region to region. For example, a marker
   such as <em>&lsquo;<code class=css>continues on page 3</code>&rsquo;</em>
   clearly indicates, at the end of a region, that there is more content in
   the flow which can be found on &lsquo;<code class=css>page 3</code>&rsquo;
   (in this example, the notion of page is application specific).

  <p>The &lsquo;<code class=css>::before</code>&rsquo; and &lsquo;<code
   class=css>::after</code>&rsquo; pseudo-elements (see <a href="#SELECT"
   rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>) let content authors mark
   the beginning and end of a region with such markers.

  <h3 id=processing-model><span class=secno>5.1. </span>Processing model</h3>

  <p>The &lsquo;<code class=css>::before</code>&rsquo; content is laid out in
   the region prior to any other content coming from the flow. Note that it
   is possible to set the &lsquo;<code class=css>::before</code>&rsquo;
   pseudo-element's &lsquo;<code class=property>display</code>&rsquo;
   property to &lsquo;<code class=property>run-in</code>&rsquo; to align it
   with the content's inline boxes.

  <p>The &lsquo;<code class=css>::after</code>&rsquo; content is laid out in
   the region after laying out the flow content. Then, flow content is
   removed from the region to accommodate for the &lsquo;<code
   class=css>::after</code>&rsquo; content. Accommodating means that the
   &lsquo;<code class=css>::after</code>&rsquo; content is laid out without
   overflowing the region. If there is still not enough room to accommodate
   for the &lsquo;<code class=css>::after</code>&rsquo; content after
   removing all flow content, then the &lsquo;<code
   class=css>::after</code>&rsquo; content overflows. The &lsquo;<code
   class=property>display</code>&rsquo; property of the &lsquo;<code
   class=css>::after</code>&rsquo; content should be set to &lsquo;<code
   class=property>run-in</code>&rsquo; to align with the region's content's
   inline boxes. In that case, the &lsquo;<code
   class=css>::after</code>&rsquo; content becomes the last inline box of the
   previous element in the flow that has some visual rendering in the region
   and can accommodate for the &lsquo;<code class=css>::after</code>&rsquo;
   box.

  <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
   and CSS regions</h2>

  <p><em>This section is normative.</em>

  <p>Since content may flow into multiple regions, authors need a way to
   determine if there are enough regions to flow all the content from a named
   flow. This is especially important considering that the size of regions
   may change depending on the display context. For example, flowing the same
   content on a mobile phone with a small screen may require more regions
   than on a large desktop display.

  <p>Another example where creating more regions might be needed: if the user
   may change the font size of text flowing through regions, new regions may
   be needed to accommodate for the additional space required to fit the
   larger text or some regions may need to be removed for smaller text.

  <div class=note>
   <p>Since an element may be split into multiple regions, invoking <code
    class=idl><a
    href="http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects</a></code>
    on it must return the list of rectangles for the element in all the
    regions it is part of.</p>
  </div>

  <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
   interface</h3>

  <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
   <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>
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 <a href="#named-flow0">named
   flow</a>.

  <pre class=idl>
interface <a href="#dom-namedflow">NamedFlow</a> {
  readonly attribute boolean <a
   href="#dom-namedflow-overflow">overflow</a>;
  readonly attribute <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177">NodeList</a> contentNodes;
  <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177">NodeList</a> getRegionsByContentNode(<a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247">Node</a> node);
  };
};</pre>

  <p>The <dfn id=dom-namedflow-overflow><code class=idl>overflow</code></dfn>
   property is true if the named flow does not fully fit in the associated
   regions. Otherwise, it is false. A <a href="#dom-namedflow"><code
   class=idl>NamedFlow</code></a> object is live.

  <p>The <dfn id=dom-namedflow-contentnodes>contentNodes</dfn> property
   returns an ordered collection of nodes that constitute the named flow.
   Note that this collection is live: every time it is queried it must return
   the same object, and the object is always up to date.

  <p>The <dfn
   id=dom-namedflow-getregionsbycontentnodes>getRegionsByContentNode()</dfn>
   method gets a collection of regions that contain at least part of the
   target content node. This can be used to navigate by bookmark in paginated
   view: the method returns regions containing the bookmarked element, which
   are then passed to pagination UI to show desired region or page.

  <p>With the <a href="#dom-namedflow"><code class=idl>NamedFlow</code></a>
   interface, authors can easily check if all content has been fitted into
   existing regions. If it has, the overflow property would be false.

  <h3 id=extension-to-the-element-interface><span class=secno>6.2.
   </span>Extension to the Element interface</h3>

  <p>When an region is an actual <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/glossary.html#dt-element">element</a>,
   it is convenient to easily find out if content fully fits into the
   <span>region</span> or not. The supplemental interface on <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-745549614"><code
   class=idl>Element</code></a> provides that functionality.

  <pre class=idl>
[Supplemental] interface <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-745549614">Element</a> {
    readonly attribute <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> <a
   href="#dom-element-regionoverflow">regionOverflow</a>;
    getter <a
   href="#">Range</a>[] <a
   href="#dom-element-getregionflowranges">getRegionFlowRanges()</a>;
};

</pre>

  <p>The <dfn id=dom-element-regionoverflow><code
   class=idl>regionOverflow</code></dfn> attribute can take one of the
   following values:

  <dl>
   <dt>&lsquo;<a href="#dom-namedflow-overflow"><code
    class=property>overflow</code></a>&rsquo;

   <dd>the region element's content overflows the region's <a
    href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">content
    box</a>. 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 <a href="#named-flow0">named
    flow</a>.

   <dt>&lsquo;<code class=property>fit</code>&rsquo;

   <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 <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 <a
    href="#named-flow0">named flow</a> (for example if the region is too
    small to accommodate any content).

   <dt>&lsquo;<code class=property>empty</code>&rsquo;

   <dd>the region element has no content and is empty. All content from the
    <a href="#named-flow0">named flow</a> was fitted in regions with a lower
    document order.

   <dt>&lsquo;<code class=property>undefined</code>&rsquo;

   <dd>The element is not a <span>region</span>.
  </dl>

  <p>The <dfn id=dom-element-getregionflowranges>getRegionFlowRanges</dfn>
   method returns an array of <a
   href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-idl">
   Range</a> instances corresponding to the content from the region flow that
   is positioned in the region.

  <p>If an element is not a <span>region</span>, the <a
   href="#dom-element-getregionflowranges"><code class=idl><span
   title="#document-element-getregionflowranges">getRegionFlowRanges</span></code></a>
   method throws a <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-17189187"><code
   class=idl>DOMException</code></a> with the <a
   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMException-INVALID_ACCESS_ERR"><code
   class=idl>INVALID_ACCESS_ERR</code></a> error code.

  <div class=note> The Element interface extension is only available to
   regions that are document elements and not to regions that are
   pseudo-elements.</div>

  <div class="issue resolved">
   <p><a
    href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was
    created to add the API to the specification draft.</p>

   <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 &lsquo;<code
    class=property>multi-view</code>&rsquo; context as suggested by Alex.</p>
  </div>

  <h3 id=region-flow-layout-events><span class=secno>6.3. </span>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>regionLayoutUpdate</code> events when
   there is a possible layout change of their named flow segment.

  <table border=0 cellpadding=2 cellspacing=0 class=event-desc
   summary="This table contains information about the semantics of the given event type">
   <tbody>
    <tr class="assert must">
     <th>Type

     <td class=eventname><strong><code>regionLayoutUpdate</code></strong>

    <tr class="assert must">
     <th>Interface

     <td><code>UIEvent</code>

    <tr class="assert must">
     <th>Sync / Async

     <td>Async

    <tr class="assert must">
     <th>Bubbles

     <td>Yes

    <tr class="assert must">
     <th>Target

     <td><code>Element</code>

    <tr class="assert must">
     <th>Cancelable

     <td>Yes

    <tr class="assert must">
     <th>Default action

     <td>none

    <tr class="assert must">
     <th>Context info

     <td>
      <ul>
       <li><code class=attribute-name>Event.target</code>: region whose
        layout may have changed
      </ul>
  </table>

  <h2 id=relation-to-other-specifications><span class=secno>7.
   </span>Relation to other specifications</h2>

  <p>This specification is related to other specifications as described in
   the <a href="#references">references</a> section. In addition, it is
   related to the following specifications:

  <ol>
   <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 <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=usecases><span class=secno>8. </span>Use Cases</h2>

  <p>Use cases are described on <a
   href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this
   page</a>.

  <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>

  <ul>
   <li>Editorial changes (typos, rephrasings).

   <li>Made &lsquo;<code class=property>content-order</code>&rsquo; a
    &lt;integer&gt; and not a &lt;float&gt; following a working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a>

   <li>Added Alex Mogilevsky as an editor

   <li>Flow names became &lt;ident&gt; instead of &lt;string&gt; following a
    working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>

   <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>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>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>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>Added NamedFlowUpdate
    </ul>

   <li>Excluded &lsquo;<code class=property>none</code>&rsquo;, &lsquo;<code
    class=property>inherit</code>&rsquo; and &lsquo;<code
    class=property>initial</code>&rsquo; 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>Simplified integration discussion on multi-column layout and just
    state that since column boxes are not addressable by selectors, they
    cannot be regions.

   <li>Added specification of how the &lsquo;<a href="#flow-into"><code
    class=property>flow-into</code></a>&rsquo; property interacts with
    object, embed and iframe elements.

   <li>Excluded &lsquo;<code class=property>default</code>&rsquo; from the
    possible identifier names on the flow property because it <a
    href="http://www.w3.org/TR/2006/WD-css3-values-20060919/#keywords">may
    get reserved</a>.

   <li>Added to the definition of &lsquo;<code
    class=property>auto</code>&rsquo; on &lsquo;<a
    href="#region-overflow"><code
    class=property>region-overflow</code></a>&rsquo; specifying that region
    breaks must be ignored.

   <li>Renamed &lsquo;<code class=css>Document.flowWithName</code>&rsquo; to
    &lsquo;<code class=css>Document.getFlowByName</code>&rsquo; since it is
    not a property.

   <li>Added a note that a &lsquo;<a href="#dom-namedflow"><code
    class=property>NamedFlow</code></a>&rsquo; instance is live.

   <li>Added an &lsquo;<code class=property>undefined</code>&rsquo; string
    value to the regionOverflow property on the Element interface extension.

   <li>Renamed NamedFlowEvent to regionLayoutUpdate to avoid having
    &lsquo;<code class=property>Event</code>&rsquo; in the event name.

   <li>Added description for special behavior of iframe/object/embed as flow
    source

   <li>Removed issue on copying content to a named flow instead of moving
    elements to named flow following working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.

   <li>Removed issue on content:flow-from v.s., flow-from property following
    working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.

   <li>Renamed &lsquo;<code class=property>flow</code>&rsquo; to &lsquo;<a
    href="#flow-into"><code class=property>flow-into</code></a>&rsquo;
    following working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.

   <li>Updated the css3-grid-align example following working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>
    that it should use &lt;div&gt; instead of grid-cell pseudo elements that
    were removed from the CSS Grid Layout specification.

   <li>Renamed &lsquo;<code class=property>from-flow</code>&rsquo; to
    &lsquo;<a href="#flow-from"><code
    class=property>flow-from</code></a>&rsquo; following a working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.

   <li>Limited the applicability of &lsquo;<code class=css>content:
    flow-from()</code>&rsquo; to block container box and added a note that
    this might be expanded in the future, following a working group <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.

   <li>Removed issue about API to find which region displays an element in a
    named flow since <a
    href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was
    created to add this API.

   <li>In the &lsquo;<code class=property>flow</code>&rsquo; property
    description, removed the required wrapper anonymous block as agreed on <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0161.html">mailing
    list discussion</a>.

   <li>Reworded the paragraph on how regions create a new stacking context,
    as per the <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0025.html">mailing
    list discussion</a>.

   <li>Reworked the "CSS regions Model" section to now be "CSS regions
    Layout". Moved the definition of a region as the first sub-section.

   <li>Removed the "Visual Formatting Model and Flows" section to match the
    new Regions Model (now CSS regions Layout) section.

   <li>Moved the sections on allowed region breaks, forced region breaks and
    "best" regions breaks to follow the property definitions to follow the
    formatting of the paged media section in CSS 2.1.

   <li>Added note about why regions create a new stacking context following
    the discussion on the <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing
    list</a>.

   <li>Removed sentence about content:none making elements disconnected
    following the discussion on the <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing
    list</a>.

   <li>Removed sentence about content:none making elements disconnected
    following the discussion on the <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing
    list</a>.

   <li>Added the ::region-before and a ::region-after pseudo-elements.

   <li>Added note of caution when using selectors and the &lsquo;<a
    href="#flow-into"><code class=property>flow-into</code></a>&rsquo;
    property following a <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0191.html">mailing
    list discussion</a>.

   <li>Removed sections about allowed, forced and best region breaks to align
    with the multi-column specification approach and until the group agrees
    on where and how the general issue of breaks (regions/pages/columns)
    should be addressed.

   <li>Removed the section on Integration with other specifications since
    specifications that was superfluous especially since there is no specific
    integration with multi column, grid or template layout.

   <li>Added a note that regions establish a new block formatting context.

   <li>Renamed content-order to region-order.

   <li>Added a note about overflowing content in regions (e.g., for content
    with borders).

   <li>Added a note that a region cannot layout content it is part of (to
    avoid creating a circular dependency) in the flow-from description,
    specifying that if flow-from references the flow an element is part of,
    then the element does not format anything visually.

   <li>Replaced &lsquo;<code
    class=css>content:flow-from(&lt;ident&gt;)</code>&rsquo; with
    &lsquo;<code class=css>flow-from: &lt;ident&gt;</code>&rsquo; following a
    <a href="http://krijnhoetmer.nl/irc-logs/css/20110824">working group
    resolution</a>.

   <li>Added more specific wording about auto width and auto height,
    following <a
    href="http://www.w3.org/Style/CSS/Tracker/actions/351">ACTION 351</a>.

   <li>Reworked section on region markers to now use &lsquo;<code
    class=css>::before</code>&rsquo; and &lsquo;<code
    class=css>::after</code>&rsquo; and explain how &lsquo;<code
    class=css>display:run-in</code>&rsquo; works with regions.

   <li>Modified the @region style rule to remove the ::region-lines
    pseudo-selector.

   <li>Removed the &lsquo;<code class=property>region-order</code>&rsquo;
    property following implementation feedback.

   <li>Specified that region-overflow does not influence a region's size.

   <li>Specified that the flow's writing mode is defined by the first
    region's writing mode following <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing
    list discussion</a>.

   <li>Made iframe, object and embed support of flow-into optional following
    <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing
    list discussion</a>.

   <li>Clarified that flow content following the last break in the last
    region is not rendered, following <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing
    list discussions.</a>

   <li>Modified the rule for computing the width and height of a region when
    they are set to auto, following <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a
    mailing list discussion.</a>

   <li>Added &lsquo;<code class=property>auto</code>&rsquo; to the list of
    invalid flow identifiers.

   <li>Made &lsquo;<code class=property>none</code>&rsquo; the initial value
    for &lsquo;<a href="#flow-into"><code
    class=property>flow-into</code></a>&rsquo; and aligned with &lsquo;<a
    href="#flow-from"><code class=property>flow-from</code></a>&rsquo;, as
    explained in this <a
    href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
    Also allowed the &lsquo;<code class=property>inherit</code>&rsquo; value
    on &lsquo;<a href="#flow-from"><code
    class=property>flow-from</code></a>&rsquo; and &lsquo;<a
    href="#flow-into"><code class=property>flow-into</code></a>&rsquo; (same
    email).

   <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>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 &lsquo;<code
    class=property>content</code>&rsquo; 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>

  <p>The editors are grateful to the CSS working group for their feedback and
   help with the genesis of this specification.

  <p>In addition, the editors would like to thank the following individuals
   for their contributions, either during the conception of CSS regions or
   during its development and specification review process:

  <ul>
   <li>Rossen Atanassov, Microsoft Corporation.

   <li>Andrei Bucur, Adobe Systems, Inc.

   <li>Alexandru Chiculita, Adobe Systems, Inc.

   <li>Arno Gourdol, Adobe Systems, Inc.

   <li>Mihnea Ovidenie, Adobe Systems, Inc.

   <li>Virgil Palanciuc, Adobe Systems, Inc.

   <li>Christoph Päper

   <li>Anton Prowse, Invited Expert.

   <li>Peter Sorotokin, Adobe Systems, Inc.

   <li>Alan Stearns, Adobe Systems, Inc.

   <li>Stephen Zilles, Adobe Systems, Inc.

   <li>David Hyatt, Apple Inc.
  </ul>

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
   <!---->

   <dt id=CSS3COL>[CSS3COL]

   <dd>H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
    Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
    </dd>
   <!---->

   <dt id=SELECT>[SELECT]

   <dd>Tantek &#199;elik; et al. <a
    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
    Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <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-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
    href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407"><cite>Grid
    Layout.</cite></a> 7 April 2011. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407">http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407</a>
    </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=CSS3GRID>[CSS3GRID]

   <dd>Alex Mogilevsky; Markus Mielke. <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
    Positioning Module Level&#160;3.</cite></a> 5 September 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
    </dd>
   <!---->

   <dt id=CSS3LAYOUT>[CSS3LAYOUT]

   <dd>Bert Bos; C&#233;sar Acebal. <a
    href="http://www.w3.org/TR/2010/WD-css3-layout-20100429"><cite>CSS
    Template Layout Module.</cite></a> 29 April 2010. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">http://www.w3.org/TR/2010/WD-css3-layout-20100429</a>
    </dd>
   <!---->

   <dt id=CSS3PAGE>[CSS3PAGE]

   <dd>H&#229;kon Wium Lie; Melinda Grant. <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
    Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
    </dd>
   <!---->

   <dt id=DOM-LEVEL-2-TRAVERSAL-RANGE>[DOM-LEVEL-2-TRAVERSAL-RANGE]

   <dd>Joe Kesselman; et al. <a
    href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113"><cite>Document
    Object Model (DOM) Level 2 Traversal and Range Specification.</cite></a>
    13 November 2000. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113">http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; et al. <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media
    Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>break-after, <a href="#break-after"
    title=break-after><strong>4.3.</strong></a>

   <li>break-before, <a href="#break-before"
    title=break-before><strong>4.3.</strong></a>

   <li>break-inside, <a href="#break-inside"
    title=break-inside><strong>4.3.</strong></a>

   <li>contentNodes, <a href="#dom-namedflow-contentnodes"
    title=contentNodes><strong>6.1.</strong></a>

   <li>current-region, <a href="#current-region"
    title=current-region><strong>2.3.</strong></a>

   <li>flow-from, <a href="#flow-from"
    title=flow-from><strong>4.2.</strong></a>

   <li>flow-into, <a href="#flow-into"
    title=flow-into><strong>4.1.</strong></a>

   <li>getRegionFlowRanges, <a href="#dom-element-getregionflowranges"
    title=getRegionFlowRanges><strong>6.2.</strong></a>

   <li>getRegionsByContentNode(), <a
    href="#dom-namedflow-getregionsbycontentnodes"
    title="getRegionsByContentNode()"><strong>6.1.</strong></a>

   <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>

   <li>region, <a href="#region" title=region>2.1.</a>

   <li><a href="#dom-element-regionoverflow"><code
    class=idl>regionOverflow</code></a>, <a
    href="#dom-element-regionoverflow"
    title=regionOverflow><strong>6.2.</strong></a>

   <li>region-overflow, <a href="#region-overflow"
    title=region-overflow><strong>4.4.</strong></a>

   <li>specified flow, <a href="#specified-flow"
    title="specified flow"><strong>4.1.</strong></a>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property-index>Property index</h2>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->