diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index fe363552..32466c2d 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -233,6 +233,7 @@ export class DomRenderer extends Disposable implements IRenderer { public handleDevicePixelRatioChange(): void { this._updateDimensions(); + this._widthCache.clear(); } private _refreshRowElements(cols: number, rows: number): void { @@ -255,6 +256,7 @@ export class DomRenderer extends Disposable implements IRenderer { public handleCharSizeChanged(): void { this._updateDimensions(); + this._widthCache.clear(); } public handleBlur(): void { diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index 6051eb56..fc04fd91 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -391,6 +391,11 @@ export class DomRendererRowFactory { } // apply letter-spacing rule if (spacing) { + /** + * TODO: + * - check if we can ignore tiny spacings here (saves ~400ms) + * - check if we can apply a global spacing to rows element + */ charElement.style.letterSpacing = `${spacing}px`; } diff --git a/src/browser/services/CharSizeService.ts b/src/browser/services/CharSizeService.ts index ab7895e5..18769360 100644 --- a/src/browser/services/CharSizeService.ts +++ b/src/browser/services/CharSizeService.ts @@ -7,7 +7,10 @@ import { IOptionsService } from 'common/services/Services'; import { EventEmitter } from 'common/EventEmitter'; import { ICharSizeService } from 'browser/services/Services'; import { Disposable } from 'common/Lifecycle'; -import { ITerminalOptions } from 'common/Types'; + + +const CHAR_REPEAT = 32; + export class CharSizeService extends Disposable implements ICharSizeService { public serviceBrand: undefined; @@ -67,9 +70,10 @@ class DomMeasureStrategy implements IMeasureStrategy { ) { this._measureElement = this._document.createElement('span'); this._measureElement.classList.add('xterm-char-measure-element'); - this._measureElement.textContent = 'W'; + this._measureElement.textContent = 'W'.repeat(CHAR_REPEAT); this._measureElement.setAttribute('aria-hidden', 'true'); this._measureElement.style.whiteSpace = 'pre'; + this._measureElement.style.fontKerning = 'none'; this._parentElement.appendChild(this._measureElement); } @@ -83,7 +87,7 @@ class DomMeasureStrategy implements IMeasureStrategy { // If values are 0 then the element is likely currently display:none, in which case we should // retain the previous value. if (geometry.width !== 0 && geometry.height !== 0) { - this._result.width = geometry.width; + this._result.width = geometry.width / CHAR_REPEAT; this._result.height = Math.ceil(geometry.height); }