8000 csswg-drafts/css3-regions/Overview.src.html at f3196409e2605f4f8ee585dd0d4c4ed2fe0aa881 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
executable file
·
1667 lines (1276 loc) · 67.3 KB

Overview.src.html

File metadata and controls

executable file
·
1667 lines (1276 loc) · 67.3 KB
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Regions Module Level 3</title>
<link rel="stylesheet" type="text/css" href="default.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;
}
#mobile-logo {
display: none;
}
</style>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
<link id="st" href="alternate-spec-style.css" rel="stylesheet"
type="text/css" title="alternate spec style">
</head>
<body>
<div class="head" id="div-head">
<p><a href="http://www.w3.org/"><img id="mobile-logo" alt="W3C" height="53" src=
"http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width="90"></a>
<!--begin-logo-->
<p><a href="http://www.w3.org/"><img id="logo" 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">[LONGSTATUS]
[DATE]</h2>
<dl>
<dt>This version:</dt>
<dd><a href=
"[VERSION]">http://www.w3.org/csswg/css3-regions</a></dd>
<dt>Latest version:</dt>
<dd><a href=
"http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a></dd>
<dt>Previous version:</dt>
<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>Editors:</dt>
<dd class="vcard"><span class="fn">Vincent Hardy</span>,
<span class="org">Adobe Systems, Inc.</span>, <span class=
"email">vhardy@adobe.com</span></dd>
<dd class="vcard"><span class="fn">Alex Mogilevsky</span>,
<span class="org">Microsoft</span>, <span class=
"email">alexmog@microsoft.com</span></dd>
</dl><!--begin-copyright--><!--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 [[CSS3COL]] or the Grid Layout Module
[[CSS3-GRID-LAYOUT]] to position the regions where content flows.</p>
<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>
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does not
imply endorsement of its contents by W3C. Don't cite this document other
than as work in progress.</p>
<p>The archived public mailing list www-style@w3.org 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]
…summary of comment…"</p>
<!--end-status-->
<p>This draft is related to the drafts about Multi-column Layout
[[CSS3COL]], Grid Layout [[CSS3GRID]], Flexible Box Layout
[[CSS3-FLEXBOX]], and Template Layout [[CSS3LAYOUT]].</p>
<h2 class="no-num no-toc" id="table-of-contents">Table of contents</h2>
<!--begin-toc--><!--end-toc-->
<h2 id="introduction">Introduction</h2>
<p><em>This section is non-normative.</em></p>
<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>
<p>The CSS regions module can be seen as an extension of the concept of
multi-column elements. With CSS Multi-column layout [[CSS3COL]], columns
share the same dimensions and define column boxes organized in rows.
Content flows from one column to the next.</p>
<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>
<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.</p>
<h3 id="named-flows-and-regions">Named flows and regions</h3>
<p>Consider the layout illustrated in figure 1.</p>
<div class="figure">
<img src="images/regions-intro.svg" width="400" alt=
"multiple chained regions which should receive content from a flow">
<p class="caption">Layout requiring sophisticated content flow</p>
</div>
<p>The designer's intent is to position an image in region 'A' and to flow
an article's text from region '1', to region '2', '3' and '4'.</p>
<p>The following code snippet shows the content to flow between the regions
1, 2, 3 and 4.</p>
<pre>
&lt;div <em>id="article"</em>&gt;
&lt;h1&gt;Introduction&lt;/h1&gt;
&lt;p&gt;This is an example ...&lt;/p&gt;
&lt;h1&gt;More Details&lt;/h1&gt;
&lt;p&gt;This illustrates ...&lt;/p&gt;
&lt;p&gt;Then, the example ...&lt;/p&gt;
&lt;p&gt;Finally, this ...&lt;/p&gt;
&lt;/div&gt;
</pre>
<p>And the following snippet shows an example of elements that will be used
as regions.</p>
<pre>
&lt;div id="region1"&gt;&lt;/div&gt;
&lt;div id="region2"&gt;&lt;/div&gt;
&lt;div id="region3"&gt;&lt;/div&gt;
&lt;div id="region4"&gt;&lt;/div&gt;
</pre>
<p>CSS layout facilities can position and size regions as needed. However,
there is no existing mechanism to associate the content with the regions so
that content flows as intended. Figure 2 shows an example of the intended
visual rendering of the content.</p>
<div class="figure">
<img src="images/regions-intro-rendering.png" width="450" alt=
"Sample rendering showing a single thread of text flowing through a chain of regions">
<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>
<p>The following code example illustrates how the content of the <code>article</code>
element becomes a flow and how the areas 'region1', 'region2', 'region3'
and 'region4' become regions that consume the 'article_flow' content.</p>
<div class="example">
<pre>
&lt;style&gt;
#article {
<strong>flow-into: article_flow;</strong>
}
#region1, #region2, #region3, #region4 {
<strong>flow-from: article_flow;</strong>
}
&lt;/style&gt;
</pre>
</div>
<p>The 'article_flow' value on the 'flow-into' property directs the ''#article''
element to the 'article_flow' named flow. Setting the elements' 'flow-from' property
to 'article_flow' on elements makes them regions and associates these regions
with the named flow: the flow is
''poured'' into the desired regions.</p>
<h3 id="region-styling">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 [[MEDIAQ]] 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>
<p>In our example, the designer wants to make text flowing into region 1
larger, bold and dark blue. In addition, <code class=
"html">&lt;h1&gt;</code> headers should be crimson.</p>
<p>This design can be expressed with region styling as shown below.</p>
<div class="example">
<pre>
&lt;style&gt;
/*
* Default article styling.
*/
#article {
color:#777;
text-align: justify;
}
#article h1 {
border-left: 1px solid #777;
padding-left: 2ex;
display: run-in;
}
/*
* Additional styling to apply to content when it falls into
* region1
*/
<strong>@region #region1 {</strong>
#article {
font-weight: bold;
color: #0C3D5F;
font-size: larger;
}
#article h1 {
color: crimson;
border: none;
padding: 0px;
}
<strong>}</strong>
&lt;/style&gt;
</pre>
</div>
<p>The '@region' rule for region 1 limits its selectors to content flowing
into region 1. The following figure shows how the rendering changes if we
do not increase the font size nor make it bold for content flowing into
region 1. As more content can be fitted, more content is subject to the
contextual selectors, resulting in more dark blue text into region 1.</p>
<div class="figure">
<img src="images/region-styling.png" width="450" alt=
"Illustrate how changing region styling affects the flow of content.">
<p class="caption">Different rendering with a different region
styling</p>
</div>
<h2 id="css-regions-concepts">CSS regions concepts</h2>
<p><em>This section is non-normative.</em></p>
<h3 id="regions">Regions</h3>
<p class="index" title="region" id="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 <em>named flow</em> (see the 'flow-from'
property).</p>
<h3 id="named-flow">Named flow</h3>
<p>A <dfn>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>
<p>Elements are placed into a named flow with the 'flow-into' 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>
<p>Content from a named flow is broken up between regions according to the
regions flow breaking rules.</p>
<h3 id="regions-flow-breaking-rules">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 [[CSS3PAGE]]) or a multi-column element's content
across column boxes (see [[CSS3COL]]). 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>
<p><span title=
"region">Regions</span> are organized in to a <span title=
"region-chain">region chain</span>.</p>
<p>Each region in turn consumes content from its
associated <span>named flow</span>. The named flow content is
positioned in the <dfn title="current-region">current region</dfn> until a
natural or forced region break occurs, at which point the <span title=
"current-region">current region</span> 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
'region-overflow' property on the last <span>region</span> in the
chain.</p>
<h2 id="relation-to-document-events">Relation to document events</h2>
<p><em>This section is normative.</em></p>
<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.</p>
<h2 id="properties-and-rules">Properties and rules</h2>
<p><em>This section is normative.</em></p>
<h3 id="the-flow-into-property">The 'flow-into' 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.</p>
<table class="propdef" summary="flow property definition">
<tr>
<th>Name:</th>
<td><dfn id="flow-into">flow-into</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>&lt;ident&gt; | none | inherit</td>
</tr>
<tr>
<th>Initial:</th>
<td>none</td>
</tr>
<tr>
<th>Applies to:</th>
<td>any element</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed&nbsp;value:</th>
<td>as specified</td>
</tr>
</table>
<dl>
<dt>none</dt>
<dd>The element is not moved to a named flow and normal CSS processing takes place.</dd>
<dt><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></dt>
<dd>The element is placed into the flow with the name '&lt;ident&gt;'. The
element is said to have a <dfn id="specified-flow">specified
flow</dfn>. The values 'none', 'inherit', 'default', 'auto' and 'initial' are invalid flow
names.</dd>
</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>
<p>The children of an element with a specified flow may themselves have a
specified flow.</p>
<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>
<p>The 'flow-into' property does not affect the CSS cascade and inheritance for
the elements on which it is specified. The 'flow-into' property affects the visual
formatting of elements placed into a named flow and of regions laying out
content from a named flow.</p>
<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>
<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>
<p>Elements in a named flow are sequenced in document order.</p>
<div class="note">
<p><em>This note is informative.</em></p>
<p>The 'flow-into' 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 'table-content' named flow. However, the</p>
<pre>table * {flow-into: table-content}</pre>
<p>selector will move all
the descendants of table elements in the 'table-content' 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's anonymous table objects</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 'flow-into' property does not apply to the <code class="css">::first-line</code> and <code class="css">::first-character</code>.</p>
<p>The effect of 'flow-into' 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.</p>
<h3 id="the-flow-from-property">The 'flow-from' property</h3>
<p>The 'flow-from' property makes an element a region and associates it with a named flow.</p>
<div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a></div>
<table class="propdef" summary="flow-from property definition">
<tr>
<th>Name:</th>
<td><dfn id="flow-from">flow-from</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>&lt;ident&gt; | none | inherit</td>
</tr>
<tr>
<th>Initial:</th>
<td>none</td>
</tr>
<tr>
<th>Applies to:</th>
<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.</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed&nbsp;value:</th>
<td>as specified</td>
</tr>
</table>
<dl>
<dt><strong>none</strong></dt>
<dd>The element is not a <span title="region">region</span>.</dd>
<dt><strong>&lt;ident&gt;</strong></dt>
<dd>
If the 'content' property computes to something else than 'normal', the element
does not become a region.
If the 'content' property computes to 'normal', then the element becomes a <span>region</span> and is ordered in a
<span>region chain</span> according to its document order. The content from the flow with the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
name will be <a href="#region-flow-break">broken into segments</a> and visually formatted in the
<a href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a> of the regions in the region chain. If there is no flow with name
&lt;ident&gt;, then the element does not format any content visually. <br/>Likewise, if
the element is part of the flow with name &lt;ident&gt;, then
the element does not format any content visually.
</dd>
</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.</p>
<div class="note"><p>An element becomes a region when its 'flow-from' property is set to a valid
&lt;ident&gt; value, even if there is no content contributing to the referenced flow.
For example:</p>
<pre>
&lt;style&gt;
.article{
flow-into: thread;
}
.region{
flow-from: thread;
}
&lt;/style&gt;
&lt;html&gt;
&lt;body&gt;
&lt;div class=region&gt;div content&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
There is no element matching the <code>.article</code> selector and therefore no
content in the <code>thread</code> flow. However, the element matching the <code>.region</code>
selector is still associated with that empty named flow and, consequently, its children
are not formatted visually.
</div>
<div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</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>
<p>If the 'content' property is defined on a region, it has no effect on the region's
visual formatting.</p>
<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 [[CSS3-EXCLUSIONS]]) potentially impact the
content laid out in regions, just as for non-regions.</p>
<div class="example">
<p>In the following example, the inline content coming from the
<code class="html">body_text</code> <span>named
flow</span> wraps around the <code class="html">#float</code> box.</p>
<pre>
&lt;style&gt;
6D50
#float {
float: left;
width: 100px;
height: 300px;
}
#region1, #region2 {
width: 200px;
height: 200px;
flow-from: body_text;
}
#content {
flow-into: body_text;
}
&lt;/style&gt;
&lt;div id="float"&gt;&lt;/div&gt;
&lt;div id="region1"&gt;&lt;/div&gt;
&lt;div id="region2"&gt;&lt;/div&gt;
&lt;div id="content"&gt;&lt;/div&gt;
</pre>
</div>
<h4>Auto width on regions</h4>
<p>If a region's 'width' property is computed to 'auto', its resolved value is computed based on the
region's <em>::before</em> and <em>::after</em> generated content only.</p>
<h4>Auto height on regions</h4>
<p>If a region's 'height' property is computed to 'auto', its resolved value is computed based on the
region's <em>::before</em> and <em>::after</em> generated content only.</p>
<h3 id=
"region-flow-break">Region
flow break properties: 'break-before', 'break-after', 'break-inside'</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>
<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>
<p>The following extends the 'break-before', 'break-after' and
'break-inside' properties from the [[!CSS3COL]] specification to account
for regions. The additional values are described below.</p>
<table class="propdef" summary="break-before property definition">
<tr>
<td><em>Name:</em></td>
<td><dfn>break-before</dfn></td>
</tr>
<tr>
<td><em>Value:</em></td>
<td>auto | always | avoid | left | right | page | column | region |
avoid-page | avoid-column | avoid-region</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>auto</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td>block-level elements</td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>no</td>
</tr>
<tr>
<td><em>Percentages:</em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>paged</td>
</tr>
<tr>
<td><em>Computed&nbsp;value:</em></td>
<td>specified value</td>
</tr>
</table>
<table class="propdef" summary="break-after property definition">
<tr>
<td><em>Name:</em></td>
<td><dfn>break-after</dfn></td>
</tr>
<tr>
<td><em>Value:</em></td>
<td>auto | always | avoid | left | right | page | column | region |
avoid-page | avoid-column | avoid-region</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>auto</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td>block-level elements</td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>no</td>
</tr>
<tr>
<td><em>Percentages:</em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>paged</td>
</tr>
<tr>
<td><em>Computed&nbsp;value:</em></td>
<td>specified value</td>
</tr>
</table>
<table class="propdef" summary="break-inside property definition">
<tr>
<td><em>Name:</em></td>
<td><dfn>break-inside</dfn></td>
</tr>
<tr>
<td><em>Value:</em></td>
<td>auto | avoid | avoid-page | avoid-column | avoid-region</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>auto</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td>block-level elements</td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>no</td>
</tr>
<tr>
<td><em>Percentages:</em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>paged</td>
</tr>
<tr>
<td><em>Computed&nbsp;value:</em></td>
<td>specified value</td>
</tr>
</table>
<p>These properties describe page, column and region break behavior
before/after/inside the generated box. These values are normatively defined
in [[!CSS3COL]]:</p>
<dl>
<dt>auto</dt>
<dd>Neither force nor forbid a page/column break before (after, inside)
the generated box.</dd>
<dt>always</dt>
<dd>Always force a page break before (after) the generated box.</dd>
<dt>avoid</dt>
<dd>Avoid a page/column break before (after, inside) the generated
box.</dd>
<dt>left</dt>
<dd>Force one or two page breaks before (after) the generated box so
that the next page is formatted as a left page.</dd>
<dt>right</dt>
<dd>Force one or two page breaks before (after) the generated box so
that the next page is formatted as a right page.</dd>
<dt>page</dt>
<dd>Always force a page break before (after) the generated box.</dd>
<dt>column</dt>
<dd>Always force a column break before (after) the generated box.</dd>
<dt>avoid-page</dt>
<dd>Avoid a page break before (after, inside) the generated box.</dd>
<dt>avoid-column</dt>
<dd>Avoid a column break before (after, inside) the generated box.</dd>
</dl>
<p>This specification adds the following new values:</p>
<dl>
<dt>region</dt>
<dd>Always force a region break before (after) the generated box.</dd>
<dt>avoid-region</dt>
<dd>Avoid a region break before (after, inside) the generated box.</dd>
</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 6D50 is a break that does not occur naturally.</p>
<p><strong>Note:</strong> When the 'avoid' value is used, regions may
overflow. In that case the 'overflow' property specified on the region
element should be used to determine how to render the overflow.</p>
<h3 id="the-region-overflow-property">The region-overflow property</h3>
<table class="propdef" summary="break-after property definition">
<tr>
<td><em>Name:</em></td>
<td><dfn>region-overflow</dfn></td>
</tr>
<tr>
<td><em>Value:</em></td>
<td>auto | break</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>auto</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td><em title="region element">region elements</em></td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>no</td>
</tr>
<tr>
<td><em>Percentages:</em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>paged</td>
</tr>
<tr>
<td><em>Computed&nbsp;value:</em></td>
<td>specified value</td>
</tr>
</table>
<p>The 'region-overflow' property controls the behavior of the <em id=
"last-region">last region</em> associated with a <span>named
flow</span>.</p>
<dl>
<dt>auto</dt>
<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.</dd>
View remainder of file in raw view