Add language attribute to canvas

src/display/text_layer.js

@@ -64,7 +64,10 @@ const DEFAULT_FONT_ASCENT = 0.8;
 const ascentCache = new Map();
 let _canvasContext = null;
 
-function getCtx() {
+function getCtx(lang) {
+  if (_canvasContext && _canvasContext.canvas.lang !== (lang || "")) {
+    cleanupTextLayer();
+  }
   if (!_canvasContext) {
     // We don't use an OffscreenCanvas here because we use serif/sans serif
     // fonts with it and they depends on the locale.
@@ -77,6 +80,9 @@ function getCtx() {
     // OffscreenCanvas.
     const canvas = document.createElement("canvas");
     canvas.className = "hiddenCanvasElement";
+    if (lang) {
+      canvas.lang = lang;
+    }
     document.body.append(canvas);
     _canvasContext = canvas.getContext("2d", { alpha: false });
   }
@@ -89,13 +95,13 @@ function cleanupTextLayer() {
   _canvasContext = null;
 }
 
-function getAscent(fontFamily) {
+function getAscent(fontFamily, lang) {
   const cachedAscent = ascentCache.get(fontFamily);
   if (cachedAscent) {
     return cachedAscent;
   }
 
-  const ctx = getCtx();
+  const ctx = getCtx(lang);
 
   const savedFont = ctx.font;
   ctx.canvas.width = ctx.canvas.height = DEFAULT_FONT_SIZE;
@@ -184,7 +190,7 @@ function appendText(task, geom, styles) {
   const fontFamily =
     (task._fontInspectorEnabled && style.fontSubstitution) || style.fontFamily;
   const fontHeight = Math.hypot(tx[2], tx[3]);
-  const fontAscent = fontHeight * getAscent(fontFamily);
+  const fontAscent = fontHeight * getAscent(fontFamily, task.lang);
 
   let left, top;
   if (angle === 0) {
@@ -315,6 +321,7 @@ class TextLayerRenderTask {
     textDivs,
     textDivProperties,
     textContentItemsStr,
+    lang,
   }) {
     this._textContentSource = textContentSource;
     this._isReadableStream = textContentSource instanceof ReadableStream;
@@ -327,13 +334,14 @@ class TextLayerRenderTask {
     this._textDivProperties = textDivProperties || new WeakMap();
     this._canceled = false;
     this._capability = new PromiseCapability();
+    this.lang = lang;
     this._layoutTextParams = {
       prevFontSize: null,
       prevFontFamily: null,
       div: null,
       scale: viewport.scale * (globalThis.devicePixelRatio || 1),
       properties: null,
-      ctx: getCtx(),
+      ctx: getCtx(lang),
     };
     const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims;
     this._transform = [1, 0, 0, -1, -pageX, pageY + pageHeight];
@@ -479,6 +487,7 @@ function updateTextLayer({
   viewport,
   textDivs,
   textDivProperties,
+  lang,
   mustRotate = true,
   mustRescale = true,
 }) {
@@ -487,7 +496,7 @@ function updateTextLayer({
   }
 
   if (mustRescale) {
-    const ctx = getCtx();
+    const ctx = getCtx(lang);
     const scale = viewport.scale * (globalThis.devicePixelRatio || 1);
     const params = {
       prevFontSize: null,

web/pdf_page_view.js

@@ -135,7 +135,7 @@ class PDFPageView {
   constructor(options) {
     const container = options.container;
     const defaultViewport = options.defaultViewport;
-
+    this.lang = options.lang;
     this.id = options.id;
     this.renderingId = "page" + this.id;
     this.#layerProperties = options.layerProperties || DEFAULT_LAYER_PROPERTIES;
@@ -889,6 +889,7 @@ class PDFPageView {
       this.textLayer = new TextLayerBuilder({
         highlighter: this._textHighlighter,
         accessibilityManager: this._accessibilityManager,
+        lang: this.lang,
         enablePermissions:
           this.#textLayerMode === TextLayerMode.ENABLE_PERMISSIONS,
       });

web/pdf_viewer.js

@@ -826,11 +826,11 @@ class PDFViewer {
       this._onAfterDraw = null;
     };
     this.eventBus._on("pagerendered", this._onAfterDraw);
-
+    const metadataPromise = pdfDocument.getMetadata();
     // Fetch a single page so we can get a viewport that will be the default
     // viewport for all pages
-    Promise.all([firstPagePromise, permissionsPromise])
-      .then(([firstPdfPage, permissions]) => {
+    Promise.all([firstPagePromise, permissionsPromise, metadataPromise])
+      .then(([firstPdfPage, permissions, { info }]) => {
         if (pdfDocument !== this.pdfDocument) {
           return; // The document was closed while the first page resolved.
         }
@@ -926,6 +926,7 @@ class PDFViewer {
             pageColors: this.pageColors,
             l10n: this.l10n,
             layerProperties: this._layerProperties,
+            lang: info.Language,
           });
           this._pages.push(pageView);
         }
@@ -1015,14 +1016,12 @@ class PDFViewer {
 
         this.eventBus.dispatch("pagesinit", { source: this });
 
-        pdfDocument.getMetadata().then(({ info }) => {
-          if (pdfDocument !== this.pdfDocument) {
-            return; // The document was closed while the metadata resolved.
-          }
-          if (info.Language) {
-            this.viewer.lang = info.Language;
-          }
-        });
+        if (pdfDocument !== this.pdfDocument) {
+          return; // The document was closed while the metadata resolved.
+        }
+        if (info.Language) {
+          this.viewer.lang = info.Language;
+        }
 
         if (this.defaultRenderingQueue) {
           this.update();

web/text_layer_builder.js

@@ -47,6 +47,7 @@ class TextLayerBuilder {
   constructor({
     highlighter = null,
     accessibilityManager = null,
+    lang,
     enablePermissions = false,
   }) {
     this.textContentItemsStr = [];
@@ -57,7 +58,7 @@ class TextLayerBuilder {
     this.highlighter = highlighter;
     this.accessibilityManager = accessibilityManager;
     this.#enablePermissions = enablePermissions === true;
-
+    this.lang = lang;
     /**
      * Callback used to attach the textLayer to the DOM.
      * @type {function}
@@ -103,6 +104,7 @@ class TextLayerBuilder {
           viewport,
           textDivs: this.textDivs,
           textDivProperties: this.textDivProperties,
+          lang: this.lang,
           mustRescale,
           mustRotate,
         });
@@ -124,6 +126,7 @@ class TextLayerBuilder {
       textDivs: this.textDivs,
       textDivProperties: this.textDivProperties,
       textContentItemsStr: this.textContentItemsStr,
+      lang: this.lang,
     });
 
     await this.textLayerRenderTask.promise;