region-styling.txt

Markup cut from the draft

    <h3 id="region-styling">CSS Region names and styling</h3>

    <p>Content can be styled depending on 
      the <span>CSS Region</span> it flows into. 
      It is an extension  
      of pseudo-element styling such as 
      <a href="http://www.w3.org/TR/css3-selectors/#first-line">
        <code class="css">::first-line</code>
      </a>
      which applies a particular style 
      to a fragment of content. 
      With <span>CSS Region</span> styling, 
      additional selectors may apply 
      depending on the <span>CSS Region</span> 
      into which content flows.</p>

    <p>In our example, 
      the designer wants to make 
      text flowing into #region1 
      dark blue and bold.</p>

    <p>This design can be expressed as shown below.</p>

    <div class="example">
        <pre>
&lt;style&gt;
  #region1::region p {
    color: #0C3D5F;
    font-weight: bold;
  }
&lt;/style&gt;</pre>
    </div>

    <p>The <code class="css">::region</code> pseudo-element
      is followed by a <code class="css">p</code> relative selector in this example. 
      The color and font-weight declarations will apply 
      to any fragments of paragraphs that are
      displayed in <code class="css">#region1</code>. 
      The following figure shows how 
      the rendering changes 
      if we apply this styling specific to <code>#region1</code>. 
      Note how less text fits into this box 
      now that the 'font-weight' is 
      bold instead of normal.</p>

    <div class="figure">
        <img src="images/region-styling.png" width="450" alt=
        "Illustrate how changing region styling affects the flow of content.">

        <p class="caption">Different rendering with a different region
        styling</p>
    </div>

    <h3 id="the-region-pseudo-element">The ::region pseudo-element</h3>
    
    <p>A ::region pseudo-element represents a relationship between  
      a selector that matches a <span>CSS Region</span>, 
      and a relative selector that matches some named flow content. 
      This allows style declarations to be applied 
      to fragments of named flow content flowing 
      into particular regions.</p>

        <pre>
&lt;region selector&gt;::region &lt;content selector&gt;  {
    ... CSS styling declarations ...
}         
    </pre>

    <p>When the ::region pseudo-element is appended to a 
    <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 
    that matches one or more <span title="CSS Region">CSS Regions</span>,  
    this creates a 'flow fragment' selector. 
    The flow fragment selector specifies 
    which range of elements in the flow 
    can be matched by the relative selector. 
    The relative selector can match elements 
    in the range(s) (see [[!DOM]]) of the named flow 
    that are displayed fully or partially 
    in the selected region(s).</p>

    <p>Elements that are fully or partially 
      in the flow fragment range may match the relative selector. 
      However, the style declarations only apply 
      to the fragment of the element 
      that is displayed in the corresponding region(s).</p>

    <p>Only a limited list of properties apply to a ::region pseudo-element:</p>

    <ol>
        <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a></li>
        <li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity property</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background property</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">'word-spacing'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">'letter-spacing'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li>
        <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and justification properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">'text-shadow' property</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow' property</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">'box-decoration-break' property</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">'width' property</a></li>
    </ol> 

    <div class="example" id="region-style-example">
        <p>In the following example, the <span>named flow</span> 'article-flow' flows
        into 'region-1' and 'region-2'.</p>
        <pre>
&lt;style&gt;
  #div-1 {
    <strong>flow-into: article-flow;</strong>
  }

  #region-1, #region-2 {
    <strong>flow-from: article-flow;</strong>
  }

  /* region styling */
  <strong>#region-1::region p </strong> {
    margin-right: 5em;
  }
&lt;/style&gt;     

&lt;body&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;
  &lt;div id="region-1"&gt;&lt;/div&gt;
  &lt;div id="region-2"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

        <div id="region_styling_illustration">
            <img id="region_styling_img_2" src="images/region-styling-2.png"
            alt=
            "Example showing how a named flow content fits into regions to illustrate region styling."
            name="region_styling_img_2">

            <ul class="swatch-list">
                <li><span class="swatch" style=
                "background:#1C75BC">&nbsp;</span>div div-1</li>

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

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

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

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

        <p>The region styling applies 
          to flow content that fits in 'region-1'. 
          The relative selector matches 'p-1' and 'p-2' 
          because these paragraphs 
          flow into 'region-1'. 
          Only the fragment of 'p-2' 
          that flows into 'region-1' 
          is styled with the pseudo-element.</p>
    </div>
    
    <p>All of the selectors 
      in a ::region pseudo-element 
      contribute to its <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>. 
      So the specificity of the ::region pseudo-element 
      in the example above would combine 
      the id selector's specificity 
      with the specificity of the type selector, 
      resulting in a specificity of 101.</p>

    <p>Selectors that match a given element or element fragment (as described 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 [[!CSS21]].</p>
    
    <div>
        Region styling does not apply to nested regions. For example, if a region
        'A' receives content from a flow that contains region 'B', the content that
        flows into 'B' does not receive the region styling specified for region 'A'.
    </div>

Removed from the Region interface

  <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt);
  <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt, CSSOMString pseudoElt);


        <p>The <dfn id="dom-region-getComputedRegionStyle">getComputedRegionStyle</dfn> 
          methods on the Region interface work the same as the 
          <a href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code class="idl">getComputedStyle</code></a> [[!CSSOM]] 
          methods on the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window"><code class="idl">Window</code></a> 
          interface [[!HTML5]] with the following exceptions. 
          For the <code class="idl">Region</code> interface 
          the <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> 
          returned must include the result of 
          <a href="#the-region-pseudo-element">region styling</a>. 
          If the element is fragmented across region boundaries, 
          the <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a>  returned must apply only 
          to the fragment that flows through 
          the <span>CSS Region</span>. 
          The method returns null 
          if the <span>region</span> object 
          is not (or no longer) a region.</p>

        <div class="note"><span class="note-prefix">Note </span>
          <p>If the element is not contained 
          in the <span>CSS Region</span> at all, 
          the method returns 
          the <a href="#the-region-pseudo-element">region styling</a> 
          that would apply to the element 
          if it were contained in the <span>CSS Region</span> 
          (following how <a href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code class="idl">getComputedStyle</code></a> works 
          with elements not contained 
          in the window's document).</p>
        </div>