@nasser-sw/fabric 7.0.1-beta12 → 7.0.1-beta13

package/dist/index.mjs

@@ -354,7 +354,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "7.0.1-beta11";
+var version = "7.0.1-beta12";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -20716,9 +20716,9 @@ function getBrowserLines(target) {
 
 let measuringContext;
 
-/**
- * Return a context for measurement of text string.
- * if created it gets stored for reuse
+/**
+ * Return a context for measurement of text string.
+ * if created it gets stored for reuse
  */
 function getMeasuringContext() {
   if (!measuringContext) {
@@ -20731,17 +20731,17 @@ function getMeasuringContext() {
   return measuringContext;
 }
 
-/**
- * Measure and return the info of a single grapheme.
- * needs the the info of previous graphemes already filled
- * Override to customize measuring
+/**
+ * Measure and return the info of a single grapheme.
+ * needs the the info of previous graphemes already filled
+ * Override to customize measuring
  */
 
 // @TODO this is not complete
 
-/**
- * Text class
- * @see {@link http://fabricjs.com/fabric-intro-part-2#text}
+/**
+ * Text class
+ * @see {@link http://fabricjs.com/fabric-intro-part-2#text}
  */
 class FabricText extends StyledText {
   static getDefaults() {
@@ -20752,11 +20752,11 @@ class FabricText extends StyledText {
   }
   constructor(text, options) {
     super();
-    /**
-     * contains characters bounding boxes
-     * This variable is considered to be protected.
-     * But for how mixins are implemented right now, we can't leave it private
-     * @protected
+    /**
+     * contains characters bounding boxes
+     * This variable is considered to be protected.
+     * But for how mixins are implemented right now, we can't leave it private
+     * @protected
      */
     _defineProperty(this, "__charBounds", []);
     Object.assign(this, FabricText.ownDefaults);
@@ -20773,9 +20773,9 @@ class FabricText extends StyledText {
     this.setCoords();
   }
 
-  /**
-   * If text has a path, it will add the extra information needed
-   * for path and text calculations
+  /**
+   * If text has a path, it will add the extra information needed
+   * for path and text calculations
    */
   setPathInfo() {
     const path = this.path;
@@ -20784,10 +20784,10 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * @private
-   * Divides text into lines of text and lines of graphemes.
-   * Uses browser lines when available for pixel-perfect consistency.
+  /**
+   * @private
+   * Divides text into lines of text and lines of graphemes.
+   * Uses browser lines when available for pixel-perfect consistency.
    */
   _splitText() {
     // Check if we have valid browser lines and should use them
@@ -20803,9 +20803,9 @@ class FabricText extends StyledText {
     return newLines;
   }
 
-  /**
-   * Create TextLinesInfo from browser-extracted lines
-   * @private
+  /**
+   * Create TextLinesInfo from browser-extracted lines
+   * @private
    */
   _splitTextFromBrowserLines(browserLines) {
     const lines = [];
@@ -20839,10 +20839,10 @@ class FabricText extends StyledText {
     return result;
   }
 
-  /**
-   * Initialize or update text dimensions.
-   * Updates this.width and this.height with the proper values.
-   * Does not return dimensions.
+  /**
+   * Initialize or update text dimensions.
+   * Updates this.width and this.height with the proper values.
+   * Does not return dimensions.
    */
   initDimensions() {
     // Check if font is ready for accurate measurements
@@ -20888,14 +20888,14 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Enlarge space boxes and shift the others
+  /**
+   * Enlarge space boxes and shift the others
    */
   enlargeSpaces() {
     let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
     const isRtl = this.direction === 'rtl';
     for (let i = 0, len = this._textLines.length; i < len; i++) {
-      if (!this.textAlign.includes('justify') && (i === len - 1 || this.isEndOfWrapping(i))) {
+      if (!this.textAlign.includes('justify') || i === len - 1 || this.isEndOfWrapping(i)) {
         continue;
       }
       accumulatedSpace = 0;
@@ -20951,18 +20951,18 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Advanced layout using new text engine (Konva-compatible)
-   * @private
+  /**
+   * Advanced layout using new text engine (Konva-compatible)
+   * @private
    */
   _layoutTextAdvanced() {
     const options = this._getAdvancedLayoutOptions();
     return layoutText(options);
   }
 
-  /**
-   * Get advanced layout options from current text properties
-   * @private
+  /**
+   * Get advanced layout options from current text properties
+   * @private
    */
   _getAdvancedLayoutOptions() {
     return {
@@ -20984,9 +20984,9 @@ class FabricText extends StyledText {
     };
   }
 
-  /**
-   * Map Fabric textAlign to Konva align format
-   * @private
+  /**
+   * Map Fabric textAlign to Konva align format
+   * @private
    */
   _mapTextAlignToAlign(textAlign) {
     switch (textAlign) {
@@ -21007,8 +21007,8 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Enhanced initDimensions that uses advanced layout when enabled
+  /**
+   * Enhanced initDimensions that uses advanced layout when enabled
    */
   initDimensionsAdvanced() {
     if (!this.enableAdvancedLayout) {
@@ -21037,9 +21037,9 @@ class FabricText extends StyledText {
     this.dirty = true;
   }
 
-  /**
-   * Convert new layout format to legacy _textLines and __charBounds format
-   * @private
+  /**
+   * Convert new layout format to legacy _textLines and __charBounds format
+   * @private
    */
   _convertLayoutToLegacyFormat(layout) {
     this._textLines = layout.lines.map(line => line.graphemes);
@@ -21061,30 +21061,30 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Detect if the text line is ended with an hard break
-   * text and itext do not have wrapping, return false
-   * @return {Boolean}
+  /**
+   * Detect if the text line is ended with an hard break
+   * text and itext do not have wrapping, return false
+   * @return {Boolean}
    */
   isEndOfWrapping(lineIndex) {
     return lineIndex === this._textLines.length - 1;
   }
 
-  /**
-   * Detect if a line has a linebreak and so we need to account for it when moving
-   * and counting style.
-   * It return always 1 for text and Itext. Textbox has its own implementation
-   * @return Number
+  /**
+   * Detect if a line has a linebreak and so we need to account for it when moving
+   * and counting style.
+   * It return always 1 for text and Itext. Textbox has its own implementation
+   * @return Number
    */
 
   missingNewlineOffset(_lineIndex) {
     return 1;
   }
 
-  /**
-   * Returns 2d representation (lineIndex and charIndex) of cursor
-   * @param {Number} selectionStart
-   * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
+  /**
+   * Returns 2d representation (lineIndex and charIndex) of cursor
+   * @param {Number} selectionStart
+   * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
    */
   get2DCursorLocation(selectionStart, skipWrapping) {
     const lines = skipWrapping ? this._unwrappedTextLines : this._textLines;
@@ -21104,24 +21104,24 @@ class FabricText extends StyledText {
     };
   }
 
-  /**
-   * Returns string representation of an instance
-   * @return {String} String representation of text object
+  /**
+   * Returns string representation of an instance
+   * @return {String} String representation of text object
    */
   toString() {
     return `#<Text (${this.complexity()}): { "text": "${this.text}", "fontFamily": "${this.fontFamily}" }>`;
   }
 
-  /**
-   * Return the dimension and the zoom level needed to create a cache canvas
-   * big enough to host the object to be cached.
-   * @private
-   * @param {Object} dim.x width of object to be cached
-   * @param {Object} dim.y height of object to be cached
-   * @return {Object}.width width of canvas
-   * @return {Object}.height height of canvas
-   * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
-   * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
+  /**
+   * Return the dimension and the zoom level needed to create a cache canvas
+   * big enough to host the object to be cached.
+   * @private
+   * @param {Object} dim.x width of object to be cached
+   * @param {Object} dim.y height of object to be cached
+   * @return {Object}.width width of canvas
+   * @return {Object}.height height of canvas
+   * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
+   * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
    */
   _getCacheCanvasDimensions() {
     const dims = super._getCacheCanvasDimensions();
@@ -21131,9 +21131,9 @@ class FabricText extends StyledText {
     return dims;
   }
 
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _render(ctx) {
     const path = this.path;
@@ -21146,9 +21146,9 @@ class FabricText extends StyledText {
     this._renderTextDecoration(ctx, 'linethrough');
   }
 
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderText(ctx) {
     // Skip text rendering if in overlay editing mode
@@ -21164,15 +21164,15 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Set the font parameter of the context with the object properties or with charStyle
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @param {Object} [charStyle] object with font style properties
-   * @param {String} [charStyle.fontFamily] Font Family
-   * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
-   * @param {String} [charStyle.fontWeight] Font weight
-   * @param {String} [charStyle.fontStyle] Font style (italic|normal)
+  /**
+   * Set the font parameter of the context with the object properties or with charStyle
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {Object} [charStyle] object with font style properties
+   * @param {String} [charStyle.fontFamily] Font Family
+   * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
+   * @param {String} [charStyle.fontWeight] Font weight
+   * @param {String} [charStyle.fontStyle] Font style (italic|normal)
    */
   _setTextStyles(ctx, charStyle, forMeasuring) {
     ctx.textBaseline = 'alphabetic';
@@ -21192,11 +21192,11 @@ class FabricText extends StyledText {
     ctx.font = this._getFontDeclaration(charStyle, forMeasuring);
   }
 
-  /**
-   * calculate and return the text Width measuring each line.
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @return {Number} Maximum width of Text object
+  /**
+   * calculate and return the text Width measuring each line.
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @return {Number} Maximum width of Text object
    */
   calcTextWidth() {
     let maxWidth = this.getLineWidth(0);
@@ -21209,23 +21209,23 @@ class FabricText extends StyledText {
     return maxWidth;
   }
 
-  /**
-   * @private
-   * @param {String} method Method name ("fillText" or "strokeText")
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @param {String} line Text to render
-   * @param {Number} left Left position of text
-   * @param {Number} top Top position of text
-   * @param {Number} lineIndex Index of a line in a text
+  /**
+   * @private
+   * @param {String} method Method name ("fillText" or "strokeText")
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {String} line Text to render
+   * @param {Number} left Left position of text
+   * @param {Number} top Top position of text
+   * @param {Number} lineIndex Index of a line in a text
    */
   _renderTextLine(method, ctx, line, left, top, lineIndex) {
     this._renderChars(method, ctx, line, left, top, lineIndex);
   }
 
-  /**
-   * Renders the text background for lines, taking care of style
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * Renders the text background for lines, taking care of style
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderTextLinesBackground(ctx) {
     if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) {
@@ -21288,15 +21288,15 @@ class FabricText extends StyledText {
     this._removeShadow(ctx);
   }
 
-  /**
-   * measure and return the width of a single character.
-   * possibly overridden to accommodate different measure logic or
-   * to hook some external lib for character measurement
-   * @private
-   * @param {String} _char, char to be measured
-   * @param {Object} charStyle style of char to be measured
-   * @param {String} [previousChar] previous char
-   * @param {Object} [prevCharStyle] style of previous char
+  /**
+   * measure and return the width of a single character.
+   * possibly overridden to accommodate different measure logic or
+   * to hook some external lib for character measurement
+   * @private
+   * @param {String} _char, char to be measured
+   * @param {Object} charStyle style of char to be measured
+   * @param {String} [previousChar] previous char
+   * @param {Object} [prevCharStyle] style of previous char
    */
   _measureChar(_char, charStyle, previousChar, prevCharStyle) {
     const fontCache = cache.getFontCache(charStyle),
@@ -21341,19 +21341,19 @@ class FabricText extends StyledText {
     };
   }
 
-  /**
-   * Computes height of character at given position
-   * @param {Number} line the line index number
-   * @param {Number} _char the character index number
-   * @return {Number} fontSize of the character
+  /**
+   * Computes height of character at given position
+   * @param {Number} line the line index number
+   * @param {Number} _char the character index number
+   * @return {Number} fontSize of the character
    */
   getHeightOfChar(line, _char) {
     return this.getValueOfPropertyAt(line, _char, 'fontSize');
   }
 
-  /**
-   * measure a text line measuring all characters.
-   * @param {Number} lineIndex line number
+  /**
+   * measure a text line measuring all characters.
+   * @param {Number} lineIndex line number
    */
   measureLine(lineIndex) {
     const lineInfo = this._measureLine(lineIndex);
@@ -21366,11 +21366,11 @@ class FabricText extends StyledText {
     return lineInfo;
   }
 
-  /**
-   * measure every grapheme of a line, populating __charBounds
-   * @param {Number} lineIndex
-   * @return {Object} object.width total width of characters
-   * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
+  /**
+   * measure every grapheme of a line, populating __charBounds
+   * @param {Number} lineIndex
+   * @return {Object} object.width total width of characters
+   * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
    */
   _measureLine(lineIndex) {
     let width = 0,
@@ -21433,13 +21433,13 @@ class FabricText extends StyledText {
     };
   }
 
-  /**
-   * Calculate the angle  and the left,top position of the char that follow a path.
-   * It appends it to graphemeInfo to be reused later at rendering
-   * @private
-   * @param {Number} positionInPath to be measured
-   * @param {GraphemeBBox} graphemeInfo current grapheme box information
-   * @param {Object} startingPoint position of the point
+  /**
+   * Calculate the angle  and the left,top position of the char that follow a path.
+   * It appends it to graphemeInfo to be reused later at rendering
+   * @private
+   * @param {Number} positionInPath to be measured
+   * @param {GraphemeBBox} graphemeInfo current grapheme box information
+   * @param {Object} startingPoint position of the point
    */
   _setGraphemeOnPath(positionInPath, graphemeInfo) {
     const centerPosition = positionInPath + graphemeInfo.kernedWidth / 2,
@@ -21452,13 +21452,13 @@ class FabricText extends StyledText {
     graphemeInfo.angle = info.angle + (this.pathSide === RIGHT ? Math.PI : 0);
   }
 
-  /**
-   *
-   * @param {String} grapheme to be measured
-   * @param {Number} lineIndex index of the line where the char is
-   * @param {Number} charIndex position in the line
-   * @param {String} [prevGrapheme] character preceding the one to be measured
-   * @returns {GraphemeBBox} grapheme bbox
+  /**
+   *
+   * @param {String} grapheme to be measured
+   * @param {Number} lineIndex index of the line where the char is
+   * @param {Number} charIndex position in the line
+   * @param {String} [prevGrapheme] character preceding the one to be measured
+   * @returns {GraphemeBBox} grapheme bbox
    */
   _getGraphemeBox(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) {
     const style = this.getCompleteStyleDeclaration(lineIndex, charIndex),
@@ -21486,10 +21486,10 @@ class FabricText extends StyledText {
     return box;
   }
 
-  /**
-   * Calculate height of line at 'lineIndex'
-   * @param {Number} lineIndex index of line to calculate
-   * @return {Number}
+  /**
+   * Calculate height of line at 'lineIndex'
+   * @param {Number} lineIndex index of line to calculate
+   * @return {Number}
    */
   getHeightOfLine(lineIndex) {
     if (this.__lineHeights[lineIndex]) {
@@ -21505,8 +21505,8 @@ class FabricText extends StyledText {
     return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
   }
 
-  /**
-   * Calculate text box height
+  /**
+   * Calculate text box height
    */
   calcTextHeight() {
     let lineHeight,
@@ -21518,26 +21518,26 @@ class FabricText extends StyledText {
     return height;
   }
 
-  /**
-   * @private
-   * @return {Number} Left offset
+  /**
+   * @private
+   * @return {Number} Left offset
    */
   _getLeftOffset() {
     return this.direction === 'ltr' ? -this.width / 2 : this.width / 2;
   }
 
-  /**
-   * @private
-   * @return {Number} Top offset
+  /**
+   * @private
+   * @return {Number} Top offset
    */
   _getTopOffset() {
     return -this.height / 2;
   }
 
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @param {String} method Method name ("fillText" or "strokeText")
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {String} method Method name ("fillText" or "strokeText")
    */
   _renderTextCommon(ctx, method) {
     ctx.save();
@@ -21554,9 +21554,9 @@ class FabricText extends StyledText {
     ctx.restore();
   }
 
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderTextFill(ctx) {
     if (!this.fill && !this.styleHas(FILL)) {
@@ -21565,9 +21565,9 @@ class FabricText extends StyledText {
     this._renderTextCommon(ctx, 'fillText');
   }
 
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderTextStroke(ctx) {
     if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) {
@@ -21584,14 +21584,14 @@ class FabricText extends StyledText {
     ctx.restore();
   }
 
-  /**
-   * @private
-   * @param {String} method fillText or strokeText.
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @param {Array} line Content of the line, splitted in an array by grapheme
-   * @param {Number} left
-   * @param {Number} top
-   * @param {Number} lineIndex
+  /**
+   * @private
+   * @param {String} method fillText or strokeText.
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {Array} line Content of the line, splitted in an array by grapheme
+   * @param {Number} left
+   * @param {Number} top
+   * @param {Number} lineIndex
    */
   _renderChars(method, ctx, line, left, top, lineIndex) {
     const lineHeight = this.getHeightOfLine(lineIndex),
@@ -21673,16 +21673,16 @@ class FabricText extends StyledText {
     ctx.restore();
   }
 
-  /**
-   * This function try to patch the missing gradientTransform on canvas gradients.
-   * transforming a context to transform the gradient, is going to transform the stroke too.
-   * we want to transform the gradient but not the stroke operation, so we create
-   * a transformed gradient on a pattern and then we use the pattern instead of the gradient.
-   * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size
-   * is limited.
-   * @private
-   * @param {TFiller} filler a fabric gradient instance
-   * @return {CanvasPattern} a pattern to use as fill/stroke style
+  /**
+   * This function try to patch the missing gradientTransform on canvas gradients.
+   * transforming a context to transform the gradient, is going to transform the stroke too.
+   * we want to transform the gradient but not the stroke operation, so we create
+   * a transformed gradient on a pattern and then we use the pattern instead of the gradient.
+   * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size
+   * is limited.
+   * @private
+   * @param {TFiller} filler a fabric gradient instance
+   * @return {CanvasPattern} a pattern to use as fill/stroke style
    */
   _applyPatternGradientTransformText(filler) {
     // TODO: verify compatibility with strokeUniform
@@ -21738,12 +21738,12 @@ class FabricText extends StyledText {
     };
   }
 
-  /**
-   * This function prepare the canvas for a stroke style, and stroke and strokeWidth
-   * need to be sent in as defined
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {CompleteTextStyleDeclaration} style with stroke and strokeWidth defined
-   * @returns
+  /**
+   * This function prepare the canvas for a stroke style, and stroke and strokeWidth
+   * need to be sent in as defined
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {CompleteTextStyleDeclaration} style with stroke and strokeWidth defined
+   * @returns
    */
   _setStrokeStyles(ctx, _ref) {
     let {
@@ -21758,12 +21758,12 @@ class FabricText extends StyledText {
     return this.handleFiller(ctx, 'strokeStyle', stroke);
   }
 
-  /**
-   * This function prepare the canvas for a ill style, and fill
-   * need to be sent in as defined
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {CompleteTextStyleDeclaration} style with ill defined
-   * @returns
+  /**
+   * This function prepare the canvas for a ill style, and fill
+   * need to be sent in as defined
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {CompleteTextStyleDeclaration} style with ill defined
+   * @returns
    */
   _setFillStyles(ctx, _ref2) {
     let {
@@ -21772,16 +21772,16 @@ class FabricText extends StyledText {
     return this.handleFiller(ctx, 'fillStyle', fill);
   }
 
-  /**
-   * @private
-   * @param {String} method
-   * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @param {String} _char
-   * @param {Number} left Left coordinate
-   * @param {Number} top Top coordinate
-   * @param {Number} lineHeight Height of the line
+  /**
+   * @private
+   * @param {String} method
+   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @param {String} _char
+   * @param {Number} left Left coordinate
+   * @param {Number} top Top coordinate
+   * @param {Number} lineHeight Height of the line
    */
   _renderChar(method, ctx, lineIndex, charIndex, _char, left, top) {
     const decl = this._getStyleDeclaration(lineIndex, charIndex),
@@ -21810,30 +21810,30 @@ class FabricText extends StyledText {
     ctx.restore();
   }
 
-  /**
-   * Turns the character into a 'superior figure' (i.e. 'superscript')
-   * @param {Number} start selection start
-   * @param {Number} end selection end
+  /**
+   * Turns the character into a 'superior figure' (i.e. 'superscript')
+   * @param {Number} start selection start
+   * @param {Number} end selection end
    */
   setSuperscript(start, end) {
     this._setScript(start, end, this.superscript);
   }
 
-  /**
-   * Turns the character into an 'inferior figure' (i.e. 'subscript')
-   * @param {Number} start selection start
-   * @param {Number} end selection end
+  /**
+   * Turns the character into an 'inferior figure' (i.e. 'subscript')
+   * @param {Number} start selection start
+   * @param {Number} end selection end
    */
   setSubscript(start, end) {
     this._setScript(start, end, this.subscript);
   }
 
-  /**
-   * Applies 'schema' at given position
-   * @private
-   * @param {Number} start selection start
-   * @param {Number} end selection end
-   * @param {Number} schema
+  /**
+   * Applies 'schema' at given position
+   * @private
+   * @param {Number} start selection start
+   * @param {Number} end selection end
+   * @param {Number} schema
    */
   _setScript(start, end, schema) {
     const loc = this.get2DCursorLocation(start, true),
@@ -21846,10 +21846,10 @@ class FabricText extends StyledText {
     this.setSelectionStyles(style, start, end);
   }
 
-  /**
-   * @private
-   * @param {Number} lineIndex index text line
-   * @return {Number} Line left offset
+  /**
+   * @private
+   * @param {Number} lineIndex index text line
+   * @return {Number} Line left offset
    */
   _getLineLeftOffset(lineIndex) {
     const lineWidth = this.getLineWidth(lineIndex),
@@ -21899,8 +21899,8 @@ class FabricText extends StyledText {
     return leftOffset;
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _clearCache() {
     this._forceClearCache = false;
@@ -21909,12 +21909,12 @@ class FabricText extends StyledText {
     this.__charBounds = [];
   }
 
-  /**
-   * Measure a single line given its index. Used to calculate the initial
-   * text bounding box. The values are calculated and stored in __lineWidths cache.
-   * @private
-   * @param {Number} lineIndex line number
-   * @return {Number} Line width
+  /**
+   * Measure a single line given its index. Used to calculate the initial
+   * text bounding box. The values are calculated and stored in __lineWidths cache.
+   * @private
+   * @param {Number} lineIndex line number
+   * @return {Number} Line width
    */
   getLineWidth(lineIndex) {
     if (this.__lineWidths[lineIndex] !== undefined) {
@@ -21933,12 +21933,12 @@ class FabricText extends StyledText {
     return 0;
   }
 
-  /**
-   * Retrieves the value of property at given character position
-   * @param {Number} lineIndex the line number
-   * @param {Number} charIndex the character number
-   * @param {String} property the property name
-   * @returns the value of 'property'
+  /**
+   * Retrieves the value of property at given character position
+   * @param {Number} lineIndex the line number
+   * @param {Number} charIndex the character number
+   * @param {String} property the property name
+   * @returns the value of 'property'
    */
   getValueOfPropertyAt(lineIndex, charIndex, property) {
     var _charStyle$property;
@@ -21946,9 +21946,9 @@ class FabricText extends StyledText {
     return (_charStyle$property = charStyle[property]) !== null && _charStyle$property !== void 0 ? _charStyle$property : this[property];
   }
 
-  /**
-   * @private
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * @private
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderTextDecoration(ctx, type) {
     if (!this[type] && !this.styleHas(type)) {
@@ -22032,10 +22032,10 @@ class FabricText extends StyledText {
     this._removeShadow(ctx);
   }
 
-  /**
-   * return font declaration string for canvas context
-   * @param {Object} [styleObject] object
-   * @returns {String} font declaration formatted for canvas context.
+  /**
+   * return font declaration string for canvas context
+   * @param {Object} [styleObject] object
+   * @returns {String} font declaration formatted for canvas context.
    */
   _getFontDeclaration() {
     let {
@@ -22061,9 +22061,9 @@ class FabricText extends StyledText {
     return [fontStyle, fontWeight, `${forMeasuring ? this.CACHE_FONT_SIZE : fontSize}px`, parsedFontFamily].join(' ');
   }
 
-  /**
-   * Renders text instance on a specified context
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+  /**
+   * Renders text instance on a specified context
+   * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   render(ctx) {
     if (!this.visible) {
@@ -22078,22 +22078,22 @@ class FabricText extends StyledText {
     super.render(ctx);
   }
 
-  /**
-   * Override this method to customize grapheme splitting
-   * @todo the util `graphemeSplit` needs to be injectable in some way.
-   * is more comfortable to inject the correct util rather than having to override text
-   * in the middle of the prototype chain
-   * @param {string} value
-   * @returns {string[]} array of graphemes
+  /**
+   * Override this method to customize grapheme splitting
+   * @todo the util `graphemeSplit` needs to be injectable in some way.
+   * is more comfortable to inject the correct util rather than having to override text
+   * in the middle of the prototype chain
+   * @param {string} value
+   * @returns {string[]} array of graphemes
    */
   graphemeSplit(value) {
     return graphemeSplit(value);
   }
 
-  /**
-   * Returns the text as an array of lines.
-   * @param {String} text text to split
-   * @returns  Lines in the text
+  /**
+   * Returns the text as an array of lines.
+   * @param {String} text text to split
+   * @returns  Lines in the text
    */
   _splitTextIntoLines(text) {
     const lines = text.split(this._reNewline),
@@ -22119,18 +22119,18 @@ class FabricText extends StyledText {
     };
   }
 
-  /**
-   * Check if text contains Arabic characters
-   * @private
+  /**
+   * Check if text contains Arabic characters
+   * @private
    */
   _containsArabicText(text) {
     return /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
   }
 
-  /**
-   * Returns object representation of an instance
-   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-   * @return {Object} Object representation of an instance
+  /**
+   * Returns object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} Object representation of an instance
    */
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -22173,23 +22173,23 @@ class FabricText extends StyledText {
     return this;
   }
 
-  /**
-   * Returns complexity of an instance
-   * @return {Number} complexity
+  /**
+   * Returns complexity of an instance
+   * @return {Number} complexity
    */
   complexity() {
     return 1;
   }
 
-  /**
-   * List of generic font families
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
+  /**
+   * List of generic font families
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
    */
 
-  /**
-   * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
-   * @param {HTMLElement} element Element to parse
-   * @param {Object} [options] Options object
+  /**
+   * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
+   * @param {HTMLElement} element Element to parse
+   * @param {Object} [options] Options object
    */
   static async fromElement(element, options, cssRules) {
     const parsedAttributes = parseAttributes(element, FabricText.ATTRIBUTE_NAMES, cssRules);
@@ -22228,10 +22228,10 @@ class FabricText extends StyledText {
       scaledDiff = lineHeightDiff * textHeightScaleFactor,
       textHeight = text.getScaledHeight() + scaledDiff;
     let offX = 0;
-    /*
-      Adjust positioning:
-        x/y attributes in SVG correspond to the bottom-left corner of text bounding box
-        fabric output by default at top, left.
+    /*
+      Adjust positioning:
+        x/y attributes in SVG correspond to the bottom-left corner of text bounding box
+        fabric output by default at top, left.
     */
     if (textAnchor === CENTER) {
       offX = text.getScaledWidth() / 2;
@@ -22249,9 +22249,9 @@ class FabricText extends StyledText {
 
   /* _FROM_SVG_END_ */
 
-  /**
-   * Check if the font is ready for accurate measurements
-   * @private
+  /**
+   * Check if the font is ready for accurate measurements
+   * @private
    */
   _isFontReady() {
     if (typeof document === 'undefined' || !('fonts' in document)) {
@@ -22264,9 +22264,9 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Schedule re-initialization after font loads
-   * @private
+  /**
+   * Schedule re-initialization after font loads
+   * @private
    */
   _scheduleInitAfterFontLoad() {
     if (typeof document === 'undefined' || !('fonts' in document)) {
@@ -22302,8 +22302,8 @@ class FabricText extends StyledText {
     });
   }
 
-  /**
-   * Force complete text re-initialization (useful after JSON loading)
+  /**
+   * Force complete text re-initialization (useful after JSON loading)
    */
   forceTextReinitialization() {
     console.log('🔄 Force reinitializing text object');
@@ -22331,10 +22331,10 @@ class FabricText extends StyledText {
     }
   }
 
-  /**
-   * Returns FabricText instance from an object representation
-   * @param {Object} object plain js Object to create an instance from
-   * @returns {Promise<FabricText>}
+  /**
+   * Returns FabricText instance from an object representation
+   * @param {Object} object plain js Object to create an instance from
+   * @returns {Promise<FabricText>}
    */
   static fromObject(object) {
     return this._fromObject({
@@ -22436,10 +22436,10 @@ class FabricText extends StyledText {
     });
   }
 }
-/**
- * Properties that requires a text layout recalculation when changed
- * @type string[]
- * @protected
+/**
+ * Properties that requires a text layout recalculation when changed
+ * @type string[]
+ * @protected
  */
 _defineProperty(FabricText, "textLayoutProperties", textLayoutProperties);
 _defineProperty(FabricText, "cacheProperties", [...cacheProperties, ...additionalProps]);
@@ -22447,9 +22447,9 @@ _defineProperty(FabricText, "ownDefaults", textDefaultValues);
 _defineProperty(FabricText, "type", 'Text');
 _defineProperty(FabricText, "genericFonts", ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded', 'math', 'emoji', 'fangsong']);
 /* _FROM_SVG_START_ */
-/**
- * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
- * @see: http://www.w3.org/TR/SVG/text.html#TextElement
+/**
+ * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
+ * @see: http://www.w3.org/TR/SVG/text.html#TextElement
  */
 _defineProperty(FabricText, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat('x', 'y', 'dx', 'dy', 'font-family', 'font-style', 'font-weight', 'font-size', 'letter-spacing', 'text-decoration', 'text-anchor'));
 applyMixins(FabricText, [TextSVGExportMixin]);
@@ -26588,11 +26588,11 @@ const textboxDefaultValues = {
 
 // @TODO this is not complete
 
-/**
- * Textbox class, based on IText, allows the user to resize the text rectangle
- * and wraps lines automatically. Textboxes have their Y scaling locked, the
- * user can only change width. Height is adjusted automatically based on the
- * wrapping of lines.
+/**
+ * Textbox class, based on IText, allows the user to resize the text rectangle
+ * and wraps lines automatically. Textboxes have their Y scaling locked, the
+ * user can only change width. Height is adjusted automatically based on the
+ * wrapping of lines.
  */
 class Textbox extends IText {
   static getDefaults() {
@@ -26602,10 +26602,10 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Constructor
-   * @param {String} text Text string
-   * @param {Object} [options] Options object
+  /**
+   * Constructor
+   * @param {String} text Text string
+   * @param {Object} [options] Options object
    */
   constructor(text, options) {
     super(text, {
@@ -26615,10 +26615,10 @@ class Textbox extends IText {
     this.initializeEventListeners();
   }
 
-  /**
-   * Creates the default control object.
-   * If you prefer to have on instance of controls shared among all objects
-   * make this function return an empty object and add controls to the ownDefaults object
+  /**
+   * Creates the default control object.
+   * If you prefer to have on instance of controls shared among all objects
+   * make this function return an empty object and add controls to the ownDefaults object
    */
   static createControls() {
     return {
@@ -26626,11 +26626,11 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Unlike superclass's version of this function, Textbox does not update
-   * its width.
-   * @private
-   * @override
+  /**
+   * Unlike superclass's version of this function, Textbox does not update
+   * its width.
+   * @private
+   * @override
    */
   initDimensions() {
     if (!this.initialized) {
@@ -26698,6 +26698,7 @@ class Textbox extends IText {
     if (this._usingBrowserWrapping) {
       this._browserWrapInitialized = true;
     }
+    this.calcTextWidth();
     if (this.textAlign.includes(JUSTIFY)) {
       // For browser wrapping fonts, apply browser-calculated justify spaces
       if (this._usingBrowserWrapping) {
@@ -26772,11 +26773,38 @@ class Textbox extends IText {
     } else {
       this.height = this.calcTextHeight();
     }
+
+    // Double-check that justify was applied by checking space widths
+    if (this.textAlign.includes('justify') && this.__charBounds) {
+      setTimeout(() => {
+        // Verify justify was applied by checking if space widths vary
+        let hasVariableSpaces = false;
+        this.__charBounds.forEach((lineBounds, i) => {
+          if (lineBounds && this._textLines && this._textLines[i]) {
+            const spaces = lineBounds.filter((bound, j) => /\s/.test(this._textLines[i][j]));
+            if (spaces.length > 1) {
+              const firstSpaceWidth = spaces[0].width;
+              hasVariableSpaces = spaces.some(space => Math.abs(space.width - firstSpaceWidth) > 0.1);
+            }
+          }
+        });
+        if (!hasVariableSpaces && this.__charBounds.length > 0) {
+          console.warn('   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again');
+          if (this.enlargeSpaces) {
+            var _this$canvas3;
+            this.enlargeSpaces();
+            (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+          }
+        } else {
+          console.log('   ✅ Justify spaces properly expanded');
+        }
+      }, 10);
+    }
   }
 
-  /**
-   * Schedule justify calculation after font loads (Textbox-specific)
-   * @private
+  /**
+   * Schedule justify calculation after font loads (Textbox-specific)
+   * @private
    */
   _scheduleJustifyAfterFontLoad() {
     if (typeof document === 'undefined' || !('fonts' in document)) {
@@ -26790,22 +26818,22 @@ class Textbox extends IText {
     this._fontJustifyScheduled = true;
     const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
     document.fonts.load(fontSpec).then(() => {
-      var _this$canvas3;
+      var _this$canvas4;
       this._fontJustifyScheduled = false;
       console.log('🔧 Textbox: Font loaded, applying justify alignment');
 
       // Re-run initDimensions to ensure proper justify calculation
       this.initDimensions();
-      (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+      (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.requestRenderAll();
     }).catch(() => {
       this._fontJustifyScheduled = false;
       console.warn('⚠️ Textbox: Font loading failed, justify may be incorrect');
     });
   }
 
-  /**
-   * Advanced dimensions calculation using new layout engine
-   * @private
+  /**
+   * Advanced dimensions calculation using new layout engine
+   * @private
    */
   initDimensionsAdvanced() {
     if (!this.initialized) {
@@ -26860,9 +26888,9 @@ class Textbox extends IText {
     this.dirty = true;
   }
 
-  /**
-   * Generate style map from new layout format
-   * @private
+  /**
+   * Generate style map from new layout format
+   * @private
    */
   _generateStyleMapFromLayout(layout) {
     const map = {};
@@ -26884,12 +26912,12 @@ class Textbox extends IText {
     return map;
   }
 
-  /**
-   * Generate an object that translates the style object so that it is
-   * broken up by visual lines (new lines and automatic wrapping).
-   * The original text styles object is broken up by actual lines (new lines only),
-   * which is only sufficient for Text / IText
-   * @private
+  /**
+   * Generate an object that translates the style object so that it is
+   * broken up by visual lines (new lines and automatic wrapping).
+   * The original text styles object is broken up by actual lines (new lines only),
+   * which is only sufficient for Text / IText
+   * @private
    */
   _generateStyleMap(textInfo) {
     let realLineCount = 0,
@@ -26916,10 +26944,10 @@ class Textbox extends IText {
     return map;
   }
 
-  /**
-   * Returns true if object has a style property or has it on a specified line
-   * @param {Number} lineIndex
-   * @return {Boolean}
+  /**
+   * Returns true if object has a style property or has it on a specified line
+   * @param {Number} lineIndex
+   * @return {Boolean}
    */
   styleHas(property, lineIndex) {
     if (this._styleMap && !this.isWrapping) {
@@ -26931,10 +26959,10 @@ class Textbox extends IText {
     return super.styleHas(property, lineIndex);
   }
 
-  /**
-   * Returns true if object has no styling or no styling in a line
-   * @param {Number} lineIndex , lineIndex is on wrapped lines.
-   * @return {Boolean}
+  /**
+   * Returns true if object has no styling or no styling in a line
+   * @param {Number} lineIndex , lineIndex is on wrapped lines.
+   * @return {Boolean}
    */
   isEmptyStyles(lineIndex) {
     if (!this.styles) {
@@ -26971,11 +26999,11 @@ class Textbox extends IText {
     return true;
   }
 
-  /**
-   * @protected
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
+  /**
+   * @protected
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
    */
   _getStyleDeclaration(lineIndex, charIndex) {
     if (this._styleMap && !this.isWrapping) {
@@ -26989,59 +27017,59 @@ class Textbox extends IText {
     return super._getStyleDeclaration(lineIndex, charIndex);
   }
 
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @param {Object} style
-   * @private
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @param {Object} style
+   * @private
    */
   _setStyleDeclaration(lineIndex, charIndex, style) {
     const map = this._styleMap[lineIndex];
     super._setStyleDeclaration(map.line, map.offset + charIndex, style);
   }
 
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @private
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @private
    */
   _deleteStyleDeclaration(lineIndex, charIndex) {
     const map = this._styleMap[lineIndex];
     super._deleteStyleDeclaration(map.line, map.offset + charIndex);
   }
 
-  /**
-   * probably broken need a fix
-   * Returns the real style line that correspond to the wrapped lineIndex line
-   * Used just to verify if the line does exist or not.
-   * @param {Number} lineIndex
-   * @returns {Boolean} if the line exists or not
-   * @private
+  /**
+   * probably broken need a fix
+   * Returns the real style line that correspond to the wrapped lineIndex line
+   * Used just to verify if the line does exist or not.
+   * @param {Number} lineIndex
+   * @returns {Boolean} if the line exists or not
+   * @private
    */
   _getLineStyle(lineIndex) {
     const map = this._styleMap[lineIndex];
     return !!this.styles[map.line];
   }
 
-  /**
-   * Set the line style to an empty object so that is initialized
-   * @param {Number} lineIndex
-   * @param {Object} style
-   * @private
+  /**
+   * Set the line style to an empty object so that is initialized
+   * @param {Number} lineIndex
+   * @param {Object} style
+   * @private
    */
   _setLineStyle(lineIndex) {
     const map = this._styleMap[lineIndex];
     super._setLineStyle(map.line);
   }
 
-  /**
-   * Wraps text using the 'width' property of Textbox. First this function
-   * splits text on newlines, so we preserve newlines entered by the user.
-   * Then it wraps each line using the width of the Textbox by calling
-   * _wrapLine().
-   * @param {Array} lines The string array of text that is split into lines
-   * @param {Number} desiredWidth width you want to wrap to
-   * @returns {Array} Array of lines
+  /**
+   * Wraps text using the 'width' property of Textbox. First this function
+   * splits text on newlines, so we preserve newlines entered by the user.
+   * Then it wraps each line using the width of the Textbox by calling
+   * _wrapLine().
+   * @param {Array} lines The string array of text that is split into lines
+   * @param {Number} desiredWidth width you want to wrap to
+   * @returns {Array} Array of lines
    */
   _wrapText(lines, desiredWidth) {
     this.isWrapping = true;
@@ -27055,12 +27083,12 @@ class Textbox extends IText {
     return wrapped;
   }
 
-  /**
-   * For each line of text terminated by an hard line stop,
-   * measure each word width and extract the largest word from all.
-   * The returned words here are the one that at the end will be rendered.
-   * @param {string[]} lines the lines we need to measure
-   *
+  /**
+   * For each line of text terminated by an hard line stop,
+   * measure each word width and extract the largest word from all.
+   * The returned words here are the one that at the end will be rendered.
+   * @param {string[]} lines the lines we need to measure
+   *
    */
   getGraphemeDataForRender(lines) {
     const splitByGrapheme = this.splitByGrapheme,
@@ -27093,17 +27121,17 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Helper function to measure a string of text, given its lineIndex and charIndex offset
-   * It gets called when charBounds are not available yet.
-   * Override if necessary
-   * Use with {@link Textbox#wordSplit}
-   *
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {number} lineIndex
-   * @param {number} charOffset
-   * @returns {number}
+  /**
+   * Helper function to measure a string of text, given its lineIndex and charIndex offset
+   * It gets called when charBounds are not available yet.
+   * Override if necessary
+   * Use with {@link Textbox#wordSplit}
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {number} lineIndex
+   * @param {number} charOffset
+   * @returns {number}
    */
   _measureWord(word, lineIndex) {
     let charOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -27118,26 +27146,26 @@ class Textbox extends IText {
     return width;
   }
 
-  /**
-   * Override this method to customize word splitting
-   * Use with {@link Textbox#_measureWord}
-   * @param {string} value
-   * @returns {string[]} array of words
+  /**
+   * Override this method to customize word splitting
+   * Use with {@link Textbox#_measureWord}
+   * @param {string} value
+   * @returns {string[]} array of words
    */
   wordSplit(value) {
     return value.split(this._wordJoiners);
   }
 
-  /**
-   * Wraps a line of text using the width of the Textbox as desiredWidth
-   * and leveraging the known width o words from GraphemeData
-   * @private
-   * @param {Number} lineIndex
-   * @param {Number} desiredWidth width you want to wrap the line to
-   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
-   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
-   * @returns {Array} Array of line(s) into which the given text is wrapped
-   * to.
+  /**
+   * Wraps a line of text using the width of the Textbox as desiredWidth
+   * and leveraging the known width o words from GraphemeData
+   * @private
+   * @param {Number} lineIndex
+   * @param {Number} desiredWidth width you want to wrap the line to
+   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
+   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
+   * @returns {Array} Array of line(s) into which the given text is wrapped
+   * to.
    */
   _wrapLine(lineIndex, desiredWidth, _ref) {
     let {
@@ -27219,11 +27247,11 @@ class Textbox extends IText {
     return graphemeLines;
   }
 
-  /**
-   * Detect if the text line is ended with an hard break
-   * text and itext do not have wrapping, return false
-   * @param {Number} lineIndex text to split
-   * @return {Boolean}
+  /**
+   * Detect if the text line is ended with an hard break
+   * text and itext do not have wrapping, return false
+   * @param {Number} lineIndex text to split
+   * @return {Boolean}
    */
   isEndOfWrapping(lineIndex) {
     if (!this._styleMap[lineIndex + 1]) {
@@ -27237,12 +27265,12 @@ class Textbox extends IText {
     return false;
   }
 
-  /**
-   * Detect if a line has a linebreak and so we need to account for it when moving
-   * and counting style.
-   * This is important only for splitByGrapheme at the end of wrapping.
-   * If we are not wrapping the offset is always 1
-   * @return Number
+  /**
+   * Detect if a line has a linebreak and so we need to account for it when moving
+   * and counting style.
+   * This is important only for splitByGrapheme at the end of wrapping.
+   * If we are not wrapping the offset is always 1
+   * @return Number
    */
   missingNewlineOffset(lineIndex, skipWrapping) {
     if (this.splitByGrapheme && !skipWrapping) {
@@ -27251,12 +27279,12 @@ class Textbox extends IText {
     return 1;
   }
 
-  /**
-   * Gets lines of text to render in the Textbox. This function calculates
-   * text wrapping on the fly every time it is called.
-   * @param {String} text text to split
-   * @returns {Array} Array of lines in the Textbox.
-   * @override
+  /**
+   * Gets lines of text to render in the Textbox. This function calculates
+   * text wrapping on the fly every time it is called.
+   * @param {String} text text to split
+   * @returns {Array} Array of lines in the Textbox.
+   * @override
    */
   _splitTextIntoLines(text) {
     // Check if we need browser wrapping using smart font detection
@@ -27303,9 +27331,9 @@ class Textbox extends IText {
     return newText;
   }
 
-  /**
-   * Use browser's native text wrapping for accurate handling of fonts without English glyphs
-   * @private
+  /**
+   * Use browser's native text wrapping for accurate handling of fonts without English glyphs
+   * @private
    */
   _splitTextIntoLinesWithBrowser(text) {
     if (typeof document === 'undefined') {
@@ -27431,9 +27459,9 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Extract justify space measurements from browser
-   * @private
+  /**
+   * Extract justify space measurements from browser
+   * @private
    */
   _extractJustifySpaceMeasurements(element, lines) {
     console.log(`🔤 Extracting browser justify space measurements for ${lines.length} lines`);
@@ -27469,9 +27497,9 @@ class Textbox extends IText {
     return spaceWidths;
   }
 
-  /**
-   * Apply browser-calculated justify space measurements
-   * @private
+  /**
+   * Apply browser-calculated justify space measurements
+   * @private
    */
   _applyBrowserJustifySpaces() {
     if (!this._textLines || !this.__charBounds) {
@@ -27494,23 +27522,59 @@ class Textbox extends IText {
       const lineBounds = this.__charBounds[lineIndex];
       const lineSpaceWidths = spaceWidths[lineIndex];
       let spaceIndex = 0;
+      let accumulatedSpace = 0;
+      const isRtl = this.direction === 'rtl';
+      const spaceDiffs = [];
+
+      // First, calculate the difference for each space
       for (let charIndex = 0; charIndex < line.length; charIndex++) {
         if (/\s/.test(line[charIndex]) && spaceIndex < lineSpaceWidths.length) {
-          const expandedWidth = lineSpaceWidths[spaceIndex];
-          if (lineBounds[charIndex]) {
-            const oldWidth = lineBounds[charIndex].width;
-            lineBounds[charIndex].width = expandedWidth;
-            console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${expandedWidth.toFixed(1)}px`);
+          const charBound = lineBounds[charIndex];
+          if (charBound) {
+            spaceDiffs.push(lineSpaceWidths[spaceIndex] - charBound.width);
           }
           spaceIndex++;
         }
       }
+      spaceIndex = 0;
+      let remainingDiff = spaceDiffs.reduce((a, b) => a + b, 0);
+      for (let charIndex = 0; charIndex < line.length; charIndex++) {
+        const charBound = lineBounds[charIndex];
+        if (!charBound) continue;
+        if (isRtl) {
+          charBound.left += remainingDiff;
+        } else {
+          charBound.left += accumulatedSpace;
+        }
+        if (/\s/.test(line[charIndex]) && spaceIndex < spaceDiffs.length) {
+          const diff = spaceDiffs[spaceIndex];
+          const oldWidth = charBound.width;
+          charBound.width += diff;
+          charBound.kernedWidth += diff;
+          console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${charBound.width.toFixed(1)}px`);
+          if (isRtl) {
+            remainingDiff -= diff;
+          } else {
+            accumulatedSpace += diff;
+          }
+          spaceIndex++;
+        }
+      }
+      // also need to update the last charBound
+      const lastBound = lineBounds[line.length];
+      if (lastBound) {
+        if (isRtl) {
+          lastBound.left += remainingDiff;
+        } else {
+          lastBound.left += accumulatedSpace;
+        }
+      }
     });
   }
 
-  /**
-   * Fallback to default Fabric wrapping
-   * @private
+  /**
+   * Fallback to default Fabric wrapping
+   * @private
    */
   _splitTextIntoLinesDefault(text) {
     const newText = super._splitTextIntoLines(text),
@@ -27542,12 +27606,12 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * Initialize event listeners for safety snap functionality
-   * @private
+  /**
+   * Initialize event listeners for safety snap functionality
+   * @private
    */
   initializeEventListeners() {
-    var _this$canvas4;
+    var _this$canvas5;
     // Track which side is being used for resize to handle position compensation
     let resizeOrigin = null;
 
@@ -27578,7 +27642,7 @@ class Textbox extends IText {
     });
 
     // Also listen to canvas-level modified event as backup
-    (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.on('object:modified', e => {
+    (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.on('object:modified', e => {
       if (e.target === this) {
         const currentResizeOrigin = resizeOrigin; // Capture the value before reset
         setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
@@ -27587,12 +27651,12 @@ class Textbox extends IText {
     });
   }
 
-  /**
-   * Safety snap to prevent glyph clipping after manual resize.
-   * Similar to Polotno - checks if any glyphs are too close to edges
-   * and automatically expands width if needed.
-   * @private
-   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
+  /**
+   * Safety snap to prevent glyph clipping after manual resize.
+   * Similar to Polotno - checks if any glyphs are too close to edges
+   * and automatically expands width if needed.
+   * @private
+   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
    */
   safetySnapWidth(resizeOrigin) {
     // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
@@ -27622,7 +27686,7 @@ class Textbox extends IText {
     const safetyThreshold = 2; // px - very subtle trigger
 
     if (maxRequiredWidth > this.width - safetyThreshold) {
-      var _this$canvas5;
+      var _this$canvas6;
       // Set width to exactly what's needed + minimal safety margin
       const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
 
@@ -27655,13 +27719,13 @@ class Textbox extends IText {
           this.__overlayEditor.refresh();
         }, 0);
       }
-      (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+      (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
     }
   }
 
-  /**
-   * Fix character selection mismatch after JSON loading for browser-wrapped fonts
-   * @private
+  /**
+   * Fix character selection mismatch after JSON loading for browser-wrapped fonts
+   * @private
    */
   _fixCharacterMappingAfterJsonLoad() {
     if (this._usingBrowserWrapping) {
@@ -27681,9 +27745,9 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * Force complete textbox re-initialization (useful after JSON loading)
-   * Overrides Text version with Textbox-specific logic
+  /**
+   * Force complete textbox re-initialization (useful after JSON loading)
+   * Overrides Text version with Textbox-specific logic
    */
   forceTextReinitialization() {
     console.log('🔄 Force reinitializing Textbox object');
@@ -27706,7 +27770,7 @@ class Textbox extends IText {
     // Double-check that justify was applied by checking space widths
     if (this.textAlign.includes('justify') && this.__charBounds) {
       setTimeout(() => {
-        var _this$canvas6;
+        var _this$canvas7;
         // Verify justify was applied by checking if space widths vary
         let hasVariableSpaces = false;
         this.__charBounds.forEach((lineBounds, i) => {
@@ -27735,36 +27799,36 @@ class Textbox extends IText {
           this.height = this.calcTextHeight();
           console.log(`🔧 JUSTIFY: Used calcTextHeight: ${this.height}px`);
         }
-        (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+        (_this$canvas7 = this.canvas) === null || _this$canvas7 === void 0 || _this$canvas7.requestRenderAll();
       }, 10);
     }
   }
 
-  /**
-   * Returns object representation of an instance
-   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-   * @return {Object} object representation of an instance
+  /**
+   * Returns object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} object representation of an instance
    */
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
   }
 }
-/**
- * Minimum width of textbox, in pixels.
- * @type Number
+/**
+ * Minimum width of textbox, in pixels.
+ * @type Number
  */
-/**
- * Minimum calculated width of a textbox, in pixels.
- * fixed to 2 so that an empty textbox cannot go to 0
- * and is still selectable without text.
- * @type Number
+/**
+ * Minimum calculated width of a textbox, in pixels.
+ * fixed to 2 so that an empty textbox cannot go to 0
+ * and is still selectable without text.
+ * @type Number
  */
-/**
- * Use this boolean property in order to split strings that have no white space concept.
- * this is a cheap way to help with chinese/japanese
- * @type Boolean
- * @since 2.6.0
+/**
+ * Use this boolean property in order to split strings that have no white space concept.
+ * this is a cheap way to help with chinese/japanese
+ * @type Boolean
+ * @since 2.6.0
  */
 _defineProperty(Textbox, "type", 'Textbox');
 _defineProperty(Textbox, "textLayoutProperties", [...IText.textLayoutProperties, 'width']);