Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
The CSS Regions module allows content to flow across multiple areas called regions. The regions do not necessarily follow 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.
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 W3C technical reports index at http://www.w3.org/TR/.
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.
The (archived) public mailing list www-style@w3.org (see instructions) 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…”
This document was produced by the CSS Working Group (part of the Style Activity).
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures 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 Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This is a First Public Working Draft.
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.
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.
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.
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.
Consider the layout illustrated in figure 1.
Layout requiring sophisticated content flow
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
’.
The following code snippet shows the content to flow between the regions 1, 2, 3 and 4.
<div id="article"> <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>
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.
Sample rendering for desired layout
Since the CSS Regions module is independent of the layout of regions and
the mechanism used to create them, the following assumes there is a CSS
selector for the regions and, for the purpose of the example, the
selectors for regions 1, 2, 3 and 4 show as ‘<region1_sel>
’, ‘<region2_sel>
’, ‘<region3_sel>
’ and ‘<region4_sel>
’ respectively. Such a selector
could be an id selector (e.g., ‘#region_1
’) or a grid cell selector (e.g.,
‘#myGrid::grid-cell([cell-name])
’) if
using the CSS Grid Layout module, for example.
<style> #article { flow: article_flow; } <region1_sel>, <region2_sel>, <region3_sel>, <region4_sel> { content: from-flow(article_flow); } </style>
The above stylesheet directs the ‘#article
’ element to a named flow called
‘article_flow
’ by setting the ‘flow
’ property. Then,
content is "poured" from that named flow into the desired regions by
setting the regions' ‘content
’ property to ‘from-flow(article_flow)
’.
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.
In our example, the designer wants to make text flowing into region 1
larger, bold and dark blue. In addition, <h1>
headers should be run-ins and crimson.
This design can be expressed with region styling as shown below.
<style> /* * Default article styling. */ #article { color:#777; text-align: justify; } #article h1 { border-left: 1px solid #777; padding-left: 2ex; } /* * Additional styling to apply to content when it falls into * region_1 */ @region <region1_sel> { #article::region-lines { font-weight: bold; color: #0C3D5F; font-size: larger; } #article h1 { color: crimson; display: run-in; border: none; padding: 0px; } } </style>
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.
The ‘::region-lines
’ pseudo-element
is described later in this specification.
Different rendering with a different region styling
In the CSS formatting model, elements can be in the normal flow or out of the (normal) flow. Boxes generated by elements in the normal flow are subject to their container box's normal layout scheme. Boxes generated by elements out of the normal flow are subject to a different layout scheme. For example, absolutely positioned elements are subject to absolute positioning into their containing block. This can be described by saying that the absolutely positioned elements are part of a special flow (called positioned flow) which is subject to a special layout by its container box (i.e., its container box positions it into the containing block's box).
In both cases, there is a notion of flow containing a sequence of elements and there is a notion of (block) container box into which the elements flow.
The CSS Regions module generalizes the concept of flow by adding the concept of a named flow. This module lets authors explicitly place elements into a named flow.
With this model, all elements are moved to a flow as part of the visual
formatting. That flow may be the normal flow, a named flow or a positioned
flow, for example. A flow gets formatted visually when associated with one
or several elements' container box(es). When an flow is associated with
container boxes, the boxes generated by the flow's elements are laid out
according to the container box's layout scheme and the flow is subject to
the ‘flow breaking
rules
’ described below.
A container's layout scheme is the strategy used by a container to position the boxes generated by its children and itself. Examples are the normal layout (block and inline formatting) ([CSS21]), table layout ([CSS21]), the multi-column layout ([CSS3COL]) or the grid layout ([CSS3-GRID-LAYOUT]).
A region is an element that generates
a block
container box and has an associated named flow (see the
‘content
’ property).
A region‘s intrinsic
width is zero.
Breaking a named flow across multiple regions is similar to breaking a document’s content across multiple pages. One important difference is that page boxes are generated based on the available content whereas regions are a predefined set of recipients for the named flow content.
The ‘content-order
’ property defines how regions are organized in to a region chain.
Each region in turn consumes content from its associated named flow. This means that the named flow content
is positioned in the current
region until a region break occurs, at which point the current region becomes the
next one in the region chain. If there is
no more region 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
region in the chain.
The following sections define where region breaks may happen when positioning a named flow across regions in a region chain.
The sections on "Allowed region breaks", "Forced region breaks" and ""Best" region breaks" are adapted from the [CSS21] specification. There is an updated version of these paragraphs in [CSS3PAGE] as well.
In addition, the CSS Multi-column Layout Module [CSS3COL] defines unified breaking properties (which this specification extends).
It seems that we should:
In a named flow, region breaks can occur at the following places:
margin-top
’ and ‘margin-bottom
’ properties are set
to ‘0
’. When a forced region break
occurs here, the used value of the relevant ‘margin-bottom
’ property is set to
‘0
’; the relevant ‘margin-top
’ used value may either
be set to ‘0
’ or retained.
These breaks are subject to the following rules:
break-after
’ ‘break-before
’
properties of all the elements generating boxes that meet at this margin
allow it, which is when at least one of them has the value ‘always
’, ‘left
’, or ‘right
’, or when all of them are ‘auto
’.
auto
’ and a common ancestor of all the
elements has a ‘break-inside
’ value of ‘avoid-region
’, then breaking here is not
allowed.
orphans
’ or more, and the number
of line boxes between the break and the end of the box is the value of
‘widows
’ or more.
break-inside
’ property of the element and
all its ancestors is ‘auto
’.
If the above does not provide enough break points to keep content from overflowing the region boxes, then rules A, B and D are dropped in order to find additional breakpoints.
If that still does not lead to sufficient break points, rule C is dropped as well, to find still more break points.
A region break must occur at (1) if, among the ‘break-after
’ and
‘break-before
’ properties of all the
elements generating boxes that meet at this margin, there is at least one
with the value ‘always
’,
‘left
’, or ‘right
’.
CSS 2.1 does not define which of a set of allowed region breaks must be used; CSS 2.1 does not forbid a user agent from breaking at every possible break point, or not to break at all. But CSS 2.1 does recommend that user agents observe the following heuristics (while recognizing that they are sometimes contradictory):
Suppose, for example, that the style sheet contains ‘orphans: 4
’, ‘widows:
2
’, and there are 20 lines (line boxes) available at the
bottom of the current region:
widows
’ constraint, and so the
second part must contain exactly two lines
Now suppose that ‘orphans
’ is ‘10
’, ‘widows
’ is ‘20
’, and there are 8 lines available at the bottom
of the current region:
This section describes the flows to which elements formatted according to the CSS Visual Formatting Model and other layout modules (such as Multi-Column Layout [CSS3COL]) belong to.
In particular, this section describes the ‘generated
flow
’ where generated content of pseudo-elements is
placed and several ‘auto flows
’ where children of content
elements are automatically placed.
In the CSS formatting model, elements are by default placed in the normal flow of their container. Also by default, a container element gets its content from its normal flow. This means that by default, a container element will visually format its children elements and will be the only container associated with its normal flow.
Note that floats and relatively positioned elements, in this model, are part of the same flow of content and flow into the same container but are positioned in different ways.
The normal flow is one of the auto flows.
An absolutely positioned element is placed into the positioned flow of its container. The container positions this element into its containing block.
If a container has children in the normal flow and in the positioned flow, it applies different positioning schemes to each flow.
The positioned flow is one of the auto flows.
Children of the multi-column element are placed in the element's column flow. The column boxes are then implicitly
associated with the element's ‘column flow
’. In this model, multiple regions
(column boxes) get their content from a single flow (the element's
‘column
flow
’, which is the content of the element).
The column flow is one of the auto flows.
In the CSS formatting model, when the ‘::before
’ or ‘::after
’ pseudo-elements have their content
property set to one of ‘<string>
’, ‘<uri>
’, ‘<counter>
’, ‘attr(<identifier>)
’, ‘open-quote
’, ‘close-quote
’, ‘no-open-quote
’ or ‘no-close-quote
’, they create a generated flow which they format visually.
The CSS Region module does not alter in any way 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 event's bubble and capture phases happen following the document tree order.
Should we consider having something to be able to add event listeners to a region to detect events happening in the range of the flow it positions?
<script> var region = ...; // get DOM reference to region region.addEventListener('click', function (evt) { alert('I was able to capture an event from the flow content!'); }, true /* useCapture */); region.addEventListener('click', function (evt) { alert('I was able to see an event bubble from the flow content!'); }, false /* useCapture */);
Note that this is a complex proposition since it modifies the normal bubble and capture event propagation model. However, it seems that it would be a worthwhile feature.
The main CSS Regions module properties are the ‘flow’ and ‘content
’
properties. The ‘flow’ property places an element into a specific
named flow or lets the automatic flow assignment
take place. The ‘content’ property binds a region with a flow. When
multiple regions are bound to the same flow, the ‘content-order
’
property determines the order in which content flows into the sequence of
regions. This sequences of regions is called a region
chain.
The way in which the content is broken into segments that fit in a region can be controlled by the “break” properties. Finally, styling that is unique to the region can be specified by ‘region-style’ rules.
flow
’ propertyThe ‘flow’ property places an element into a named flow or automatically places it in the appropriate flow (see the Visual Formatting Model and Flows section). Elements that belong to the same flow are laid out in the regions associated with that flow.
Name: | flow |
---|---|
Value: | <string> |
Initial: | auto |
Applies to: | any element |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
flow
’ property be an identifier and not a
string?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.
The children of an element with a specified flow may themselves have a specified flow.
If an element has a the same specified flow value as one of its ancestors, it is moved out of its parent's normal flow and becomes a sibling of it's ancestor for the purpose of layout in the regions taking content from this flow.
The ‘flow
’
property does not affect the CSS cascade and inheritance for the elements
on which it is specified. The flow property affects the visual formatting
of elements associated to a named flow and of regions getting their
content from a named flow.
The containing block for absolutely positioned descendants of an element with a specified flow is the region into which the element is rendered.
All the elements participating inside a named flow are rendered as children of an anonymous block that spans across all the regions associated with the specified named flow. The elements flowed inside the same named flow are taken in document order.
Regions create a new stacking context, but inherit the floats that are already defined by the parent context.
In the following example, the inline content coming from the content
named flow wraps around the #float
box.
<style> #float { float: left; width: 100px; height: 300px; } #region1, #region2 { width: 200px; height: 200px; content: from-flow(body_text); } #content { flow: body_text; } </style> <div id="float"></div> <div id="region1"></div> <div id="region2"></div> <div id="content"></div>
content
’
propertyThis specification extends the definition of the ‘content
’
property and makes it applicable to all block elements and
pseudo-elements.
Name: | content |
---|---|
Value: | normal | none | from-flow(<string>)| [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
Initial: | normal |
Applies to: | non-replaced block elements and the ::before and ::after pseudo-elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
::before
’ and ‘::after
’ pseudo-elements, the pseudo-element is
not generated. For other elements, the element will not get any content
for its visual formatting. If the children of the element are not
directed to a flow referenced by another region, then they are not
visually formatted. An element with its value set to ‘none
’ is said to be disconnected
none
’ for the
‘::before
’ and ‘::after
’ pseudo-elements. For other elements, the
element uses the flow assigned to its children following the automatic flow assignment for the Visual Formatting
Model..
counter()
’ or ‘counters()
’. The former has two forms:
‘counter(name)
’ or
‘counter(name,
style)
’. The generated text is the value of the
innermost counter of the given name in scope at this pseudo-element; it
is formatted in the indicated style (‘decimal
’ by default). The latter function
also has two forms: ‘counters(name,
string)
’ or ‘counters(name, string,
style)
’. The generated text is the value of all
counters with the given name in scope at this pseudo-element, from
outermost to innermost separated by the specified string. The counters
are rendered in the indicated style (‘decimal
’ by default). See the section on automatic counters and numbering for more
information. The name must not be ‘none
’, ‘inherit
’ or ‘initial
’. Such a name causes the declaration
to be ignored.
quotes
’ property.
content-order
’ property discussion to
understand how content segments are associated with different regions.
The ‘content
’ property applies to block-level
elements and the ‘::before
’ and
‘::after
’ pseudo elements. User agents
may apply the content property to inline elements. The behavior is
undefined in that case, but is generally expected to be similar to that
of inline ‘::before
’ and ‘::after
’ pseudo-elements.
In particular, note that the behavior of a ‘::before
’ or ‘::after
’ pseudo-element with a ‘display
’ value that makes it an inline
element combined with a ‘content
’ value set to ‘from-flow(<name>)
’ is undefined.
Should we consider adding the ability to do the following:
...
") at the region
breaking points to indicate that content has been broken out and is
continuing on a different region.‘content: from-flow(<name>)
’
moves an element to a named flow. Should we allow the content to be
copied to a flow instead of moved to a flow. For example:
would keep ‘#quote_A
’ in the normal
flow but also copy its content to the ‘quotes
’ flow. This essentially clones the node and
raises questions regarding DOM access, CSSOM View and the computed style.
content-order
’ propertyDefines the ordering of the chain of regions into which content flows. If region A and region B are in the same chain of regions and the ‘content-order’ of region A is lower than that of region B, then region A will precede region B in that chain: content will flow into region A before it flows into region B.
Name: | content-order |
---|---|
Value: | <float> |
Initial: | 0 |
Applies to: | any block container |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
If two or more regions with the same ‘from-flow(
<name>)
’ value for their ‘content
’
property, they are first sorted according to their ‘content-order
’
value. If multiple regions in have the same ‘content-order
’
value, they are sorted according to the document order.
::grid-cell
’
pseudo elements (e.g., row-major sorting or column major sorting of
cells).break-before
’,
‘break-after
’, ‘break-inside
’When content is laid out in multiple regions, the user agent 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.
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 order defined by the ‘content-order
’ computed values. Note that
there is no region break in the last region associated with a named flow.
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.
Name: | break-before |
Value: | auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
Name: | break-after |
Value: | auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
Name: | break-inside |
Value: | auto | avoid | avoid-page | avoid-column | avoid-region |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
These properties describe page, column and region break behavior before/after/inside the generated box. These values are normatively defined in [CSS3COL]:
This specification adds the following new values:
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.
Note: 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.
Name: | region-overflow |
Value: | auto | break |
Initial: | auto |
Applies to: | region elements |
Inherited: | no |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
The ‘region-overflow
’ property controls the
behavior of the last region associated with a
named flow.
The following code sample illustrates the usage of the ‘region-overflow
’ property.
<style> #article { flow: "article"; } #region_1, #region_2 { content: from-flow(article); region-overflow: break; /* or none */ overflow: visible; /* or hidden */ } </style> <div id="article">...</div> <div id="region_1"></div> <div id="region_2"></div>
‘flow: "article" ’
| region_1 and region_2
| ‘region-overflow: auto ’‘ overflow:visible ’
|
‘region-overflow: break ’
| ‘region-overflow: auto ’‘ overflow:hidden ’
| |
Different values for the region-overflow property
An ‘@region
’ rule contains style
declarations specific to particular regions.
The ‘@region
’ rule consists of the
keyword ‘@region
’ followed by a selector
and a declarations block. The ‘@region
’
rule and the selector constitute the region's ‘flow
segment
’ 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 [DOM-LEVEL-2-TRAVERSAL-RANGE])
from the region's flow that flow in the selected region(s).
Only elements that are fully in the ‘flow
segment
’ may match any of the selectors found in the style
rule. If an element is split across regions, it will not be subject to
region styling in any of the regions it is part of. However, it's children
element or pseudo-elements may be.
In addition, the ‘::region-lines
’
pseudo-element can be used to select the inline content of an element that
falls into a particular region.
@region <selector> { ... CSS styling rules ... }
In the following example, the named flow ‘article_flow
’ flows through ‘region_1
’ and ‘region_2
’.
<style> #div_1 { flow: "article_flow"; } <region1_sel>, <region2_sel> { content: from-flow(article_flow); } /* region style RSA */ @region <region1_sel>, <region2_sel> { p::region-lines {...} div {...} p {...} } /* region style RSB */ @region <region1_sel> { p {...} #p_2::region-lines {...} } </style> <div id="div_1"> <p id="p_1">...</p> <p id="p_2">...</p> </div>
The region style ‘RSA
’ applies to
flow content that fits in either ‘region_1
’ or ‘region_2
’.
The first rule set ‘p::region-lines
{...}
’ uses the ‘::regions-line
’ pseudo-element. Since all the
content is fitted in either ‘region_1
’
or ‘region_1
’, this rule set applies
to all content lines.
The second rule set ‘div {...}
’
applies to all <div>
elements that fit
fully into ‘region_1
’ or ‘region_2
’. In our example, there is no <div>
in the flow that fits fully in a region,
because div_1
is split between ‘region_1
’ and ‘region_2
’.
The third rule set ‘p {...}
’ applies
to all <p>
elements that fit fully into
‘region_1
’ or ‘region_2
’. In our example, only p_1
fully fits in a region, ‘region_1
’.
The region style ‘RSB
’ applies to
flow content that fits in ‘region_1
’.
The first rule set ‘p {...}
’ matches
p_1
because that paragraph fully fits in
‘region_1
’.
The second rule set ‘#p_2::region-lines
{...}
’ matches lines in p_2
that
flow into ‘region_1
’. These lines will
be subject to the additional style.
The properties applying to the ‘::region-lines
’ pseudo-element is limited to the
same set as those available on the ‘first-line
’ pseudo-element, as listed in
the First
formatted line definition in CSS in [SELECT]
first-line
’ precedent is
underspecified and that more specification is needed in addition to
referencing the existing precedent.The specificity of the selectors in a ‘@region
’ rule is calculated as defined in the
CSS Selectors module (see [SELECT]). In other words, the
‘@region
’ 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
‘@media
’ rules declaration blocks (see
[MEDIAQ]), where
the rule does not influence the selectors' specificity.
Consequently, selectors that match a given element (as describe above), participate in the CSS Cascading order as defined in [CSS21].
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.
Here is 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 may need to be removed for smaller text.
The CSS OM View ([CSSOM-VIEW]) specification
defines extensions to the Element
interface that
would let an author find out if the last region overflows its content
boundaries (by comparing its ‘scrollHeight
’ with its ‘contentHeight
’). However, this assumes the
region is a document element, which may not always be the case. For
example, as described in a later section, a grid cell (see [CSS3-GRID-LAYOUT]) may be
a region, but it is a pseudo-element, not an document element. Therefore,
it is not possible to access its ‘scrollHeight
’ or ‘contentHeight
’.
Since an element may be split into multiple regions, invoking getClientRects
on it must return the list of rectangles for the element in all the
regions it is part of.
This specification adds a method to the Document
interface to access the document's named flow instances.
[Supplemental] interface Document { NamedFlow flowWithName(DOMString name); };
The NamedFlow
interface offers a representation of the named flow.
interface NamedFlow { readonly attribute boolean overflow; };
The overflow
property is true if the named flow does not fully fit in the associated
regions. Otherwise, it is false.
With the NamedFlow
interface, authors can easily check if all content has been fitted into
existing regions. If it has, the overflow property would be true.
Alex has suggested to not have a NamedFlow interface but instead expand
the Element interface to provide access to the regions (e.g., does the
flow fit? which flow elements fall into which region?) and pointed out
that the NamedFlow
interface implies there is only one view on the flow. He asked that we
prepare for multiple views.
Alex's proposal has been added (see below) but the NamedFlow
interface was
kept for now because it covers the most basic need (does the flow fit?)
in the case where regions are not elements.
There needs to be a discussion about how to get a single set of APIs
that would both be ‘multi-view
’
ready and work on elements and pseudo-elements.
When an region is an actual element,
it is convenient to easily find out if content fully fits into the
region or not. The supplemental interface on Element
provides that functionality.
[Supplemental] interface Element { readonly attribute DOMString regionOverflow; readonly Range[] flowRanges; };
The regionOverflow
attribute can take one of the
following values:
overflow
property value can be used to control the
visibility of the overflowing content. This means that the region is the
last one in the region chain and not able
to fit the remaining content from the named
flow.
content-order
’ value.
If an element is not a region, then the contentOverflow
attribute value is ‘fit
’.
The flowRanges attribute is an array of Range instances corresponding to the content from the region flow that is positioned in the region.
If an element is not an region, then the flowRanges
attribute returns an array with a single Range
matching the element's full content.
It has been suggested
to add a ‘layout changed
’ event to
notify any change on the region layout or regionOverflow value. Should we
add that?
It has been suggested
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 ‘multi-view
’ context as suggested by Alex.
This specification does not specify how regions are created or laid out. This section illustrates how regions can be crated and laid out with other specifications. It first defines the requirements for integrating CSS Regions. Then it provides examples for different existing solutions.
For a container element (or pseudo-element) to become a region, it must be selectable with a CSS selector and accept the content property as defined in this specification.
Authors can use different methods to layout regions in CSS. Some solutions can be expressed with CSS only and not require document changes, some solutions leverage the document tree. The following examples illustrate these different options.
The CSS Grid Layout specification (see [CSS3-GRID-LAYOUT]) defines a grid-cell pseudo-element selector for grid cells. Consequently, grid cells can be a region.
The following example shows how CSS Grid Layout could be use to create regions and position them to create the example given in the introduction.
display
’
property. To completely allow the use-case presented below, ‘::grid-cell
’ pseudo elements should allow box
sizing properties and behave as block level elements.<style> body:before { display: grid; grid-template: "aae" "bbe" "cde"; } body:before::grid-cell(a) { content: url('illustration.png'); } body:before::grid-cell(b), body:before::grid-cell(c), body:before::grid-cell(d), body:before::grid-cell(e) { content: from-flow('article_flow'); } </style>
The CSS Multi-Column Layout (see [CSS3COL]) does not specify a selector for column regions.
The CSS Multi-Column specification could offer a pseudo-element selector
(e.g., called ‘nth-column
’) for its
column boxes. This would enable different content to flow through
different columns. The following example illustrates how two different
content flows could be threaded on alternate columns.
<style> body:before { columns: 4; } body:before::nth-column(even) { content: from-flow('article_1_flow'); } body:before::nth-column(odd) { content: from-flow('article_2_flow'); } </style> <body> <div id="article_1">...</div> <div id="article_2">...</div> </body>
Note that if a column box becomes associated with a flow by its content
property, it is no longer associated to the ‘column flow
’, as
discussed before. For example, if the second
column in a multi column element was associated with the ‘illustration
’ named flow, the regular
‘column-flow
’ would thread through
the first and third column while column two would flow content from the
‘illustration
’ named flow.
CSS (see [CSS21]) offers a way to visually format content with different layout schemes: inline and block formatting, float, absolute positioning, relative positioning or table layout.
Elements laid out using these schemes can be regions, as illustrated below, using absolutely positioned elements for simplicity.
<style> #article { flow: article_flow; } #region_1, #region_2, #region_3, #region_4 { content: from-flow(article_flow); } #region_1 { /* positioning properties */ } /* ... positioning of other regions ... */ </style> <html> <body> <div id="article">...</div> <div id="region_A"></div> <div id="region_1"></div> <div id="region_2"></div> <div id="region_3"></div> <div id="region_4"></div> </body> </html>
This specification is related to other specifications as described in the references section. In addition, it is related to the following specifications:
NamedFlow
, 4.1.
overflow
,
4.1.
regionOverflow
, 4.2.
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|---|---|---|---|---|---|
break-after | auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region | auto | block-level elements | no | N/A | paged |
break-before | auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region | auto | block-level elements | no | N/A | paged |
break-inside | auto | avoid | avoid-page | avoid-column | avoid-region | auto | block-level elements | no | N/A | paged |
content | normal | none | from-flow(<string>)| [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | normal | non-replaced block elements and the ::before and ::after pseudo-elements | no | N/A | visual |
content-order | <float> | 0 | any block container | no | N/A | visual |
flow | <string> | auto | any element | no | N/A | visual |
region-overflow | auto | break | auto | region elements | no | N/A | paged |