Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
AbstractThe 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.
Status of this documentThis 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.
Table of contentsCapturing 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.
1.1. Named flows and regionsConsider 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
2. CSS Regions Model 2.1. Named flowsIn 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]).
2.2. RegionsA 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.
2.3.1. Breaking a named flow and determining the current flow regionThe ‘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.
2.3.3. Forced region breaksA 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):
Example(s):
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 linesNow 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.
2.4.2. Positioned flowAn 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.
2.4.3. Column flowChildren 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.
Need to add a grid cell flow section.
Need to add examples for the different flow types.
2.4.4. Generated flowIn 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.
3. Properties and RulesThe 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.
3.1. The ‘flow’ property
The ‘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 specifiedShould the ‘
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>
3.2. The ‘content’ property
This specification extends the definition of the ‘content’ property and makes it applicable to all block elements and pseudo-elements.
::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:
#quote_A { flow: "quotes"; content: contents; }
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’ property
Defines 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 specifiedShould the type of ‘
content-order
’ be ‘
float
’ or ‘
integer
’?
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.
CSS Modules should define the document order for pseudo elements. For example, the [CSSGRID] specification should define the document order for the ‘::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.
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.
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>
Different values for the region-overflow property
3.6. The @region ruleAn ‘@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]
Is the proposed restriction that elements are only selected selector in a rule set appearing in an @region rule sufficient?
There is
concernthat the ‘
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].
4. CSSOM View and CSS RegionsSince 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.
The Element interface extension is only available to regions that are document elements and not to regions that are pseudo-elements. For example, when regions are created with a grid layout, this interface cannot be used because the regions are not document elements but pseudo-elements.
Re-layout event?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.
5.1. Region requirementsFor 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.
5.2. Integration ExamplesAuthors 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.
5.2.1. CSS Grid LayoutThe 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.
There is a pending issue in the CSS Grid Layout module draft (section 7.2) about whether or not grid cells should generate a box and have an associated ‘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>
5.2.2. CSS Multi-Column Layout
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>
6. Relation to other specifications
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.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4