Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 32 additions & 13 deletions css-fonts-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ Status: ED
Work Status: Exploring
Group: CSSWG
ED: https://drafts.csswg.org/css-fonts-4/
TR: https://www.w3.org/TR/css-fonts-4/
Editor: John Daggett, Invited Expert, https://twitter.com/nattokirai
Editor: Myles C. Maxfield, Apple Inc., mmaxfield@apple.com
Abstract: This specification defines modifications to the existing <a href="https://drafts.csswg.org/css-fonts-3/">CSS Fonts 3</a> specification along with additional experimental features.
Expand All @@ -14,6 +15,19 @@ Ignored Terms: font-palette, <named-palette-color>

<pre class="link-defaults">
spec:css-color-4; type:property; text:color
spec:css22; type:value; for:/; text:block
spec:css-fonts-4; type:descriptor; for:/@font-face; text:font-face-name
spec:css-fonts-4; type:property; for:/; text:font-family
spec:css-fonts-4; type:descriptor; for:/@font-face; text:font-family
spec:css-fonts-4; type:property; for:/; text:font-weight
spec:css-fonts-4; type:descriptor; for:/@font-face; text:font-weight
spec:css-fonts-4; type:property; for:/; text:font-stretch
spec:css-fonts-4; type:descriptor; for:/@font-face; text:font-stretch
spec:css-fonts-4; type:property; for:/; text:font-style
spec:css-fonts-4; type:descriptor; for:/@font-face; text:font-style
spec:css-fonts-3; type:property; for:/; text:font-kerning
spec:css-fonts-3; type:property; for:/; text:font-language-override
spec:css-fonts-3; type:descriptor; for:/@font-face; text:unicode-range
</pre>

Advisement: This document contains ideas and
Expand Down Expand Up @@ -1061,7 +1075,7 @@ name:
</pre>
</div>

<h3 id="font-size-adjust-prop">
<h3 id="font-synthesis-prop">
Controlling synthetic faces: the 'font-synthesis' property</h3>

<pre class="propdef">
Expand Down Expand Up @@ -2008,20 +2022,20 @@ if all font style properties were set to their initial value.

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

<img src="stretchdistance.svg">
<img src="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">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-stretch: 75":

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

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 A would then contain the lowest distance in the family, so it would be selected.
</div>

2. <span id="font-style-matching">'font-style' is tried next.</span>
2. <a href="#font-style-matching">'font-style' is tried next.</span>
If a font does not have any concept of varying strengths of italics or oblique angles, its style
is mapped according to the description in the 'font-style' property definition.

Expand All @@ -2041,7 +2055,7 @@ if all font style properties were set to their initial value.
<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-style: italic":

<img src="styledistance.svg">
<img src="styledistance.svg" alt="distance graph">

As you can see, because font D contains the minimum italic value across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font E would then contain the lowest distance in the family, so it would be selected. If E were eliminated, C would be selected. If C were eliminated, font B would not be chosen immediately; instead, oblique values would be consulted and an oblique value might be chosen. However, if no oblique value is chosen, font B would then be selected, followed by font A.
</div>
Expand All @@ -2061,7 +2075,7 @@ if all font style properties were set to their initial value.
<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-style: oblique 40deg":

<img src="styledistance2.svg">
<img src="styledistance2.svg" alt="distance graph">

As you can see, because font D contains the minimum oblique value across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font E would then contain the lowest distance in the family, so it would be selected. If E were eliminated, C would be selected. If C were eliminated, font B would not be chosen immediately; instead, italic values would be consulted and an italic value might be chosen. However, if no italic value is chosen, font B would then be selected, followed by font A.
</div>
Expand All @@ -2085,7 +2099,7 @@ if all font style properties were set to their initial value.
<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-style: oblique 13deg":

<img src="styledistance3.svg">
<img src="styledistance3.svg" alt="distance graph">

As you can see, because font D contains the minimum oblique value across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font C would then contain the lowest distance in the family, so it would be selected. If C were eliminated, E would be selected. If E were eliminated, font B would not be chosen immediately; instead, italic values would be consulted and an italic value might be chosen. However, if no italic value is chosen, font B would then be selected, followed by font A.
</div>
Expand All @@ -2103,7 +2117,7 @@ if all font style properties were set to their initial value.
<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-style: normal":

<img src="styledistance4.svg">
<img src="styledistance4.svg" alt="distance graph">

As you can see, because font C contains the minimum oblique value across the entire family, font C would be selected by this algorithm. However, if font C were somehow eliminated from the family, font B would not be chosen immediately; instead, italic values would be consulted and an italic value might be chosen. However, if no italic value is chosen, font B would then be selected, followed by font A.
</div>
Expand Down Expand Up @@ -2137,15 +2151,15 @@ if all font style properties were set to their initial value.
<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 400":

<img src="styleweight.svg">
<img src="styleweight.svg" alt="distance graph">

As you can see, because font B contains the minimum oblique value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font D would then contain the lowest distance in the family, so it would be selected. If D were eliminated, A would be selected, followed by fonts C and then E.
</div>

<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 500":

<img src="weightmatching.svg">
<img src="weightmatching.svg" alt="distance graph">

As you can see, because font D contains the minimum oblique value across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font B would then contain the lowest distance in the family, so it would be selected. If B were eliminated, C would be selected, followed by fonts A and then E.
</div>
Expand All @@ -2157,7 +2171,7 @@ if all font style properties were set to their initial value.
<div class="example">
Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 300":

<img src="weightmatching2.svg">
<img src="weightmatching2.svg" alt="distance graph">

As you can see, because font B contains the minimum oblique value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font A would then contain the lowest distance in the family, so it would be selected. If A were eliminated, C would be selected.
</div>
Expand Down Expand Up @@ -2243,6 +2257,11 @@ Cluster matching</h3>

Issue: Import from level 3

<h2 id="font-rend-props">
Font Feature Properties</h2>

Issue: Import from level 3

<h2 id="font-feature-variation-resolution">
Font Feature and Variation Resolution</h3>

Expand Down Expand Up @@ -2767,7 +2786,7 @@ or implement the ability to disable color fonts,
''@font-palette-values'' rules must simply be ignored;
the behavior of individual descriptors as defined in this specification should not be altered.

<h3 id="font-family-desc">
<h3 id="font-family-2-desc">
Font family: the 'font-family' descriptor</h3>

<pre class='descdef mq'>
Expand Down Expand Up @@ -2931,7 +2950,7 @@ the variation selector is ignored.
User Agents can choose to draw a <a>Presentation Participating Code Point</a>
in either emoji style or text style.
User Agents may wish to follow
the <a href="http://www.unicode.org/reports/tr51/proposed.html#Presentation_Style">guidance</a> of the Unicode Consortium
the <a href="http://www.unicode.org/reports/tr51/index.html#Presentation_Style">guidance</a> of the Unicode Consortium
when performing this decision.
User agents also may wish to follow platform conventions when performing this decision.

Expand Down