diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index ced0fd1f..284590ae 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -477,10 +477,9 @@ export class Text extends Shape { _getTextWidth(text: string) { const letterSpacing = this.letterSpacing(); const length = text.length; - return ( - getDummyContext().measureText(text).width + - (length ? letterSpacing * (length - 1) : 0) - ); + // letterSpacing * length is the total letter spacing for the text + // previously we used letterSpacing * (length - 1) but it doesn't match DOM behavior + return getDummyContext().measureText(text).width + letterSpacing * length; } _setTextData() { let lines = this.text().split('\n'), diff --git a/test/sandbox.html b/test/sandbox.html index 2b17ce67..82bf29e9 100644 --- a/test/sandbox.html +++ b/test/sandbox.html @@ -13,6 +13,27 @@ width: 100vw; height: 100vh; } + body { + padding: 0; + margin: 0; + } + + .test { + position: absolute; + color: red; + font-size: 20px; + font-family: Arial; + border: 0; + background-color: transparent; + outline: none; + resize: none; + overflow: hidden; + line-height: 1; + padding: 0px; + letter-spacing: 20px; + width: 500px; + text-align: center; + } diff --git a/test/unit/Text-test.ts b/test/unit/Text-test.ts index 25897e98..206fe0f2 100644 --- a/test/unit/Text-test.ts +++ b/test/unit/Text-test.ts @@ -282,7 +282,7 @@ describe('Text', function () { var oldWidth = text.width(); text.letterSpacing(10); - assert.equal(text.width(), oldWidth + 40); + assert.equal(text.width(), oldWidth + 50); layer.draw(); }); // ====================================================== @@ -780,7 +780,7 @@ describe('Text', function () { } var trace = - 'fillText(;,106.482,77);fillStyle=#555;fillText( ,117.549,77);fillStyle=#555;fillText(A,126.438,77);fillStyle=#555;fillText(n,140.776,77);fillStyle=#555;fillText(d,153.563,77);fillStyle=#555;fillText( ,168.525,77);fillStyle=#555;fillText(o,177.415,77);fillStyle=#555;fillText(n,190.201,77);fillStyle=#555;fillText(e,202.987,77);fillStyle=#555;fillText( ,217.95,77);fillStyle=#555;fillText(m,226.84,77);fillStyle=#555;fillText(a,243.502,77);fillStyle=#555;fillText(n,256.288,77);fillStyle=#555;fillText( ,271.251,77);fillStyle=#555;fillText(i,280.141,77);fillStyle=#555;fillText(n,288.251,77);fillStyle=#555;fillText( ,303.214,77);fillStyle=#555;fillText(h,312.104,77);fillStyle=#555;fillText(i,324.89,77);fillStyle=#555;fillText(s,333,77);restore();save();save();beginPath();moveTo(0,98);lineTo(245,98);stroke();restore();save();beginPath();moveTo(0,91);lineTo(245,91);stroke();restore();fillStyle=#555;fillText(t,0,91);fillStyle=#555;fillText(i,8.89,91);fillStyle=#555;fillText(m,17,91);fillStyle=#555;fillText(e,33.662,91);fillStyle=#555;fillText( ,46.448,91);fillStyle=#555;fillText(p,55.338,91);fillStyle=#555;fillText(l,68.124,91);fillStyle=#555;fillText(a,76.234,91);fillStyle=#555;fillText(y,89.021,91);fillStyle=#555;fillText(s,101.021,91);fillStyle=#555;fillText( ,113.021,91);fillStyle=#555;fillText(m,121.91,91);fillStyle=#555;fillText(a,138.572,91);fillStyle=#555;fillText(n,151.358,91);fillStyle=#555;fillText(y,164.145,91);fillStyle=#555;fillText( ,176.145,91);fillStyle=#555;fillText(p,185.034,91);fillStyle=#555;fillText(a,197.82,91);fillStyle=#555;fillText(r,210.606,91);fillStyle=#555;fillText(t,220.269,91);fillStyle=#555;fillText(s,229.158,91);fillStyle=#555;fillText(.,241.158,91);restore();restore();'; + 'fillText(;,106.482,77);fillStyle=#555;fillText( ,116.549,77);fillStyle=#555;fillText(A,125.438,77);fillStyle=#555;fillText(n,139.776,77);fillStyle=#555;fillText(d,152.563,77);fillStyle=#555;fillText( ,166.525,77);fillStyle=#555;fillText(o,175.415,77);fillStyle=#555;fillText(n,188.201,77);fillStyle=#555;fillText(e,200.987,77);fillStyle=#555;fillText( ,214.95,77);fillStyle=#555;fillText(m,223.84,77);fillStyle=#555;fillText(a,240.502,77);fillStyle=#555;fillText(n,253.288,77);fillStyle=#555;fillText( ,267.251,77);fillStyle=#555;fillText(i,276.141,77);fillStyle=#555;fillText(n,284.251,77);fillStyle=#555;fillText( ,298.214,77);fillStyle=#555;fillText(h,307.104,77);fillStyle=#555;fillText(i,319.89,77);fillStyle=#555;fillText(s,328,77);restore();save();save();beginPath();moveTo(0,98);lineTo(250,98);stroke();restore();save();beginPath();moveTo(0,91);lineTo(250,91);stroke();restore();fillStyle=#555;fillText(t,0,91);fillStyle=#555;fillText(i,8.89,91);fillStyle=#555;fillText(m,17,91);fillStyle=#555;fillText(e,33.662,91);fillStyle=#555;fillText( ,46.448,91);fillStyle=#555;fillText(p,55.338,91);fillStyle=#555;fillText(l,68.124,91);fillStyle=#555;fillText(a,76.234,91);fillStyle=#555;fillText(y,89.021,91);fillStyle=#555;fillText(s,101.021,91);fillStyle=#555;fillText( ,113.021,91);fillStyle=#555;fillText(m,121.91,91);fillStyle=#555;fillText(a,138.572,91);fillStyle=#555;fillText(n,151.358,91);fillStyle=#555;fillText(y,164.145,91);fillStyle=#555;fillText( ,176.145,91);fillStyle=#555;fillText(p,185.034,91);fillStyle=#555;fillText(a,197.82,91);fillStyle=#555;fillText(r,210.606,91);fillStyle=#555;fillText(t,220.269,91);fillStyle=#555;fillText(s,229.158,91);fillStyle=#555;fillText(.,241.158,91);restore();restore();'; assert.equal(layer.getContext().getTrace(), trace); }); @@ -1244,9 +1244,9 @@ describe('Text', function () { // so we need to adjust offset const diff = isBrowser ? 4 : 50; assert.equal(Math.abs(Math.round(text1.width()) - 1725) < diff, true); - assert.equal(Math.abs(Math.round(text2.width()) - 2613) < diff, true); - assert.equal(Math.abs(Math.round(text3.width()) - 2005) < diff, true); - assert.equal(Math.abs(Math.round(text4.width()) - 1932) < diff, true); + assert.equal(Math.abs(Math.round(text2.width()) - 2616) < diff, true); + assert.equal(Math.abs(Math.round(text3.width()) - 2009) < diff, true); + assert.equal(Math.abs(Math.round(text4.width()) - 1936) < diff, true); }); it('default text color should be black', function () {