@lightningjs/renderer 2.3.2 → 2.5.0

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -34,7 +34,7 @@ import {
   getWebGlExtensions,
 } from './internal/RendererUtils.js';
 import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
-import { Texture } from '../../textures/Texture.js';
+import { Texture, TextureType } from '../../textures/Texture.js';
 import { ColorTexture } from '../../textures/ColorTexture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCoreCtxSubTexture } from './WebGlCoreCtxSubTexture.js';
@@ -231,232 +231,220 @@ export class WebGlCoreRenderer extends CoreRenderer {
    */
   addQuad(params: QuadOptions) {
     const { fQuadBuffer, uiQuadBuffer } = this;
-    const {
-      width,
-      height,
-      colorTl,
-      colorTr,
-      colorBl,
-      colorBr,
-      textureOptions,
-      shader,
-      shaderProps,
-      alpha,
-      clippingRect,
-      tx,
-      ty,
-      ta,
-      tb,
-      tc,
-      td,
-      renderCoords,
-      rtt: renderToTexture,
-      parentHasRenderTexture,
-      framebufferDimensions,
-    } = params;
-    let { texture } = params;
+    let texture = params.texture || this.defaultTexture;
 
     /**
      * If the shader props contain any automatic properties, update it with the
      * current dimensions and or alpha that will be used to render the quad.
      */
-    if (shaderProps !== null) {
-      if (hasOwn(shaderProps, '$dimensions')) {
-        const dimensions = shaderProps.$dimensions as Dimensions;
-        dimensions.width = width;
-        dimensions.height = height;
+    if (params.shaderProps !== null) {
+      if (hasOwn(params.shaderProps, '$dimensions') == true) {
+        const dimensions = params.shaderProps.$dimensions as Dimensions;
+        dimensions.width = params.width;
+        dimensions.height = params.height;
       }
 
-      if (hasOwn(shaderProps, '$alpha')) {
-        shaderProps.$alpha = alpha;
+      if (hasOwn(params.shaderProps, '$alpha') === true) {
+        params.shaderProps.$alpha = params.alpha;
       }
     }
 
-    texture = texture ?? this.defaultTexture;
-    assertTruthy(texture instanceof Texture, 'Invalid texture type');
+    assertTruthy(texture.ctxTexture !== undefined, 'Invalid texture type');
 
     let { curBufferIdx: bufferIdx, curRenderOp } = this;
-    const targetDims = {
-      width,
-      height,
-    };
-    const targetShader = shader || this.defaultShader;
-    assertTruthy(targetShader instanceof WebGlCoreShader);
+    const targetDims = { width: -1, height: -1 };
+    targetDims.width = params.width;
+    targetDims.height = params.height;
+
+    const targetShader =
+      (params.shader as WebGlCoreShader) || this.defaultShader;
+    assertTruthy(
+      targetShader.getUniformLocation !== undefined,
+      'Invalid WebGL shader',
+    );
 
-    if (!this.reuseRenderOp(params)) {
+    if (this.reuseRenderOp(params) === false) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       this.newRenderOp(
         targetShader,
-        shaderProps as Record<string, unknown>,
-        alpha,
+        params.shaderProps as Record<string, unknown>,
+        params.alpha,
         targetDims,
-        clippingRect,
+        params.clippingRect,
         bufferIdx,
-        renderToTexture,
-        parentHasRenderTexture,
-        framebufferDimensions,
+        params.rtt,
+        params.parentHasRenderTexture,
+        params.framebufferDimensions,
       );
       curRenderOp = this.curRenderOp;
       assertTruthy(curRenderOp);
     }
 
-    const flipX = textureOptions?.flipX ?? false;
-    let flipY = textureOptions?.flipY ?? false;
-
-    // always flip flipY for render textures
-    if (texture instanceof RenderTexture) {
-      flipY = !flipY;
-    }
-
     let texCoordX1 = 0;
     let texCoordY1 = 0;
     let texCoordX2 = 1;
     let texCoordY2 = 1;
 
-    if (texture instanceof SubTexture) {
-      const { x: tx, y: ty, width: tw, height: th } = texture.props;
-      const { width: parentW = 0, height: parentH = 0 } = texture.parentTexture
-        .dimensions || { width: 0, height: 0 };
+    if (texture.type === TextureType.subTexture) {
+      const {
+        x: tx,
+        y: ty,
+        width: tw,
+        height: th,
+      } = (texture as SubTexture).props;
+      const { width: parentW = 0, height: parentH = 0 } = (
+        texture as SubTexture
+      ).parentTexture.dimensions || { width: 0, height: 0 };
       texCoordX1 = tx / parentW;
       texCoordX2 = texCoordX1 + tw / parentW;
       texCoordY1 = ty / parentH;
       texCoordY2 = texCoordY1 + th / parentH;
-      texture = texture.parentTexture;
+      texture = (texture as SubTexture).parentTexture;
     }
 
-    const resizeMode = textureOptions?.resizeMode ?? false;
-
-    if (texture instanceof ImageTexture) {
-      if (resizeMode && texture.dimensions) {
-        const { width: tw, height: th } = texture.dimensions;
-        if (resizeMode.type === 'cover') {
-          const scaleX = width / tw;
-          const scaleY = height / th;
-          const scale = Math.max(scaleX, scaleY);
-          const precision = 1 / scale;
-          // Determine based on width
-          if (scale && scaleX && scaleX < scale) {
-            const desiredSize = precision * width;
-            texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
-            texCoordX2 = texCoordX1 + desiredSize / tw;
-          }
-          // Determine based on height
-          if (scale && scaleY && scaleY < scale) {
-            const desiredSize = precision * height;
-            texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
-            texCoordY2 = texCoordY1 + desiredSize / th;
-          }
+    if (
+      texture.type === TextureType.image &&
+      params.textureOptions !== null &&
+      params.textureOptions.resizeMode !== undefined &&
+      texture.dimensions !== null
+    ) {
+      const resizeMode = params.textureOptions.resizeMode;
+      const { width: tw, height: th } = texture.dimensions;
+      if (resizeMode.type === 'cover') {
+        const scaleX = params.width / tw;
+        const scaleY = params.height / th;
+        const scale = Math.max(scaleX, scaleY);
+        const precision = 1 / scale;
+        // Determine based on width
+        if (scale && scaleX && scaleX < scale) {
+          const desiredSize = precision * params.width;
+          texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
+          texCoordX2 = texCoordX1 + desiredSize / tw;
+        }
+        // Determine based on height
+        if (scale && scaleY && scaleY < scale) {
+          const desiredSize = precision * params.height;
+          texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
+          texCoordY2 = texCoordY1 + desiredSize / th;
         }
       }
     }
 
     // Flip texture coordinates if dictated by texture options
-    if (flipX) {
-      [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
+    let flipY = 0;
+    if (params.textureOptions !== null) {
+      if (params.textureOptions.flipX === true) {
+        [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
+      }
+
+      // convert to integer for bitwise operation below
+      flipY = +(params.textureOptions.flipY || false);
     }
-    if (flipY) {
+
+    // Eitherone should be true
+    if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
       [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
     }
 
-    const ctxTexture = texture.ctxTexture;
-    assertTruthy(ctxTexture instanceof WebGlCoreCtxTexture);
+    const ctxTexture = texture.ctxTexture as WebGlCoreCtxTexture;
+    assertTruthy(ctxTexture.ctxTexture !== undefined);
     const textureIdx = this.addTexture(ctxTexture, bufferIdx);
 
-    curRenderOp = this.curRenderOp;
-    assertTruthy(curRenderOp);
-    if (renderCoords) {
-      const { x1, y1, x2, y2, x3, y3, x4, y4 } = renderCoords;
+    assertTruthy(this.curRenderOp !== null);
+    if (params.renderCoords) {
       // Upper-Left
-      fQuadBuffer[bufferIdx++] = x1; // vertexX
-      fQuadBuffer[bufferIdx++] = y1; // vertexY
+      fQuadBuffer[bufferIdx++] = params.renderCoords.x1; // vertexX
+      fQuadBuffer[bufferIdx++] = params.renderCoords.y1; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = colorTl; // color
+      uiQuadBuffer[bufferIdx++] = params.colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
 
       // Upper-Right
-      fQuadBuffer[bufferIdx++] = x2;
-      fQuadBuffer[bufferIdx++] = y2;
+      fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
+      fQuadBuffer[bufferIdx++] = params.renderCoords.y2;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = colorTr;
+      uiQuadBuffer[bufferIdx++] = params.colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
-      fQuadBuffer[bufferIdx++] = x4;
-      fQuadBuffer[bufferIdx++] = y4;
+      fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
+      fQuadBuffer[bufferIdx++] = params.renderCoords.y4;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = colorBl;
+      uiQuadBuffer[bufferIdx++] = params.colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Right
-      fQuadBuffer[bufferIdx++] = x3;
-      fQuadBuffer[bufferIdx++] = y3;
+      fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
+      fQuadBuffer[bufferIdx++] = params.renderCoords.y3;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = colorBr;
+      uiQuadBuffer[bufferIdx++] = params.colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
-    } else if (tb !== 0 || tc !== 0) {
+    } else if (params.tb !== 0 || params.tc !== 0) {
       // Upper-Left
-      fQuadBuffer[bufferIdx++] = tx; // vertexX
-      fQuadBuffer[bufferIdx++] = ty; // vertexY
+      fQuadBuffer[bufferIdx++] = params.tx; // vertexX
+      fQuadBuffer[bufferIdx++] = params.ty; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = colorTl; // color
+      uiQuadBuffer[bufferIdx++] = params.colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
 
       // Upper-Right
-      fQuadBuffer[bufferIdx++] = tx + width * ta;
-      fQuadBuffer[bufferIdx++] = ty + width * tc;
+      fQuadBuffer[bufferIdx++] = params.tx + params.width * params.ta;
+      fQuadBuffer[bufferIdx++] = params.ty + params.width * params.tc;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = colorTr;
+      uiQuadBuffer[bufferIdx++] = params.colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
-      fQuadBuffer[bufferIdx++] = tx + height * tb;
-      fQuadBuffer[bufferIdx++] = ty + height * td;
+      fQuadBuffer[bufferIdx++] = params.tx + params.height * params.tb;
+      fQuadBuffer[bufferIdx++] = params.ty + params.height * params.td;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = colorBl;
+      uiQuadBuffer[bufferIdx++] = params.colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Right
-      fQuadBuffer[bufferIdx++] = tx + width * ta + height * tb;
-      fQuadBuffer[bufferIdx++] = ty + width * tc + height * td;
+      fQuadBuffer[bufferIdx++] =
+        params.tx + params.width * params.ta + params.height * params.tb;
+      fQuadBuffer[bufferIdx++] =
+        params.ty + params.width * params.tc + params.height * params.td;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = colorBr;
+      uiQuadBuffer[bufferIdx++] = params.colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
     } else {
       // Calculate the right corner of the quad
       // multiplied by the scale
-      const rightCornerX = tx + width * ta;
-      const rightCornerY = ty + height * td;
+      const rightCornerX = params.tx + params.width * params.ta;
+      const rightCornerY = params.ty + params.height * params.td;
 
       // Upper-Left
-      fQuadBuffer[bufferIdx++] = tx; // vertexX
-      fQuadBuffer[bufferIdx++] = ty; // vertexY
+      fQuadBuffer[bufferIdx++] = params.tx; // vertexX
+      fQuadBuffer[bufferIdx++] = params.ty; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = colorTl; // color
+      uiQuadBuffer[bufferIdx++] = params.colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
 
       // Upper-Right
       fQuadBuffer[bufferIdx++] = rightCornerX;
-      fQuadBuffer[bufferIdx++] = ty;
+      fQuadBuffer[bufferIdx++] = params.ty;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = colorTr;
+      uiQuadBuffer[bufferIdx++] = params.colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
-      fQuadBuffer[bufferIdx++] = tx;
+      fQuadBuffer[bufferIdx++] = params.tx;
       fQuadBuffer[bufferIdx++] = rightCornerY;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = colorBl;
+      uiQuadBuffer[bufferIdx++] = params.colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Right
@@ -464,12 +452,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = rightCornerY;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = colorBr;
+      uiQuadBuffer[bufferIdx++] = params.colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
     }
     // Update the length of the current render op
-    curRenderOp.length += WORDS_PER_QUAD;
-    curRenderOp.numQuads++;
+    this.curRenderOp.length += WORDS_PER_QUAD;
+    this.curRenderOp.numQuads++;
     this.curBufferIdx = bufferIdx;
   }
 
@@ -536,14 +524,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
         throw new Error('Unable to add texture to render op');
       }
 
-      const { shader, shaderProps, dimensions, clippingRect, alpha } =
-        curRenderOp;
       this.newRenderOp(
-        shader,
-        shaderProps,
-        alpha,
-        dimensions,
-        clippingRect,
+        curRenderOp.shader,
+        curRenderOp.shaderProps,
+        curRenderOp.alpha,
+        curRenderOp.dimensions,
+        curRenderOp.clippingRect,
         bufferIdx,
       );
       return this.addTexture(texture, bufferIdx, true);
@@ -556,7 +542,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
    * @param params
    * @returns
    */
-  reuseRenderOp(params: QuadOptions) {
+  reuseRenderOp(params: QuadOptions): boolean {
     const { shader, shaderProps, parentHasRenderTexture, rtt, clippingRect } =
       params;
 

package/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -22,6 +22,7 @@ import {
   type DefaultEffectProps,
   ShaderEffect,
   type ShaderEffectUniforms,
+  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**
@@ -54,6 +55,12 @@ export class LinearGradientEffect extends ShaderEffect {
   override readonly name = 'linearGradient';
 
   static override getEffectKey(props: LinearGradientEffectProps): string {
+    if ((props.colors as unknown as ShaderEffectValueMap).value as number[]) {
+      return `linearGradient${
+        ((props.colors as unknown as ShaderEffectValueMap).value as number[])
+          .length
+      }`;
+    }
     return `linearGradient${props.colors!.length}`;
   }
 

package/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.ts

@@ -25,6 +25,7 @@ import {
   type DefaultEffectProps,
   ShaderEffect,
   type ShaderEffectUniforms,
+  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**
@@ -62,7 +63,13 @@ export class RadialGradientEffect extends ShaderEffect {
   override readonly name = 'radialGradient';
 
   static override getEffectKey(props: RadialGradientEffectProps): string {
-    return `radialGradient${props.colors!.length}`;
+    if ((props.colors as unknown as ShaderEffectValueMap).value as number[]) {
+      return `linearGradient${
+        ((props.colors as unknown as ShaderEffectValueMap).value as number[])
+          .length
+      }`;
+    }
+    return `linearGradient${props.colors!.length}`;
   }
 
   static override resolveDefaults(

package/src/core/text-rendering/TrFontManager.ts

@@ -46,6 +46,7 @@ function resolveFontToUse(
 
   for (const fontFamiles of familyMapsByPriority) {
     const fontFaces = fontFamiles[family];
+
     if (!fontFaces) {
       continue;
     }
@@ -157,9 +158,10 @@ export class TrFontManager {
   public resolveFontFace(
     familyMapsByPriority: FontFamilyMap[],
     props: TrFontProps,
+    rendererType: 'canvas' | 'sdf',
   ): TrFontFace | undefined {
     const { fontFamily, fontWeight, fontStyle, fontStretch } = props;
-    const fontCacheString = `${fontFamily}${fontStyle}${fontWeight}${fontStretch}`;
+    const fontCacheString = `${rendererType}_${fontFamily}_${fontStyle}_${fontWeight}_${fontStretch}`;
 
     if (this.fontCache.has(fontCacheString) === true) {
       return this.fontCache.get(fontCacheString);

package/src/core/text-rendering/font-face-types/TrFontFace.ts

@@ -154,7 +154,6 @@ export class TrFontFace extends EventEmitter {
         lineGap: metrics.lineGap / metrics.unitsPerEm,
       };
     }
-
     this.fontFamily = fontFamily;
     this.descriptors = {
       style: 'normal',

package/src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -242,24 +242,22 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     // the `isFontFaceSupported` check)
     assertTruthy(fontFace instanceof WebTrFontFace);
 
+    const fontFamily = fontFace.fontFamily;
+
     // Add the font face to the document
     // Except for the 'sans-serif' font family, which the Renderer provides
     // as a special default fallback.
-    if (fontFace.fontFamily !== 'sans-serif') {
+    if (fontFamily !== 'sans-serif') {
       // @ts-expect-error `add()` method should be available from a FontFaceSet
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       globalFontSet.add(fontFace.fontFace);
     }
 
-    const { fontFamilies } = this;
-    const familyName = fontFace.fontFace.family;
-
-    let faceSet = fontFamilies[familyName];
+    let faceSet = this.fontFamilies[fontFamily];
     if (!faceSet) {
       faceSet = new Set();
-      fontFamilies[familyName] = faceSet;
+      this.fontFamilies[fontFamily] = faceSet;
     }
-
     faceSet.add(fontFace);
   }
 
@@ -384,9 +382,11 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
 
   loadFont = (state: CanvasTextRendererState): void => {
     const cssString = getFontCssString(state.props);
+
     const trFontFace = this.stage.fontManager.resolveFontFace(
       this.fontFamilyArray,
       state.props,
+      'canvas',
     ) as WebTrFontFace | undefined;
     assertTruthy(trFontFace, `Could not resolve font face for ${cssString}`);
     state.fontInfo = {

package/src/core/text-rendering/renderers/LightningTextTextureRenderer.ts

@@ -22,7 +22,10 @@
 import { assertTruthy } from '../../../utils.js';
 import { getRgbaString, type RGBA } from '../../lib/utils.js';
 import { calcDefaultLineHeight } from '../TextRenderingUtils.js';
-import { getWebFontMetrics } from '../TextTextureRendererUtils.js';
+import {
+  getWebFontMetrics,
+  isZeroWidthSpace,
+} from '../TextTextureRendererUtils.js';
 import type { NormalizedFontMetrics } from '../font-face-types/TrFontFace.js';
 import type { WebTrFontFace } from '../font-face-types/WebTrFontFace.js';
 
@@ -682,38 +685,43 @@ export class LightningTextTextureRenderer {
     letterSpacing: number,
     indent = 0,
   ) {
-    // Greedy wrapping algorithm that will wrap words as the line grows longer.
-    // than its horizontal bounds.
+    const spaceRegex = / |\u200B/g; // ZWSP and spaces
     const lines = text.split(/\r?\n/g);
     let allLines: string[] = [];
-    const realNewlines = [];
+    const realNewlines: number[] = [];
+
     for (let i = 0; i < lines.length; i++) {
-      const resultLines = [];
+      const resultLines: string[] = [];
       let result = '';
       let spaceLeft = wordWrapWidth - indent;
-      const words = lines[i]!.split(' ');
+
+      // Split the line into words, considering ZWSP
+      const words = lines[i]!.split(spaceRegex);
+      const spaces = lines[i]!.match(spaceRegex) || [];
+
       for (let j = 0; j < words.length; j++) {
-        const wordWidth = this.measureText(words[j]!, letterSpacing);
-        const wordWidthWithSpace =
-          wordWidth + this.measureText(' ', letterSpacing);
+        const space = spaces[j - 1] || '';
+        const word = words[j]!;
+        const wordWidth = this.measureText(word, letterSpacing);
+        const wordWidthWithSpace = isZeroWidthSpace(space)
+          ? wordWidth
+          : wordWidth + this.measureText(space, letterSpacing);
+
         if (j === 0 || wordWidthWithSpace > spaceLeft) {
-          // Skip printing the newline if it's the first word of the line that is.
-          // greater than the word wrap width.
           if (j > 0) {
             resultLines.push(result);
             result = '';
           }
-          result += words[j];
+          result += word;
           spaceLeft = wordWrapWidth - wordWidth - (j === 0 ? indent : 0);
         } else {
           spaceLeft -= wordWidthWithSpace;
-          result += ` ${words[j]!}`;
+          result += space + word;
         }
       }
 
       resultLines.push(result);
       result = '';
-
       allLines = allLines.concat(resultLines);
 
       if (i < lines.length - 1) {
@@ -728,7 +736,13 @@ export class LightningTextTextureRenderer {
     if (!space) {
       return this._context.measureText(word).width;
     }
+
+    // Split word into characters, but skip ZWSP in the width calculation
     return word.split('').reduce((acc, char) => {
+      // Check if the character is a zero-width space and skip it
+      if (isZeroWidthSpace(char)) {
+        return acc;
+      }
       return acc + this._context.measureText(char).width + space;
     }, 0);
   }

package/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts

@@ -396,10 +396,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     }
 
     // Resolve font face if we haven't yet
-    if (!trFontFace) {
+    if (trFontFace === undefined) {
       trFontFace = this.resolveFontFace(state.props);
       state.trFontFace = trFontFace;
-      if (!trFontFace) {
+      if (trFontFace === undefined) {
         const msg = `SdfTextRenderer: Could not resolve font face for family: '${state.props.fontFamily}'`;
         console.error(msg);
         this.setStatus(state, 'failed', new Error(msg));
@@ -410,7 +410,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     // If the font hasn't been loaded yet, stop here.
     // Listen for the 'loaded' event and forward fontLoaded event
-    if (!trFontFace.loaded) {
+    if (trFontFace.loaded === false) {
       trFontFace.once('loaded', () => {
         this.scheduleUpdateState(state);
       });
@@ -791,9 +791,11 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   //#endregion Overrides
 
   public resolveFontFace(props: TrFontProps): SdfTrFontFace | undefined {
-    return this.stage.fontManager.resolveFontFace(this.fontFamilyArray, props) as
-      | SdfTrFontFace
-      | undefined;
+    return this.stage.fontManager.resolveFontFace(
+      this.fontFamilyArray,
+      props,
+      'sdf',
+    ) as SdfTrFontFace | undefined;
   }
 
   /**

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -192,7 +192,11 @@ export function layoutText(
 
       // If we encounter a word boundary (white space or newline) we invalidate
       // the lastWord and set the xStartLastWordBoundary if we haven't already.
-      if (glyph.codepoint === 32 || glyph.codepoint === 10) {
+      if (
+        glyph.codepoint === 32 ||
+        glyph.codepoint === 10 ||
+        glyph.codepoint === 8203
+      ) {
         if (lastWord.codepointIndex !== -1) {
           lastWord.codepointIndex = -1;
           xStartLastWordBoundary = curX;

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/measureText.ts

@@ -43,7 +43,8 @@ export function measureText(
   );
   let width = 0;
   for (const glyph of glyphs) {
-    if (glyph.mapped) {
+    if (glyph.mapped && glyph.codepoint !== 8203) {
+      // Skip ZWSP (\u200B)
       width += glyph.xAdvance;
     }
   }