@shotstack/shotstack-canvas 1.3.7 → 1.3.9

package/dist/entry.node.cjs

@@ -370,10 +370,14 @@ var FontRegistry = class _FontRegistry {
   fontkitFonts = /* @__PURE__ */ new Map();
   wasmBaseURL;
   initPromise;
+  emojiFallbackDesc;
   static fallbackLoader;
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  setEmojiFallback(desc) {
+    this.emojiFallbackDesc = desc;
+  }
   constructor(wasmBaseURL) {
     this.wasmBaseURL = wasmBaseURL;
   }
@@ -531,7 +535,8 @@ var FontRegistry = class _FontRegistry {
       if (fkFont) {
         const glyph = fkFont.getGlyph(glyphId);
         if (glyph && glyph.path) {
-          return glyph.path.toSVG();
+          const path2 = glyph.path.toSVG();
+          return path2 && path2 !== "" ? path2 : "M 0 0";
         }
       }
       const font = await this.getFont(desc);
@@ -587,6 +592,18 @@ var FontRegistry = class _FontRegistry {
 };
 
 // src/core/layout.ts
+function isEmoji(char) {
+  const code = char.codePointAt(0);
+  if (!code) return false;
+  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
+  code >= 9728 && code <= 9983 || // Miscellaneous symbols
+  code >= 9984 && code <= 10175 || // Dingbats
+  code >= 65024 && code <= 65039 || // Variation selectors
+  code >= 128512 && code <= 128591 || // Emoticons
+  code >= 128640 && code <= 128767 || // Transport and map symbols
+  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
+  code >= 129648 && code <= 129791;
+}
 var LayoutEngine = class {
   constructor(fonts) {
     this.fonts = fonts;
@@ -634,14 +651,43 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width } = params;
+      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
       }
       let shaped;
       try {
-        shaped = await this.shapeFull(input, desc);
+        if (!emojiFallback) {
+          shaped = await this.shapeFull(input, desc);
+        } else {
+          const chars = Array.from(input);
+          const runs = [];
+          let currentRun = { text: "", startIndex: 0, isEmoji: false };
+          for (let i = 0; i < chars.length; i++) {
+            const char = chars[i];
+            const charIsEmoji = isEmoji(char);
+            if (i === 0) {
+              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
+            } else if (currentRun.isEmoji === charIsEmoji) {
+              currentRun.text += char;
+            } else {
+              runs.push(currentRun);
+              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
+            }
+          }
+          if (currentRun.text) runs.push(currentRun);
+          shaped = [];
+          for (const run of runs) {
+            const runFont = run.isEmoji ? emojiFallback : desc;
+            const runShaped = await this.shapeFull(run.text, runFont);
+            for (const glyph of runShaped) {
+              glyph.cl += run.startIndex;
+              glyph.fontDesc = runFont;
+            }
+            shaped.push(...runShaped);
+          }
+        }
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -667,7 +713,9 @@ var LayoutEngine = class {
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
-          char
+          char,
+          fontDesc: g.fontDesc
+          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -777,18 +825,21 @@ async function buildDrawOps(p) {
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
   const scale = p.font.size / upem;
-  const blockHeight = p.lines[p.lines.length - 1].y;
+  const numLines = p.lines.length;
+  const lineHeightPx = p.font.size * p.style.lineHeight;
   let blockY;
   switch (p.align.vertical) {
     case "top":
       blockY = p.font.size;
       break;
     case "bottom":
-      blockY = p.textRect.height - blockHeight + p.font.size;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
       break;
     case "middle":
     default:
-      blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
+      const capHeightRatio = 0.35;
+      const visualOffset = p.font.size * capHeightRatio;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -809,9 +860,10 @@ async function buildDrawOps(p) {
         break;
     }
     let xCursor = lineX;
-    const baselineY = blockY + line.y - p.font.size;
+    const lineIndex = p.lines.indexOf(line);
+    const baselineY = blockY + lineIndex * lineHeightPx;
     for (const glyph of line.glyphs) {
-      const path = await p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -2075,6 +2127,13 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
         let lines;
         try {
+          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          let emojiAvailable = false;
+          try {
+            await fonts.getFace(emojiDesc);
+            emojiAvailable = true;
+          } catch {
+          }
           lines = await layout.layout({
             text: asset.text,
             width: asset.width ?? width,
@@ -2082,7 +2141,8 @@ async function createTextEngine(opts = {}) {
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
-            textTransform: asset.style?.textTransform ?? "none"
+            textTransform: asset.style?.textTransform ?? "none",
+            emojiFallback: emojiAvailable ? emojiDesc : void 0
           });
         } catch (err) {
           throw new Error(
@@ -2124,8 +2184,8 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
-            glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-            getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+            glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });
         } catch (err) {
           throw new Error(

package/dist/entry.node.d.cts

@@ -121,6 +121,11 @@ type Glyph = {
     yOffset: number;
     cluster: number;
     char?: string;
+    fontDesc?: {
+        family: string;
+        weight?: string | number;
+        style?: string;
+    };
 };
 type ShapedLine = {
     glyphs: Glyph[];

package/dist/entry.node.d.ts

@@ -121,6 +121,11 @@ type Glyph = {
     yOffset: number;
     cluster: number;
     char?: string;
+    fontDesc?: {
+        family: string;
+        weight?: string | number;
+        style?: string;
+    };
 };
 type ShapedLine = {
     glyphs: Glyph[];

package/dist/entry.node.js

@@ -331,10 +331,14 @@ var FontRegistry = class _FontRegistry {
   fontkitFonts = /* @__PURE__ */ new Map();
   wasmBaseURL;
   initPromise;
+  emojiFallbackDesc;
   static fallbackLoader;
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  setEmojiFallback(desc) {
+    this.emojiFallbackDesc = desc;
+  }
   constructor(wasmBaseURL) {
     this.wasmBaseURL = wasmBaseURL;
   }
@@ -492,7 +496,8 @@ var FontRegistry = class _FontRegistry {
       if (fkFont) {
         const glyph = fkFont.getGlyph(glyphId);
         if (glyph && glyph.path) {
-          return glyph.path.toSVG();
+          const path2 = glyph.path.toSVG();
+          return path2 && path2 !== "" ? path2 : "M 0 0";
         }
       }
       const font = await this.getFont(desc);
@@ -548,6 +553,18 @@ var FontRegistry = class _FontRegistry {
 };
 
 // src/core/layout.ts
+function isEmoji(char) {
+  const code = char.codePointAt(0);
+  if (!code) return false;
+  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
+  code >= 9728 && code <= 9983 || // Miscellaneous symbols
+  code >= 9984 && code <= 10175 || // Dingbats
+  code >= 65024 && code <= 65039 || // Variation selectors
+  code >= 128512 && code <= 128591 || // Emoticons
+  code >= 128640 && code <= 128767 || // Transport and map symbols
+  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
+  code >= 129648 && code <= 129791;
+}
 var LayoutEngine = class {
   constructor(fonts) {
     this.fonts = fonts;
@@ -595,14 +612,43 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width } = params;
+      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
       }
       let shaped;
       try {
-        shaped = await this.shapeFull(input, desc);
+        if (!emojiFallback) {
+          shaped = await this.shapeFull(input, desc);
+        } else {
+          const chars = Array.from(input);
+          const runs = [];
+          let currentRun = { text: "", startIndex: 0, isEmoji: false };
+          for (let i = 0; i < chars.length; i++) {
+            const char = chars[i];
+            const charIsEmoji = isEmoji(char);
+            if (i === 0) {
+              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
+            } else if (currentRun.isEmoji === charIsEmoji) {
+              currentRun.text += char;
+            } else {
+              runs.push(currentRun);
+              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
+            }
+          }
+          if (currentRun.text) runs.push(currentRun);
+          shaped = [];
+          for (const run of runs) {
+            const runFont = run.isEmoji ? emojiFallback : desc;
+            const runShaped = await this.shapeFull(run.text, runFont);
+            for (const glyph of runShaped) {
+              glyph.cl += run.startIndex;
+              glyph.fontDesc = runFont;
+            }
+            shaped.push(...runShaped);
+          }
+        }
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -628,7 +674,9 @@ var LayoutEngine = class {
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
-          char
+          char,
+          fontDesc: g.fontDesc
+          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -738,18 +786,21 @@ async function buildDrawOps(p) {
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
   const scale = p.font.size / upem;
-  const blockHeight = p.lines[p.lines.length - 1].y;
+  const numLines = p.lines.length;
+  const lineHeightPx = p.font.size * p.style.lineHeight;
   let blockY;
   switch (p.align.vertical) {
     case "top":
       blockY = p.font.size;
       break;
     case "bottom":
-      blockY = p.textRect.height - blockHeight + p.font.size;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
       break;
     case "middle":
     default:
-      blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
+      const capHeightRatio = 0.35;
+      const visualOffset = p.font.size * capHeightRatio;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -770,9 +821,10 @@ async function buildDrawOps(p) {
         break;
     }
     let xCursor = lineX;
-    const baselineY = blockY + line.y - p.font.size;
+    const lineIndex = p.lines.indexOf(line);
+    const baselineY = blockY + lineIndex * lineHeightPx;
     for (const glyph of line.glyphs) {
-      const path = await p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -2036,6 +2088,13 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
         let lines;
         try {
+          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          let emojiAvailable = false;
+          try {
+            await fonts.getFace(emojiDesc);
+            emojiAvailable = true;
+          } catch {
+          }
           lines = await layout.layout({
             text: asset.text,
             width: asset.width ?? width,
@@ -2043,7 +2102,8 @@ async function createTextEngine(opts = {}) {
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
-            textTransform: asset.style?.textTransform ?? "none"
+            textTransform: asset.style?.textTransform ?? "none",
+            emojiFallback: emojiAvailable ? emojiDesc : void 0
           });
         } catch (err) {
           throw new Error(
@@ -2085,8 +2145,8 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
-            glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-            getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+            glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });
         } catch (err) {
           throw new Error(

package/dist/entry.web.d.ts

@@ -121,6 +121,11 @@ type Glyph = {
     yOffset: number;
     cluster: number;
     char?: string;
+    fontDesc?: {
+        family: string;
+        weight?: string | number;
+        style?: string;
+    };
 };
 type ShapedLine = {
     glyphs: Glyph[];

package/dist/entry.web.js

@@ -336,11 +336,15 @@ var _FontRegistry = class _FontRegistry {
     __publicField(this, "fontkitFonts", /* @__PURE__ */ new Map());
     __publicField(this, "wasmBaseURL");
     __publicField(this, "initPromise");
+    __publicField(this, "emojiFallbackDesc");
     this.wasmBaseURL = wasmBaseURL;
   }
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  setEmojiFallback(desc) {
+    this.emojiFallbackDesc = desc;
+  }
   async init() {
     if (this.initPromise) {
       await this.initPromise;
@@ -495,7 +499,8 @@ var _FontRegistry = class _FontRegistry {
       if (fkFont) {
         const glyph = fkFont.getGlyph(glyphId);
         if (glyph && glyph.path) {
-          return glyph.path.toSVG();
+          const path2 = glyph.path.toSVG();
+          return path2 && path2 !== "" ? path2 : "M 0 0";
         }
       }
       const font = await this.getFont(desc);
@@ -553,6 +558,18 @@ __publicField(_FontRegistry, "fallbackLoader");
 var FontRegistry = _FontRegistry;
 
 // src/core/layout.ts
+function isEmoji(char) {
+  const code = char.codePointAt(0);
+  if (!code) return false;
+  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
+  code >= 9728 && code <= 9983 || // Miscellaneous symbols
+  code >= 9984 && code <= 10175 || // Dingbats
+  code >= 65024 && code <= 65039 || // Variation selectors
+  code >= 128512 && code <= 128591 || // Emoticons
+  code >= 128640 && code <= 128767 || // Transport and map symbols
+  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
+  code >= 129648 && code <= 129791;
+}
 var LayoutEngine = class {
   constructor(fonts) {
     this.fonts = fonts;
@@ -600,14 +617,43 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width } = params;
+      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
       }
       let shaped;
       try {
-        shaped = await this.shapeFull(input, desc);
+        if (!emojiFallback) {
+          shaped = await this.shapeFull(input, desc);
+        } else {
+          const chars = Array.from(input);
+          const runs = [];
+          let currentRun = { text: "", startIndex: 0, isEmoji: false };
+          for (let i = 0; i < chars.length; i++) {
+            const char = chars[i];
+            const charIsEmoji = isEmoji(char);
+            if (i === 0) {
+              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
+            } else if (currentRun.isEmoji === charIsEmoji) {
+              currentRun.text += char;
+            } else {
+              runs.push(currentRun);
+              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
+            }
+          }
+          if (currentRun.text) runs.push(currentRun);
+          shaped = [];
+          for (const run of runs) {
+            const runFont = run.isEmoji ? emojiFallback : desc;
+            const runShaped = await this.shapeFull(run.text, runFont);
+            for (const glyph of runShaped) {
+              glyph.cl += run.startIndex;
+              glyph.fontDesc = runFont;
+            }
+            shaped.push(...runShaped);
+          }
+        }
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -633,7 +679,9 @@ var LayoutEngine = class {
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
-          char
+          char,
+          fontDesc: g.fontDesc
+          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -743,18 +791,21 @@ async function buildDrawOps(p) {
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
   const scale = p.font.size / upem;
-  const blockHeight = p.lines[p.lines.length - 1].y;
+  const numLines = p.lines.length;
+  const lineHeightPx = p.font.size * p.style.lineHeight;
   let blockY;
   switch (p.align.vertical) {
     case "top":
       blockY = p.font.size;
       break;
     case "bottom":
-      blockY = p.textRect.height - blockHeight + p.font.size;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
       break;
     case "middle":
     default:
-      blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
+      const capHeightRatio = 0.35;
+      const visualOffset = p.font.size * capHeightRatio;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -775,9 +826,10 @@ async function buildDrawOps(p) {
         break;
     }
     let xCursor = lineX;
-    const baselineY = blockY + line.y - p.font.size;
+    const lineIndex = p.lines.indexOf(line);
+    const baselineY = blockY + lineIndex * lineHeightPx;
     for (const glyph of line.glyphs) {
-      const path = await p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -1757,6 +1809,13 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
         let lines;
         try {
+          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          let emojiAvailable = false;
+          try {
+            await fonts.getFace(emojiDesc);
+            emojiAvailable = true;
+          } catch {
+          }
           lines = await layout.layout({
             text: asset.text,
             width: asset.width ?? width,
@@ -1764,7 +1823,8 @@ async function createTextEngine(opts = {}) {
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
-            textTransform: asset.style?.textTransform ?? "none"
+            textTransform: asset.style?.textTransform ?? "none",
+            emojiFallback: emojiAvailable ? emojiDesc : void 0
           });
         } catch (err) {
           throw new Error(
@@ -1806,8 +1866,8 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
-            glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-            getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+            glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });
         } catch (err) {
           throw new Error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",