Turbopack next/font/google: Use capsize's xWidthAvg to compute fallba…

…cks (#50878) Instead of using azAvgWidth for next/font/google, use xWidthAvg as the webpack implementation does. For now, next/font/local in both the webpack and Turbopack implementations continue to use azAvgWidth. We should align these in the future. Test Plan: We now pass 26 next/font tests in Turbopack, up from 22.
vercel · Jun 8, 2023 · 994c61a · 994c61a
1 parent 13bd196
commit 994c61a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/packages/next-swc/crates/next-core/src/next_font/font_fallback.rs b/packages/next-swc/crates/next-core/src/next_font/font_fallback.rs
@@ -8,22 +8,25 @@ use turbopack_binding::turbo::tasks::{
 
 pub(crate) struct DefaultFallbackFont {
     pub name: String,
-    pub x_width_avg: f64,
+    pub capsize_key: String,
+    pub az_avg_width: f64,
     pub units_per_em: u32,
 }
 
 // From https://github.com/vercel/next.js/blob/a3893bf69c83fb08e88c87bf8a21d987a0448c8e/packages/font/src/utils.ts#L4
 pub(crate) static DEFAULT_SANS_SERIF_FONT: Lazy<DefaultFallbackFont> =
     Lazy::new(|| DefaultFallbackFont {
         name: "Arial".to_owned(),
-        x_width_avg: 934.5116279069767,
+        capsize_key: "arial".to_owned(),
+        az_avg_width: 934.5116279069767,
         units_per_em: 2048,
     });
 
 pub(crate) static DEFAULT_SERIF_FONT: Lazy<DefaultFallbackFont> =
     Lazy::new(|| DefaultFallbackFont {
         name: "Times New Roman".to_owned(),
-        x_width_avg: 854.3953488372093,
+        capsize_key: "timesNewRoman".to_owned(),
+        az_avg_width: 854.3953488372093,
         units_per_em: 2048,
     });
 

diff --git a/packages/next-swc/crates/next-core/src/next_font/google/font_fallback.rs b/packages/next-swc/crates/next-core/src/next_font/google/font_fallback.rs
@@ -143,7 +143,8 @@ fn lookup_fallback(
         // Derived from
         // https://github.com/vercel/next.js/blob/7bfd5829999b1d203e447d30de7e29108c31934a/packages/next/src/server/font-utils.ts#L131
         let main_font_avg_width = metrics.x_width_avg / metrics.units_per_em as f64;
-        let fallback_font_avg_width = fallback.x_width_avg / fallback.units_per_em as f64;
+        let fallback_metrics = font_metrics_map.0.get(&fallback.capsize_key).unwrap();
+        let fallback_font_avg_width = fallback_metrics.x_width_avg / fallback.units_per_em as f64;
         let size_adjust = main_font_avg_width / fallback_font_avg_width;
 
         let ascent = metrics.ascent as f64 / (metrics.units_per_em as f64 * size_adjust);
@@ -189,7 +190,18 @@ mod tests {
                     "unitsPerEm": 2816,
                     "xHeight": 1536,
                     "xWidthAvg": 1335
-                  }
+                },
+                "arial": {
+                    "familyName": "Arial",
+                    "category": "sans-serif",
+                    "capHeight": 1467,
+                    "ascent": 1854,
+                    "descent": -434,
+                    "lineGap": 67,
+                    "unitsPerEm": 2048,
+                    "xHeight": 1062,
+                    "xWidthAvg": 904
+                }
             }
         "#,
         )?;
@@ -199,10 +211,10 @@ mod tests {
             Fallback {
                 font_family: "Arial".to_owned(),
                 adjustment: Some(FontAdjustment {
-                    ascent: 0.9324334770490376,
-                    descent: -0.23242476700635833,
+                    ascent: 0.901_989_700_374_532,
+                    descent: -0.224_836_142_322_097_4,
                     line_gap: 0.0,
-                    size_adjust: 1.0389481114147647
+                    size_adjust: 1.074_014_481_094_127
                 })
             }
         );
@@ -224,7 +236,18 @@ mod tests {
                     "unitsPerEm": 2048,
                     "xHeight": 1082,
                     "xWidthAvg": 969
-                  }
+                },
+                "timesNewRoman": {
+                    "familyName": "Times New Roman",
+                    "category": "serif",
+                    "capHeight": 1356,
+                    "ascent": 1825,
+                    "descent": -443,
+                    "lineGap": 87,
+                    "unitsPerEm": 2048,
+                    "xHeight": 916,
+                    "xWidthAvg": 819
+                }
             }
         "#,
         )?;
@@ -234,10 +257,10 @@ mod tests {
             Fallback {
                 font_family: "Times New Roman".to_owned(),
                 adjustment: Some(FontAdjustment {
-                    ascent: 0.9239210539440684,
-                    descent: -0.23894510015794873,
+                    ascent: 0.885_645_438_273_993_8,
+                    descent: -0.229_046_234_036_377_7,
                     line_gap: 0.0,
-                    size_adjust: 1.134135387462914
+                    size_adjust: 1.183_150_183_150_183_2
                 })
             }
         );

diff --git a/packages/next-swc/crates/next-core/src/next_font/local/font_fallback.rs b/packages/next-swc/crates/next-core/src/next_font/local/font_fallback.rs
@@ -106,7 +106,9 @@ async fn get_font_adjustment(
         ))?
         .units_per_em as f64;
 
-    let fallback_avg_width = fallback_font.x_width_avg / fallback_font.units_per_em as f64;
+    let fallback_avg_width = fallback_font.az_avg_width / fallback_font.units_per_em as f64;
+    // TODO: Use xWidthAvg like next/google.
+    //       JS implementation: https://github.com/seek-oss/capsize/blob/42d6dc39d58247bc6b9e013a4b1c4463bf287dca/packages/unpack/src/index.ts#L7-L83
     let size_adjust = match az_avg_width {
         Some(az_avg_width) => az_avg_width as f64 / units_per_em / fallback_avg_width,
         None => 1.0,