fix: sdf kerning

src/core/text-rendering/SdfFontHandler.ts

@@ -550,22 +550,15 @@ export const measureText = (
   fontFamily: string,
   letterSpacing: number,
 ): number => {
-  if (text.length === 1) {
-    const char = text.charAt(0);
-    const codepoint = text.codePointAt(0);
-    if (codepoint === undefined) return 0;
-    if (hasZeroWidthSpace(char) === true) return 0;
+  if (text.length === 0) return 0;
 
-    const glyph = getGlyph(fontFamily, codepoint);
-    if (glyph === null) return 0;
-    return glyph.xadvance + letterSpacing;
-  }
   let width = 0;
-  let prevCodepoint = 0;
-  for (let i = 0; i < text.length; i++) {
-    const char = text.charAt(i);
-    const codepoint = text.codePointAt(i);
-    if (codepoint === undefined) continue;
+  let prevGlyphId = 0;
+  for (const char of text) {
+    const codepoint = char.codePointAt(0);
+    if (codepoint === undefined) {
+      continue;
+    }
 
     // Skip zero-width spaces in width calculations
     if (hasZeroWidthSpace(char)) {
@@ -578,13 +571,13 @@ export const measureText = (
     let advance = glyph.xadvance;
 
     // Add kerning if there's a previous character
-    if (prevCodepoint !== 0) {
-      const kerning = getKerning(fontFamily, prevCodepoint, codepoint);
+    if (prevGlyphId !== 0) {
+      const kerning = getKerning(fontFamily, prevGlyphId, glyph.id);
       advance += kerning;
     }
 
     width += advance + letterSpacing;
-    prevCodepoint = codepoint;
+    prevGlyphId = glyph.id;
   }
 
   return width;

src/core/text-rendering/SdfTextRenderer.ts

@@ -277,7 +277,6 @@ const generateTextLayout = (
   const fontFamily = props.fontFamily;
   const lineHeight = props.lineHeight;
   const metrics = SdfFontHandler.getFontMetrics(fontFamily, fontSize);
-  const verticalAlign = props.verticalAlign;
 
   const fontData = fontCache.data;
   const commonFontData = fontData.common;
@@ -323,14 +322,12 @@ const generateTextLayout = (
   for (let i = 0; i < lineAmount; i++) {
     const line = lines[i] as TextLineStruct;
     const textLine = line[0];
-    const textLineLength = textLine.length;
-    let prevCodepoint = 0;
+    let prevGlyphId = 0;
     currentX = line[3];
     //convert Y coord to vertex value
     currentY = line[4] / fontScale;
 
-    for (let j = 0; j < textLineLength; j++) {
-      const char = textLine.charAt(j);
+    for (const char of textLine) {
       if (hasZeroWidthSpace(char) === true) {
         continue;
       }
@@ -343,19 +340,17 @@ const generateTextLayout = (
       if (glyph === null) {
         continue;
       }
-      // Calculate advance with kerning (in design units)
-      let advance = glyph.xadvance;
+      // Kerning offsets the current glyph relative to the previous glyph.
+      let kerning = 0;
 
       // Add kerning if there's a previous character
-      if (prevCodepoint !== 0) {
-        const kerning = SdfFontHandler.getKerning(
-          fontFamily,
-          prevCodepoint,
-          codepoint,
-        );
-        advance += kerning;
+      if (prevGlyphId !== 0) {
+        kerning = SdfFontHandler.getKerning(fontFamily, prevGlyphId, glyph.id);
       }
 
+      // Apply pair kerning before placing this glyph.
+      currentX += kerning;
+
       // Calculate glyph position and atlas coordinates (in design units)
       const glyphLayout: GlyphLayout = {
         codepoint,
@@ -375,8 +370,8 @@ const generateTextLayout = (
       glyphs.push(glyphLayout);
 
       // Advance position with letter spacing (in design units)
-      currentX += advance + letterSpacing;
-      prevCodepoint = codepoint;
+      currentX += glyph.xadvance + letterSpacing;
+      prevGlyphId = glyph.id;
     }
     currentY += lineHeightPx;
   }