feat: add variable font support (#1148)

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

Author: Brooooooklyn

__test__/fonts/Oswald.ttf

@@ -181,3 +181,12 @@ test('text-align-with-space', async (t) => {
   ctx.fillText('A B C', 100, 200)
   await snapshotImage(t)
 })
+
+test('font-variation-settings', async (t) => {
+  const { ctx } = t.context
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'Oswald.ttf'), 'Oswald')
+  ctx.font = '50px Oswald'
+  ctx.fontVariationSettings = "'wght' 700"
+  ctx.fillText('Hello World', 50, 100)
+  await snapshotImage(t)
+})

__test__/snapshots/font-variation-settings.png

@@ -0,0 +1,83 @@
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import test from 'ava'
+
+import { GlobalFonts, Canvas } from '../index.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// This test demonstrates the new variable font support
+// It requires a variable font to be present in the test fonts directory
+
+test('GlobalFonts.hasVariations should return false for non-variable fonts', (t) => {
+  // Load a standard font
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'iosevka-regular.ttf'), 'Iosevka')
+
+  // Check if it has variations (it shouldn't for a non-variable font)
+  const hasVariations = GlobalFonts.hasVariations('Iosevka', 400, 5, 0)
+  t.false(hasVariations)
+})
+
+test('GlobalFonts.getVariationAxes should return empty array for non-variable fonts', (t) => {
+  // Load a standard font
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'iosevka-regular.ttf'), 'Iosevka')
+
+  // Get variation axes (should be empty for non-variable font)
+  const axes = GlobalFonts.getVariationAxes('Iosevka', 400, 5, 0)
+  t.is(axes.length, 0)
+})
+
+test('GlobalFonts.hasVariations should return true for variable fonts', (t) => {
+  const fontPath = join(__dirname, 'fonts', 'Oswald.ttf')
+  GlobalFonts.registerFromPath(fontPath, 'Oswald')
+  const hasVariations = GlobalFonts.hasVariations('Oswald', 400, 5, 0)
+  t.true(hasVariations)
+})
+
+test('GlobalFonts.getVariationAxes should return axes for variable fonts', (t) => {
+  const fontPath = join(__dirname, 'fonts', 'Oswald.ttf')
+  GlobalFonts.registerFromPath(fontPath, 'Oswald')
+  const axes = GlobalFonts.getVariationAxes('Oswald', 400, 5, 0)
+  t.true(axes.length > 0)
+
+  const weightAxis = axes.find(axis => axis.tag === 0x77676874) // 'wght'
+  t.truthy(weightAxis)
+  if (weightAxis) {
+    t.is(weightAxis.min, 200)
+    t.is(weightAxis.max, 700)
+    t.is(weightAxis.def, 400)
+  }
+})
+
+test('FontVariationAxis interface has correct properties', (t) => {
+  // Load a standard font and get its axes (even if empty)
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'iosevka-regular.ttf'), 'Iosevka')
+  const axes = GlobalFonts.getVariationAxes('Iosevka', 400, 5, 0)
+
+  // Verify the interface even with empty array
+  t.true(Array.isArray(axes))
+
+  // If there were axes, they would have these properties:
+  // - tag: number (OpenType tag as 32-bit integer)
+  // - value: number (current value)
+  // - min: number (minimum value)
+  // - max: number (maximum value)
+  // - def: number (default value)
+  // - hidden: boolean (whether hidden from UI)
+
+  t.pass()
+})
+
+test('CanvasRenderingContext2D.fontVariationSettings should persist', (t) => {
+  const canvas = new Canvas(200, 200)
+  const ctx = canvas.getContext('2d')
+
+  t.is(ctx.fontVariationSettings, 'normal')
+
+  ctx.fontVariationSettings = "'wght' 700, 'wdth' 50"
+  t.is(ctx.fontVariationSettings, "'wght' 700, 'wdth' 50")
+
+  ctx.fontVariationSettings = "normal"
+  t.is(ctx.fontVariationSettings, "normal")
+})

__test__/text.spec.ts

@@ -5,21 +5,21 @@ export function clearAllCache(): void
 
 interface CanvasRenderingContext2D
   extends CanvasCompositing,
-    CanvasDrawPath,
-    CanvasFillStrokeStyles,
-    CanvasFilters,
-    CanvasImageData,
-    CanvasImageSmoothing,
-    CanvasPath,
-    CanvasPathDrawingStyles,
-    CanvasRect,
-    CanvasSettings,
-    CanvasShadowStyles,
-    CanvasState,
-    CanvasText,
-    CanvasTextDrawingStyles,
-    CanvasTransform,
-    CanvasPDFAnnotations {}
+  CanvasDrawPath,
+  CanvasFillStrokeStyles,
+  CanvasFilters,
+  CanvasImageData,
+  CanvasImageSmoothing,
+  CanvasPath,
+  CanvasPathDrawingStyles,
+  CanvasRect,
+  CanvasSettings,
+  CanvasShadowStyles,
+  CanvasState,
+  CanvasText,
+  CanvasTextDrawingStyles,
+  CanvasTransform,
+  CanvasPDFAnnotations { }
 
 interface CanvasState {
   isContextLost(): boolean
@@ -211,6 +211,7 @@ interface CanvasTextDrawingStyles {
   textBaseline: CanvasTextBaseline
   textRendering: CanvasTextRendering
   wordSpacing: string
+  fontVariationSettings: string
 }
 
 interface CanvasFilters {
@@ -421,7 +422,7 @@ type OmitNeverOfMatrix = OmitMatrixMethod[keyof OmitMatrixMethod]
 
 export const DOMMatrix: {
   prototype: DOMMatrix
-  new (init?: string | number[]): DOMMatrix
+  new(init?: string | number[]): DOMMatrix
   fromFloat32Array(array32: Float32Array): DOMMatrix
   fromFloat64Array(array64: Float64Array): DOMMatrix
   fromMatrix(other?: DOMMatrixInit): DOMMatrix
@@ -448,7 +449,7 @@ export interface DOMRect extends DOMRectReadOnly {
 
 export const DOMRect: {
   prototype: DOMRect
-  new (x?: number, y?: number, width?: number, height?: number): DOMRect
+  new(x?: number, y?: number, width?: number, height?: number): DOMRect
   fromRect(other?: DOMRectInit): DOMRect
 }
 
@@ -470,7 +471,7 @@ export interface DOMPoint extends DOMPointReadOnly {
 
 export const DOMPoint: {
   prototype: DOMPoint
-  new (x?: number, y?: number, z?: number, w?: number): DOMPoint
+  new(x?: number, y?: number, z?: number, w?: number): DOMPoint
   fromPoint(other?: DOMPointInit): DOMPoint
 }
 
@@ -708,6 +709,21 @@ export declare class FontKey {
   private readonly key: symbol
 }
 
+export interface FontVariationAxis {
+  /** OpenType tag as a 32-bit integer (e.g., 0x77676874 for 'wght') */
+  tag: number
+  /** Current value for this axis */
+  value: number
+  /** Minimum value for this axis */
+  min: number
+  /** Maximum value for this axis */
+  max: number
+  /** Default value for this axis */
+  def: number
+  /** Whether this axis should be hidden from UI */
+  hidden: boolean
+}
+
 interface IGlobalFonts {
   readonly families: { family: string; styles: { weight: number; width: string; style: string }[] }[]
   // return true if succeeded
@@ -717,6 +733,24 @@ interface IGlobalFonts {
   has(name: string): boolean
   loadFontsFromDir(path: string): number
   remove(key: FontKey): void
+  /**
+   * Get variation axes for a specific font instance
+   * @param familyName The font family name
+   * @param weight Font weight (100-900)
+   * @param width Font width/stretch value
+   * @param slant Font slant (0 = upright, 1 = italic, 2 = oblique)
+   * @returns Array of variation axes or empty array if not a variable font
+   */
+  getVariationAxes(familyName: string, weight: number, width: number, slant: number): FontVariationAxis[]
+  /**
+   * Check if a font has variable font capabilities
+   * @param familyName The font family name
+   * @param weight Font weight (100-900)
+   * @param width Font width/stretch value
+   * @param slant Font slant (0 = upright, 1 = italic, 2 = oblique)
+   * @returns true if the font is a variable font
+   */
+  hasVariations(familyName: string, weight: number, width: number, slant: number): boolean
 }
 
 export const GlobalFonts: IGlobalFonts

__test__/variable-fonts.spec.ts

@@ -1,5 +1,7 @@
 #include <assert.h>
 #include <math.h>
+#include <algorithm>
+#include <vector>
 
 #include "skia_c.hpp"
 #define SURFACE_CAST reinterpret_cast<SkSurface*>(c_surface)
@@ -448,7 +450,9 @@ void skiac_canvas_get_line_metrics_or_draw_text(
     float world_spacing,
     skiac_paint* c_paint,
     skiac_canvas* c_canvas,
-    skiac_line_metrics* c_line_metrics) {
+    skiac_line_metrics* c_line_metrics,
+    const skiac_font_variation* variations,
+    int variations_count) {
   auto font_collection = c_collection->collection;
   auto font_style = SkFontStyle(weight, stretch, (SkFontStyle::Slant)slant);
   auto text_direction = (TextDirection)direction;
@@ -465,6 +469,21 @@ void skiac_canvas_get_line_metrics_or_draw_text(
   text_style.setLetterSpacing(letter_spacing);
   text_style.setHeight(1);
   text_style.setFontStyle(font_style);
+
+  std::vector<SkFontArguments::VariationPosition::Coordinate> coords;
+
+  // Apply variable font variations if provided
+  if (variations && variations_count > 0) {
+    coords.reserve(variations_count);
+    for (int i = 0; i < variations_count; i++) {
+      coords.push_back({variations[i].tag, variations[i].value});
+    }
+    SkFontArguments font_args;
+    font_args.setVariationDesignPosition(
+        {coords.data(), static_cast<int>(coords.size())});
+    text_style.setFontArguments(std::make_optional(font_args));
+  }
+
   text_style.setForegroundColor(*PAINT_CAST);
   text_style.setTextBaseline(TextBaseline::kAlphabetic);
   StrutStyle struct_style;
@@ -1739,6 +1758,86 @@ void skiac_font_collection_destroy(skiac_font_collection* c_font_collection) {
   delete c_font_collection;
 }
 
+// Variable Fonts
+int skiac_typeface_get_variation_design_position(
+    skiac_font_collection* c_font_collection,
+    const char* family_name,
+    int weight,
+    int width,
+    int slant,
+    skiac_variable_font_axis* axes,
+    int max_axis_count) {
+  if (!c_font_collection || !family_name || !axes || max_axis_count <= 0) {
+    return 0;
+  }
+
+  auto font_style = SkFontStyle(weight, width, (SkFontStyle::Slant)slant);
+  auto typeface =
+      c_font_collection->assets->matchFamilyStyle(family_name, font_style);
+  if (!typeface) {
+    return 0;
+  }
+
+  // Use getVariationDesignParameters to get the full axis details (min, max,
+  // def)
+  int axis_count = typeface->getVariationDesignParameters({});
+  if (axis_count <= 0) {
+    return 0;
+  }
+
+  std::vector<SkFontParameters::Variation::Axis> params(axis_count);
+  typeface->getVariationDesignParameters({params.data(), params.size()});
+
+  // Also get current position to fill in the 'value' field
+  int pos_count = typeface->getVariationDesignPosition({});
+  std::vector<SkFontArguments::VariationPosition::Coordinate> coords(pos_count);
+  if (pos_count > 0) {
+    typeface->getVariationDesignPosition({coords.data(), coords.size()});
+  }
+
+  int count = std::min(axis_count, max_axis_count);
+  for (int i = 0; i < count; i++) {
+    axes[i].tag = params[i].tag;
+    axes[i].min = params[i].min;
+    axes[i].max = params[i].max;
+    axes[i].def = params[i].def;
+    axes[i].hidden = params[i].isHidden();
+
+    // Default to 'def' value
+    axes[i].value = params[i].def;
+
+    // If we have a current value for this axis, use it
+    for (int j = 0; j < pos_count; j++) {
+      if (coords[j].axis == params[i].tag) {
+        axes[i].value = coords[j].value;
+        break;
+      }
+    }
+  }
+
+  return count;
+}
+
+bool skiac_font_has_variations(skiac_font_collection* c_font_collection,
+                               const char* family_name,
+                               int weight,
+                               int width,
+                               int slant) {
+  if (!c_font_collection || !family_name) {
+    return false;
+  }
+
+  auto font_style = SkFontStyle(weight, width, (SkFontStyle::Slant)slant);
+  auto typeface =
+      c_font_collection->assets->matchFamilyStyle(family_name, font_style);
+  if (!typeface) {
+    return false;
+  }
+
+  int axis_count = typeface->getVariationDesignParameters({});
+  return axis_count > 0;
+}
+
 // SkWStream
 void skiac_sk_w_stream_get(skiac_w_memory_stream* c_w_memory_stream,
                            skiac_sk_data* sk_data,

index.d.ts

@@ -258,6 +258,20 @@ struct skiac_pdf_metadata {
                           // high
 };
 
+struct skiac_variable_font_axis {
+  uint32_t tag;  // OpenType tag (e.g., 'wght', 'wdth', 'slnt', 'ital')
+  float value;   // Current value for this axis
+  float min;     // Minimum value for this axis
+  float max;     // Maximum value for this axis
+  float def;     // Default value for this axis
+  bool hidden;   // Whether this axis should be hidden
+};
+
+struct skiac_font_variation {
+  uint32_t tag;  // OpenType tag
+  float value;   // Value for this axis
+};
+
 extern "C" {
 void skiac_clear_all_cache();
 // Surface
@@ -380,7 +394,9 @@ void skiac_canvas_get_line_metrics_or_draw_text(
     float world_spacing,
     skiac_paint* c_paint,
     skiac_canvas* c_canvas,
-    skiac_line_metrics* c_line_metrics);
+    skiac_line_metrics* c_line_metrics,
+    const skiac_font_variation* variations,
+    int variations_count);
 void skiac_canvas_reset_transform(skiac_canvas* c_canvas);
 void skiac_canvas_clip_rect(skiac_canvas* c_canvas,
                             float x,
@@ -703,6 +719,21 @@ void skiac_font_collection_set_alias(skiac_font_collection* c_font_collection,
                                      const char* alias);
 void skiac_font_collection_destroy(skiac_font_collection* c_font_collection);
 
+// Variable Fonts
+int skiac_typeface_get_variation_design_position(
+    skiac_font_collection* c_font_collection,
+    const char* family_name,
+    int weight,
+    int width,
+    int slant,
+    skiac_variable_font_axis* axes,
+    int max_axis_count);
+bool skiac_font_has_variations(skiac_font_collection* c_font_collection,
+                               const char* family_name,
+                               int weight,
+                               int width,
+                               int slant);
+
 // SkDynamicMemoryWStream
 void skiac_sk_w_stream_get(skiac_w_memory_stream* c_w_memory_stream,
                            skiac_sk_data* sk_data,