[css-fonts-4] Clean up font-stretch section

r=fantasai

Author: litherum

css-fonts-4/Overview.bs

@@ -528,65 +528,75 @@ Missing weights</h4>
 <h3 id="font-stretch-prop">
 Font width: the 'font-stretch!!property' property</h3>
 
-<pre class="propdef">
-Name: font-stretch
-Value: <<font-stretch-absolute>>
-Initial: normal
-Applies to: all elements
-Inherited: yes
-Percentages: Not resolved.
-Computed value: As specified
-Media: visual
-Animatable: As <<number>>
-</pre>
-
-The 'font-stretch!!property' property selects a normal,
-condensed, or expanded face from a font family.
+    <pre class="propdef">
+    Name: font-stretch
+    Value: normal | <<percentage>> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
+    Initial: normal
+    Applies to: all elements
+    Inherited: yes
+    Percentages: Not resolved
+    Computed value: percentage
+    Media: visual
+    Animatable: As <<percentage>>
+    </pre>
 
-This property accepts values of the following:
+    The 'font-stretch!!property' property selects a normal,
+    condensed, or expanded face from a font family.
+    Values are specified either as percentages
+    or as keywords which map to a percentage
+    as defined in the following table:
 
-<pre class="prod"><dfn id="font-stretch-absolute-values">&lt;font-stretch-absolute&gt;</dfn> = [normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <<percentage>>]</pre>
+    <table id="stretchmappings" class="data">
+        <thead>
+            <tr>
+                <th>Absolute keyword value
+                <th>Numeric value
+        <tbody dfn-for=font-stretch dfn-type=value>
+            <tr><th><dfn>ultra-condensed</dfn> <td>50%
+            <tr><th><dfn>extra-condensed</dfn> <td>62.5%
+            <tr><th><dfn>condensed</dfn>   <td>75%
+            <tr><th><dfn>semi-condensed</dfn>  <td>87.5%
+            <tr><th><dfn>normal</dfn>  <td>100%
+            <tr><th><dfn>semi-expanded</dfn>   <td>112.5%
+            <tr><th><dfn>expanded</dfn>    <td>125%
+            <tr><th><dfn>extra-expanded</dfn>  <td>150%
+            <tr><th><dfn>ultra-expanded</dfn>  <td>200%
+        </table>
+
+    <dfn value for=font-stretch><<percentage>></dfn>
+    values represent the fractional width of the glyphs,
+    with 100% representing “normal” glyph widths
+    (as defined by the font designer).
+    Values less than 0% are <a>invalid</a>.
+
+    When a face does not exist for a given width,
+    values less than 100% map to a narrower face if one exists, otherwise a wider face.
+    Conversely, values greater than or equal to 100% map to a wider face if one exists, otherwise a narrower face.
+    Some fonts might support a range of stretch values;
+    if the requested stretch value is not available in the font,
+    the closest supported value is used, using the same mapping rules
+    (see the [[#font-matching-algorithm]] for the precise algorithm).
+    For TrueType / OpenType fonts that support variations,
+    the <code>wdth</code> variation is used to implement varying widths.
 
-Absolute keyword values are aliased to
-have the following meaning (Note that a font might internally provide its own mappings, but those mappings within the font are disregarded):
+    <div class="example">
+        The figure below shows how nine font-stretch property settings
+        affect font matching for a font family containing a variety of discrete widths.
+        Grey indicates a width for which no face exists and a different width is substituted:
 
-<table id="stretchmappings" class="data" summary="font-stretch numeric mappings">
-	<thead>
-		<tr>
-			<th>Absolute keyword value
-			<th>Numeric value
-	<tbody>
-		<tr><th>ultra-condensed<th>50%
-		<tr><th>extra-condensed<th>62.5%
-		<tr><th>condensed<th>75%
-		<tr><th>semi-condensed<th>87.5%
-		<tr><th>normal<th>100%
-		<tr><th>semi-expanded<th>112.5%
-		<tr><th>expanded<th>125%
-		<tr><th>extra-expanded<th>150%
-		<tr><th>ultra-expanded<th>200%
-	</table>
-
-Values less than 0% are not allowed and are treated as parse errors.
-When a face does not exist
-for a given width, values less than 100% map to a narrower face,
-otherwise a wider face. Conversely, values greater than or equal to 100% map to a wider
-face, otherwise a narrower face. Some fonts might support a range of stretch
-values; if the requested stretch value is not available in the font, the
-closest supported value should be used, using the same mapping rules (see the
-<a href="#font-matching-algorithm">font matching section below</a> for the
-precise algorithm). For TrueType / OpenType fonts which use variations, the "wdth"
-variation is used to implement varying widths. The figure below shows how nine
-font-stretch property settings affect font matching for font family
-containing a variety of discrete widths. Grey indicates a width for which no
-face exists and a different width is substituted:
+        <figure>
+            <img alt="width mappings for a family with condensed, normal and expanded faces" src="images/universwidths.png" >
+            <figcaption>Width mappings for a font family with condensed, normal and expanded width faces</figcaption>
+        </figure>
+    </div>
 
-<figure>
-	<img alt="width mappings for a family with condensed, normal and expanded faces" src="images/universwidths.png" >
-	<figcaption>Width mappings for a font family with condensed, normal and expanded width faces</figcaption>
-</figure>
+    User Agents must not sythesize stretched faces for font families which lack actual stretched faces.
 
-User Agents must not sythesize stretched faces for font families which lack actual stretched faces.
+    For compatibility with [[CSS-FONTS-3]],
+    {{getComputedStyle()}} serializes values
+    that correspond to one of the 'font-stretch' keywords
+    as that keyword
+    (instead of as a <<percentage>>).
 
 <h3 id="font-style-prop">
 Font style: the 'font-style!!property' property</h3>
@@ -1702,7 +1712,8 @@ Initial: normal
 
 <pre class='descdef'>
 Name: font-stretch
-Value: <<font-stretch-absolute>> <<font-stretch-absolute>>?
+Value: <<'font-stretch'>> <<'font-stretch'>>?
+
 For: @font-face
 Initial: normal
 </pre>