[css-fonts] Add font-size: math, math-level and math-style

This imports the proposal from MathML Core to manage font scaling in math
formulas using a new 'math-level' property. This mechanism involves a new
'math-style' property that describes compactness of formulas as well as
a new 'math' keyword to specify relative font-size change using the a
scale factor calculated from the 'math-level' changes.

w3c#5389
w3c#5387

css-fonts-4/Overview.bs

@@ -838,7 +838,7 @@ Font size: the 'font-size' property</h3>
 
     <pre class="propdef">
     Name: font-size
-    Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>>
+    Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>> | math
     Initial: medium
     Applies to: all elements
     Inherited: yes
@@ -879,7 +879,12 @@ Font size: the 'font-size' property</h3>
             relative to the computed 'font-size' of the parent element
             and possibly the table of font sizes. Possible values are:
 
-            <pre class=prod>[ larger | smaller ]</pre>
+            <pre class=prod>[ larger | smaller | math ]</pre>
+
+            The ''math'' keyword is treated specially: it computes to the
+            product of the computed 'font-size' of the parent element and a
+            scale factor calculated from the 'math-level' property.
+            See [[#math-level-prop]].
 
             If the parent element has a keyword font size in the absolute size keyword mapping table,
             ''larger'' may compute the font size to the next entry in the table,
@@ -1008,6 +1013,147 @@ Font size: the 'font-size' property</h3>
     should nevertheless avoid creating font sizes
     of less than 9 device pixels per EM unit.
 
+<h4 id="math-level-prop">
+Controlling 'font-size' in math formulas: the 'math-level' property</h4>
+
+    <pre class="propdef">
+    Name: math-level
+    Value: auto-add | add(<<integer>>) | <<integer>>
+    Initial: 0
+    Applies to: all elements
+    Inherited: yes
+    Percentages: n/a
+    Computed value: an integer, see below
+    Animation type: not animatable
+    </pre>
+
+    The 'math-level' property describes how deep an element should be considered
+    with respect to the top-level container of a mathematical formula. This
+    affects the 'font-size' of mathematical formulas. For example, scripted
+    elements typically increments the math level and nested scripts are
+    rendered with smaller and smaller 'font-size'.
+
+    Values have the following meanings:
+
+    <dl dfn-for="math-level" dfn-type="value">
+        <dt><dfn id="math-level-auto-add-value">auto-add</dfn>
+        <dd>An ''auto-add'' keyword
+         specifies an increment conditioned by the 'math-style'
+         property. If the computed 'math-style' is 'compact' then
+         the computed 'math-level' value is the computed 'math-level' of the
+         parent plus one. If the computed 'math-style' is 'normal' then
+         the computed 'math-level' is the computed 'math-level' of the parent.
+        <dt><dfn id="math-level-add-integer-value">add(<<integer>>)</dfn>
+        <dd>An 'add(<<integer>>)'
+         function specifies a relative change of 'math-level'. The
+         computed 'math-level' is the computed 'math-level' of the parent plus
+         the integer argument.
+        <dt><dfn id="math-level-integer-value"><<integer>></dfn>
+        <dd>An <<integer>> specifies an absolute 'math-level'.
+    </dl>
+
+    <div class="example">
+    The following example shows a mathematical formula with normal
+    'math-style' rendered with the Latin Modern Math font. When entering
+    subexpressions like scripts or fractions, the font-size is automatically
+    scaled down according to the values of the 'MATH' table contained in that
+    font. Note that 'font-size' is scaled down when entering the superscripts
+    but even faster when entering a root's prescript. Also it is scaled down
+    when entering the inner fraction but not when entering the outer one, due
+    to automatic change of 'math-style' in fractions.
+    <figure>
+       <img alt="Automatic 'font-size' in a mathematical formula" src="images/example-font-size-scriptlevel.png" >
+       <figcaption>Automatic 'font-size' in a mathematical formula</figcaption>
+    </figure>
+    </div>
+
+    If the specified value 'font-size' is ''math'' then the computed value of
+    'font-size' is obtained by multiplying the inherited value of 'font-size'
+    by a nonzero scale factor. This scale factor is calculated by the following
+    procedure:
+    <ol>
+      <li>Let A be the computed 'math-level' value of the parent,
+        B the computed 'math-level' value,
+        C be 0.71 and S be 1.0</li>
+      <li>
+        <ul>
+          <li>If A = B then return S.</li>
+          <li>If B &lt; A, swap A and B and set 'InvertScaleFactor' to true.</li>
+          <li>Otherwise B &gt; A and set 'InvertScaleFactor' to false.</li>
+        </ul>
+      </li>
+      <li>Let E be B - A &gt; 0.</li>
+      <li>If the inherited font has a 'MATH' table [[OPEN-FONT-FORMAT]]:
+        <ul>
+          <li>Read the 'scriptPercentScaleDown' and
+          'scriptScriptPercentScaleDown' values
+          from the ''MathConstants'' subtable.</li>
+          <li>If A ≤ 0 and B ≥ 2 then multiply S by 'scriptScriptPercentScaleDown' and
+            decrement E by 2.</li>
+          <li>Otherwise if A = 1 then multiply S by
+            'scriptScriptPercentScaleDown' / 'scriptPercentScaleDown' and
+            decrement E by 1.</li>
+          <li>Otherwise if B = 1 then multiply S by 'scriptPercentScaleDown'</a>
+            and decrement E by 1.</li>
+        </ul>
+      </li>
+      <li>Multiply S by C<sup>E</sup></li>
+      <li>Return S if 'InvertScaleFactor' is false and 1/S otherwise.</li>
+    </ol>
+
+<h4 id="math-style-prop">
+Compactness of math formulas: the 'math-style' property</h4>
+
+    <pre class="propdef">
+    Name: math-style
+    Value: normal | compact
+    Initial: normal
+    Applies to: all elements
+    Inherited: yes
+    Percentages: n/a
+    Computed value: specified keyword
+    Animation type: not animatable
+    </pre>
+
+    Values have the following meanings:
+
+    <dl dfn-for="math-style" dfn-type="value">
+        <dt><dfn id="math-style-normal-value">normal</dfn></dt>
+        <dd>Math layout is performed without trying to minimize the
+        [=logical height=].
+        <dt><dfn>compact</dfn></dt>
+        <dd>When the specified 'math-level' is ''auto-add'' then
+        the computed value of 'math-level' is its inherited value plus one.
+        If in addition the specified 'font-size' is ''math'' then the computed
+        value of 'font-size' is its inherited value times the factor described
+        in [[#math-level-prop]].
+
+        Math layout algorithms may also apply additional changes to reduce the
+        [=logical height=]. In particular, [[MathML-Core]] follows these extra
+        rules:
+        <ul>
+        <li>Large operators (e.g. integrals) use a small size variant.
+        <li>Underscripts and overscripts scripts attached to operators with
+        movable limits (e.g. big sums or products) are placed as subscripts and
+        superscripts.
+        <li>Smaller vertical gaps and shifts from the 'MATH' table of
+        [[OPEN-FONT-FORMAT]] are used for fractions and radicals.
+        </ul>
+    </dl>
+    <div class="example">
+    These two mathematical formulas are rendered with a 'math-style'
+    set to ''compact'' (left) and ''normal'' (right).
+    In the former case, the 'font-size' is automatically scaled down
+    within the fractions and the summation limits are rendered as
+    subscript and superscript of the ∑. In the latter case, the ∑ is
+    drawn bigger than normal text and vertical gaps within fractions (even
+    relative to current 'font-size') is larger.
+    <figure>
+       <img alt="Math formulas with specified 'math-style' value 'compact' and 'normal'" src="images/example-math-style.png" >
+       <figcaption>Math formulas with specified 'math-style' value 'compact' and 'normal'</figcaption>
+    </figure>
+    </div>
+
 <!-- font-min size and font-max-size removed by CSSWG resolution
 	https://github.com/w3c/csswg-drafts/issues/3739
 -->