Merge pull request w3c#5991 from litherum/advance-override

[css-fonts-5] Specify the advance-override @font-face descriptor

Author: svgeesus

css-fonts-5/Overview.bs

@@ -145,7 +145,7 @@ Issue(5892):
 
 <h3 id="font-metrics-override-desc">
 Default font metrics overriding:
-the 'ascent-override', 'descent-override' and 'line-gap-override' descriptors</h3>
+the 'ascent-override', 'descent-override', 'line-gap-override', and 'advance-override' descriptors</h3>
 
 <pre class='descdef'>
 Name: ascent-override
@@ -168,19 +168,74 @@ For: @font-face
 Initial: normal
 </pre>
 
-The 'ascent-override', 'descent-override' and 'line-gap-override' descriptors define the
+<pre class='descdef'>
+Name: advance-override
+Value: normal | <<percentage>>
+For: @font-face
+Initial: normal
+</pre>
+
+The 'ascent-override', 'descent-override', and 'line-gap-override' descriptors define the
 <a spec="CSS-INLINE-3">ascent metric</a>, <a spec="CSS-INLINE-3">descent metric</a> and
-<a spec="CSS-INLINE-3">line gap metric</a> of the font, respectively.
+<a spec="CSS-INLINE-3">line gap metric</a> of the font, respectively. The 'advance-override'
+descriptor adjusts the <dfn export>tracking</dfn> between adjacent
+<a spec="CSS-TEXT-3">typographic character units</a>.
 
 When the descriptor value is 'normal', the corresponding metric value is obtained as-if the
 descriptor was absent from the <code>@font-face</code> block.
 
 Note: User agents may draw data from different places from the font file as the metric values,
 which results in different text layouts.
 
-When the descriptor value is a percentage, the corresponding metric value is resolved as the
+For the 'ascent-override', 'descent-override' and 'line-gap-override' descriptors, when the
+descriptor value is a percentage, the corresponding metric value is resolved as the
 given percentage multiplied by the used font size. Negative values are invalid at parse time.
 
+For the 'advance-override' descriptor, when the descriptor value is a percentage, the
+advance from one <a>typographic character unit</a> to the next is multiplied by the percentage.
+
+Note: Using the 'ascent-override', 'descent-override', and 'line-grap-override' descriptors can
+achieve a similar effect as specifying a percentage for 'line-height' property. Also, using the
+'advance-override' has a similar effect as using the 'letter-spacing' property. However,
+contrary to 'letter-spacing', 'advance-override' scales the spacing, rather than adding a
+constant to the spacing.
+
+Note: 'ascent-override', 'descent-override', 'line-gap-override', and 'advance-override'
+are applied per-font rather than per-element. Multiple fonts may be used
+within an individual element e.g. for characters not supported by the primary font.
+
+<div class="example">
+    Consider the following content:
+
+<xmp>
+@font-face {
+  font-family: "MyHelvetica";
+  src: local("Helvetica");
+}
+...
+<div style="font: 96px 'MyHelvetica';">Ha</div>
+</xmp>
+    This image shows each glyph's local origin, and the natural advance between them:
+    <figure>
+        <img alt="Natural advance of Helvetica glyphs" src="images/Helvetica Natural Advance.png" width="147" height="114">
+    </figure>
+    In this example, the natural advance is 69.328125 pixels.
+
+    However, if we modify the content as such:
+<pre>
+@font-face {
+  font-family: "MyHelvetica";
+  src: local("Helvetica");
+  advance-override: 140%;
+}
+</pre>
+   The rendering will look like this:
+    <figure>
+        <img alt="Overridden advance of Helvetica glyphs" src="images/Helvetica Overridden Advance.png" width="176" height="112">
+    </figure>
+    In this example, the used advance between the glyphs is 69.328125 pixels * 1.4 = 97.059375 pixels.
+</div>
+
 <div class="example">
 	The percentage is resolved against different font sizes for different elements.
 
@@ -220,14 +275,16 @@ given percentage multiplied by the used font size. Negative values are invalid a
   ascent-override: 125%;
   descent-override: 25%;
   line-gap-override: 0%;
+  advance-override: 109%;
 }
 
 &lt;div style="font-family: cool-web-font, fallback-to-local"&gt;Title goes here&lt;/div&gt;
 &lt;img src="https://example.com/largeimage" alt="A large image that you don't want to shift"&gt;
 </pre>
 
-	The image will not be vertically shifted when the user agent finishes loading and
-	switches to use the web font.
+	The image will not be shifted as much when the user agent finishes loading and
+	switches to use the web font (assuming the override values are similar to the web font's
+    natural metrics).
 
 </div>