ugcinc-render 1.3.9 → 1.3.11

package/dist/index.d.mts

@@ -276,6 +276,8 @@ interface ImageEditorElement {
     lineHeight?: number;
     /** Letter spacing in pixels */
     letterSpacing?: number;
+    /** Enable font kerning for proper letter pair spacing (default: true) */
+    kerning?: boolean;
     /** Horizontal text alignment */
     textAlign?: TextAlignment;
     /** Vertical text alignment within bounds */
@@ -578,6 +580,8 @@ interface TextSegment extends VisualSegment {
     lineHeight?: number;
     /** Letter spacing in pixels (default: 0) */
     letterSpacing?: number;
+    /** Enable font kerning for proper letter pair spacing (default: true) */
+    kerning?: boolean;
     /** How text wraps to new lines (default: 'word') */
     textWrap?: TextWrap;
     /** How words break across lines (default: 'normal') */
@@ -989,6 +993,7 @@ declare const TEXT_DEFAULTS: {
     backgroundOpacity: number;
     autoWidth: boolean;
     boxAlign: "left";
+    kerning: boolean;
 };
 /**
  * Default values for image segments

package/dist/index.d.ts

@@ -276,6 +276,8 @@ interface ImageEditorElement {
     lineHeight?: number;
     /** Letter spacing in pixels */
     letterSpacing?: number;
+    /** Enable font kerning for proper letter pair spacing (default: true) */
+    kerning?: boolean;
     /** Horizontal text alignment */
     textAlign?: TextAlignment;
     /** Vertical text alignment within bounds */
@@ -578,6 +580,8 @@ interface TextSegment extends VisualSegment {
     lineHeight?: number;
     /** Letter spacing in pixels (default: 0) */
     letterSpacing?: number;
+    /** Enable font kerning for proper letter pair spacing (default: true) */
+    kerning?: boolean;
     /** How text wraps to new lines (default: 'word') */
     textWrap?: TextWrap;
     /** How words break across lines (default: 'normal') */
@@ -989,6 +993,7 @@ declare const TEXT_DEFAULTS: {
     backgroundOpacity: number;
     autoWidth: boolean;
     boxAlign: "left";
+    kerning: boolean;
 };
 /**
  * Default values for image segments

package/dist/index.js

@@ -96,7 +96,8 @@ var TEXT_DEFAULTS = {
   strokeWidth: 0,
   backgroundOpacity: 100,
   autoWidth: false,
-  boxAlign: "left"
+  boxAlign: "left",
+  kerning: true
 };
 var IMAGE_DEFAULTS = {
   fit: "cover",
@@ -290,6 +291,7 @@ function TextElement({ segment, scale = 1 }) {
   const verticalAlign = segment.verticalAlign ?? TEXT_DEFAULTS.verticalAlign;
   const lineHeight = segment.lineHeight ?? TEXT_DEFAULTS.lineHeight;
   const letterSpacing = (segment.letterSpacing ?? TEXT_DEFAULTS.letterSpacing) * scale;
+  const kerning = segment.kerning ?? TEXT_DEFAULTS.kerning;
   const strokeColor = segment.strokeColor;
   const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
   const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
@@ -354,8 +356,12 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // Enable font kerning for proper letter pair spacing
-    fontKerning: "normal",
+    // Font kerning for proper letter pair spacing (can be toggled)
+    fontKerning: kerning ? "normal" : "none",
+    // Enable OpenType font features for kerning
+    fontFeatureSettings: kerning ? '"kern" 1' : '"kern" 0',
+    // Text rendering optimization for better kerning
+    textRendering: kerning ? "optimizeLegibility" : "auto",
     // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
@@ -392,6 +398,7 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
+    kerning,
     alignment,
     paddingTop,
     paddingRight,

package/dist/index.mjs

@@ -35,7 +35,8 @@ var TEXT_DEFAULTS = {
   strokeWidth: 0,
   backgroundOpacity: 100,
   autoWidth: false,
-  boxAlign: "left"
+  boxAlign: "left",
+  kerning: true
 };
 var IMAGE_DEFAULTS = {
   fit: "cover",
@@ -229,6 +230,7 @@ function TextElement({ segment, scale = 1 }) {
   const verticalAlign = segment.verticalAlign ?? TEXT_DEFAULTS.verticalAlign;
   const lineHeight = segment.lineHeight ?? TEXT_DEFAULTS.lineHeight;
   const letterSpacing = (segment.letterSpacing ?? TEXT_DEFAULTS.letterSpacing) * scale;
+  const kerning = segment.kerning ?? TEXT_DEFAULTS.kerning;
   const strokeColor = segment.strokeColor;
   const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
   const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
@@ -293,8 +295,12 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // Enable font kerning for proper letter pair spacing
-    fontKerning: "normal",
+    // Font kerning for proper letter pair spacing (can be toggled)
+    fontKerning: kerning ? "normal" : "none",
+    // Enable OpenType font features for kerning
+    fontFeatureSettings: kerning ? '"kern" 1' : '"kern" 0',
+    // Text rendering optimization for better kerning
+    textRendering: kerning ? "optimizeLegibility" : "auto",
     // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
@@ -331,6 +337,7 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
+    kerning,
     alignment,
     paddingTop,
     paddingRight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",