[css-fonts-4] Merge font-variant-position from CSS Fonts 4 w3c#1653

Author: svgeesus

css-fonts-4/Overview.bs

@@ -3640,6 +3640,209 @@ including <span title="none!!font-variant-ligatures">'none'</span>
 <h3 id="font-variant-position-prop">
 Subscript and superscript forms: the 'font-variant-position' property</h3>
 
+
+<pre class="propdef">
+Name: font-variant-position
+
+Value: normal | sub | super
+Initial: normal
+Applies to: all elements
+Inherited: yes
+Percentages: n/a
+Computed value: as specified
+Animation type: discrete
+</pre>
+
+<p>This property is used
+to enable typographic subscript and superscript glyphs.
+These are alternate glyphs
+designed within the same em-box as default glyphs
+and are intended to be laid out
+on the same baseline
+as the default glyphs,
+with no resizing or repositioning of the baseline.
+They are explicitly designed
+to match the surrounding text
+and to be more readable
+without affecting the line height.</p>
+
+<div class="figure"><img alt="comparison between real subscript glyphs and synthesized ones" src="images/realsubscripts.png" /><p class="caption">Subscript glyphs (top) vs. typical synthesized subscripts (bottom)</p></div>
+
+<p>Individual values have the following meanings:</p>
+
+<dl dfn-for="font-variant-position" dfn-type="value">
+	<dt><dfn id="font-variant-position-normal-value" title="normal!!font-variant-position">normal</dfn></dt>
+	<dd>None of the features listed below are enabled.</dd>
+	<dt><dfn>sub</dfn></dt>
+	<dd>Enables display of subscript variants
+	(OpenType feature: <span class="tag">subs</span>).</dd>
+	<dt><dfn>super</dfn></dt>
+	<dd>Enables display of superscript variants
+	(OpenType feature: <span class="tag">sups</span>).</dd>
+</dl>
+
+<p>Because of the semantic nature of subscripts and superscripts,
+when the value is either 'sub' or 'super'
+for a given contiguous run of text,
+if a variant glyph is not available for all the characters in the run,
+simulated glyphs <!-- must --> should be synthesized
+for all characters
+using reduced forms of the glyphs
+that would be used
+without this feature applied.
+This is done per run
+to avoid a mixture of variant glyphs and synthesized ones
+that would not align correctly.
+In the case of OpenType fonts
+that lack subscript or superscript glyphs
+for a given character,
+user agents <em>must</em> synthesize
+appropriate subscript and superscript glyphs.</p>
+
+<div class="figure"><img alt="alternate superscripts vs. glyphs synthesized using superscript metrics" src="images/superscript-alt-synth.png" /><p class="caption">Superscript alternate glyph (left), synthesized superscript glyphs (middle),  and incorrect mixture of the two (right)</p></div>
+
+<!--
+	at-risk must downgraded to should
+	see https://github.com/w3c/csswg-drafts/issues/2796#issuecomment-398565265
+-->
+<p>In situations where text decorations
+are only applied to runs of text
+containing superscript or subscript glyphs,
+the synthesized glyphs may be used,
+to avoid problems with the placement of decorations.</p>
+
+<p>In the past,
+user agents have used font-size
+and vertical-align
+to simulate subscripts and superscripts
+for the
+<code title="HTML sub element">sub</code>
+and <code title="HTML sup element">sup</code> elements.
+To allow a backwards compatible way
+of defining subscripts and superscripts,
+it is recommended
+that authors use conditional rules [[CSS3-CONDITIONAL]]
+so that older user agents will still render
+subscripts and superscripts via
+the older mechanism.</p>
+
+<p>Because <code>font-size: smaller</code>
+is often used for these elements,
+the effective scaling factor
+applied to subscript and superscript text
+varies depending upon the size.
+For larger text,
+the font size is often reduced by a third
+but for smaller text sizes,
+the reduction can be much less.
+This allows subscripts and superscripts
+to remain readable
+even within elements using small text sizes.
+User agents should consider this
+when deciding how to synthesize
+subscript and superscript glyphs.</p>
+
+<p class="note">The OpenType font format
+defines subscript and superscript metrics
+in the
+<a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2">OS/2 table</a>
+[[!OPENTYPE]]
+but these are not always accurate in practice
+and so cannot be relied upon
+when synthesizing subscript and superscript glyphs.</p>
+
+<p>Authors should note
+that fonts typically only provide
+subscript and superscript glyphs
+for a subset of all characters
+supported by the font.
+For example,
+while subscript and superscript glyphs
+are often available for Latin numbers,
+glyphs for punctuation and letter characters
+are less frequently provided.
+The synthetic fallback rules
+defined for this property
+try to ensure that subscripts and superscripts
+will always appear
+but the appearance may not match author expectations
+if the font used does not provide
+the appropriate alternate glyph
+for all characters contained in a
+subscript or superscript.</p>
+
+<p>This property is not cumulative.
+Applying it to elements
+within a subscript or superscript
+won't nest the placement
+of a subscript or superscript glyph.
+Images contained within text runs
+where the value of this property
+is 'sub' or 'super' will be drawn
+just as they would
+if the value was <span title="normal!!font-variant-position">'normal'</span>.</p>
+
+<!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations:
+http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
+
+<p>Because of these limitations,
+'font-variant-position'
+is not recommended for use in user agent stylesheets.
+Authors should use it
+in cases where subscripts or superscripts
+will only contain the narrow range of characters
+supported by the fonts specified.</p>
+
+<p class="note">The variant glyphs
+use the same baseline
+as the default glyphs would use.
+There is no shift in the placement along the baseline,
+so the use of variant glyphs doesn't affect
+the height of the inline box
+or alter the height of the linebox.
+This makes superscript and subscript variants
+ideal for situations where it's important
+that leading remain constant,
+such as in multi-column layout.</p>
+
+<div class="example">
+<p>A typical user agent default style for the <span class="tag">sub</span> element:</p>
+
+<pre>sub {
+	vertical-align: sub;
+	font-size: smaller;
+	line-height: normal;
+}
+</pre>
+
+<p>Using 'font-variant-position'
+to specify typographic subscripts
+in a way that will still show subscripts
+in older user agents:</p>
+
+<pre>@supports ( font-variant-position: sub ) {
+
+	sub {
+	vertical-align: baseline;
+	font-size: 100%;
+	line-height: inherit;
+	font-variant-position: sub;
+	}
+
+}
+</pre>
+
+<p>User agents that support the 'font-variant-position' property
+will select a subscript variant glyph
+and render this
+without adjusting the baseline or font-size.
+Older user agents will ignore
+the 'font-variant-position' property definition
+and use the standard defaults for subscripts.
+</p>
+</div>
+
+
 <h3 id="font-variant-caps-prop">
 Capitalization: the 'font-variant-caps' property</h3>