Skip to content

Commit 7bcec42

Browse files
astearnsastearns
committed
[css-shapes] fix figure markup
1 parent 8d7fc66 commit 7bcec42

2 files changed

Lines changed: 58 additions & 41 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</p>
6464
<h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
6565
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
66-
<span class=dt-updated><span class=value-title title=20140305>5 March 2014</span></span></span></h2>
66+
<span class=dt-updated><span class=value-title title=20140311>11 March 2014</span></span></span></h2>
6767
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
6868
<dt>Feedback:</dt>
6969
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -803,12 +803,12 @@ <h2 class="heading settled heading" data-level=4 id=shapes-from-image><span clas
803803
<li>Changing the value of the <a class=property data-link-type=propdesc href=#propdef-shape-margin title=shape-margin>shape-margin</a> property (see example 8)</li>
804804
</ol>
805805

806-
<div class=figure>
806+
<figure>
807807
<img alt="A float shape around an image using its alpha-channel" src=images/shape-outside-image.png style=width:70%>
808-
809-
<p class=caption>A float shape around an image using its alpha-channel.</p>
810-
811-
</div>
808+
<figcaption>
809+
A float shape around an image using its alpha-channel.
810+
</figcaption>
811+
</figure>
812812
</div>
813813

814814
<h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span class=secno>5 </span><span class=content>
@@ -870,10 +870,11 @@ <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span
870870
<li><a class=css data-link-type=maybe href=#content-box title=content-box>content-box</a>: the shape containing all of the blue pixels</li>
871871
</ul>
872872

873-
<div class=figure>
873+
<figure>
874874
<img alt="Colored boxes representing simple box edges" src=images/box-edges-simple.png>
875-
<p class=caption>Simple CSS Box Model Edges</p>
876-
</div>
875+
<figcaption>
876+
Simple CSS Box Model Edges<p></p>
877+
</figcaption></figure>
877878

878879
<p> And the same definitions apply to a more complex example with the same 100px square, but with these border, padding and margin properties:
879880

@@ -884,10 +885,12 @@ <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span
884885
margin: 20px 10px 10px 10px;
885886
</code>
886887
</pre>
887-
<div class=figure>
888+
<figure>
888889
<img alt="Colored boxes representing complex box edges" src=images/box-edges-complex.png>
889-
<p class=caption>Complex CSS Box Model Edges</p>
890-
</div>
890+
<figcaption>
891+
Complex CSS Box Model Edges
892+
</figcaption>
893+
</figure>
891894
</div>
892895

893896
<div class=example>
@@ -902,10 +905,12 @@ <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span
902905
If you make a left float out of it,
903906
content normally wraps in this manner:
904907

905-
<div class=figure>
908+
</p><figure>
906909
<img alt="Text wrapping around float with no shape" src=images/normal-wrap.png>
907-
<p class=caption>Normal float wrapping</p>
908-
</div>
910+
<figcaption>
911+
Normal float wrapping
912+
</figcaption>
913+
</figure>
909914

910915
<p> If you add a margin-box shape to the float,
911916
then content wraps around the rounded margin-box corners.
@@ -914,10 +919,12 @@ <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span
914919
shape-outside: margin-box;
915920
</code>
916921
</pre>
917-
<div class=figure>
922+
<figure>
918923
<img alt="Text wrapping around float with margin-box shape" src=images/margin-box-wrap.png>
919-
<p class=caption>Float wrapping with margin-box</p>
920-
</div>
924+
<figcaption>
925+
Float wrapping with margin-box
926+
</figcaption>
927+
</figure>
921928
</div>
922929

923930
<h2 class="heading settled heading" data-level=6 id=declaring-shapes><span class=secno>6 </span><span class=content>
@@ -1090,10 +1097,12 @@ <h3 class="heading settled heading" data-level=6.3 id=shape-margin-property><spa
10901097
shape-margin: 35px;
10911098
}
10921099
</code>
1093-
</pre> <div class=figure>
1100+
</pre> <figure>
10941101
<img alt="A float shape around an image using its alpha-channel with a 35 pixels shape-margin" src=images/shape-outside-image-with-margin.png style=width:70%>
1095-
<p class=caption>A float shape around an image using its alpha-channel with a 35-pixel <a class=property data-link-type=propdesc href=#propdef-shape-margin title=shape-margin>shape-margin</a></p>
1096-
</div>
1102+
<figcaption>
1103+
A float shape around an image using its alpha-channel with a 35-pixel <a class=property data-link-type=propdesc href=#propdef-shape-margin title=shape-margin>shape-margin</a>
1104+
</figcaption>
1105+
</figure>
10971106
</div>
10981107

10991108
<h2 class="no-num heading settled heading" id=acknowledgments><span class=content>

‎css-shapes/Overview.src.html‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -679,12 +679,12 @@ <h2 id="shapes-from-image">
679679
<li>Changing the value of the 'shape-margin' property (see example 8)</li>
680680
</ol>
681681

682-
<div class='figure'>
682+
<figure>
683683
<img alt="A float shape around an image using its alpha-channel" src="images/shape-outside-image.png" style="width:70%"/>
684-
685-
<p class="caption">A float shape around an image using its alpha-channel.</p>
686-
687-
</div>
684+
<figcaption>
685+
A float shape around an image using its alpha-channel.
686+
</figcaption>
687+
</figure>
688688
</div>
689689

690690
<h2 id="shapes-from-box-values">
@@ -748,10 +748,10 @@ <h2 id="shapes-from-box-values">
748748
<li>''content-box'': the shape containing all of the blue pixels</li>
749749
</ul>
750750

751-
<div class="figure">
751+
<figure>
752752
<img alt="Colored boxes representing simple box edges" src="images/box-edges-simple.png"/>
753-
<p class="caption">Simple CSS Box Model Edges</p>
754-
</div>
753+
<figcaption>Simple CSS Box Model Edges</p>
754+
</figure>
755755

756756
And the same definitions apply to a more complex example with the same 100px square, but with these border, padding and margin properties:
757757

@@ -764,10 +764,12 @@ <h2 id="shapes-from-box-values">
764764
</code>
765765
</pre>
766766

767-
<div class="figure">
767+
<figure>
768768
<img alt="Colored boxes representing complex box edges" src="images/box-edges-complex.png"/>
769-
<p class="caption">Complex CSS Box Model Edges</p>
770-
</div>
769+
<figcaption>
770+
Complex CSS Box Model Edges
771+
</figcaption>
772+
</figure>
771773
</div>
772774

773775
<div class="example">
@@ -782,10 +784,12 @@ <h2 id="shapes-from-box-values">
782784
If you make a left float out of it,
783785
content normally wraps in this manner:
784786

785-
<div class="figure">
787+
<figure>
786788
<img alt="Text wrapping around float with no shape" src="images/normal-wrap.png"/>
787-
<p class="caption">Normal float wrapping</p>
788-
</div>
789+
<figcaption>
790+
Normal float wrapping
791+
</figcaption>
792+
</figure>
789793

790794
If you add a margin-box shape to the float,
791795
then content wraps around the rounded margin-box corners.
@@ -796,10 +800,12 @@ <h2 id="shapes-from-box-values">
796800
</code>
797801
</pre>
798802

799-
<div class="figure">
803+
<figure>
800804
<img alt="Text wrapping around float with margin-box shape" src="images/margin-box-wrap.png"/>
801-
<p class="caption">Float wrapping with margin-box</p>
802-
</div>
805+
<figcaption>
806+
Float wrapping with margin-box
807+
</figcaption>
808+
</figure>
803809
</div>
804810

805811
<h2 id="declaring-shapes">
@@ -1007,10 +1013,12 @@ <h3 id="shape-margin-property">
10071013
}
10081014
</code>
10091015
</pre>
1010-
<div class='figure'>
1016+
<figure>
10111017
<img alt="A float shape around an image using its alpha-channel with a 35 pixels shape-margin" src="images/shape-outside-image-with-margin.png" style="width:70%"/>
1012-
<p class="caption">A float shape around an image using its alpha-channel with a 35-pixel 'shape-margin'</p>
1013-
</div>
1018+
<figcaption>
1019+
A float shape around an image using its alpha-channel with a 35-pixel 'shape-margin'
1020+
</figcaption>
1021+
</figure>
10141022
</div>
10151023

10161024
<h2 class="no-num" id="acknowledgments">

0 commit comments

Comments
 (0)