Improve font measurement and add multilingual support

Author: devyhan

.gitignore

@@ -17,3 +17,4 @@ Goldens/output/
 .vscode/
 .idea/
 .claude/
+dist-wasm

Examples/BasicApp/Package.resolved

@@ -11,7 +11,7 @@ const OP_DRAW_TEXT = 7;
 const OP_RETAINED_BEGIN = 8;
 const OP_RETAINED_END = 9;
 
-export function play(ck, buffer, canvas, typeface) {
+export function play(ck, buffer, canvas, ...typefaces) {
   const view = new DataView(buffer);
   let offset = 0;
 
@@ -89,28 +89,55 @@ export function play(ck, buffer, canvas, typeface) {
         const x = readFloat();
         const y = readFloat();
         const fontSize = readFloat();
-        readInt32(); // fontWeight (unused)
+        const fontWeight = readInt32(); // fontWeight
         const color = readUint32();
         const boundsWidth = readFloat();
         // fontFamily (4-byte length + UTF-8 bytes, length 0 = nil)
         const familyLen = readInt32();
+        let fontFamily = null;
         if (familyLen > 0) {
+          const familyBytes = new Uint8Array(buffer, offset, familyLen);
           offset += familyLen;
+          fontFamily = new TextDecoder().decode(familyBytes);
         }
-        readInt32(); // lineLimit
+        const lineLimit = readInt32();
         readInt32(); // lineBreakMode
-        setColor(color);
+        
+        // Font fallback management:
+        const fontProvider = ck.TypefaceFontProvider.Make();
+        for (const tf of typefaces) {
+          fontProvider.registerTypeface(tf, ""); // Registering with empty string allows them to be used as fallbacks
+        }
+        
+        const style = new ck.ParagraphStyle({
+          textStyle: {
+            color: ck.Color4f(
+              ((color >> 16) & 0xFF) / 255,
+              ((color >> 8) & 0xFF) / 255,
+              (color & 0xFF) / 255,
+              ((color >>> 24) & 0xFF) / 255
+            ),
+            fontSize: fontSize,
+            fontFamilies: fontFamily ? [fontFamily, 'sans-serif'] : ['sans-serif'],
+          },
+          maxLines: lineLimit > 0 ? lineLimit : undefined,
+          ellipsis: lineLimit > 0 ? '...' : undefined,
+        });
+
+        const builder = ck.ParagraphBuilder.MakeFromFontProvider(style, fontProvider);
+        builder.addText(text);
+        const paragraph = builder.build();
+        paragraph.layout(boundsWidth > 0 ? boundsWidth : 100000);
 
-        const font = new ck.Font(typeface, fontSize);
         let drawX = x;
         if (boundsWidth > 0) {
-          const ids = font.getGlyphIDs(text);
-          const widths = font.getGlyphWidths(ids);
-          const actualWidth = widths.reduce((sum, w) => sum + w, 0);
-          drawX = (boundsWidth - actualWidth) / 2;
+          drawX = (boundsWidth - paragraph.getMaxIntrinsicWidth()) / 2;
         }
-        canvas.drawText(text, drawX, y, paint, font);
-        font.delete();
+        canvas.drawParagraph(paragraph, drawX, y);
+        
+        paragraph.delete();
+        builder.delete();
+        fontProvider.delete();
         break;
       }
       case OP_RETAINED_BEGIN:

Examples/BasicApp/WebHost/displayListPlayer.mjs

@@ -35,19 +35,68 @@
     const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
     const skCanvas = surface.getCanvas();
 
-    // Load default font for text rendering
-    const fontResp = await fetch("https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf");
-    const fontData = await fontResp.arrayBuffer();
-    const typeface = CanvasKit.Typeface.MakeFreeTypeFaceFromData(fontData);
+    // Use a secondary canvas for measurement to avoid flushing the main surface
+    const offscreenCanvas = document.createElement("canvas");
+    const ctx = offscreenCanvas.getContext("2d");
+
+    // Load multiple fonts for fallback support (English and Korean)
+    const [robotoResp, notoResp] = await Promise.all([
+      fetch("https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf"),
+      fetch("https://fonts.gstatic.com/s/notosanskr/v36/PBy7FmXiEBPT4ITM6vY_mS_v.ttf")
+    ]);
+    const [robotoData, notoData] = await Promise.all([
+      robotoResp.arrayBuffer(),
+      notoResp.arrayBuffer()
+    ]);
+    
+    const typeface = CanvasKit.Typeface.MakeFreeTypeFaceFromData(robotoData);
+    const notoTypeface = CanvasKit.Typeface.MakeFreeTypeFaceFromData(notoData);
 
     // Set up the bridge that Swift's WebBridge.start() expects
     window.skiaUI = {
       viewport: { width: canvas.width, height: canvas.height },
+      measureText(text, fontSize, fontWeight, fontFamily, maxWidth) {
+        // Map common family names to the custom font if they aren't available in browser
+        const fontStr = `${fontWeight} ${fontSize}px ${fontFamily ? fontFamily + ',' : ''} "Noto Sans KR", sans-serif`;
+        ctx.font = fontStr;
+        
+        if (maxWidth > 0) {
+          // Multiline measurement
+          const words = text.split(" ");
+          let lines = 0;
+          let currentLine = "";
+          let maxMeasuredWidth = 0;
+          
+          for (let n = 0; n < words.length; n++) {
+            const testLine = currentLine + words[n] + " ";
+            const metrics = ctx.measureText(testLine);
+            const testWidth = metrics.width;
+            if (testWidth > maxWidth && n > 0) {
+              lines++;
+              currentLine = words[n] + " ";
+            } else {
+              currentLine = testLine;
+              maxMeasuredWidth = Math.max(maxMeasuredWidth, testWidth);
+            }
+          }
+          lines++;
+          return {
+            width: maxMeasuredWidth,
+            height: lines * (fontSize * 1.2)
+          };
+        } else {
+          const metrics = ctx.measureText(text);
+          return {
+            width: metrics.width,
+            height: fontSize * 1.2
+          };
+        }
+      },
       submitDisplayList(bytes) {
         try {
           const buf = bytes.buffer ?? bytes;
           skCanvas.clear(CanvasKit.Color4f(1.0, 1.0, 1.0, 1.0));
-          play(CanvasKit, buf, skCanvas, typeface);
+          play(CanvasKit, buf, skCanvas, typeface, notoTypeface);
           surface.flush();
         } catch (err) {
           console.error("[SkiaUI] submitDisplayList error:", err);

Examples/BasicApp/WebHost/index.html

@@ -61,7 +61,7 @@ public struct DisplayListBuilder: Sendable {
 
         // Draw text
         if let text = node.textContent {
-            list.append(.drawText(text: text.text, x: 0, y: text.fontSize, fontSize: text.fontSize, fontWeight: text.fontWeight, color: text.color, boundsWidth: w, fontFamily: text.fontFamily, lineLimit: text.lineLimit, lineBreakMode: text.lineBreakMode))
+            list.append(.drawText(text: text.text, x: 0, y: 0, fontSize: text.fontSize, fontWeight: text.fontWeight, color: text.color, boundsWidth: w, fontFamily: text.fontFamily, lineLimit: text.lineLimit, lineBreakMode: text.lineBreakMode))
         }
 
         // Draw children

Sources/SkiaUIRenderTree/DisplayListBuilder.swift

@@ -14,7 +14,7 @@ public final class RootHost: @unchecked Sendable {
     private let context: RenderContext
     private var currentElement: Element?
     private var currentLayout: LayoutNode?
-    private let layoutEngine = LayoutEngine()
+    private let layoutEngine: LayoutEngine
     private let reconciler = Reconciler()
     private var previousElement: Element?
     private var previousDisplayListBytes: [UInt8]?
@@ -29,8 +29,17 @@ public final class RootHost: @unchecked Sendable {
     private var onDisplayList: (([UInt8]) -> Void)?
     private let attributeGraph = AttributeGraph()
 
-    public init(context: RenderContext = .default) {
+    public init(context: RenderContext = .default, textMeasurer: (any TextMeasurer)? = nil) {
         self.context = context
+        
+        let measurer: any TextMeasurer = textMeasurer ?? {
+            #if canImport(CoreText)
+            return CoreTextMeasurer()
+            #else
+            return EstimatedTextMeasurer()
+            #endif
+        }()
+        self.layoutEngine = LayoutEngine(textMeasurer: measurer)
     }
 
     public func setViewport(width: Float, height: Float) {

Sources/SkiaUIRuntime/RootHost.swift

@@ -12,7 +12,7 @@ public struct WebBridge {
     public static func start<A: App>(_ appType: A.Type) {
         let context = RenderContext()
         nonisolated(unsafe) let app = A()
-        let host = RootHost(context: context)
+        let host = RootHost(context: context, textMeasurer: WebTextMeasurer())
 
         let skiaUI = JSObject.global.skiaUI.object!
 

Sources/SkiaUIWebBridge/WebBridge.swift

@@ -0,0 +1,37 @@
+// WebTextMeasurer.swift – SkiaUIWebBridge module
+// JavaScript-based text measurement for accurate sizing in Wasm/Browser.
+
+import SkiaUILayout
+
+#if canImport(JavaScriptKit)
+import JavaScriptKit
+
+public struct WebTextMeasurer: TextMeasurer, @unchecked Sendable {
+    private let skiaUI: JSObject
+
+    public init() {
+        self.skiaUI = JSObject.global.skiaUI.object!
+    }
+
+    public func measure(text: String, fontSize: Float, fontWeight: Int, fontFamily: String?, maxWidth: Float?, lineLimit: Int?) -> TextMeasurement {
+        guard let measureFunc = skiaUI.measureText.function else {
+            // Fallback if JS side didn't provide measureText
+            return EstimatedTextMeasurer().measure(text: text, fontSize: fontSize, fontWeight: fontWeight, fontFamily: fontFamily, maxWidth: maxWidth, lineLimit: lineLimit)
+        }
+
+        let result = measureFunc(
+            text.jsValue,
+            fontSize.jsValue,
+            fontWeight.jsValue,
+            (fontFamily ?? "").jsValue,
+            (maxWidth ?? -1).jsValue,
+            (lineLimit ?? 0).jsValue
+        )
+
+        return TextMeasurement(
+            width: Float(result.width.number ?? 0),
+            height: Float(result.height.number ?? 0)
+        )
+    }
+}
+#endif

Sources/SkiaUIWebBridge/WebTextMeasurer.swift

@@ -42,5 +42,24 @@ extension AllGoldenTests {
             named: "multipleTextsInVStack"
         )
     }
+
+    @Test func multilingualText() {
+        assertImageSnapshot(
+            VStack(spacing: 8) {
+                Text("Hello World (English)")
+                Text("안녕하세요 (Korean)")
+                Text("こんにちは (Japanese)")
+                Text("你好 (Chinese)")
+                Text("नमस्ते (Hindi)")
+                Text("สวัสดี (Thai)")
+                Text("مرحبا (Arabic - RTL)")
+                Text("Emojis: 🚀 🌍 🌈 🍎")
+                Text("Mixed: 한글, 中文, 日本語, 123").fontSize(14)
+            },
+            named: "multilingualText",
+            width: 400,
+            height: 350
+        )
+    }
 }
 }