feat: add fontStretch and fontKerning support (#1160)

Co-authored-by: Claude Opus 4.5 <[email protected]>

Author: Brooooooklyn

__test__/fonts/Inconsolata-VariableFont_wdth,wght.woff2

@@ -205,3 +205,83 @@ test('font-variation-settings-with-font-family', async (t) => {
   }
   await snapshotImage(t, { canvas, ctx })
 })
+
+test('font-stretch', async (t) => {
+  // Inconsolata is a variable font that supports width from 50% to 200%
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'Inconsolata-VariableFont_wdth,wght.woff2'), 'Inconsolata')
+  const canvas = createCanvas(800, 600)
+  const ctx = canvas.getContext('2d')!
+  ctx.font = '30px Inconsolata'
+
+  const stretches = [
+    'ultra-condensed',
+    'extra-condensed',
+    'condensed',
+    'semi-condensed',
+    'normal',
+    'semi-expanded',
+    'expanded',
+    'extra-expanded',
+    'ultra-expanded',
+  ] as const
+
+  stretches.forEach((stretch, index) => {
+    ctx.fontStretch = stretch
+    ctx.fillText(`Hello World (${ctx.fontStretch})`, 10, 40 + index * 60)
+  })
+
+  await snapshotImage(t, { canvas, ctx })
+})
+
+test('font-kerning', async (t) => {
+  // Use a serif font that has kerning information
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'SourceSerifPro-Regular.ttf'), 'Source Serif Pro')
+  const canvas = createCanvas(600, 300)
+  const ctx = canvas.getContext('2d')!
+  ctx.font = '48px Source Serif Pro'
+
+  // Test text with common kerning pairs: AV, Ta, We
+  const testText = 'AVA Ta We'
+
+  // Default (auto)
+  ctx.fillText(`${testText} (auto)`, 10, 60)
+  t.is(ctx.fontKerning, 'auto')
+
+  // Kerning normal
+  ctx.fontKerning = 'normal'
+  ctx.fillText(`${testText} (normal)`, 10, 140)
+  t.is(ctx.fontKerning, 'normal')
+
+  // Kerning none - characters should be evenly spread
+  ctx.fontKerning = 'none'
+  ctx.fillText(`${testText} (none)`, 10, 220)
+  t.is(ctx.fontKerning, 'none')
+
+  await snapshotImage(t, { canvas, ctx })
+})
+
+test('font-stretch-default-value', (t) => {
+  const { ctx } = t.context
+  t.is(ctx.fontStretch, 'normal')
+})
+
+test('font-kerning-default-value', (t) => {
+  const { ctx } = t.context
+  t.is(ctx.fontKerning, 'auto')
+})
+
+test('font-stretch-invalid-value-ignored', (t) => {
+  const { ctx } = t.context
+  ctx.fontStretch = 'condensed'
+  t.is(ctx.fontStretch, 'condensed')
+  ctx.fontStretch = 'invalid-stretch' as any
+  t.is(ctx.fontStretch, 'condensed') // Should remain unchanged
+})
+
+test('font-kerning-invalid-value-ignored', (t) => {
+  const { ctx } = t.context
+  ctx.fontKerning = 'none'
+  t.is(ctx.fontKerning, 'none')
+  ctx.fontKerning = 'invalid-kerning' as any
+  t.is(ctx.fontKerning, 'none') // Should remain unchanged
+})

__test__/snapshots/font-kerning.png

@@ -465,6 +465,7 @@ void skiac_canvas_get_line_metrics_or_draw_text(
     float font_size,
     int weight,
     int stretch,
+    float stretch_width,
     int slant,
     const char* font_family,
     int baseline,
@@ -476,7 +477,8 @@ void skiac_canvas_get_line_metrics_or_draw_text(
     skiac_canvas* c_canvas,
     skiac_line_metrics* c_line_metrics,
     const skiac_font_variation* variations,
-    int variations_count) {
+    int variations_count,
+    int kerning) {
   auto font_collection = c_collection->collection;
   auto font_style = SkFontStyle(weight, stretch, (SkFontStyle::Slant)slant);
   auto text_direction = (TextDirection)direction;
@@ -498,16 +500,33 @@ void skiac_canvas_get_line_metrics_or_draw_text(
 
   // Apply variable font variations if provided
   if (variations && variations_count > 0) {
-    coords.reserve(variations_count);
+    coords.reserve(variations_count + 1);
     for (int i = 0; i < variations_count; i++) {
       coords.push_back({variations[i].tag, variations[i].value});
     }
+  }
+
+  // Apply font stretch as 'wdth' variation for variable fonts
+  // 'wdth' tag = 0x77647468
+  if (stretch_width != 100.0f) {
+    coords.push_back({SkSetFourByteTag('w', 'd', 't', 'h'), stretch_width});
+  }
+
+  if (!coords.empty()) {
     SkFontArguments font_args;
     font_args.setVariationDesignPosition(
         {coords.data(), static_cast<int>(coords.size())});
     text_style.setFontArguments(std::make_optional(font_args));
   }
 
+  // Apply font kerning feature
+  // kerning: 0=auto (don't set feature), 1=none (disable), 2=normal (enable)
+  if (kerning == 1) {
+    text_style.addFontFeature(SkString("kern"), 0);
+  } else if (kerning == 2) {
+    text_style.addFontFeature(SkString("kern"), 1);
+  }
+
   text_style.setForegroundColor(*PAINT_CAST);
   text_style.setTextBaseline(TextBaseline::kAlphabetic);
   StrutStyle struct_style;

__test__/snapshots/font-stretch.png

@@ -386,6 +386,7 @@ void skiac_canvas_get_line_metrics_or_draw_text(
     float font_size,
     int weight,
     int stretch,
+    float stretch_width,
     int slant,
     const char* font_family,
     int baseline,
@@ -397,7 +398,8 @@ void skiac_canvas_get_line_metrics_or_draw_text(
     skiac_canvas* c_canvas,
     skiac_line_metrics* c_line_metrics,
     const skiac_font_variation* variations,
-    int variations_count);
+    int variations_count,
+    int kerning);
 void skiac_canvas_reset_transform(skiac_canvas* c_canvas);
 void skiac_canvas_clip_rect(skiac_canvas* c_canvas,
                             float x,

__test__/text.spec.ts

@@ -686,6 +686,21 @@ impl Context {
     Ok(())
   }
 
+  pub fn set_font_stretch(&mut self, stretch: String) -> result::Result<(), SkError> {
+    if let Some(s) = crate::font::parse_font_stretch(&stretch) {
+      self.state.font_stretch = s;
+      self.state.font_stretch_raw = stretch;
+    }
+    Ok(())
+  }
+
+  pub fn set_font_kerning(&mut self, kerning: String) -> result::Result<(), SkError> {
+    if let Ok(k) = kerning.parse() {
+      self.state.font_kerning = k;
+    }
+    Ok(())
+  }
+
   pub fn get_image_data(
     &mut self,
     x: f32,
@@ -929,7 +944,8 @@ impl Context {
                 max_width,
                 width as f32,
                 state.font_style.weight,
-                state.font_style.stretch as i32,
+                state.font_stretch as i32,
+                state.font_stretch.to_width_percentage(),
                 state.font_style.style,
                 &font,
                 state.font_style.size,
@@ -941,6 +957,7 @@ impl Context {
                 state.word_spacing,
                 shadow_paint,
                 variations,
+                state.font_kerning,
               )?;
               shadow_canvas.restore();
               Ok(())
@@ -954,7 +971,8 @@ impl Context {
           max_width,
           width as f32,
           state.font_style.weight,
-          state.font_style.stretch as i32,
+          state.font_stretch as i32,
+          state.font_stretch.to_width_percentage(),
           state.font_style.style,
           &font,
           state.font_style.size,
@@ -966,6 +984,7 @@ impl Context {
           state.word_spacing,
           paint,
           variations,
+          state.font_kerning,
         )?;
         Ok(())
       },
@@ -977,7 +996,7 @@ impl Context {
     let state = &self.state;
     let fill_paint = self.fill_paint()?;
     let weight = state.font_style.weight;
-    let stretch = state.font_style.stretch;
+    let stretch = state.font_stretch;
     let slant = state.font_style.style;
     let font = get_font()?;
     let line_metrics = LineMetrics(self.surface.canvas.get_line_metrics(
@@ -986,6 +1005,7 @@ impl Context {
       state.font_style.size,
       weight,
       stretch as i32,
+      stretch.to_width_percentage(),
       slant,
       &state.font_style.family,
       state.text_baseline,
@@ -995,6 +1015,7 @@ impl Context {
       state.word_spacing,
       &fill_paint,
       &self.state.font_variations,
+      self.state.font_kerning,
     )?);
     Ok(line_metrics)
   }
@@ -1487,6 +1508,28 @@ impl CanvasRenderingContext2D {
     Ok(())
   }
 
+  #[napi(getter)]
+  pub fn get_font_stretch(&self) -> String {
+    self.context.state.font_stretch_raw.clone()
+  }
+
+  #[napi(setter, return_if_invalid)]
+  pub fn set_font_stretch(&mut self, stretch: String) -> Result<()> {
+    self.context.set_font_stretch(stretch)?;
+    Ok(())
+  }
+
+  #[napi(getter)]
+  pub fn get_font_kerning(&self) -> String {
+    self.context.state.font_kerning.as_str().to_owned()
+  }
+
+  #[napi(setter, return_if_invalid)]
+  pub fn set_font_kerning(&mut self, kerning: String) -> Result<()> {
+    self.context.set_font_kerning(kerning)?;
+    Ok(())
+  }
+
   #[napi]
   pub fn arc(
     &mut self,

skia-c/skia_c.cpp

@@ -229,6 +229,22 @@ impl FontStretch {
       FontStretch::UltraExpanded => "ultra-expanded",
     }
   }
+
+  /// Returns the width percentage for variable font 'wdth' axis
+  /// Based on CSS font-stretch percentages
+  pub fn to_width_percentage(self) -> f32 {
+    match self {
+      FontStretch::UltraCondensed => 50.0,
+      FontStretch::ExtraCondensed => 62.5,
+      FontStretch::Condensed => 75.0,
+      FontStretch::SemiCondensed => 87.5,
+      FontStretch::Normal => 100.0,
+      FontStretch::SemiExpanded => 112.5,
+      FontStretch::Expanded => 125.0,
+      FontStretch::ExtraExpanded => 150.0,
+      FontStretch::UltraExpanded => 200.0,
+    }
+  }
 }
 
 // https://drafts.csswg.org/css-fonts-4/#propdef-font-weight
@@ -251,7 +267,7 @@ fn parse_font_weight(weight: &str) -> Option<u32> {
   }
 }
 
-fn parse_font_stretch(stretch: &str) -> Option<FontStretch> {
+pub fn parse_font_stretch(stretch: &str) -> Option<FontStretch> {
   match stretch {
     "ultra-condensed" | "50%" => Some(FontStretch::UltraCondensed),
     "extra-condensed" | "62.5%" => Some(FontStretch::ExtraCondensed),