8000 [css-regions] add visual formatting of nested regions · xfq/csswg-drafts@e582303 · GitHub
Skip to content

Commit e582303

Browse files
astearnsastearns
committed
[css-regions] add visual formatting of nested regions
1 parent 0a131ed commit e582303

2 files changed

Lines changed: 98 additions & 31 deletions

File tree

‎css-regions/Overview.html‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
rel=dcterms.rights>
1313
<meta content="CSS Regions Module Level 3" name=dcterms.title>
1414
<meta content=text name=dcterms.type>
15-
<meta content=2013-04-19 name=dcterms.date>
15+
<meta content=2013-04-22 name=dcterms.date>
1616
<meta content="Vincent Hardy" name=dcterms.creator>
1717
<meta content="Rossen Atanassov" name=dcterms.creator>
1818
<meta content="Alan Stearns" name=dcterms.creator>
@@ -50,7 +50,7 @@
5050

5151
<h1 id=css-regions-module>CSS Regions Module Level 3</h1>
5252

53-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 April 2013</h2>
53+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 April 2013</h2>
5454

5555
<dl>
5656
<dt>This version:
@@ -1088,6 +1088,13 @@ <h4 id=fragmenting-regions><span class=secno>3.2.2. </span>Nested
10881088
by using an avoid break value on the <span>CSS Region</span>, if that is
10891089
desired.
10901090

1091+
<p>A <span>CSS Region</span> can be part of the contents of a separate
1092+
named flow, as long as there are no cycles broken by the <a
1093+
href="#circular-dependencies">Cycle Detection</a> described above. This
1094+
case is a <dfn id=nested-region-context>nested region context</dfn>, which
1095+
has an effect on the <a href="#regions-visual-formatting-steps">Visual
1096+
Formatting Steps</a> described below.
1097+
10911098
<h3 id=region-flow-break><span class=secno>3.3. </span>Region flow break
10921099
properties: ‘<a href="#break-before"><code
10931100
class=property>break-before</code></a>’, ‘<a href="#break-after"><code
@@ -2543,6 +2550,12 @@ <h5 id=rfcb-flow-fragment-height-resolution-phase-2><span
25432550
according to the <a href="#processing-model">rules</a> described earlier
25442551
in this document.
25452552

2553+
<p>In a <a href="#nested-region-context">nested region context</a>, this
2554+
phase will trigger the beginning of Step 1 for any inner <a
2555+
href="#named-flow0">named flows</a> whose regions are contained in the
2556+
outer <a href="#named-flow0">named flow</a>. All of Step 1 for inner flows
2557+
must recursively complete before Step 1 for an outer flow completes.
2558+
25462559
<h4 id=regions-boxes-layout><span class=secno>7.2.2. </span>Step 2: region
25472560
boxes layout</h4>
25482561

@@ -2583,6 +2596,13 @@ <h4 id=named-flows-layout><span class=secno>7.2.3. </span>Step 3: named
25832596
<p>During this phase, generated content is laid out according to the <a
25842597
href="#processing-model">rules</a> described earlier in this document.
25852598

2599+
<p>In a <a href="#nested-region-context">nested region context</a>, this
2600+
step will trigger Step 2 for inner <a href="#named-flow0">named flows</a>
2601+
whose regions are contained in the outer <a href="#named-flow0">named
2602+
flow</a>. Fragmentation of the inner regions may result as they are laid
2603+
out in the outer region chain. Once Step 3 for an outer named flow is
2604+
complete, Step 3 for the inner named flows recursively begins.
2605+
25862606
<div class=note>
25872607
<p>The model for resolving auto sized regions will cause, under certain
25882608
circumstances, the flow content to be overset or underset. In other
@@ -3001,6 +3021,8 @@ <h3 id="changes_from_Aug_28_2012"><span class=secno>12.1. </span>Changes
30013021
28<sup>th</sup> 2012</a> version</h3>
30023022

30033023
<ul>
3024+
<li>Described how visual formatting of nested regions works
3025+
30043026
<li>Added regionoversetchange event
30053027

30063028
<li>renamed regionlayoutupdate to regionfragmentchange
@@ -3497,6 +3519,9 @@ <h2 class=no-num id=index>Index</h2>
34973519
href="#dom-named-flow-collection-named-item"
34983520
title="section 6.1."><strong>6.1.</strong></a>
34993521

3522+
<li>nested region context, <a href="#nested-region-context"
3523+
title="section 3.2.2."><strong>3.2.2.</strong></a>
3524+
35003525
<li><code class=idl>overset</code>, <a href="#dom-named-flow-overset"
35013526
title="section 6.1."><strong>6.1.</strong></a>
35023527

‎css-regions/Overview.src.html‎

Lines changed: 71 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -923,10 +923,17 @@ <h4 id="fragmenting-regions">Nested fragmentation contexts</h4>
923923
This can be controlled by using
924924
an avoid break value on the <span>CSS Region</span>,
925925
if that is desired.</p>
926-
927-
<h3 id=
928-
"region-flow-break">Region
929-
flow break properties: 'break-before', 'break-after', 'break-inside'</h3>
926+
<p>A <span>CSS Region</span> can be part
927+
of the contents of a separate named flow,
928+
as long as there are no cycles broken
929+
by the <a href="#circular-dependencies">Cycle Detection</a>
930+
described above.
931+
This case is a <dfn>nested region context</dfn>,
932+
which has an effect
933+
on the <a href="#regions-visual-formatting-steps">Visual Formatting Steps</a>
934+
described below.</p>
935+
936+
<h3 id="region-flow-break">Region flow break properties: 'break-before', 'break-after', 'break-inside'</h3>
930937

931938
<div class="note"><span class="note-prefix">Note </span>
932939
<p>This section is also defined in [[!CSS3-BREAK]].
@@ -2256,19 +2263,31 @@ <h5 id="rfcb-flow-fragment-height-resolution-phase-1">RFCB flow fragment height
22562263

22572264
<h5 id="rfcb-flow-fragment-height-resolution-phase-2">RFCB flow fragment height resolution, Phase 2</h5>
22582265

2259-
<p><span>Named flows</span> are laid out in <span>regions</span>. The
2260-
user agent resolves the <em><span>flow fragment height</span></em> for
2261-
the <span>RFCB</span>s using the remainder of the flow and accounting for
2262-
<a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>.
2263-
This process accounts for constraints such as the 'height' or 'max-height' values, as described
2264-
in the CSS 2.1 section on
2265-
<a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating heights
2266-
and margins</a> (see the <a href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level
2267-
non-replaced elements in normal flow when 'overflow' computes to 'visible'</a> section and the
2268-
<a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated cases</a> section).
2269-
During this phase, generated content is laid out according to the
2270-
<a href="#processing-model">rules</a> described earlier in this document.
2271-
</p>
2266+
<p><span>Named flows</span> are laid out in <span>regions</span>.
2267+
The user agent resolves
2268+
the <em><span>flow fragment height</span></em>
2269+
for the <span>RFCB</span>s
2270+
using the remainder of the flow
2271+
and accounting for <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>.
2272+
This process accounts for constraints
2273+
such as the 'height' or 'max-height' values,
2274+
as described in the CSS 2.1 section
2275+
on <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating heights and margins</a>
2276+
(see the <a href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'</a>
2277+
section and the <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated cases</a> section).
2278+
During this phase,
2279+
generated content is laid out
2280+
according to the <a href="#processing-model">rules</a>
2281+
described earlier in this document.</p>
2282+
<p>In a <span>nested region context</span>,
2283+
this phase will trigger
2284+
the beginning of Step 1
2285+
for any inner <span>named flows</span>
2286+
whose regions are contained
2287+
in the outer <span>named flow</span>.
2288+
All of Step 1 for inner flows
2289+
must recursively complete before Step 1
2290+
for an outer flow completes.</p>
22722291

22732292
<h4 id="regions-boxes-layout">Step 2: region boxes layout</h4>
22742293

@@ -2288,21 +2307,43 @@ <h4 id="regions-boxes-layout">Step 2: region boxes layout</h4>
22882307

22892308
<h4 id="named-flows-layout">Step 3: named flows layout</h4>
22902309

2291-
<p>In this final step, the content of <span>named flows</span> is laid out in the <span>regions</span>' RFCBs
2292-
along with the generated content boxes.</p>
2310+
<p>In this final step,
2311+
the content of <span>named flows</span>
2312+
is laid out in the <span>regions</span>' RFCBs
2313+
along with the generated content boxes.</p>
22932314

2294-
<p>The used 'width' for RFCBs is resolved <a href="#rfcb-width-resolution">as described before</a>.</p>
2315+
<p>The used 'width' for RFCBs is resolved
2316+
<a href="#rfcb-width-resolution">as described before</a>.</p>
22952317

2296-
<p>The used 'height' of RFCBs is resolved such that none of the boxes in the region box's normal flow
2297-
overflow the region's box. In other words, the RFCB boxes are stretched vertically
2298-
to accommodate as much of the flow as possible without overflowing the region box and
2299-
accounting for <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a> and
2300-
generated content boxes.</p>
2301-
2302-
<p>During this phase, generated content is laid out according to the
2303-
<a href="#processing-model">rules</a>
2304-
described earlier in this document.</p>
2318+
<p>The used 'height' of RFCBs is resolved
2319+
such that none of the boxes
2320+
in the region box's normal flow
2321+
overflow the region's box.
2322+
In other words,
2323+
the RFCB boxes are stretched vertically
2324+
to accommodate as much
2325+
of the flow as possible
2326+
without overflowing the region box
2327+
and accounting for
2328+
<a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>
2329+
and generated content boxes.</p>
23052330

2331+
<p>During this phase,
2332+
generated content is laid out
2333+
according to the <a href="#processing-model">rules</a>
2334+
described earlier in this document.</p>
2335+
2336+
<p>In a <span>nested region context</span>,
2337+
this step will trigger Step 2
2338+
for inner <span>named flows</span>
2339+
whose regions are contained
2340+
in the outer <span>named flow</span>.
2341+
Fragmentation of the inner regions
2342+
may result as they are laid out
2343+
in the outer region chain.
2344+
Once Step 3 for an outer named flow is complete,
2345+
Step 3 for the inner named flows recursively begins.</p>
2346+
23062347
<div class="note">
23072348
<p>The model for resolving auto sized regions will cause, under certain circumstances,
23082349
the flow content to be overset or underset. In other words, it will not fit tightly.
@@ -2546,6 +2587,7 @@ <h2 id="changes">Changes</h2>
25462587
<h3 id="changes_from_Aug_28_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3>
25472588

25482589
<ul>
2590+
<li>Described how visual formatting of nested regions works</li>
25492591
<li>Added regionoversetchange event</li>
25502592
<li>renamed regionlayoutupdate to regionfragmentchange</li>
25512593
<li>Defined offsetParent interaction</li>

0 commit comments

Comments
 (0)