Skip to content

Commit 8d7fc66

Browse files
astearnsastearns
committed
[css-regions] update figure markup
1 parent 2067e58 commit 8d7fc66

2 files changed

Lines changed: 93 additions & 57 deletions

File tree

‎css-regions/Overview.html‎

Lines changed: 48 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</p>
5757
<h1 class="p-name no-ref" id=title>CSS Regions Module Level 1</h1>
5858
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
59-
<span class=dt-updated><span class=value-title title=20140310>10 March 2014</span></span></span></h2>
59+
<span class=dt-updated><span class=value-title title=20140311>11 March 2014</span></span></span></h2>
6060
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-regions/>http://www.w3.org/TR/css-regions/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a>
6161
<dt>Feedback:</dt>
6262
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-regions%5D%20feedback">www-style@w3.org</a>
@@ -207,10 +207,10 @@ <h2 class="heading settled heading" data-level=1 id=introduction><span class=sec
207207
</code></pre> </div>
208208

209209
<p> These two declarations will take
210-
the element that matches #this,
210+
the element that matches <code>#this</code>,
211211
put it into a flow named "my-flow",
212212
and display the contents of "my-flow"
213-
in the box from the element with the "there" id.
213+
in the box from the element that matches <code>#there</code>.
214214
This example has a single content source for the named flow,
215215
and a single box for the region chain.
216216
Named flows can also have multiple sources
@@ -272,15 +272,19 @@ <h2 class="heading settled heading" data-level=1 id=introduction><span class=sec
272272
the article will continue
273273
in the second box after the &lt;aside&gt; content.
274274

275-
<div class=figure style="float:left; margin:1em;">
275+
</p><figure style="float:left; margin:1em;">
276276
<img alt="Article and aside rendering without CSS Regions" src=images/linked-boxes-before.png>
277-
<p class=caption>Rendering without CSS Regions
278-
</div>
277+
<figcaption>
278+
Rendering without CSS Regions
279+
</figcaption>
280+
</figure>
279281

280-
<div class=figure style="float:left; margin:1em;">
282+
<figure style="float:left; margin:1em;">
281283
<img alt="Article and aside rendering with CSS Regions" src=images/linked-boxes-after.png>
282-
<p class=caption>Rendering with CSS Regions
283-
</div>
284+
<figcaption>
285+
Rendering with CSS Regions
286+
</figcaption>
287+
</figure>
284288

285289
<p style=clear:left;>In the images above,
286290
the red outline indicates the size of the viewport.
@@ -966,7 +970,7 @@ <h3 class="heading settled heading" data-level=3.4 id=the-region-fragment-proper
966970
&lt;/body&gt;
967971
</pre> </div>
968972

969-
<div class=figure>
973+
<figure>
970974
<table style="border: 1px solid gray;width: 100%;" summary="Different values for the region-fragment property - Illustration.">
971975
<tr>
972976
<td>article with two<br>
@@ -1002,8 +1006,10 @@ <h3 class="heading settled heading" data-level=3.4 id=the-region-fragment-proper
10021006
</tr>
10031007
</table>
10041008

1005-
<p class=caption>Combinations of region-fragment and overflow.</p>
1006-
</div>
1009+
<figcaption>
1010+
Combinations of region-fragment and overflow.
1011+
</figcaption>
1012+
</figure>
10071013

10081014
<div class=note><span class=note-prefix>Note </span>
10091015

@@ -1634,10 +1640,12 @@ <h3 class="heading settled heading" data-level=7.2 id=regions-flow-content-box><
16341640
</li>
16351641
</ul>
16361642

1637-
<div class=figure>
1643+
<figure>
16381644
<img alt="The ::before, RFCB and ::after boxes contained in the Region Box" src=images/RFCB.svg width=600px>
1639-
<p class=caption>The Region Flow Content Box (RFCB)</p>
1640-
</div>
1645+
<figcaption>
1646+
The Region Flow Content Box (RFCB)
1647+
</figcaption>
1648+
</figure>
16411649

16421650
<p> Laying out a <span>region</span> box follows the same processing rules
16431651
as for any other <a href=http://www.w3.org/TR/CSS2/visuren.html#block-boxes>block container box</a>.
@@ -1696,10 +1704,12 @@ <h3 class="heading settled heading" data-level=7.3 id=regions-visual-formatting-
16961704
</li>
16971705
</ul>
16981706

1699-
<div class=figure>
1707+
<figure>
17001708
<img alt="visual representation of the three-step process" src=images/regions-layout-three-steps.svg width=600px>
1701-
<p class=caption>Regions visual formatting steps</p>
1702-
</div>
1709+
<figcaption>
1710+
Regions visual formatting steps
1711+
</figcaption>
1712+
</figure>
17031713

17041714
<h4 class="heading settled heading" data-level=7.3.1 id=rfcb-flow-fragment-height-resolution><span class=secno>7.3.1 </span><span class=content>
17051715
Step 1: RFCB flow fragment height resolution</span><a class=self-link href=#rfcb-flow-fragment-height-resolution></a></h4>
@@ -1922,10 +1932,12 @@ <h4 class="heading settled heading" data-level=7.5.1 id=step1-phase1-example><sp
19221932

19231933
<p> Conceptually, this produces the layout illustrated below.
19241934

1925-
<div class=figure>
1935+
</p><figure>
19261936
<img alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0" src=images/flow-fragment-height-phase-1.png width=500px>
1927-
<p class=caption>Step 1 - Phase 1: Layout RFCBs with used heights of 0</p>
1928-
</div>
1937+
<figcaption>
1938+
Step 1 - Phase 1: Layout RFCBs with used heights of 0
1939+
</figcaption>
1940+
</figure>
19291941

19301942
<h4 class="heading settled heading" data-level=7.5.2 id=step1-phase2-example><span class=secno>7.5.2 </span><span class=content>
19311943
Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</span><a class=self-link href=#step1-phase2-example></a></h4>
@@ -1957,10 +1969,12 @@ <h4 class="heading settled heading" data-level=7.5.2 id=step1-phase2-example><sp
19571969
the remaining content is laid out in RFCB-C’s used <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-width title=width>width</a>.
19581970
This results in a resolved flow fragment height: FH-C.
19591971

1960-
<div class=figure>
1972+
</p><figure>
19611973
<img alt="Step 1 - Phase 2: Measure flow fragments heights" src=images/flow-fragment-height-phase-2.png width=370px>
1962-
<p class=caption>Step 1 - Phase 2: Measure flow fragments heights</p>
1963-
</div>
1974+
<figcaption>
1975+
Step 1 - Phase 2: Measure flow fragments heights
1976+
</figcaption>
1977+
</figure>
19641978

19651979
<h4 class="heading settled heading" data-level=7.5.3 id=step2-example><span class=secno>7.5.3 </span><span class=content>
19661980
Step 2: Layout document and regions without named flows</span><a class=self-link href=#step2-example></a></h4>
@@ -1987,10 +2001,12 @@ <h4 class="heading settled heading" data-level=7.5.3 id=step2-example><span clas
19872001
<a href=http://www.w3.org/TR/CSS2/visudet.html#block-root-margin>calculating its content measure</a>:
19882002
FH-C becomes rC’s used <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-height title=height>height</a>.
19892003

1990-
<div class=figure>
2004+
</p><figure>
19912005
<img alt="Step 2: Layout document and regions without named flows" src=images/regions-visual-formatting-step-2.png width=370px>
1992-
<p class=caption>Step 2: Layout document and regions without <a class=css data-link-type=maybe href=#named-flow0 title="named flows">named flows</a></p>
1993-
</div>
2006+
<figcaption>
2007+
Step 2: Layout document and regions without <a class=css data-link-type=maybe href=#named-flow0 title="named flows">named flows</a>
2008+
</figcaption>
2009+
</figure>
19942010

19952011
<h4 class="heading settled heading" data-level=7.5.4 id=step3-example><span class=secno>7.5.4 </span><span class=content>
19962012
Step 3: named flows layout</span><a class=self-link href=#step3-example></a></h4>
@@ -2016,10 +2032,12 @@ <h4 class="heading settled heading" data-level=7.5.4 id=step3-example><span clas
20162032
from the <span>flow fragment height</span>
20172033
computed in Step 1 Phase 2.
20182034

2019-
<div class=figure>
2035+
</p><figure>
20202036
<img alt="Step 3: Final result after laying out named flows in regions" src=images/regions-visual-formatting-step-3.png width=370px>
2021-
<p class=caption>Step 3: Final result after laying out named flows in regions</p>
2022-
</div>
2037+
<figcaption>
2038+
Step 3: Final result after laying out named flows in regions
2039+
</figcaption>
2040+
</figure>
20232041

20242042
<h2 class="heading settled heading" data-level=8 id=relation-to-document-events><span class=secno>8 </span><span class=content>
20252043
Relation to document events</span><a class=self-link href=#relation-to-document-events></a></h2>

‎css-regions/Overview.src.html‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -108,17 +108,21 @@ <h2 id="introduction">
108108
the article will continue
109109
in the second box after the &lt;aside&gt; content.
110110

111-
<div class="figure" style="float:left; margin:1em;">
111+
<figure style="float:left; margin:1em;">
112112
<img alt="Article and aside rendering without CSS Regions"
113113
src="images/linked-boxes-before.png"/>
114-
<p class="caption">Rendering without CSS Regions
115-
</div>
114+
<figcaption>
115+
Rendering without CSS Regions
116+
</figcaption>
117+
</figure>
116118

117-
<div class="figure" style="float:left; margin:1em;">
119+
<figure style="float:left; margin:1em;">
118120
<img alt="Article and aside rendering with CSS Regions"
119121
src="images/linked-boxes-after.png"/>
120-
<p class="caption">Rendering with CSS Regions
121-
</div>
122+
<figcaption>
123+
Rendering with CSS Regions
124+
</figcaption>
125+
</figure>
122126

123127
<p style="clear:left;">In the images above,
124128
the red outline indicates the size of the viewport.
@@ -872,7 +876,7 @@ <h3 id="the-region-fragment-property">
872876
</pre>
873877
</div>
874878

875-
<div class="figure">
879+
<figure>
876880
<table style="border: 1px solid gray;width: 100%;" summary=
877881
"Different values for the region-fragment property - Illustration.">
878882
<tr>
@@ -915,8 +919,10 @@ <h3 id="the-region-fragment-property">
915919
</tr>
916920
</table>
917921

918-
<p class="caption">Combinations of region-fragment and overflow.</p>
919-
</div>
922+
<figcaption>
923+
Combinations of region-fragment and overflow.
924+
</figcaption>
925+
</figure>
920926

921927
<div class="note"><span class="note-prefix">Note </span>
922928

@@ -1559,10 +1565,12 @@ <h3 id="regions-flow-content-box">
15591565
</li>
15601566
</ul>
15611567

1562-
<div class="figure">
1568+
<figure>
15631569
<img src="images/RFCB.svg" width="600px" alt="The ::before, RFCB and ::after boxes contained in the Region Box"/>
1564-
<p class="caption">The Region Flow Content Box (RFCB)</p>
1565-
</div>
1570+
<figcaption>
1571+
The Region Flow Content Box (RFCB)
1572+
</figcaption>
1573+
</figure>
15661574

15671575
Laying out a <span>region</span> box follows the same processing rules
15681576
as for any other <a href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container box</a>.
@@ -1621,10 +1629,12 @@ <h3 id="regions-visual-formatting-steps">
16211629
</li>
16221630
</ul>
16231631

1624-
<div class="figure">
1632+
<figure>
16251633
<img src="images/regions-layout-three-steps.svg" width="600px" alt="visual representation of the three-step process"/>
1626-
<p class="caption">Regions visual formatting steps</p>
1627-
</div>
1634+
<figcaption>
1635+
Regions visual formatting steps
1636+
</figcaption>
1637+
</figure>
16281638

16291639
<h4 id="rfcb-flow-fragment-height-resolution">
16301640
Step 1: RFCB flow fragment height resolution</h4>
@@ -1849,10 +1859,12 @@ <h4 id="step1-phase1-example">
18491859

18501860
Conceptually, this produces the layout illustrated below.
18511861

1852-
<div class="figure">
1862+
<figure>
18531863
<img src="images/flow-fragment-height-phase-1.png" width="500px" alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0"/>
1854-
<p class="caption">Step 1 - Phase 1: Layout RFCBs with used heights of 0</p>
1855-
</div>
1864+
<figcaption>
1865+
Step 1 - Phase 1: Layout RFCBs with used heights of 0
1866+
</figcaption>
1867+
</figure>
18561868

18571869
<h4 id="step1-phase2-example">
18581870
Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</h4>
@@ -1884,10 +1896,12 @@ <h4 id="step1-phase2-example">
18841896
the remaining content is laid out in RFCB-C's used 'width'.
18851897
This results in a resolved flow fragment height: FH-C.
18861898

1887-
<div class="figure">
1899+
<figure>
18881900
<img src="images/flow-fragment-height-phase-2.png" width="370px" alt="Step 1 - Phase 2: Measure flow fragments heights"/>
1889-
<p class="caption">Step 1 - Phase 2: Measure flow fragments heights</p>
1890-
</div>
1901+
<figcaption>
1902+
Step 1 - Phase 2: Measure flow fragments heights
1903+
</figcaption>
1904+
</figure>
18911905

18921906
<h4 id="step2-example">
18931907
Step 2: Layout document and regions without named flows</h4>
@@ -1914,10 +1928,12 @@ <h4 id="step2-example">
19141928
<a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">calculating its content measure</a>:
19151929
FH-C becomes rC's used 'height'.
19161930

1917-
<div class="figure">
1931+
<figure>
19181932
<img src="images/regions-visual-formatting-step-2.png" width="370px" alt="Step 2: Layout document and regions without named flows"/>
1919-
<p class="caption">Step 2: Layout document and regions without ''named flows''</p>
1920-
</div>
1933+
<figcaption>
1934+
Step 2: Layout document and regions without ''named flows''
1935+
</figcaption>
1936+
</figure>
19211937

19221938
<h4 id="step3-example">
19231939
Step 3: named flows layout</h4>
@@ -1943,10 +1959,12 @@ <h4 id="step3-example">
19431959
from the <span>flow fragment height</span>
19441960
computed in Step 1 Phase 2.
19451961

1946-
<div class="figure">
1962+
<figure>
19471963
<img src="images/regions-visual-formatting-step-3.png" width="370px" alt="Step 3: Final result after laying out named flows in regions"/>
1948-
<p class="caption">Step 3: Final result after laying out named flows in regions</p>
1949-
</div>
1964+
<figcaption>
1965+
Step 3: Final result after laying out named flows in regions
1966+
</figcaption>
1967+
</figure>
19501968

19511969
<h2 id="relation-to-document-events">
19521970
Relation to document events</h2>

0 commit comments

Comments
 (0)