[css-fonts-4] Merge font-variant-numeric from CSS Fonts 3 #1653

Author: svgeesus

css-fonts-4/Overview.bs

@@ -4005,6 +4005,139 @@ blockquote:first-line { font-variant: small-caps; }
 <h3 id="font-variant-numeric-prop">
 Numerical formatting: the 'font-variant-numeric' property</h3>
 
+
+<pre class="propdef">
+Name: font-variant-numeric
+
+Value: 	normal | [ <<numeric-figure-values>> || <<numeric-spacing-values>> || <<numeric-fraction-values>> || ordinal || slashed-zero ]  titling-caps
+Initial: normal
+Applies to: all elements
+Inherited: yes
+Percentages: n/a
+Computed value: as specified
+Animation type: discrete
+</pre>
+
+
+<p>Specifies control over numerical forms. The example below shows how
+some of these values can be combined to influence the rendering of
+tabular data with fonts that support these features. Within normal
+paragraph text, proportional numbers are used while tabular numbers
+are used so that columns of numbers line up properly:</p>
+
+<div class="figure" style="padding: 0; margin: auto;"><img alt="combining number styles" src="images/numberstyles.png"><p class="caption">Using number styles</p></div>
+
+<p>Possible combinations:</p>
+
+<pre class="prod"><dfn id="numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></dfn>   = [ <span>lining-nums</span> | <span>oldstyle-nums</span> ]</pre>
+
+<pre class="prod"><dfn id="numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></dfn>  = [ <span>proportional-nums</span> | <span>tabular-nums</span> ]</pre>
+
+<pre class="prod"><dfn id="numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></dfn> = [ <span>diagonal-fractions</span> | <span>stacked-fractions</span> ]</pre>
+
+<p>Individual values have the following meanings:</p>
+
+<dl dfn-for="font-variant-numeric" dfn-type="value">
+	<dt><dfn id="font-variant-numeric-normal-value" title="normal!!font-variant-numeric">normal</dfn>
+	<dd>None of the features listed below are enabled.</dd>
+
+	<dt><dfn>lining-nums</dfn>
+	<dd>Enables display of lining numerals
+	(OpenType feature: <span class="tag">lnum</span>).</dd>
+
+	<dt><dfn>oldstyle-nums</dfn>
+	<dd>Enables display of old-style numerals
+	(OpenType feature: <span class="tag">onum</span>).</dd>
+
+	<dt><dfn>proportional-nums</dfn>
+	<dd>Enables display of proportional numerals
+	(OpenType feature: <span class="tag">pnum</span>).</dd>
+
+	<dt><dfn>tabular-nums</dfn>
+	<dd>Enables display of tabular numerals
+	(OpenType feature: <span class="tag">tnum</span>).</dd>
+
+	<dt><dfn>diagonal-fractions</dfn>
+	<dd>Enables display of lining diagonal fractions
+	(OpenType feature: <span class="tag">frac</span>).</dd>
+
+	<div class="featex"><img alt="diagonal fraction example" src="images/frac.png"></div>
+
+	<dt><dfn>stacked-fractions</dfn>
+	<dd>Enables display of lining stacked fractions
+	(OpenType feature: <span class="tag">afrc</span>).</dd>
+
+	<div class="featex"><img alt="stacked fraction example" src="images/afrc.png"></div>
+
+	<dt><dfn>ordinal</dfn>
+	<dd>Enables display of letter forms used with ordinal numbers
+	(OpenType feature: <span class="tag">ordn</span>).</dd>
+
+	<div class="featex"><img alt="ordinals example" src="images/ordinals.png"></div>
+
+	<dt><dfn>slashed-zero</dfn>
+	<dd>Enables display of slashed zeros
+	(OpenType feature: <span class="tag">zero</span>).</dd>
+
+	<div class="featex"><img alt="slashed zero example" src="images/zero.png"></div>
+
+</dl>
+
+<div id="ordinal-example" class="example">
+<p>In the case of 'ordinal', although ordinal forms
+are often the same as superscript forms, they are marked up
+differently.</p>
+<p>For superscripts, the variant property is only applied
+to the sub-element containing the superscript:</p>
+<pre>
+sup { font-variant-position: super; }
+x&lt;sup&gt;2&lt;/sup&gt;
+</pre>
+<p>For ordinals, the variant property is applied
+to the entire ordinal number rather than
+just to the suffix (or to the containing paragraph):</p>
+<pre>
+.ordinal { font-variant-numeric: ordinal; }
+&lt;span class="ordinal"&gt;17th&lt;/span&gt;
+</pre>
+<p>In this case only the "th" will appear in ordinal form,
+the digits will remain unchanged.
+Depending upon the typographic traditions used in a given language,
+ordinal forms may differ from superscript forms.
+In Italian, for example,
+ordinal forms sometimes include an underline in the ordinal design.</p>
+</div>
+
+<div class="example" id="steak-marinade">
+<p>A simple flank steak marinade recipe,
+rendered with automatic fractions and old-style numerals:</p>
+
+<pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
+
+&lt;h4>Steak marinade:&lt;/h4>
+&lt;ul>
+	&lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
+	&lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
+	&lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
+	&lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
+	&lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
+	&lt;li>Salt &amp;amp; pepper&lt;/li>
+&lt;/ul>
+
+&lt;p>Mix the meat with the marinade
+and let it sit covered in the refrigerator
+for a few hours or overnight.&lt;/p>
+</pre>
+
+<p>Note that the fraction feature
+is only applied to values
+not the entire paragraph.
+Fonts often implement this feature using contextual rules
+based on the use of the slash ('/') character.
+As such, it's not suitable for use as a paragraph-level style.</p>
+</div>
+
+
 <h3 id="font-variant-alternates-prop">
 Alternates and swashes: the 'font-variant-alternates' property</h3>