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

Author: svgeesus

css-fonts-4/Overview.bs

@@ -3846,6 +3846,161 @@ and use the standard defaults for subscripts.
 <h3 id="font-variant-caps-prop">
 Capitalization: the 'font-variant-caps' property</h3>
 
+
+<pre class="propdef">
+Name: font-variant-caps
+
+Value: 	normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
+Initial: normal
+Applies to: all elements
+Inherited: yes
+Percentages: n/a
+Computed value: as specified
+Animation type: discrete
+</pre>
+
+
+<p>This property allows
+the selection of alternate glyphs
+used for small or petite capitals or for titling.
+These glyphs are specifically designed
+to blend well with the surrounding normal glyphs,
+to maintain the weight and readability
+which suffers when text is simply resized
+to fit this purpose.</p>
+
+<p>Individual values have the following meanings:</p>
+
+<dl dfn-for="font-variant-caps" dfn-type="value">
+	<dt><dfn id="font-variant-caps-normal-value" title="normal!!font-variant-caps">normal</dfn>
+	<dd>None of the features listed below are enabled.</dd>
+
+	<dt><dfn>small-caps</dfn>
+	<dd>Enables display of small capitals
+	(OpenType feature: <span class="tag">smcp</span>).
+	Small-caps glyphs typically use the form of uppercase letters
+	but are reduced to the size of lowercase letters.</dd>
+
+	<div class="featex"><img alt="small-caps example" src="images/smcp.png"></div>
+
+	<dt><dfn>all-small-caps</dfn>
+	<dd>Enables display of small capitals for both upper and lowercase letters
+	(OpenType features: <span class="tag">c2sc, smcp</span>).</dd>
+
+	<dt><dfn>petite-caps</dfn>
+	<dd>Enables display of petite capitals
+	(OpenType feature: <span class="tag">pcap</span>).</dd>
+
+	<dt><dfn>all-petite-caps</dfn>
+	<dd>Enables display of petite capitals for both upper and lowercase letters
+	(OpenType features: <span class="tag">c2pc, pcap</span>).</dd>
+
+	<dt><dfn>unicase</dfn>
+	<dd>Enables display of mixture of small capitals for uppercase letters
+	with normal lowercase letters
+	(OpenType feature: <span class="tag">unic</span>).</dd>
+
+	<dt><dfn>titling-caps</dfn>
+	<dd>Enables display of titling capitals
+	(OpenType feature: <span class="tag">titl</span>).
+	Uppercase letter glyphs are often designed for use with lowercase letters.
+	When used in all uppercase titling sequences
+	they can appear too strong.
+	Titling capitals are designed specifically for this situation.</dd>
+</dl>
+
+<p>The availability of these glyphs
+is based on whether a given feature is defined or not
+in the feature list of the font.
+User agents can optionally decide this
+on a per-script basis
+but should explicitly not decide this
+on a per-character basis.</p>
+
+<p>Some fonts may only support a subset
+or none
+of the features
+described for this property.
+For backwards compatibility with CSS 2.1,
+if 'small-caps' or 'all-small-caps' is specified
+but small-caps glyphs are not available for a given font,
+user agents should simulate a small-caps font,
+for example by taking a normal font
+and replacing the glyphs for lowercase letters
+with scaled versions of the glyphs
+for uppercase characters
+(replacing the glyphs for both upper and lowercase letters
+in the case of 'all-small-caps').</p>
+
+<div class="figure" style="padding: 0; margin: auto;"><img class="hires" width=512 alt="synthetic vs. real small-caps" src="images/synthetic-vs-real-small-caps.png"><p class="caption">Synthetic vs. real small-caps</p></div>
+
+<p>The 'font-feature-settings' property
+also affects the decision of
+whether or not to use a simulated small-caps font
+(unlike CSS Fonts 3).<p>
+
+<div class="example">
+<pre>#example1 { font-variant-caps: small-caps; }
+#example2 { font-variant-caps: small-caps; font-feature-settings: 'smcp' 0; }</pre>
+For fonts which don't support small caps, both #example1 and #example2
+should be rendered with synthesized small caps. However, for fonts which
+do support small caps, #example1 should be rendered with native small
+caps, while #example2 should be rendered without any small-caps (native
+or synthesized).
+</div>
+
+<p>To match the surrounding text,
+a font may provide alternate glyphs
+for caseless characters
+when these features are enabled
+but when a user agent simulates small capitals,
+it must not attempt to simulate alternates
+for codepoints which are considered caseless.</p>
+
+<div class="figure" style="padding: 0; margin: auto;"><img class="hires" width=418 alt="caseless characters with small-caps, all-small-caps enabled" src="images/small-capitals-variations.png"><p class="caption">Caseless characters with small-caps, all-small-caps enabled</p></div>
+
+<p>If either 'petite-caps' or 'all-petite-caps' is specified
+for a font that doesn't support these features,
+the property behaves as if
+'small-caps' or 'all-small-caps', respectively,
+had been specified.
+If 'unicase' is specified
+for a font that doesn't support that feature,
+the property behaves as if 'small-caps' was applied
+only to lowercased uppercase letters.
+If 'titling-caps' is specified
+with a font that does not support this feature,
+this property has no visible effect.
+When simulated small capital glyphs are used,
+for scripts that lack uppercase and lowercase letters,
+'small-caps', 'all-small-caps', 'petite-caps',
+'all-petite-caps' and 'unicase'
+have no visible effect.</p>
+
+<p>When casing transforms are used
+to simulate small capitals,
+the casing transformations must match
+those used for the <span class="property">'text-transform'</span> property.</p>
+
+<p>As a last resort,
+unscaled uppercase letter glyphs
+in a normal font
+may replace glyphs in a small-caps font
+so that the text appears
+in all uppercase letters.</p>
+
+<div class="figure" style="padding: 0; margin: auto;"><img class="hires" width=596 alt="using all-small-caps in acronym-laden text" src="images/acronym-laden-text.png"><p class="caption">Using small capitals to improve readability in acronym-laden text</p></div>
+
+<div class="example">
+<p>Quotes rendered italicised, with small-caps on the first line:</p>
+
+<pre>blockquote            { font-style: italic; }
+blockquote:first-line { font-variant: small-caps; }
+
+&lt;blockquote><a href="https://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none; border: none;">I'll be honor-bound to slap them like a haddock.</a>&lt;/blockquote>
+</div>
+
+
 <h3 id="font-variant-numeric-prop">
 Numerical formatting: the 'font-variant-numeric' property</h3>