Editorial: tweak markup for figures

Author: zcorpan

geometry/Overview.bs

@@ -61,7 +61,7 @@ rectangles, quadrilaterals and transformation matrices with the dimension of 3x2
 
 <p>The SVG interfaces {{SVGPoint}}, {{SVGRect}} and {{SVGMatrix}} are aliasing the here defined
 interfaces in favor for common interfaces used by SVG, Canvas 2D Context and CSS
-Transforms. [[SVG11]] [[2DCONTEXT]] [[CSS3-TRANSFORMS]]
+Transforms. [[SVG11]] [[HTML]] [[CSS3-TRANSFORMS]]
 
 
 <h2 id=DOMPoint>The DOMPoint interfaces</h2>
@@ -568,23 +568,23 @@ algorithm:
  new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180});
  </code></pre>
 
- <div class="figure">
-  <svg width="230" height="200">
-   <title>An irregular quadrilateral with none of the sides being vertical or horizontal. Its four
-   corners are marked with red circles. Around this quadrilateral is a dashed rectangle. All sides
-   of this rectangle are vertical or horizontal and tangent the quadrilateral.</title>
+ <figure>
+  <svg width="230" height="200" aria-role="img" aria-label="An irregular quadrilateral with none of
+  the sides being vertical or horizontal. Its four corners are marked with red circles. Around this
+  quadrilateral is a dashed rectangle. All sides of this rectangle are vertical or horizontal and
+  tangent the quadrilateral.">
    <polygon points="40 25, 180 8, 210 150, 10 180" fill="rgb(51, 153, 204)"/>
    <rect x="10" y="8" width="200" height="172" fill="none" stroke="black" stroke-dasharray="3 2"/>
    <circle cx="40" cy="25" r="3" fill="rgb(204, 51, 51)"/>
    <circle cx="180" cy="8" r="3" fill="rgb(204, 51, 51)"/>
    <circle cx="210" cy="150" r="3" fill="rgb(204, 51, 51)"/>
    <circle cx="10" cy="180" r="3" fill="rgb(204, 51, 51)"/>
   </svg>
-  <p class="capture">An irregular quadrilateral represented by a {{DOMQuad}}. The four red colored
+  <figcaption>An irregular quadrilateral represented by a {{DOMQuad}}. The four red colored
   circles represent the {{DOMPoint}} attributes {{DOMQuad/p1}} to {{DOMQuad/p4}}. The dashed
   rectangle represents the bounding rectangle returned by the {{DOMQuad/getBounds()}} method of the
-  {{DOMQuad}}.
- </div>
+  {{DOMQuad}}.</figcaption>
+ </figure>
 </div>
 
 
@@ -594,10 +594,11 @@ algorithm:
 caniuse=dommatrix>matrix</dfn> with the purpose of describing transformations in a graphical
 context. The following sections describe the details of the interface.
 
-<div class="figure">
+<figure>
  <math display=block><mrow><mfenced open=[ close=] separators=,><mrow><mtable><mtr><mtd><msub><mi>m</mi><mi>11</mi></msub></mtd><mtd><msub><mi>m</mi><mi>21</mi></msub></mtd><mtd><msub><mi>m</mi><mi>31</mi></msub></mtd><mtd><msub><mi>m</mi><mi>41</mi></msub></mtd></mtr><mtr><mtd><msub><mi>m</mi><mi>12</mi></msub></mtd><mtd><msub><mi>m</mi><mi>22</mi></msub></mtd><mtd><msub><mi>m</mi><mi>32</mi></msub></mtd><mtd><msub><mi>m</mi><mi>42</mi></msub></mtd></mtr><mtr><mtd><msub><mi>m</mi><mi>13</mi></msub></mtd><mtd><msub><mi>m</mi><mi>23</mi></msub></mtd><mtd><msub><mi>m</mi><mi>33</mi></msub></mtd><mtd><msub><mi>m</mi><mi>43</mi></msub></mtd></mtr><mtr><mtd><msub><mi>m</mi><mi>14</mi></msub></mtd><mtd><msub><mi>m</mi><mi>24</mi></msub></mtd><mtd><msub><mi>m</mi><mi>34</mi></msub></mtd><mtd><msub><mi>m</mi><mi>44</mi></msub></mtd></mtr></mtable></mrow></mfenced></mrow></math>
- <p class="capture">A <dfn lt="abstract matrix">4x4 matrix</dfn> with items m11 to m44.
-</div>
+ <figcaption>A <dfn>4x4 abstract matrix</dfn> with items <var
+ ignore>m<sub>11</sub></var> to <var ignore>m<sub>44</sub></var>.</figcaption>
+</figure>
 
 <p>In the following sections, terms have the following meaning:
 
@@ -874,8 +875,8 @@ values, and also for ''0'' and ''-0''. [[!ECMA-262]]
 <h3 id=dommatrix-parse algorithm>Parsing a string into an abstract matrix</h3>
 
 <p>To <dfn>parse a string into an abstract matrix</dfn>, given a string <var>transformList</var>,
-means to run the following steps. It will either return a <a lt="abstract matrix">4x4 matrix</a> and
-a boolean <var>2dTransform</var>, or failure.
+means to run the following steps. It will either return a <a>4x4 abstract matrix</a> and a boolean
+<var>2dTransform</var>, or failure.
 
 <ol>
  <li><p>If <var>transformList</var> is the empty string, set it to the string "<code>matrix(1, 0, 0,
@@ -903,12 +904,12 @@ a boolean <var>2dTransform</var>, or failure.
    <dd><p>Set <var>2dTransform</var> to <code>true</code>.
   </dl>
 
- <li><p>Transform all <<transform-function>>s to <a lt="abstract matrix">4x4 matrices</a> by
- following the “<a
+ <li><p>Transform all <<transform-function>>s to <a lt="4x4 abstract matrix">4x4 abstract
+ matrices</a> by following the “<a
  href=https://drafts.csswg.org/css-transforms-1/#mathematical-description>Mathematical Description
  of Transform Functions</a>”. [[!CSS3-TRANSFORMS]]
 
- <li><p>Let <var>matrix</var> be a <a lt="abstract matrix">4x4 matrix</a> as shown in the initial
+ <li><p>Let <var>matrix</var> be a <a>4x4 abstract matrix</a> as shown in the initial
  figure of this section. <a for=matrix>Post-multiply</a> all matrices from left to right and set
  <var>matrix</var> to this product.