diff --git a/src/display/text_layer.js b/src/display/text_layer.js index d68d37f804c932..9f5756dd0e2c6d 100644 --- a/src/display/text_layer.js +++ b/src/display/text_layer.js @@ -132,12 +132,14 @@ function appendText(task, geom, styles, ctx) { paddingRight: 0, paddingTop: 0, scale: 1, + fontSize: 0, } : { angle: 0, canvasWidth: 0, hasText: geom.str !== "", hasEOL: geom.hasEOL, + fontSize: 0, }; task._textDivs.push(textDiv); @@ -166,6 +168,8 @@ function appendText(task, geom, styles, ctx) { textDiv.style.fontSize = `${fontHeight}px`; textDiv.style.fontFamily = style.fontFamily; + textDivProperties.fontSize = fontHeight; + // Keeps screen readers from pausing on every new text span. textDiv.setAttribute("role", "presentation"); @@ -595,6 +599,7 @@ class TextLayerRenderTask { this._capability = createPromiseCapability(); this._renderTimer = null; this._bounds = []; + this._devicePixelRatio = globalThis.devicePixelRatio || 1; // Always clean-up the temporary canvas once rendering is no longer pending. this._capability.promise @@ -680,14 +685,17 @@ class TextLayerRenderTask { let transform = ""; if (textDivProperties.canvasWidth !== 0 && textDivProperties.hasText) { - const { fontSize, fontFamily } = textDiv.style; + const { fontFamily } = textDiv.style; + const { fontSize } = textDivProperties; // Only build font string and set to context if different from last. if ( fontSize !== this._layoutTextLastFontSize || fontFamily !== this._layoutTextLastFontFamily ) { - this._layoutTextCtx.font = `${fontSize} ${fontFamily}`; + this._layoutTextCtx.font = `${ + fontSize * this._devicePixelRatio + }px ${fontFamily}`; this._layoutTextLastFontSize = fontSize; this._layoutTextLastFontFamily = fontFamily; } @@ -695,7 +703,8 @@ class TextLayerRenderTask { const { width } = this._layoutTextCtx.measureText(textDiv.textContent); if (width > 0) { - const scale = textDivProperties.canvasWidth / width; + const scale = + (this._devicePixelRatio * textDivProperties.canvasWidth) / width; if (this._enhanceTextSelection) { textDivProperties.scale = scale; }