From a023194f94d95b1e3bdeb33734e63b22637d1d90 Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Wed, 16 Sep 2020 15:19:12 -0700 Subject: [PATCH 1/6] Add font metric override descriptors --- css-fonts-4/Overview.bs | 62 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 647629823f9..328c39ea3f9 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2908,6 +2908,68 @@ Initial: normal This descriptor defines initial settings that apply when the font defined by an @font-face rule is rendered. It does not affect font selection. Values are identical to those defined for the 'font-language-override!!property' property defined below except that the value inherit is omitted. When multiple font feature descriptors, properties, or variations are used, the cumulative effect on text rendering is detailed in the section [[#font-feature-variation-resolution]] below. +

+Default font metrics overriding: +the 'ascent-override', 'descent-override' and 'line-gap-override' descriptors

+ +
+Name: ascent-override
+Value: normal | <>
+For: @font-face
+Initial: normal
+
+ +
+Name: descent-override
+Value: normal | <>
+For: @font-face
+Initial: normal
+
+ +
+Name: line-gap-override
+Value: normal | <>
+For: @font-face
+Initial: normal
+
+ +These 'ascent-override', 'descent-override' and 'line-gap-override' descriptors define the values +of the ascent, descent and line gap metrics of the font. + +When the descriptor value is 'normal', the metric value is obtained from the font file directly. + +Note: User agents may choose different pieces of data from the font file as the metric value, +leading to different layouts. For example, Chrome on Windows uses sTypoAscender, sTypoDescender +and sTypoLineGap from the font's OS/2 table, while on Mac, it uses those in the HHEA table if available. + +When the descriptor value is a percentage, the metric value is set to the given percentage of the +em size of the font. + +
+ We may override the metrics of Arial as follows: + +
@font-face {
+  font-family: arial;
+  src: local(Arial), url("http://example.com/arial.woff");
+  ascent-override: 60%;
+  descent-override: 40%;
+  line-gap-override: 0%;
+}
+
+ + Then for an element with the following style: + +
+font-family: arial;
+font-size: 20px;
+line-height: normal;
+
+ + Each line box will be exactly 20px high. Text baseline will be positioned at 12px + below line box top. + +
+

Font Matching Algorithm

The algorithm below describes how fonts are associated with individual runs of text. From 5d7a93a3244896d81b24134e522a115b1e03cb88 Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Wed, 16 Sep 2020 16:31:03 -0700 Subject: [PATCH 2/6] Update Overview.bs --- css-fonts-4/Overview.bs | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 328c39ea3f9..c87827dfd0c 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2933,17 +2933,20 @@ For: @font-face Initial: normal -These 'ascent-override', 'descent-override' and 'line-gap-override' descriptors define the values -of the ascent, descent and line gap metrics of the font. +The 'ascent-override', 'descent-override' and 'line-gap-override' descriptors define the +ascent metric, descent metric and +line gap metric of the font. -When the descriptor value is 'normal', the metric value is obtained from the font file directly. +When the descriptor value is 'normal', the corresponding metric value is obtained from the +font file directly. Note: User agents may choose different pieces of data from the font file as the metric value, leading to different layouts. For example, Chrome on Windows uses sTypoAscender, sTypoDescender -and sTypoLineGap from the font's OS/2 table, while on Mac, it uses those in the HHEA table if available. +and sTypoLineGap from the font's OS/2 table, while on Mac, it uses those in the HHEA table if +available. -When the descriptor value is a percentage, the metric value is set to the given percentage of the -em size of the font. +When the descriptor value is a percentage, the corresponding metric value is resolved as the +given percentage multiplied by the used font size. Negative values are illegal.
We may override the metrics of Arial as follows: @@ -2951,8 +2954,8 @@ em size of the font. 
@font-face {
   font-family: arial;
   src: local(Arial), url("http://example.com/arial.woff");
-  ascent-override: 60%;
-  descent-override: 40%;
+  ascent-override: 80%;
+  descent-override: 20%;
   line-gap-override: 0%;
 }
@@ -2965,7 +2968,7 @@ font-size: 20px; line-height: normal; - Each line box will be exactly 20px high. Text baseline will be positioned at 12px + Each line box will be exactly 20px high. Text baseline will be positioned at 16px below line box top.
From e297a072107587a68244ae24ac7407cf0fdca0d1 Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Thu, 17 Sep 2020 11:05:41 -0700 Subject: [PATCH 3/6] Update css-fonts-4/Overview.bs Co-authored-by: Chris Harrelson --- css-fonts-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index c87827dfd0c..cfe5adf5914 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2935,7 +2935,7 @@ Initial: normal The 'ascent-override', 'descent-override' and 'line-gap-override' descriptors define the ascent metric, descent metric and -line gap metric of the font. +line gap metric of the font, respectively. When the descriptor value is 'normal', the corresponding metric value is obtained from the font file directly. From 522b50f56d7adffbacfe71204b265a2bbb154e8e Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Thu, 17 Sep 2020 11:06:24 -0700 Subject: [PATCH 4/6] Update css-fonts-4/Overview.bs --- css-fonts-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index cfe5adf5914..4ddd2ecc0d8 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2946,7 +2946,7 @@ and sTypoLineGap from the font's OS/2 table, while on Mac, it uses those in the available. When the descriptor value is a percentage, the corresponding metric value is resolved as the -given percentage multiplied by the used font size. Negative values are illegal. +given percentage multiplied by the used font size. Negative values are invalid at parse time.
We may override the metrics of Arial as follows: From 0e4d3613b34ac9126d0a2cde9ad46db8664e0cbb Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Thu, 17 Sep 2020 11:10:42 -0700 Subject: [PATCH 5/6] Update css-fonts-4/Overview.bs --- css-fonts-4/Overview.bs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 4ddd2ecc0d8..e723ec3013b 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2940,10 +2940,8 @@ The 'ascent-override', 'descent-override' and 'line-gap-override' descriptors de When the descriptor value is 'normal', the corresponding metric value is obtained from the font file directly. -Note: User agents may choose different pieces of data from the font file as the metric value, -leading to different layouts. For example, Chrome on Windows uses sTypoAscender, sTypoDescender -and sTypoLineGap from the font's OS/2 table, while on Mac, it uses those in the HHEA table if -available. +Note: User agents may draw data from different places from the font file as the metric values, +which results in different text layouts. When the descriptor value is a percentage, the corresponding metric value is resolved as the given percentage multiplied by the used font size. Negative values are invalid at parse time. From 439f4d2e08801e36cb9a398ae9e1324bf48d4092 Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Thu, 17 Sep 2020 12:16:34 -0700 Subject: [PATCH 6/6] Update Overview.bs --- css-fonts-4/Overview.bs | 51 ++++++++++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 13 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index e723ec3013b..2351cfffbcf 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2947,27 +2947,52 @@ When the descriptor value is a percentage, the corresponding metric value is res given percentage multiplied by the used font size. Negative values are invalid at parse time.
- We may override the metrics of Arial as follows: + The percentage is resolved against different font sizes for different elements. -
@font-face {
-  font-family: arial;
-  src: local(Arial), url("http://example.com/arial.woff");
-  ascent-override: 80%;
-  descent-override: 20%;
-  line-gap-override: 0%;
+
+@font-face {
+  font-family: overridden-font;
+  ascent-override: 50%;
+  ...
 }
+
+<span style="font-family: overridden-font; font-size: 20px;">
+  Outer span content
+  <span style="font-size: 150%;">Inner span content</span>
+</span>
 

 
-	Then for an element with the following style:
+	The outer span uses an ascent value of
+	10px, whereas the inner span uses 15px.
+
+
+ +
+ We may override the metrics of a local fallback font to match the primary font, which + is a web font. This reduces layout shifting when switching from fallback to the + primary font. 
-font-family: arial;
-font-size: 20px;
-line-height: normal;
+@font-face {
+  font-family: cool-web-font;
+  src: url("https://example.com/font.woff");
+}
+
+@font-face {
+  font-family: fallback-to-local;
+  src: local(Some Local Font);
+  /* Override metric values to match cool-web-font */
+  ascent-override: 125%;
+  descent-override: 25%;
+  line-gap-override: 0%;
+}
+
+<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
+<img src="https://example.com/largeimage" alt="A large image that you don't want to shift">
- Each line box will be exactly 20px high. Text baseline will be positioned at 16px - below line box top. + The image will not be vertically shifted when the user agent finishes loading and + switches to use the web font.