fix some bikeshed errors

Author: svgeesus

compositing-1/Overview.bs

@@ -150,7 +150,7 @@ Note: Applying a blendmode other than <a value>normal</a> to the element must es
 ... will produce the following result:
 </p>
 <div class="figure">
-<img alt="example of an image of duck with the lime color of the document" src="examples/ducky_normal.png" style="width:30%"/>
+<img alt="example of an image of duck with the lime color of the document" src="examples/ducky_normal.png" style="width:30%">
 <p class="caption">
 Partially transparent image on a lime backdrop</p>
 </div>
@@ -163,7 +163,7 @@ img { mix-blend-mode: multiply; }
 ... the output will be the image blending with the lime background of the &lt;body> element.
 </p>
 <div class="figure">
-<img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_multiply.png" style="width:30%"/>
+<img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_multiply.png" style="width:30%">
 <p class="caption">
 Blending of a transparent image on a lime backdrop.
 </p>
@@ -187,7 +187,7 @@ circle { mix-blend-mode: screen; }
 ... the output will be blending of the 3 circles. Each circle is rendered from bottom to top. Where the elements overlap, the blend mode produces a change in color.
 </p>
 <div class="figure">
-<img alt="example of 3 circles blending with a screen blend mode" src="examples/screen_example.svg" style="width:30%"/>
+<img alt="example of 3 circles blending with a screen blend mode" src="examples/screen_example.svg" style="width:30%">
 <p class="caption">
 Example of 3 circles blending with a screen blend mode
 </p>
@@ -212,7 +212,7 @@ img { mix-blend-mode: difference; }
 ... the 'opacity' on the &lt;div> element is causing the creation of a stacking context. This causes the creation of a new group so the image doesn't blend with the color of the &lt;body>.
 </p>
 <div class="figure">
-<img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_difference.png" style="width:30%"/>
+<img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_difference.png" style="width:30%">
 <p class="caption">
 Example of blending within a stacking context.</p>
 </div>
@@ -244,7 +244,7 @@ p {
 </pre>
 
 <div class="figure">
-<img alt="example of text that has an overlay blend on top of a texture" src="examples/overlay_text.png" style="width:75%"/>
+<img alt="example of text that has an overlay blend on top of a texture" src="examples/overlay_text.png" style="width:75%">
 <p class="caption">
 Text with a blend overlay on top of an image.
 </p>
@@ -324,7 +324,7 @@ div {
 }
 </pre>
 <div class="figure">
-<img alt="example of div that has an image of a duck and a gradient that is blending" src="examples/ducky_background_blend.png" style="width:30%"/>
+<img alt="example of div that has an image of a duck and a gradient that is blending" src="examples/ducky_background_blend.png" style="width:30%">
 <p class="caption">
 Blending of 2 background images.
 </p>
@@ -466,7 +466,7 @@ Co = co / αo
 <h4 id="simplealphacompositingexamples">Examples of simple alpha compositing</h4>
 <div class="example">
 <div class="figure">
-<img src="examples/simple_box.svg" alt="Simple box showing alpha compositing"/>
+<img src="examples/simple_box.svg" alt="Simple box showing alpha compositing">
 <p class="caption"></p>
 </div>
 <p>
@@ -489,7 +489,7 @@ co = RGB(1,0,0)
 
 <div class="example">
 <div class="figure">
-<img src="examples/two_box.svg" alt="simple shape"/>
+<img src="examples/two_box.svg" alt="simple shape">
 <p class="caption"></p>
 </div>
 <p>
@@ -526,7 +526,7 @@ Co = RGB(0, 0, 1)
 
 <div class="example">
 <div class="figure">
-<img src="examples/two_box_transparency.svg" alt="interaction of a solid box with a transparent box on top"/>
+<img src="examples/two_box_transparency.svg" alt="interaction of a solid box with a transparent box on top">
 <p class="caption"></p>
 </div>
 <p>
@@ -562,7 +562,7 @@ Co = RGB(0.5, 0, 0.5)
 
 <div class="example">
 <div class="figure">
-<img src="examples/two_box_transparency_both.svg" alt="interaction of 2 transparent boxes"/>
+<img src="examples/two_box_transparency_both.svg" alt="interaction of 2 transparent boxes">
 <p class="caption"></p>
 </div>
 <p>
@@ -633,7 +633,7 @@ This means that the backdrop is the result of compositing all previous elements.
 <h3 id="backdropexamples">Examples of backdrop calculation</h3>
 <div class="example">
 <div class="figure">
-<img src="examples/simple_backdrop.svg" alt="example of a simple backdrop calculation"/>
+<img src="examples/simple_backdrop.svg" alt="example of a simple backdrop calculation">
 <p class="caption"></p>
 </div>
 <p>
@@ -643,7 +643,7 @@ The dotted line shows the area that is examined during compositing of the blue s
 </div>
 <div class="example">
 <div class="figure">
-<img src="examples/simple_backdrop_alpha.svg" alt="example of a backdrop with alpha"/>
+<img src="examples/simple_backdrop_alpha.svg" alt="example of a backdrop with alpha">
 <p class="caption"></p>
 </div>
 <p>
@@ -744,7 +744,7 @@ The four regions are:
 Note: Destination is synonymous with backdrop. The term destination is used in this section as this is considered the standard when working with Porter Duff compositing. Additionally, the compositing operators use ''destination'' in their names.
 
 <div class="figure">
-<p style="text-align:center"><img src="examples/PD_regions.svg" alt="overview of the regions affected by porter duff"/></p>
+<p style="text-align:center"><img src="examples/PD_regions.svg" alt="overview of the regions affected by porter duff"></p>
 <p class="caption"></p>
 </div>
 The contribution from each region to the final pixel color is defined by the coverage of the shape at that pixel, and the operator in use.
@@ -822,7 +822,7 @@ Where:
 No regions are enabled.
 
 <div class="figure">
-<img src="examples/PD_clr.svg" alt="example of porter duff clear"/>
+<img src="examples/PD_clr.svg" alt="example of porter duff clear">
 <p class="caption"></p>
 </div>
 <pre>
@@ -833,7 +833,7 @@ No regions are enabled.
 <h4 id="porterduffcompositingoperators_src">Copy</h4>
 <p>Only the source will be present.</p>
 <div class="figure">
-<img src="examples/PD_src.svg" alt="example of porter duff copy"/>
+<img src="examples/PD_src.svg" alt="example of porter duff copy">
 <p class="caption"></p>
 </div>
 <pre>
@@ -847,7 +847,7 @@ No regions are enabled.
 Only the destination will be present.
 
 <div class="figure">
-<img src="examples/PD_dst.svg" alt="example of porter duff destination"/>
+<img src="examples/PD_dst.svg" alt="example of porter duff destination">
 <p class="caption"></p>
 </div>
 <pre>
@@ -861,7 +861,7 @@ Only the destination will be present.
 Source is placed over the destination.
 
 <div class="figure">
-<img src="examples/PD_src-over.svg" alt="example of porter duff source over"/>
+<img src="examples/PD_src-over.svg" alt="example of porter duff source over">
 <p class="caption"></p>
 </div>
 <pre>
@@ -874,7 +874,7 @@ Source is placed over the destination.
 Destination is placed over the source.
 
 <div class="figure">
-<img src="examples/PD_dst-over.svg" alt="example of porter duff destination over"/>
+<img src="examples/PD_dst-over.svg" alt="example of porter duff destination over">
 <p class="caption"></p>
 </div>
 <pre>
@@ -888,7 +888,7 @@ Destination is placed over the source.
 The source that overlaps the destination, replaces the destination.
 
 <div class="figure">
-<img src="examples/PD_src-in.svg" alt="example of porter duff source in"/>
+<img src="examples/PD_src-in.svg" alt="example of porter duff source in">
 <p class="caption"></p>
 </div>
 <pre>
@@ -901,7 +901,7 @@ The source that overlaps the destination, replaces the destination.
 Destination which overlaps the source, replaces the source.
 
 <div class="figure">
-<img src="examples/PD_dst-in.svg" alt="example of porter duff destination in "/>
+<img src="examples/PD_dst-in.svg" alt="example of porter duff destination in ">
 <p class="caption"></p>
 </div>
 <pre>
@@ -915,7 +915,7 @@ Destination which overlaps the source, replaces the source.
 Source is placed, where it falls outside of the destination.
 
 <div class="figure">
-<img src="examples/PD_src-out.svg" alt="example of porter duff source out"/>
+<img src="examples/PD_src-out.svg" alt="example of porter duff source out">
 <p class="caption"></p>
 </div>
 <pre>
@@ -929,7 +929,7 @@ Source is placed, where it falls outside of the destination.
 Destination is placed, where it falls outside of the source.
 
 <div class="figure">
-<img src="examples/PD_dst-out.svg" alt="example of porter duff destination out"/>
+<img src="examples/PD_dst-out.svg" alt="example of porter duff destination out">
 <p class="caption"></p>
 </div>
 <pre>
@@ -943,7 +943,7 @@ Destination is placed, where it falls outside of the source.
 Source which overlaps the destination, replaces the destination. Destination is placed elsewhere.
 
 <div class="figure">
-<img src="examples/PD_src-atop.svg" alt="example of porter duff source atop"/>
+<img src="examples/PD_src-atop.svg" alt="example of porter duff source atop">
 <p class="caption"></p>
 </div>
 <pre>
@@ -957,7 +957,7 @@ Source which overlaps the destination, replaces the destination. Destination is
 Destination which overlaps the source replaces the source. Source is placed elsewhere.
 
 <div class="figure">
-<img src="examples/PD_dst-atop.svg" alt="example of porter duff destination atop"/>
+<img src="examples/PD_dst-atop.svg" alt="example of porter duff destination atop">
 <p class="caption"></p>
 </div>
 <pre>
@@ -971,7 +971,7 @@ Destination which overlaps the source replaces the source. Source is placed else
 The non-overlapping regions of source and destination are combined.
 
 <div class="figure">
-<img src="examples/PD_xor.svg" alt="example of porter duff xor"/>
+<img src="examples/PD_xor.svg" alt="example of porter duff xor">
 <p class="caption"></p>
 </div>
 <pre>
@@ -1064,7 +1064,7 @@ with:
 
 <div class="example">
 <div class="figure">
- <img src="examples/blend_background_opacity.svg" alt="example of blending with opacity"/>
+ <img src="examples/blend_background_opacity.svg" alt="example of blending with opacity">
  <p class="caption"></p>
 </div>
 <p>
@@ -1102,7 +1102,7 @@ This is the default attribute which specifies no blending. The blending formula
     B(Cb, Cs) = Cs
 </pre>
 <div class="figure">
-<img src="examples/normal.png" alt="example of normal blending"/>
+<img src="examples/normal.png" alt="example of normal blending">
  <p class="caption"></p>
 </div>
 
@@ -1117,7 +1117,7 @@ The resultant color is always at least as dark as either the source or destinati
 </pre>
 </p>
 <div class="figure">
-<img src="examples/multiply.png" alt="example of multiply blending"/>
+<img src="examples/multiply.png" alt="example of multiply blending">
  <p class="caption"></p>
 </div>
 
@@ -1133,7 +1133,7 @@ The result color is always at least as light as either of the two constituent co
 </pre>
 </p>
 <div class="figure">
-<img src="examples/screen.png" alt="example of screen blending"/>
+<img src="examples/screen.png" alt="example of screen blending">
  <p class="caption"></p>
 </div>
 
@@ -1150,7 +1150,7 @@ Source colors overlay the <a>backdrop</a> while preserving its highlights and sh
 Overlay is the inverse of the <a value>hard-light</a> blend mode. See the definition of <a value>hard-light</a> for the formula.
 
 <div class="figure">
-<img src="examples/overlay.png" alt="example of overlay blending"/>
+<img src="examples/overlay.png" alt="example of overlay blending">
  <p class="caption"></p>
 </div>
 
@@ -1164,7 +1164,7 @@ The <a>backdrop</a> is replaced with the source where the source is darker; othe
     B(Cb, Cs) = min(Cb, Cs)
 </pre>
 <div class="figure">
-<img src="examples/darken.png" alt="example of darken blending"/>
+<img src="examples/darken.png" alt="example of darken blending">
  <p class="caption"></p>
 </div>
 
@@ -1181,7 +1181,7 @@ The <a>backdrop</a> is replaced with the source where the source is lighter; oth
 Note: The result must be rounded down if it exceeds the range.
 
 <div class="figure">
-<img src="examples/lighten.png" alt="example of lighten blending"/>
+<img src="examples/lighten.png" alt="example of lighten blending">
  <p class="caption"></p>
 </div>
 
@@ -1217,7 +1217,7 @@ Darkens the <a>backdrop</a> color to reflect the source color. Painting with whi
 </pre>
 
 <div class="figure">
-  <img src="examples/colorburn.png" alt="example of color burn blending"/>
+  <img src="examples/colorburn.png" alt="example of color burn blending">
   <p class="caption"></p>
 </div>
 
@@ -1235,7 +1235,7 @@ Multiplies or screens the colors, depending on the source color value. The effec
 See the definition of <a value>multiply</a> and <a value>screen</a> for their formulas.
 
 <div class="figure">
-  <img src="examples/hardlight.png" alt="example of hard light blending"/>
+  <img src="examples/hardlight.png" alt="example of hard light blending">
   <p class="caption"></p>
 </div>
 
@@ -1256,7 +1256,7 @@ with
 </pre>
 
 <div class="figure">
-  <img src="examples/softlight.png" alt="example of soft light blending"/>
+  <img src="examples/softlight.png" alt="example of soft light blending">
   <p class="caption"></p>
 </div>
 
@@ -1271,7 +1271,7 @@ Painting with white inverts the <a>backdrop</a> color; painting with black produ
 </pre>
 </p>
 <div class="figure">
-  <img src="examples/difference.png" alt="example of difference blending"/>
+  <img src="examples/difference.png" alt="example of difference blending">
   <p class="caption"></p>
 </div>
 
@@ -1284,7 +1284,7 @@ Produces an effect similar to that of the Difference mode but lower in contrast.
 </pre>
 </p>
 <div class="figure">
-  <img src="examples/exclusion.png" alt="example of exclusion blending"/>
+  <img src="examples/exclusion.png" alt="example of exclusion blending">
   <p class="caption"></p>
 </div>
 
@@ -1346,7 +1346,7 @@ Creates a color with the hue of the source color and the saturation and luminosi
 	B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
 </pre>
 <div class="figure">
-  <img src="examples/hue.png" alt="example of hue blending"/>
+  <img src="examples/hue.png" alt="example of hue blending">
   <p class="caption"></p>
 </div>
 
@@ -1358,7 +1358,7 @@ Creates a color with the saturation of the source color and the hue and luminosi
 	B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))
 </pre>
 <div class="figure">
-  <img src="examples/saturation.png" alt="example of saturation blending"/>
+  <img src="examples/saturation.png" alt="example of saturation blending">
   <p class="caption"></p>
 </div>
 
@@ -1370,7 +1370,7 @@ Creates a color with the hue and saturation of the source color and the luminosi
 	B(Cb, Cs) = SetLum(Cs, Lum(Cb))
 </pre>
 <div class="figure">
-  <img src="examples/color.png" alt="example of color blending"/>
+  <img src="examples/color.png" alt="example of color blending">
   <p class="caption"></p>
 </div>
 
@@ -1381,7 +1381,7 @@ Creates a color with the luminosity of the source color and the hue and saturati
 	B(Cb, Cs) = SetLum(Cb, Lum(Cs))
 </pre>
 <div class="figure">
-  <img src="examples/luminosity.png" alt="example of luminosity blending"/>
+  <img src="examples/luminosity.png" alt="example of luminosity blending">
   <p class="caption"></p>
 </div>
 
@@ -1397,7 +1397,7 @@ In the normal group, the elements within the group are composited onto the initi
 In both instances, the result of the group composite is composited onto the land and sky using the normal mix-blend-mode (the default mix-blend-mode applied to the group).
 
   <div class="figure">
-  <img src="examples/isolate_blend_example.png" alt="example of isolated group blending"/>
+  <img src="examples/isolate_blend_example.png" alt="example of isolated group blending">
   <p class="caption"></p>
 </div>
 
@@ -1431,7 +1431,7 @@ href="https://www.w3.org/TR/2015/CR-compositing-1-20150113/"> Candidate Recommen
   <li>Clarified that root groups are not necessarily opaque white</li>
   <li>Better definitions for root group and isolating groups</li>
   <li>Consistently use the multiplication symbol × rather than x or *</li>
-  <li>Corrected examples that used 'green' where 'lime' was meant</li>
+  <li>Corrected examples that used ''green'' where ''lime'' was meant</li>
   <li>Corrected initial value of background-blend-mode </li>
   <li>Assorted markup and linking fixes</li>
 </ul>