@shotstack/shotstack-canvas 2.1.6 → 2.1.8

package/dist/entry.node.cjs

@@ -503,6 +503,7 @@ var canvasStyleSchema = import_zod2.richTextStyleSchema.extend({
   textDecoration: import_zod.z.enum(["none", "underline", "line-through"]).default("none"),
   gradient: canvasGradientSchema.optional()
 });
+var captionStyleSchema = canvasStyleSchema.omit({ wordSpacing: true });
 var canvasStrokeSchema = import_zod2.richTextStrokeSchema.extend({
   width: import_zod.z.number().min(0).default(0),
   color: import_zod.z.string().regex(HEX6).default("#000000"),
@@ -590,8 +591,7 @@ var richCaptionFontSchema = import_zod.z.object({
   weight: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).default("400"),
   color: import_zod.z.string().regex(HEX6).default("#ffffff"),
   opacity: import_zod.z.number().min(0).max(1).default(1),
-  background: import_zod.z.string().regex(HEX6).optional(),
-  textDecoration: import_zod.z.enum(["none", "underline", "line-through"]).default("none")
+  background: import_zod.z.string().regex(HEX6).optional()
 });
 var richCaptionActiveSchema = import_zod2.richCaptionActiveSchema.extend({
   font: import_zod.z.object({
@@ -629,7 +629,7 @@ var richCaptionAssetSchema = import_zod.z.object({
   src: import_zod.z.string().min(1).optional(),
   words: import_zod.z.array(wordTimingSchema).max(1e5).optional(),
   font: richCaptionFontSchema.optional(),
-  style: canvasStyleSchema.optional(),
+  style: captionStyleSchema.optional(),
   stroke: canvasStrokeSchema.optional(),
   shadow: canvasShadowSchema.optional(),
   background: canvasBackgroundSchema.optional(),
@@ -1539,7 +1539,7 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
+      const { textTransform, desc, fontSize, letterSpacing, wordSpacing = 0, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
@@ -1569,9 +1569,10 @@ var LayoutEngine = class {
             char = String.fromCodePoint(codePoint);
           }
         }
+        const isSpace = char === " ";
         return {
           id: g.g,
-          xAdvance: g.ax * scale + letterSpacing,
+          xAdvance: g.ax * scale + letterSpacing + (isSpace ? wordSpacing : 0),
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
@@ -2848,10 +2849,10 @@ var CaptionLayoutEngine = class {
     let spaceWidth;
     if (config.measureTextWidth) {
       const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
-      spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
+      spaceWidth = config.measureTextWidth(" ", fontString);
     } else {
       const spaceWord = await this.measureWord(" ", measurementConfig);
-      spaceWidth = spaceWord.width + config.wordSpacing;
+      spaceWidth = spaceWord.width;
     }
     const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
@@ -3423,7 +3424,7 @@ function extractCaptionBorder(asset) {
   };
 }
 function extractTextDecoration(asset, isActive) {
-  const baseDecoration = asset.font?.textDecoration;
+  const baseDecoration = asset.style?.textDecoration;
   const activeDecoration = asset.active?.font?.textDecoration;
   if (isActive && activeDecoration !== void 0) {
     return activeDecoration === "none" ? void 0 : activeDecoration;
@@ -5486,11 +5487,14 @@ function extractSvgDimensions(svgString) {
 }
 
 // src/core/canvas-text-measurer.ts
-async function createCanvasTextMeasurer() {
+async function createCanvasTextMeasurer(letterSpacing) {
   const canvasMod = await import("canvas");
   const canvas = canvasMod.createCanvas(1, 1);
   const ctx = canvas.getContext("2d");
   ctx.textBaseline = "alphabetic";
+  if (letterSpacing) {
+    ctx.letterSpacing = `${letterSpacing}px`;
+  }
   let lastFont = "";
   return (text, font) => {
     if (font !== lastFont) {
@@ -6269,7 +6273,7 @@ var RichCaptionRenderer = class {
     }
     const font = asset.font;
     const style = asset.style;
-    const measureTextWidth = await createCanvasTextMeasurer();
+    const measureTextWidth = await createCanvasTextMeasurer(style?.letterSpacing ?? 0);
     const fontSize = font?.size ?? 24;
     const lineHeight = style?.lineHeight ?? 1.2;
     const padding = extractCaptionPadding(asset);
@@ -6290,7 +6294,6 @@ var RichCaptionRenderer = class {
       fontFamily: font?.family ?? "Roboto",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
-      wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
       lineHeight,
       textTransform: style?.textTransform ?? "none",
       pauseThreshold: this.currentAsset?.pauseThreshold ?? 500,
@@ -6844,6 +6847,7 @@ async function createTextEngine(opts = {}) {
             text: asset.text,
             width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
+            wordSpacing: typeof asset.style?.wordSpacing === "number" ? asset.style.wordSpacing : 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,

package/dist/entry.node.d.cts

@@ -271,14 +271,8 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
-        wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
         letterSpacing: z.ZodDefault<z.ZodNumber>;
         lineHeight: z.ZodDefault<z.ZodNumber>;
         textTransform: z.ZodDefault<z.ZodEnum<{
@@ -413,14 +407,8 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
-        wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
         letterSpacing: z.ZodDefault<z.ZodNumber>;
         lineHeight: z.ZodDefault<z.ZodNumber>;
         textTransform: z.ZodDefault<z.ZodEnum<{
@@ -661,7 +649,6 @@ interface CaptionLayoutConfig {
     fontFamily: string;
     fontWeight: string | number;
     letterSpacing: number;
-    wordSpacing: number;
     lineHeight: number;
     textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
     pauseThreshold: number;

package/dist/entry.node.d.ts

@@ -271,14 +271,8 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
-        wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
         letterSpacing: z.ZodDefault<z.ZodNumber>;
         lineHeight: z.ZodDefault<z.ZodNumber>;
         textTransform: z.ZodDefault<z.ZodEnum<{
@@ -413,14 +407,8 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
-        wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
         letterSpacing: z.ZodDefault<z.ZodNumber>;
         lineHeight: z.ZodDefault<z.ZodNumber>;
         textTransform: z.ZodDefault<z.ZodEnum<{
@@ -661,7 +649,6 @@ interface CaptionLayoutConfig {
     fontFamily: string;
     fontWeight: string | number;
     letterSpacing: number;
-    wordSpacing: number;
     lineHeight: number;
     textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
     pauseThreshold: number;

package/dist/entry.node.js

@@ -100,6 +100,7 @@ var canvasStyleSchema = richTextStyleSchema.extend({
   textDecoration: z.enum(["none", "underline", "line-through"]).default("none"),
   gradient: canvasGradientSchema.optional()
 });
+var captionStyleSchema = canvasStyleSchema.omit({ wordSpacing: true });
 var canvasStrokeSchema = richTextStrokeSchema.extend({
   width: z.number().min(0).default(0),
   color: z.string().regex(HEX6).default("#000000"),
@@ -187,8 +188,7 @@ var richCaptionFontSchema = z.object({
   weight: z.union([z.string(), z.number()]).default("400"),
   color: z.string().regex(HEX6).default("#ffffff"),
   opacity: z.number().min(0).max(1).default(1),
-  background: z.string().regex(HEX6).optional(),
-  textDecoration: z.enum(["none", "underline", "line-through"]).default("none")
+  background: z.string().regex(HEX6).optional()
 });
 var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
   font: z.object({
@@ -226,7 +226,7 @@ var richCaptionAssetSchema = z.object({
   src: z.string().min(1).optional(),
   words: z.array(wordTimingSchema).max(1e5).optional(),
   font: richCaptionFontSchema.optional(),
-  style: canvasStyleSchema.optional(),
+  style: captionStyleSchema.optional(),
   stroke: canvasStrokeSchema.optional(),
   shadow: canvasShadowSchema.optional(),
   background: canvasBackgroundSchema.optional(),
@@ -1135,7 +1135,7 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
+      const { textTransform, desc, fontSize, letterSpacing, wordSpacing = 0, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
@@ -1165,9 +1165,10 @@ var LayoutEngine = class {
             char = String.fromCodePoint(codePoint);
           }
         }
+        const isSpace = char === " ";
         return {
           id: g.g,
-          xAdvance: g.ax * scale + letterSpacing,
+          xAdvance: g.ax * scale + letterSpacing + (isSpace ? wordSpacing : 0),
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
@@ -2444,10 +2445,10 @@ var CaptionLayoutEngine = class {
     let spaceWidth;
     if (config.measureTextWidth) {
       const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
-      spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
+      spaceWidth = config.measureTextWidth(" ", fontString);
     } else {
       const spaceWord = await this.measureWord(" ", measurementConfig);
-      spaceWidth = spaceWord.width + config.wordSpacing;
+      spaceWidth = spaceWord.width;
     }
     const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
@@ -3019,7 +3020,7 @@ function extractCaptionBorder(asset) {
   };
 }
 function extractTextDecoration(asset, isActive) {
-  const baseDecoration = asset.font?.textDecoration;
+  const baseDecoration = asset.style?.textDecoration;
   const activeDecoration = asset.active?.font?.textDecoration;
   if (isActive && activeDecoration !== void 0) {
     return activeDecoration === "none" ? void 0 : activeDecoration;
@@ -5082,11 +5083,14 @@ function extractSvgDimensions(svgString) {
 }
 
 // src/core/canvas-text-measurer.ts
-async function createCanvasTextMeasurer() {
+async function createCanvasTextMeasurer(letterSpacing) {
   const canvasMod = await import("canvas");
   const canvas = canvasMod.createCanvas(1, 1);
   const ctx = canvas.getContext("2d");
   ctx.textBaseline = "alphabetic";
+  if (letterSpacing) {
+    ctx.letterSpacing = `${letterSpacing}px`;
+  }
   let lastFont = "";
   return (text, font) => {
     if (font !== lastFont) {
@@ -5865,7 +5869,7 @@ var RichCaptionRenderer = class {
     }
     const font = asset.font;
     const style = asset.style;
-    const measureTextWidth = await createCanvasTextMeasurer();
+    const measureTextWidth = await createCanvasTextMeasurer(style?.letterSpacing ?? 0);
     const fontSize = font?.size ?? 24;
     const lineHeight = style?.lineHeight ?? 1.2;
     const padding = extractCaptionPadding(asset);
@@ -5886,7 +5890,6 @@ var RichCaptionRenderer = class {
       fontFamily: font?.family ?? "Roboto",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
-      wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
       lineHeight,
       textTransform: style?.textTransform ?? "none",
       pauseThreshold: this.currentAsset?.pauseThreshold ?? 500,
@@ -6440,6 +6443,7 @@ async function createTextEngine(opts = {}) {
             text: asset.text,
             width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
+            wordSpacing: typeof asset.style?.wordSpacing === "number" ? asset.style.wordSpacing : 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,

package/dist/entry.web.d.ts

@@ -271,14 +271,8 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
-        wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
         letterSpacing: z.ZodDefault<z.ZodNumber>;
         lineHeight: z.ZodDefault<z.ZodNumber>;
         textTransform: z.ZodDefault<z.ZodEnum<{
@@ -413,14 +407,8 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
-        wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
         letterSpacing: z.ZodDefault<z.ZodNumber>;
         lineHeight: z.ZodDefault<z.ZodNumber>;
         textTransform: z.ZodDefault<z.ZodEnum<{
@@ -661,7 +649,6 @@ interface CaptionLayoutConfig {
     fontFamily: string;
     fontWeight: string | number;
     letterSpacing: number;
-    wordSpacing: number;
     lineHeight: number;
     textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
     pauseThreshold: number;

package/dist/entry.web.js

@@ -17978,6 +17978,7 @@ var canvasStyleSchema = richTextStyleSchema.extend({
   textDecoration: external_exports.enum(["none", "underline", "line-through"]).default("none"),
   gradient: canvasGradientSchema.optional()
 });
+var captionStyleSchema = canvasStyleSchema.omit({ wordSpacing: true });
 var canvasStrokeSchema = richTextStrokeSchema.extend({
   width: external_exports.number().min(0).default(0),
   color: external_exports.string().regex(HEX6).default("#000000"),
@@ -18065,8 +18066,7 @@ var richCaptionFontSchema = external_exports.object({
   weight: external_exports.union([external_exports.string(), external_exports.number()]).default("400"),
   color: external_exports.string().regex(HEX6).default("#ffffff"),
   opacity: external_exports.number().min(0).max(1).default(1),
-  background: external_exports.string().regex(HEX6).optional(),
-  textDecoration: external_exports.enum(["none", "underline", "line-through"]).default("none")
+  background: external_exports.string().regex(HEX6).optional()
 });
 var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
   font: external_exports.object({
@@ -18104,7 +18104,7 @@ var richCaptionAssetSchema = external_exports.object({
   src: external_exports.string().min(1).optional(),
   words: external_exports.array(wordTimingSchema).max(1e5).optional(),
   font: richCaptionFontSchema.optional(),
-  style: canvasStyleSchema.optional(),
+  style: captionStyleSchema.optional(),
   stroke: canvasStrokeSchema.optional(),
   shadow: canvasShadowSchema.optional(),
   background: canvasBackgroundSchema.optional(),
@@ -33170,7 +33170,7 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
+      const { textTransform, desc, fontSize, letterSpacing, wordSpacing = 0, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
@@ -33200,9 +33200,10 @@ var LayoutEngine = class {
             char = String.fromCodePoint(codePoint);
           }
         }
+        const isSpace = char === " ";
         return {
           id: g.g,
-          xAdvance: g.ax * scale + letterSpacing,
+          xAdvance: g.ax * scale + letterSpacing + (isSpace ? wordSpacing : 0),
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
@@ -35037,10 +35038,10 @@ var CaptionLayoutEngine = class {
     let spaceWidth;
     if (config2.measureTextWidth) {
       const fontString = `${config2.fontWeight} ${config2.fontSize}px "${config2.fontFamily}"`;
-      spaceWidth = config2.measureTextWidth(" ", fontString) + config2.wordSpacing;
+      spaceWidth = config2.measureTextWidth(" ", fontString);
     } else {
       const spaceWord = await this.measureWord(" ", measurementConfig);
-      spaceWidth = spaceWord.width + config2.wordSpacing;
+      spaceWidth = spaceWord.width;
     }
     const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
@@ -35612,7 +35613,7 @@ function extractCaptionBorder(asset) {
   };
 }
 function extractTextDecoration(asset, isActive) {
-  const baseDecoration = asset.font?.textDecoration;
+  const baseDecoration = asset.style?.textDecoration;
   const activeDecoration = asset.active?.font?.textDecoration;
   if (isActive && activeDecoration !== void 0) {
     return activeDecoration === "none" ? void 0 : activeDecoration;
@@ -38115,6 +38116,7 @@ async function createTextEngine(opts = {}) {
             text: asset.text,
             width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
+            wordSpacing: typeof asset.style?.wordSpacing === "number" ? asset.style.wordSpacing : 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@shotstack/schemas": "1.9.1",
+    "@shotstack/schemas": "1.9.2",
     "bidi-js": "^1.0.3",
     "canvas": "npm:@napi-rs/canvas@^0.1.54",
     "ffmpeg-static": "^5.2.0",