diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 3d04dc16ebe..15121180c6e 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -736,11 +736,12 @@ prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), kernedWidth = info.kernedWidth, - width = info.width; + width = info.width, charSpacing; if (this.charSpacing !== 0) { - width += this._getWidthOfCharSpacing(); - kernedWidth += this._getWidthOfCharSpacing(); + charSpacing = this._getWidthOfCharSpacing(); + width += charSpacing; + kernedWidth += charSpacing; } var box = { diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js index 593ebc313ef..6486563884d 100644 --- a/src/shapes/textbox.class.js +++ b/src/shapes/textbox.class.js @@ -326,6 +326,9 @@ lineWidth = wordWidth; lineJustStarted = true; } + else { + lineWidth += additionalSpace; + } if (!lineJustStarted) { line.push(infix); diff --git a/test/unit/textbox.js b/test/unit/textbox.js index 3ea6e3622ee..a6829eb1250 100644 --- a/test/unit/textbox.js +++ b/test/unit/textbox.js @@ -113,5 +113,19 @@ assert.equal(textbox.isEmptyStyles(5), true, 'style is empty at line 5'); assert.equal(textbox.isEmptyStyles(6), false, 'style is empty at line 6'); }); - + QUnit.test('wrapping with charspacing', function(assert) { + var textbox = new fabric.Textbox('xa xb xc xd xe ya yb id', { + width: 190, + }); + assert.equal(textbox.textLines[0], 'xa xb xc xd', 'first line match expectations'); + textbox.charSpacing = 100; + textbox.initDimensions(); + assert.equal(textbox.textLines[0], 'xa xb xc', 'first line match expectations spacing 100'); + textbox.charSpacing = 300; + textbox.initDimensions(); + assert.equal(textbox.textLines[0], 'xa xb', 'first line match expectations spacing 300'); + textbox.charSpacing = 800; + textbox.initDimensions(); + assert.equal(textbox.textLines[0], 'xa', 'first line match expectations spacing 800'); + }); })();