Skip to content

Commit

Permalink
[css-fonts-4] Make font-stretch a legacy name alias for font-width, #551
Browse files Browse the repository at this point in the history
  • Loading branch information
@svgeesus
svgeesus committed Jan 23, 2024
1 parent 0a1345a commit b0660ee
Showing 1 changed file with 121 additions and 44 deletions.
165 changes: 121 additions & 44 deletions css-fonts-4/Overview.bs
View file
Expand Up @@ -414,7 +414,7 @@ Relationship Between Faces and Families
to a set of faces that vary along axes other than just
the standard axes of
weight ('font-weight!!property'),
width ('font-stretch!!property'),
width ('font-width!!property'),
and slant ('font-style!!property').
A family can vary along axes that are unique to that family.
The CSS font selection mechanism merely
Expand Down Expand Up @@ -919,20 +919,20 @@ Missing weights</h4>
Authors can explicitly avoid this behavior by using the 'font-synthesis' property.

<!--
████████ ███████ ██ ██ ████████ ██████ ████████ ████████ ████████ ████████ ██████ ██ ██
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ██ ██ ██ ██ ███████ ██████ ██ ████████ ██████ ██ ██ █████████
██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ███████ ██ ██ ██ ██████ ██ ██ ██ ████████ ██ ██████ ██ ██
████████ ███████ ██ ██ ████████ ██ ██ ████ ████████ ████████ ██ ██
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ██ ██ ██ ██ ███████ ██ ██ ██ ██ ██ ██ ██ █████████
██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ███████ ██ ██ ██ ███ ███ ████ ████████ ██ ██ ██
-->

<h3 id="font-stretch-prop">
Font width: the 'font-stretch!!property' property</h3>
<h3 id="font-width-prop">
Font width: the 'font-width!!property' property</h3>

<pre class="propdef">
Name: font-stretch
Name: font-width
Value: normal | <<percentage [0,∞]>> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
Initial: normal
Applies to: all elements and text
Expand Down Expand Up @@ -969,18 +969,18 @@ Font width: the 'font-stretch!!property' property</h3>
variations/font-stretch.html
</wpt>

The 'font-stretch!!property' property selects a normal,
The 'font-width!!property' property selects a normal,
condensed, or expanded face from a font family.
Values are specified either as percentages
or as keywords which map to a percentage
as defined in the following table:

<table id="stretchmappings" class="data">
<table id="widthmappings" class="data">
<thead>
<tr>
<th>Absolute keyword value
<th>Numeric value
<tbody dfn-for=font-stretch dfn-type=value>
<tbody dfn-for=font-width dfn-type=value>
<tr><th><dfn>ultra-condensed</dfn> <td>50%
<tr><th><dfn>extra-condensed</dfn> <td>62.5%
<tr><th><dfn>condensed</dfn> <td>75%
Expand All @@ -992,7 +992,7 @@ Font width: the 'font-stretch!!property' property</h3>
<tr><th><dfn>ultra-expanded</dfn> <td>200%
</table>

<dfn value for=font-stretch><<percentage [0,∞]>></dfn>
<dfn value for=font-width><<percentage [0,∞]>></dfn>
values represent the fractional width of the glyphs,
with 100% representing “normal” glyph widths
(as defined by the font designer).
Expand All @@ -1008,8 +1008,8 @@ Font width: the 'font-stretch!!property' property</h3>
For TrueType / OpenType fonts that support variations,
the <code>wdth</code> variation is used to implement varying widths.

<div class="example" id="ex-font-stretch-matching">
The figure below shows how nine font-stretch property settings
<div class="example" id="ex-font-width-matching">
The figure below shows how nine font-width property settings
affect font matching for a font family containing a variety of discrete widths.
Grey indicates a width for which no face exists and a different width is substituted:

Expand All @@ -1019,10 +1019,77 @@ Font width: the 'font-stretch!!property' property</h3>
</figure>
</div>

User agents must not synthesize stretched faces for font families which lack actual stretched faces.

{{getComputedStyle()}} always serializes its value as a <<percentage>>, regardless of how the value was specified by the author, or whether or not a keyword happens to map to the value.

<h4 id="font-stretch-prop">
Font width: the 'font-stretch!!property' legacy name alias</h4>

For historical reasons,
a <dfn>font-stretch</dfn> property exists
which is a [=legacy name alias=]
and functions in the identical way to
the 'font-width!!property'.

<div class="example" id="ex-font-stretch-set">
For example, here the legacy 'font-stretch!!property' is used
on level one headings.

<pre>
h1 {font-stretch: condensed; }
</pre>

The specified value of the 'font-width!!property'
on those headings
becomes set to 'condensed'.
</div>

<div class="example" id="ex-font-stretch-set">
For example, here the 'font-width!!property' is used
on level one headings.

<pre>
h1 {font-width: condensed; }
</pre>

The specified value of the 'font-stretch!!property'
on those headings
becomes set to 'condensed'.
</div>

<wpt>
font-stretch-01.html
font-stretch-02.html
font-stretch-03.html
font-stretch-04.html
font-stretch-05.html
font-stretch-06.html
font-stretch-07.html
font-stretch-08.html
font-stretch-09.html
font-stretch-10.html
font-stretch-11.html
font-stretch-12.html
font-stretch-13.html
font-stretch-14.html
font-stretch-15.html
font-stretch-16.html
font-stretch-17.html
font-stretch-18.html
animations/font-stretch-interpolation.html
parsing/font-stretch-computed.html
parsing/font-stretch-invalid.html
parsing/font-stretch-valid.html
variations/font-parse-numeric-stretch-style-weight.html
variations/font-stretch.html
</wpt>

User agents must not synthesize condensed or expanded faces
for font families which lack such faces
and which do not have a width variation axis.
In particular, user agents must not geometrically stretch such faces.



<!--
████████ ███████ ██ ██ ████████ ██████ ████████ ██ ██ ██ ████████
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██
Expand Down Expand Up @@ -1621,7 +1688,7 @@ Shorthand font property: the 'font' property</h3>
Value: [ [ <<'font-style'>> ||
<<font-variant-css2>> ||
<<'font-weight'>> ||
<<font-stretch-css3>> ]? <<'font-size'>> [ / <<'line-height'>> ]?
<<font-width-css3>> ]? <<'font-size'>> [ / <<'line-height'>> ]?
<<'font-family'>> ] |
<<system-family-name>>
Initial: see individual properties
Expand Down Expand Up @@ -1655,7 +1722,7 @@ Shorthand font property: the 'font' property</h3>
except as described below,
a shorthand property for setting
'font-style!!property', 'font-variant!!property',
'font-weight!!property', 'font-stretch!!property',
'font-weight!!property', 'font-width!!property',
'font-size!!property', 'line-height', 'font-family!!property'
at the same place in the stylesheet.

Expand All @@ -1669,12 +1736,12 @@ Shorthand font property: the 'font' property</h3>
<pre class="prod"><dfn id="font-variant-css21-values"><<font-variant-css2>></dfn>
= [normal | small-caps]</pre>

Values for the 'font-stretch!!property' property can also be included
Values for the 'font-width!!property' property can also be included
but only those supported in CSS Fonts level 3,
none of the 'font-stretch!!property' values added in this specification
none of the 'font-width!!property' values added in this specification
can be used in the 'font' shorthand:

<pre class="prod"><dfn id="font-stretch-css3-values"><<font-stretch-css3>></dfn>
<pre class="prod"><dfn id="font-width-css3-values"><<font-width-css3>></dfn>
= [normal | ultra-condensed | extra-condensed | condensed |
semi-condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded]</pre>
Expand All @@ -1689,6 +1756,7 @@ Shorthand font property: the 'font' property</h3>
<ul>
<li>'font-family!!property'</li>
<li>'font-size!!property'</li>
<li>'font-width!!property'</li>
<li>'font-stretch!!property' (css3)</li>
<li>'font-style!!property'</li>
<li>'font-variant-caps!!property' (css2)</li>
Expand Down Expand Up @@ -1775,20 +1843,20 @@ Shorthand font property: the 'font' property</h3>
'font-style!!property' and 'font-weight!!property'.

The sixth rule sets the 'font-style!!property',
'font-stretch!!property',
'font-width!!property',
'font-size!!property', and
'font-family!!property',
the other font properties being set to their initial values.

The seventh rule sets 'font-style!!property' to ''oblique 25deg'',
'font-weight!!property' to ''753'', and
'font-stretch!!property' to ''condensed''.
'font-width!!property' to ''condensed''.
Note that the ''25deg'' in this rule must be
immediately following the "oblique" keyword.
</div>

Since the 'font-stretch!!property' property was not defined in CSS 2.1,
when using 'font-stretch!!property' values within 'font' rules,
Since the 'font-width!!property' property was not defined in CSS 2.1,
when using 'font-width!!property' values within 'font' rules,
authors should include a extra version compatible with older user agents:

<pre>
Expand Down Expand Up @@ -2901,7 +2969,7 @@ or font format.

<h3 id="font-prop-desc">
Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descriptor', and
'font-stretch!!descriptor' descriptors</h3>
'font-width!!descriptor' descriptors</h3>

<pre class='descdef'>
Name: font-style
Expand All @@ -2918,8 +2986,8 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
</pre>

<pre class='descdef'>
Name: font-stretch
Value: auto | <<'font-stretch'>>{1,2}
Name: font-width
Value: auto | <<'font-width'>>{1,2}
For: @font-face
Initial: auto
</pre>
Expand Down Expand Up @@ -3040,7 +3108,7 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
</div>

<div class="example" id="ex-descriptors-range">
Fonts may advertise the range of 'font-weight!!property', 'font-stretch!!property', and 'font-style!!property' they are
Fonts may advertise the range of 'font-weight!!property', 'font-width!!property', and 'font-style!!property' they are
compatible with.
<pre>
@font-face {
Expand All @@ -3055,7 +3123,7 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
outside of the 100 - 399 range. For more details, see the [[#font-matching-algorithm]].

As <a href="#ex-descriptors-matching">above</a>, multiple ''@font-face'' rules may be joined together into a single
family, spanning multiple ranges of 'font-weight!!property', 'font-stretch!!property', and/or 'font-style!!property':
family, spanning multiple ranges of 'font-weight!!property', 'font-width!!property', and/or 'font-style!!property':
<pre>
@font-face {
font-family: Lastima;
Expand All @@ -3073,6 +3141,15 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
'font-weight!!property' is between 400 and 700.
</div>

<h4 id="font-stretch-desc">
Font width: the 'font-stretch!!descriptor' legacy name alias</h4>

For historical reasons,
a <dfn for="@font-face">font-stretch</dfn> descriptor exists
which is a [=legacy name alias=]
and functions in the identical way to
the 'font-width!!descriptor'.

<!--
██ ██ ████████ ███ ██ ██ ██████ ████████
██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██
Expand Down Expand Up @@ -3416,7 +3493,7 @@ but will override the "XHGT" axis to have a value of 0.7.
</div>

Note: Because the variation axis values supplied in the
'font-weight!!property', 'font-stretch!!property', and 'font-style!!property' properties
'font-weight!!property', 'font-width!!property', and 'font-style!!property' properties
are applied before
the value in the 'font-named-instance!!descriptor' descriptor,
there is no need to change the value of those properties
Expand Down Expand Up @@ -4070,11 +4147,11 @@ if all font style properties were set to their initial value.
of font faces in that family and then narrows the set to a single
face using other font properties in the order given below. Fonts might be
present in this group which can support a range of
'font-stretch!!property', 'font-style!!property', or 'font-weight!!property' properties. In
'font-width!!property', 'font-style!!property', or 'font-weight!!property' properties. In
this case, the algorithm proceeds as if each supported combination of
values is a unique font in the set. If such a font is ultimately
selected by this algorithm, particular values for
'font-stretch!!property', 'font-style!!property', and 'font-weight!!property' must be applied
'font-width!!property', 'font-style!!property', and 'font-weight!!property' must be applied
before any layout or rendering occurs. The application of these values
must be applied in the <a href="#apply-font-matching-variations">Apply
font matching variations</a> step detailed in
Expand All @@ -4091,11 +4168,11 @@ if all font style properties were set to their initial value.
</wpt>

<ol id="fontstylematchingalg">
1. 'font-stretch!!property' is tried first. If a font
1. 'font-width!!property' is tried first. If a font
does not have any concept of varying strengths of stretch values, its stretch value
is mapped according table in the <a href="#stretchmappings">property definition</a>.
is mapped according table in the <a href="#widthmappings">property definition</a>.
If the matching set includes faces with width values
containing the 'font-stretch!!property' desired value, faces with width values which do not include the desired width value
containing the 'font-width!!property' desired value, faces with width values which do not include the desired width value
are removed from the matching set. If there is no face
which contains the desired value, a stretch value is chosen using the rules below:

Expand All @@ -4115,15 +4192,15 @@ if all font style properties were set to their initial value.
<div class="example" id="ex-ascending-stretch">
This search algorithm can be thought of as a distance function, where the lowest-distance value present in the font family is selected, and all fonts not including that value are eliminated.

Consider a font family with three fonts, named A, B, and C, each with associated supported ranges for the 'font-stretch!!property' descriptor. If an element is styled with "font-stretch: 125%", the search algorithm can be visualized as follows:
Consider a font family with three fonts, named A, B, and C, each with associated supported ranges for the 'font-width!!property' descriptor. If an element is styled with "font-width: 125%", the search algorithm can be visualized as follows:

<img src="images/stretchdistance.svg" alt="algorithm">

The font stretch ranges supported by fonts A, B, and C are shown in the graph above. As you can see, because font B contains the minimum stretch value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font C would then contain the lowest distance in the family, so it would be selected.
</div>

<div class="example" id="ex-ascending-stretch-2">
Similar to the <a href="#ex-ascending-stretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-stretch: 75%":
Similar to the <a href="#ex-ascending-stretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-width: 75%":

<img src="images/stretchdistance2.svg" alt="distance graph">

Expand Down Expand Up @@ -6701,7 +6778,7 @@ text run.
See [[#default-features]] for a description of these.

2. <span id="apply-font-matching-variations">Font variations as enabled by the 'font-weight!!property',
'font-stretch!!property', and 'font-style!!property' properties are applied.</span>
'font-width!!property', and 'font-style!!property' properties are applied.</span>

The application of the value enabled by
'font-style!!property' is affected by font selection, because this property might select an
Expand All @@ -6711,7 +6788,7 @@ text run.
not be set together.

If the selected font is defined in an ''@font-face'' rule, then the values applied at this step
should be clamped to the value of the 'font-weight!!descriptor', 'font-stretch!!descriptor',
should be clamped to the value of the 'font-weight!!descriptor', 'font-width!!descriptor',
and 'font-style!!descriptor'
descriptors in that ''@font-face'' rule.

Expand Down Expand Up @@ -7008,7 +7085,7 @@ the table below. Instead, please use the higher-level replacement properties, be
<th>Notes
<tbody>
<tr><td>Weight (<code>wght</code>)<td>'font-weight!!property'<td>The 'font-weight!!property' property will set the <code>wght</code> axis if one is present.
<tr><td>Width (<code>wdth</code>)<td>'font-stretch!!property'<td>The 'font-stretch!!property' property will set the <code>wdth</code> axis if one is present.
<tr><td>Width (<code>wdth</code>)<td>'font-width!!property'<td>The 'font-width!!property' property will set the <code>wdth</code> axis if one is present.
<tr><td>Slant (<code>slnt</code>) or Italic (<code>ital</code>)<td>'font-style!!property'<td>The 'font-style!!property' property will set the <code>slnt</code> or <code>ital</code> axis, depending on its value.
<tr><td>Optical size (<code>opsz</code>)<td>'font-optical-sizing!!property'<td>The 'font-optical-sizing!!property' property will set the <code>opsz</code> axis if one is present.
</table>
Expand Down

0 comments on commit b0660ee

Please sign in to comment.