Merge pull request #7613 from google/knowledge-fix-tags

knowledge: put figcaption tags inside caption tags

cc-by-sa/knowledge/glossary/terms/arrr_axis/content.md

@@ -11,8 +11,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [AR One Sans](https://fonts.google.com/specimen/AR+One+Sans)</figcaption>
+</figure>
 
 In practice, this means that parts of the [letterforms](/glossary/letterform)’ [strokes](/glossary/stroke) are tapered — either flaring out at the ends of stems, or (much like [ink traps](/glossary/ink_trap)) indenting where strokes meet. The primary goal of this axis is to ensure the quality of the reading experience is the same for users with low- and high-resolution headsets. Therefore, all adjustments are intended to make the text render appear equal to all users.

cc-by-sa/knowledge/glossary/terms/bled_axis/content.md

@@ -11,8 +11,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>In the [Workbench](https://fonts.google.com/specimen/Workbench) typeface, note how moving the Bleed axis towards its maximum value expands the width of each individual scanline without altering the actual glyph width or spacing of the letters.</figcaption>
+</figure>
 
 Negative values make the text appear lighter, while positive values make it darker, similarly to the effects of ink bleed or dot gain on paper.

cc-by-sa/knowledge/glossary/terms/bnce_axis/content.md

@@ -10,8 +10,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![The letters “sha” shown three times, with the central instance showing a default baseline position and the axis range shown below it at a default value of 50%, and then to the left with “s” below the baseline and “a” above, with the axis value shown decreased to 0%, and then to the right with “s” above the baseline and “a” below, with the axis value shown increased to 95%.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)</figcaption>
+</figure>
 
 How the letters bounce will relate to each typeface's needs or concept. For example, in [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans), adjusting the axis to its minimum value shifts the “s” character down, but the “a” character up; the “h” character moves only slightly in each direction. This semi-unpredictable behaviour results in the type appearing more like handwriting, and the effect can be further exaggerated by manipulating other axes (in the case of Shantell Sans, [Informality](/glossary/infm_axis) (`INFM`) and [Spacing](/glossary/spac_axis) (`SPAC`) in tandem. 

cc-by-sa/knowledge/glossary/terms/elgr_axis/content.md

@@ -11,9 +11,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing three type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen in the middle shows the effects of the axis’ middle value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption> The letters ‘thx’ in the [Handjet](https://fonts.google.com/specimen/Handjet) typeface are shown three times, with different Element Grid axis locations positioning the elements that construct the letterforms as one per grid unit, two elements overlapping, and two-by-two per grid unit.</figcaption> 
+</figure>
 
 As with the [Element Shape](/glossary/elsh_axis) axis, Element Grid alters the structure of the letterforms in a way that may change the minimum font size at which the typeface is legible. These two axes can be combined to produce unique patterns and pleasant visual effects.
 

cc-by-sa/knowledge/glossary/terms/elsh_axis/content.md

@@ -10,9 +10,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing three type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen in the middle shows the effects of the axis’ middle value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption> The letters “tak” in the [Handjet](https://fonts.google.com/specimen/Handjet) typeface are shown three times, with different Element Shape axis locations shaping the elements that construct the letterforms into triangles, ovals, and hearts.</figcaption> 
+</figure>
 
 As with the [Element Grid](/glossary/elgr_axis) axis, Element Shape alters the structure of the letterforms in a way that may change the minimum font size at which the typeface is legible.
 

cc-by-sa/knowledge/glossary/terms/flar_axis/content.md

@@ -10,8 +10,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Commissioner](https://fonts.google.com/specimen/Commissioner)</figcaption>
+</figure>
 
 Left at the minimum value, the [strokes](/glossary/stroke) are [monolinear](/glossary/monolinear); at the maximum value, more contrast is introduced to the letterforms. The effect is more noticeable in heavier font weights.

cc-by-sa/knowledge/glossary/terms/hexp_axis/content.md

@@ -10,8 +10,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Readex Pro](https://fonts.google.com/specimen/Readex+Pro)</figcaption>
+</figure>
 
 Although at first glance Hyper Expansion may appear similar to the [Width axis](/glossary/width_axis) (`wdth` in CSS), its chief concern is legibility, and specifically with the Arabic script. For detailed information, please read [“The Design of Readex Pro” on the Material Design blog](https://material.io/blog/readex-pro-legibility-arabic-type-design).

cc-by-sa/knowledge/glossary/terms/infm_axis/content.md

@@ -10,8 +10,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)</figcaption>
+</figure>
 
 Note that the increased or decreased height of the letterform is context-aware, meaning that an “e”, for example, might shrink when next to some glyphs, and grow when next to others. This semi-unpredictable behaviour results in the type appearing more like handwriting, and — as with the [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans) font — the effect can be further exaggerated by manipulating axes like [Bounce](/glossary/bnce_axis) (`BNCE`) and [Spacing](/glossary/spac_axis) (`SPAC`) in tandem. 

cc-by-sa/knowledge/glossary/terms/scan_axis/content.md

@@ -11,8 +11,7 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>In the [Workbench](https://fonts.google.com/specimen/Workbench) typeface, note how moving the Scanline axis towards its maximum value expands the height of each individual scanline.</figcaption>
+</figure>
 
 Negative values make the scanlines thinner, and positive values make them thicker.

cc-by-sa/knowledge/glossary/terms/shrp_axis/content.md

@@ -10,9 +10,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![The letters “nib” in the Geologica typeface are shown twice, once with a minimum value of the Sharpness axis applied, and again with the maximum value applied.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Geologica](https://fonts.google.com/specimen/Geologica)</figcaption>
+</figure>
 
 Type designers can increase the sharpness of their designs in obvious ways, but also with subtle attention to detail. For example, in the Geologica typeface, it’s not just one terminal’s extreme point that gets moved up or down as a result of this sharpening — the adjacent point also shifts down ever so slightly to compensate for this new form, which is especially noticeable in the undershoot at the bottom of the stem of the “b” in the illustration above.
 

cc-by-sa/knowledge/glossary/terms/spac_axis/content.md

@@ -11,9 +11,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>The letters “tel” with default spacing and the axis range shown below it at a default value of zero, and then to the right the same letter again but spaced far apart, with the axis value shown increased around 33%.</figcaption>
+</figure>
 
 Manipulating this axis has the same effect as adjusting the tracking value (called letter-spacing in CSS); therefore it can alter the personality of the type in the same way as tracking can, and — as with the [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans) font — that effect can be further exaggerated by manipulating axes like [Bounce](/glossary/bnce_axis) (`BNCE`) and [Spacing](/glossary/spac_axis) (`SPAC`) in tandem. 
 

cc-by-sa/knowledge/glossary/terms/volm_axis/content.md

@@ -10,9 +10,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>The letter ‘h’ in the [Commissioner](https://fonts.google.com/specimen/Commissioner) typeface is shown twice, once with a minimum value of the Volume axis applied, and again with the maximum value applied.</figcaption>
+</figure>
 
 Changes along the Volume axis expand the surface area or volume of the letterforms, and typically interact with the effects of other axes. For example, in the Commissioner typeface, the Volume axis exaggerates the effects of the [Flare (`FLAR`) axis](/glossary/flar_axis), which controls stroke modulation.
 

cc-by-sa/knowledge/glossary/terms/xrot_axis/content.md

@@ -11,9 +11,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing three type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen in the middle shows the effects of the axis’ default value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)</figcaption>
+</figure>
 
 Leaving the axis at its default value of 0 results in the character appearing face-on; manipulating it to its minimum value results in it appearing to turn to the left; manipulating it to its maximum value results in it appearing to turn to the right.
 

cc-by-sa/knowledge/glossary/terms/year_axis/content.md

@@ -11,9 +11,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>The [Climate Crisis font](https://fonts.google.com/specimen/Climate+Crisis) has a ‘Year’ axis that starts in 1979 with fully formed letters and progresses to 2050 where the letters appear melted away to the point that they are almost illegible.</figcaption>
+</figure>
 
 The axis’ first use, in the Climate Crisis font created by Finnish newspaper Helsingin Sanomat, shows how Arctic ice has and will continue to shrink because of climate change, based on current forecasts. It was informed by the US National Snow and Ice Data Center’s Arctic sea ice data from 1979 to 2019, plus the Intergovernmental Panel on Climate Change’s predictions for Arctic sea ice all the way to 2050. 
 

cc-by-sa/knowledge/glossary/terms/yela_axis/content.md

@@ -11,9 +11,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>In the [Wavefont](https://fonts.google.com/specimen/Wavefont) typeface, 3 sets of 4 vertical stroke elements with varying lengths are shown aligned to the bottom of the em, symmetrically center-aligned, and aligned to the top of the em.</figcaption>
+</figure>
 
 The number system is a percentage and can be understood on a relative basis: The default value is zero, which center-aligns the letterforms; the minimum value of -100% aligns them to the bottom of the em square; the maximum value of 100% aligns them to the top of the em square. 
 

cc-by-sa/knowledge/glossary/terms/yrot_axis/content.md

@@ -11,9 +11,8 @@ The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) def
 
 ![An image showing three type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen in the middle shows the effects of the axis’ default value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
 
-</figure>
-
 <figcaption>Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)</figcaption>
+</figure>
 
 Leaving the axis at its default value of 0 results in the character appearing face-on; manipulating it to its minimum value results in it appearing to turn upwards; manipulating it to its maximum value results in it appearing to turn downwards.