diff --git a/src/display/text_layer.js b/src/display/text_layer.js index 94837e8ffeaf6e..44443ebc9fa85b 100644 --- a/src/display/text_layer.js +++ b/src/display/text_layer.js @@ -116,13 +116,14 @@ class TextLayer { div: null, properties: null, ctx: null, - minFontSize: null, }; const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims; this.#transform = [1, 0, 0, -1, -pageX, pageY + pageHeight]; this.#pageWidth = pageWidth; this.#pageHeight = pageHeight; + TextLayer.#ensureMinFontSizeComputed(); + setLayerDimensions(container, viewport); // Always clean-up the temporary canvas once rendering is no longer pending. @@ -199,7 +200,6 @@ class TextLayer { div: null, properties: null, ctx: TextLayer.#getCtx(this.#lang), - minFontSize: TextLayer.#getMinFontSize(), }; for (const div of this.#textDivs) { params.properties = this.#textDivProperties.get(div); @@ -247,7 +247,6 @@ class TextLayer { return; } this.#layoutTextParams.ctx ??= TextLayer.#getCtx(this.#lang); - this.#layoutTextParams.minFontSize ??= TextLayer.#getMinFontSize(); const textDivs = this.#textDivs, textContentItemsStr = this.#textContentItemsStr; @@ -331,11 +330,11 @@ class TextLayer { divStyle.left = `${scaleFactorStr}${left.toFixed(2)}px)`; divStyle.top = `${scaleFactorStr}${top.toFixed(2)}px)`; } - // We multiply the font size by #getMinFontSize(), and then #layout will - // scale the element by 1/#getMinFontSize(). This allows us to effectively + // We multiply the font size by #minFontSize, and then #layout will + // scale the element by 1/#minFontSize. This allows us to effectively // ignore the minimum font size enforced by the browser, so that the text // layer s can always match the size of the text in the canvas. - divStyle.fontSize = `${scaleFactorStr}${(TextLayer.#getMinFontSize() * fontHeight).toFixed(2)}px)`; + divStyle.fontSize = `${scaleFactorStr}${(TextLayer.#minFontSize * fontHeight).toFixed(2)}px)`; divStyle.fontFamily = fontFamily; textDivProperties.fontSize = fontHeight; @@ -395,13 +394,12 @@ class TextLayer { } #layout(params) { - const { div, properties, ctx, prevFontSize, prevFontFamily, minFontSize } = - params; + const { div, properties, ctx, prevFontSize, prevFontFamily } = params; const { style } = div; let transform = ""; - if (minFontSize > 1) { - transform = `scale(${1 / minFontSize})`; + if (TextLayer.#minFontSize > 1) { + transform = `scale(${1 / TextLayer.#minFontSize})`; } if (properties.canvasWidth !== 0 && properties.hasText) { @@ -474,7 +472,7 @@ class TextLayer { /** * @returns {number} The minimum font size enforced by the browser */ - static #getMinFontSize() { + static #ensureMinFontSizeComputed() { if (this.#minFontSize === null) { const div = document.createElement("div"); div.style.opacity = 0; @@ -488,8 +486,6 @@ class TextLayer { this.#minFontSize = div.getBoundingClientRect().height; div.remove(); } - - return this.#minFontSize; } static #getAscent(fontFamily, lang) {