Add the second percentage parameter to advance-override

Author: xiaochengh

css-fonts-5/Overview.bs

@@ -170,7 +170,7 @@ Initial: normal
 
 <pre class='descdef'>
 Name: advance-override
-Value: normal | <<percentage>>
+Value: normal | [ <<percentage>> <<percentage>>? ]
 For: @font-face
 Initial: normal
 </pre>
@@ -193,8 +193,11 @@ given percentage multiplied by the used font size. Negative values are invalid a
 
 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.
+When the second percentage value is present, it is used to override the advances of upright
+glyphs in vertical text layout (as defined in [[CSS-WRITING-MODES-3#intro-text-layout]]); in all
+other cases, the first percentage is used.
 
-Note: Using the 'ascent-override', 'descent-override', and 'line-grap-override' descriptors can
+Note: Using the 'ascent-override', 'descent-override', and 'line-gap-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
@@ -236,6 +239,32 @@ within an individual element e.g. for characters not supported by the primary fo
     In this example, the used advance between the glyphs is 69.328125 pixels * 1.4 = 97.059375 pixels.
 </div>
 
+<div class="example">
+    In certain scripts like CJK, or when the 'text-orientation' value is ''text-orientation/upright'', glyphs remain
+    upright in vertical text. For 'advance-override' to work properly, we need to scale the height of each glyph
+    instead of the width. We use the second percentage parameter for this scenario.
+    
+<xmp>
+@font-face {
+  font-family: "My Heiti SC";
+  src: local("Heiti SC Light");
+  advance-override: 140% 130%;
+}
+
+...
+<div style="writing-mode: vertical-rl">
+  <p style="font: 96px 'Heiti SC'">你好</p>
+  <p style="font: 96px 'My Heiti SC'">你好</p>
+</div>
+</xmp>
+    The rendering will look like this:
+    <figure>
+      <img alt="Overridden advance of upright vertical Heiti SC glyphs" src="images/Heiti_Upright_Vertical_Overridden_Advance.png">
+    </figure>
+    In this example, the natural advance between the glyphs is 96 pixels, whereas the overridden advance is 96 pixels * 1.3 = 124.8 pixels.
+    
+</div>
+
 <div class="example">
 	The percentage is resolved against different font sizes for different elements.