You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2330 lines
84 KiB
2330 lines
84 KiB
<!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> © 2011 <a
|
|
href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</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 “css3-regions” in the subject, preferably like this:
|
|
“[<!---->css3-regions<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<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
|
|
‘<code class=property>flow-into</code>’ property</a>
|
|
|
|
<li><a href="#the-flow-from-property"><span class=secno>4.2. </span>The
|
|
‘<code class=property>flow-from</code>’ 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: ‘<code
|
|
class=property>break-before</code>’, ‘<code
|
|
class=property>break-after</code>’, ‘<code
|
|
class=property>break-inside</code>’</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 ‘<code
|
|
class=property>A</code>’ and to flow an article's text from region
|
|
‘<code class=css>1</code>’, to region ‘<code
|
|
class=css>2</code>’, ‘<code class=css>3</code>’ and
|
|
‘<code class=css>4</code>’.
|
|
|
|
<p>The following code snippet shows the content to flow between the regions
|
|
1, 2, 3 and 4.
|
|
|
|
<pre>
|
|
<div <em>id="article"</em>>
|
|
<h1>Introduction</h1>
|
|
<p>This is an example ...</p>
|
|
|
|
<h1>More Details</h1>
|
|
<p>This illustrates ...</p>
|
|
<p>Then, the example ...</p>
|
|
<p>Finally, this ...</p>
|
|
</div>
|
|
|
|
</pre>
|
|
|
|
<p>And the following snippet shows an example of elements that will be used
|
|
as regions.
|
|
|
|
<pre>
|
|
<div id="region1"></div>
|
|
<div id="region2"></div>
|
|
<div id="region3"></div>
|
|
<div id="region4"></div>
|
|
</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 ‘<code
|
|
class=css>region1</code>’, ‘<code
|
|
class=css>region2</code>’, ‘<code
|
|
class=css>region3</code>’ and ‘<code
|
|
class=css>region4</code>’ become regions that consume the
|
|
‘<code class=css>article_flow</code>’ content.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
<style>
|
|
|
|
#article {
|
|
<strong>flow-into: article_flow;</strong>
|
|
}
|
|
|
|
#region1, #region2, #region3, #region4 {
|
|
<strong>flow-from: article_flow;</strong>
|
|
}
|
|
</style>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>article_flow</code>’ value on the
|
|
‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ property directs the
|
|
‘<code class=css>#article</code>’ element to the ‘<code
|
|
class=css>article_flow</code>’ named flow. Setting the elements'
|
|
‘<a href="#flow-from"><code
|
|
class=property>flow-from</code></a>’ property to ‘<code
|
|
class=css>article_flow</code>’ on elements makes them regions and
|
|
associates these regions with the named flow: the flow is ‘<code
|
|
class=css>poured</code>’ 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><h1></code> headers should be crimson.
|
|
|
|
<p>This design can be expressed with region styling as shown below.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
<style>
|
|
/*
|
|
* 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>
|
|
</style>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>@region</code>’ 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 ‘<a href="#flow-from"><code
|
|
class=property>flow-from</code></a>’ 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 ‘<a
|
|
href="#flow-into"><code class=property>flow-into</code></a>’
|
|
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 ‘<a href="#region-overflow"><code
|
|
class=property>region-overflow</code></a>’ 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 ‘<a
|
|
href="#flow-into"><code class=property>flow-into</code></a>’
|
|
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><ident> | 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 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"><ident></a>
|
|
|
|
<dd>The element is placed into the flow with the name ‘<code
|
|
class=css><ident></code>’. The element is said to have a <dfn
|
|
id=specified-flow>specified flow</dfn>. The values ‘<code
|
|
class=property>none</code>’, ‘<code
|
|
class=property>inherit</code>’, ‘<code
|
|
class=property>default</code>’, ‘<code
|
|
class=property>auto</code>’ and ‘<code
|
|
class=property>initial</code>’ 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 ‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ property does not affect the
|
|
CSS cascade and inheritance for the elements on which it is specified. The
|
|
‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ 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 ‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ 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 ‘<code
|
|
class=property>table-content</code>’ named flow. However, the</p>
|
|
|
|
<pre>table * {flow-into: table-content}</pre>
|
|
|
|
<p>selector will move all the descendants of table elements in the
|
|
‘<code class=property>table-content</code>’ 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‘<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 ’flow-into' property to avoid
|
|
unintended results.</p>
|
|
</div>
|
|
|
|
<p>The ‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ property does not apply to the
|
|
<code class=css>::first-line</code> and <code
|
|
class=css>::first-character</code>.
|
|
|
|
<p>The effect of ‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ 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 ‘<a
|
|
href="#flow-from"><code class=property>flow-from</code></a>’
|
|
property</h3>
|
|
|
|
<p>The ‘<a href="#flow-from"><code
|
|
class=property>flow-from</code></a>’ 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><ident> | 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 value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<dl>
|
|
<dt><strong>none</strong>
|
|
|
|
<dd>The element is not a <span title=region>region</span>.
|
|
|
|
<dt><strong><ident></strong>
|
|
|
|
<dd> If the ‘<code class=property>content</code>’ property
|
|
computes to something else than ‘<code
|
|
class=property>normal</code>’, the element does not become a
|
|
region. If the ‘<code class=property>content</code>’ property
|
|
computes to ‘<code class=property>normal</code>’, 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"><ident></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 <ident>, then the element does not format any content
|
|
visually. <br>
|
|
Likewise, if the element is part of the flow with name <ident>,
|
|
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 ‘<a href="#flow-from"><code
|
|
class=property>flow-from</code></a>’ property is set to a valid
|
|
<ident> value, even if there is no content contributing to the
|
|
referenced flow. For example:</p>
|
|
|
|
<pre>
|
|
<style>
|
|
.article{
|
|
flow-into: thread;
|
|
}
|
|
.region{
|
|
flow-from: thread;
|
|
}
|
|
</style>
|
|
<html>
|
|
<body>
|
|
<div class=region>div content</div>
|
|
</body>
|
|
</html>
|
|
</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 ‘<code class=property>content</code>’ 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>
|
|
<style>
|
|
#float {
|
|
float: left;
|
|
width: 100px;
|
|
height: 300px;
|
|
}
|
|
|
|
#region1, #region2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
flow-from: body_text;
|
|
}
|
|
|
|
#content {
|
|
flow-into: body_text;
|
|
}
|
|
</style>
|
|
|
|
<div id="float"></div>
|
|
|
|
<div id="region1"></div>
|
|
<div id="region2"></div>
|
|
|
|
<div id="content"></div>
|
|
</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 ‘<code class=property>width</code>’ property
|
|
is computed to ‘<code class=property>auto</code>’, 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 ‘<code class=property>height</code>’ property
|
|
is computed to ‘<code class=property>auto</code>’, 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: ‘<a href="#break-before"><code
|
|
class=property>break-before</code></a>’, ‘<a
|
|
href="#break-after"><code class=property>break-after</code></a>’,
|
|
‘<a href="#break-inside"><code
|
|
class=property>break-inside</code></a>’</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 ‘<a href="#break-before"><code
|
|
class=property>break-before</code></a>’, ‘<a
|
|
href="#break-after"><code class=property>break-after</code></a>’ and
|
|
‘<a href="#break-inside"><code
|
|
class=property>break-inside</code></a>’ 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 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 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 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 ‘<code
|
|
class=property>avoid</code>’ value is used, regions may overflow. In
|
|
that case the ‘<a href="#dom-namedflow-overflow"><code
|
|
class=property>overflow</code></a>’ 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 value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>The ‘<a href="#region-overflow"><code
|
|
class=property>region-overflow</code></a>’ 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 ‘<a href="#region-overflow"><code
|
|
class=property>region-overflow</code></a>’ property does not
|
|
influence the size of the region it applies to.
|
|
|
|
<p>The following code sample illustrates the usage of the ‘<a
|
|
href="#region-overflow"><code
|
|
class=property>region-overflow</code></a>’ property.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
<style>
|
|
#article {
|
|
flow-into: "article";
|
|
}
|
|
|
|
#region_1, #region_2 {
|
|
flow-from: article;
|
|
<strong>region-overflow: break;</strong> /* or none */
|
|
<strong>overflow: visible;</strong> /* or hidden */
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="article">...</div>
|
|
|
|
<div id="region_1"></div>
|
|
<div id="region_2"></div>
|
|
|
|
</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>‘<code class=css>flow-into: "article"</code>’
|
|
|
|
<td><code class=html>region_1</code> and <code
|
|
class=html>region_2</code>
|
|
|
|
<td>‘<code class=css>region-overflow: auto</code>’<br>
|
|
‘<code class=css>overflow:visible</code>’
|
|
|
|
<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>‘<code class=css>region-overflow: break</code>’
|
|
|
|
<td>‘<code class=css>region-overflow: auto</code>’<br>
|
|
‘<code class=css>overflow:hidden</code>’
|
|
|
|
<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 ‘<a href="#dom-namedflow-overflow"><code
|
|
class=property>overflow</code></a>’ property is honored on a
|
|
region: if region content overflows, such as the borders of elements on
|
|
the last line, the ‘<a href="#dom-namedflow-overflow"><code
|
|
class=property>overflow</code></a>’ property controls the
|
|
visibility of the overflowing content. See the ‘<a
|
|
href="#dom-namedflow-overflow"><code
|
|
class=property>overflow</code></a>’ 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 ‘<code class=css>@region</code>’ rule contains style
|
|
declarations specific to particular regions.
|
|
|
|
<pre>
|
|
@region <selector> {
|
|
... CSS styling rules ...
|
|
}
|
|
</pre>
|
|
|
|
<p>The ‘<code class=css>@region</code>’ rule consists of the
|
|
keyword ‘<code class=css>@region</code>’ followed by a <a
|
|
href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
|
|
and a declarations block. The ‘<code class=css>@region</code>’
|
|
rule and the selector constitute the region's ‘<code class=css>flow
|
|
segment</code>’ 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 ‘<code class=css>flow
|
|
segment</code>’ 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">‘<code
|
|
class=property>word-spacing</code>’</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">‘<code
|
|
class=property>letter-spacing</code>’</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">‘<code
|
|
class=property>text-decoration</code>’</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">‘<code
|
|
class=property>text-transform</code>’</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
|
|
class=property>line-height</code>’</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">‘<code
|
|
class=property>text-shadow</code>’ property</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code
|
|
class=property>box-shadow</code>’ property</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">‘<code
|
|
class=property>box-decoration-break</code>’ property</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">‘<code
|
|
class=property>width</code>’ property</a>
|
|
</ol>
|
|
|
|
<div class=example id=region-style-example>
|
|
<p>In the following example, the named flow ‘<code
|
|
class=css>article_flow</code>’ flows through ‘<code
|
|
class=css>region_1</code>’ and ‘<code
|
|
class=css>region_2</code>’.</p>
|
|
|
|
<pre>
|
|
<style>
|
|
#div_1 {
|
|
<strong>flow-into: article_flow;</strong>
|
|
}
|
|
|
|
<region1_sel>, <region2_sel> {
|
|
<strong>flow-from: article_flow;</strong>
|
|
}
|
|
|
|
/* region style RSA */
|
|
<strong>@region <region1_sel>, <region2_sel></strong> {
|
|
div {...}
|
|
p {...}
|
|
}
|
|
|
|
/* region style RSB */
|
|
<strong>@region <region1_sel></strong> {
|
|
p {...}
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="div_1">
|
|
<p id="p_1">...</p>
|
|
<p id="p_2">...</p>
|
|
</div>
|
|
|
|
|
|
</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"> </span>div div_1
|
|
|
|
<li><span class=swatch style="background:crimson"> </span>paragraph
|
|
p_1
|
|
|
|
<li><span class=swatch style="background:white"> </span>paragraph
|
|
p_2
|
|
|
|
<li><span class=swatch style="background:#E6E7E8"> </span>range of
|
|
flow that fits into region_1
|
|
|
|
<li><span class=swatch style="background:#BCBEC0"> </span>range of
|
|
flow that fits into region_2
|
|
</ul>
|
|
</div>
|
|
|
|
<p>The region style ‘<code class=css>RSA</code>’ applies to
|
|
flow content that is laid out in either ‘<code
|
|
class=css>region_1</code>’ or ‘<code
|
|
class=css>region_2</code>’.</p>
|
|
|
|
<p>The first rule set ‘<code class=css>div {...}</code>’
|
|
applies to all <code class=html><div></code> elements that fit
|
|
partially or fully into ‘<code class=css>region_1</code>’ or
|
|
‘<code class=css>region_2</code>’. <code
|
|
class=html>div_1</code> is split between ‘<code
|
|
class=css>region_1</code>’ and ‘<code
|
|
class=css>region_2</code>’ and gets the style from this style rule.</p>
|
|
|
|
<p>The second rule set ‘<code class=css>p {...}</code>’
|
|
applies to all <code class=html><p></code> elements that fit into
|
|
‘<code class=css>region_1</code>’ or ‘<code
|
|
class=css>region_2</code>’. In our example, both <code
|
|
class=html>p_1</code> and <code class=html>p_2</code> are selected.</p>
|
|
|
|
<p>The region style ‘<code class=css>RSB</code>’ applies to
|
|
flow content that fits in ‘<code class=css>region_1</code>’.</p>
|
|
|
|
<p>The first rule set ‘<code class=css>p {...}</code>’ matches
|
|
<code class=html>p_1</code> and <code class=html>p_2</code> because these
|
|
paragraphs flow into ‘<code class=css>region_1</code>’. 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 ‘<code class=css>first-line</code>’ 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 ‘<code
|
|
class=css>@region</code>’ 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
|
|
‘<code class=css>@region</code>’ 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
|
|
‘<code class=css>@media</code>’ 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 ‘<code class=property>A</code>’ receives content from a
|
|
flow that contains region ‘<code class=property>B</code>’, the
|
|
content that flows into ‘<code class=property>B</code>’ does
|
|
not receive the region styling specified for region ‘<code
|
|
class=property>A</code>’.</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>‘<code class=css>continues on page 3</code>’</em>
|
|
clearly indicates, at the end of a region, that there is more content in
|
|
the flow which can be found on ‘<code class=css>page 3</code>’
|
|
(in this example, the notion of page is application specific).
|
|
|
|
<p>The ‘<code class=css>::before</code>’ and ‘<code
|
|
class=css>::after</code>’ 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 ‘<code class=css>::before</code>’ content is laid out in
|
|
the region prior to any other content coming from the flow. Note that it
|
|
is possible to set the ‘<code class=css>::before</code>’
|
|
pseudo-element's ‘<code class=property>display</code>’
|
|
property to ‘<code class=property>run-in</code>’ to align it
|
|
with the content's inline boxes.
|
|
|
|
<p>The ‘<code class=css>::after</code>’ 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 ‘<code
|
|
class=css>::after</code>’ content. Accommodating means that the
|
|
‘<code class=css>::after</code>’ content is laid out without
|
|
overflowing the region. If there is still not enough room to accommodate
|
|
for the ‘<code class=css>::after</code>’ content after
|
|
removing all flow content, then the ‘<code
|
|
class=css>::after</code>’ content overflows. The ‘<code
|
|
class=property>display</code>’ property of the ‘<code
|
|
class=css>::after</code>’ content should be set to ‘<code
|
|
class=property>run-in</code>’ to align with the region's content's
|
|
inline boxes. In that case, the ‘<code
|
|
class=css>::after</code>’ 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 ‘<code class=css>::after</code>’
|
|
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>‘<a href="#dom-namedflow-overflow"><code
|
|
class=property>overflow</code></a>’
|
|
|
|
<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>‘<code class=property>fit</code>’
|
|
|
|
<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>‘<code class=property>empty</code>’
|
|
|
|
<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>‘<code class=property>undefined</code>’
|
|
|
|
<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 ‘<code
|
|
class=property>multi-view</code>’ 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 ‘<code class=property>content-order</code>’ a
|
|
<integer> and not a <float> following a working group <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a>
|
|
|
|
<li>Added Alex Mogilevsky as an editor
|
|
|
|
<li>Flow names became <ident> instead of <string> 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 ‘<code class=property>none</code>’, ‘<code
|
|
class=property>inherit</code>’ and ‘<code
|
|
class=property>initial</code>’ 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 ‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ property interacts with
|
|
object, embed and iframe elements.
|
|
|
|
<li>Excluded ‘<code class=property>default</code>’ 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 ‘<code
|
|
class=property>auto</code>’ on ‘<a
|
|
href="#region-overflow"><code
|
|
class=property>region-overflow</code></a>’ specifying that region
|
|
breaks must be ignored.
|
|
|
|
<li>Renamed ‘<code class=css>Document.flowWithName</code>’ to
|
|
‘<code class=css>Document.getFlowByName</code>’ since it is
|
|
not a property.
|
|
|
|
<li>Added a note that a ‘<a href="#dom-namedflow"><code
|
|
class=property>NamedFlow</code></a>’ instance is live.
|
|
|
|
<li>Added an ‘<code class=property>undefined</code>’ string
|
|
value to the regionOverflow property on the Element interface extension.
|
|
|
|
<li>Renamed NamedFlowEvent to regionLayoutUpdate to avoid having
|
|
‘<code class=property>Event</code>’ 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 ‘<code class=property>flow</code>’ to ‘<a
|
|
href="#flow-into"><code class=property>flow-into</code></a>’
|
|
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 <div> instead of grid-cell pseudo elements that
|
|
were removed from the CSS Grid Layout specification.
|
|
|
|
<li>Renamed ‘<code class=property>from-flow</code>’ to
|
|
‘<a href="#flow-from"><code
|
|
class=property>flow-from</code></a>’ following a working group <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.
|
|
|
|
<li>Limited the applicability of ‘<code class=css>content:
|
|
flow-from()</code>’ 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 ‘<code class=property>flow</code>’ 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 ‘<a
|
|
href="#flow-into"><code class=property>flow-into</code></a>’
|
|
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 ‘<code
|
|
class=css>content:flow-from(<ident>)</code>’ with
|
|
‘<code class=css>flow-from: <ident></code>’ 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 ‘<code
|
|
class=css>::before</code>’ and ‘<code
|
|
class=css>::after</code>’ and explain how ‘<code
|
|
class=css>display:run-in</code>’ works with regions.
|
|
|
|
<li>Modified the @region style rule to remove the ::region-lines
|
|
pseudo-selector.
|
|
|
|
<li>Removed the ‘<code class=property>region-order</code>’
|
|
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 ‘<code class=property>auto</code>’ to the list of
|
|
invalid flow identifiers.
|
|
|
|
<li>Made ‘<code class=property>none</code>’ the initial value
|
|
for ‘<a href="#flow-into"><code
|
|
class=property>flow-into</code></a>’ and aligned with ‘<a
|
|
href="#flow-from"><code class=property>flow-from</code></a>’, as
|
|
explained in this <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
|
|
Also allowed the ‘<code class=property>inherit</code>’ value
|
|
on ‘<a href="#flow-from"><code
|
|
class=property>flow-from</code></a>’ and ‘<a
|
|
href="#flow-into"><code class=property>flow-into</code></a>’ (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 ‘<code
|
|
class=property>content</code>’ 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 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å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 Ç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 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é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å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å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:
|
|
-->
|