Add lang attribute to canvas element

Fixes issue #16843. In certain cases, the text layer was misaligned due to a difference between the `lang` attribute of the viewer and the canvas. This commit addresses the problem by adding the `lang` attribute to the canvas. The issue was caused because PDF.js uses serif/sans-serif fonts to generate the text layer and relies on system fonts. The difference in the `lang` attribute led to different fonts being picked, causing the misalignment.
mozilla · May 21, 2024 · 86f22d0 · 86f22d0
1 parent 9ee7c07
commit 86f22d0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/display/text_layer.js b/src/display/text_layer.js
@@ -81,7 +81,7 @@ class TextLayer {
 
   static #ascentCache = new Map();
 
-  static #canvasCtx = null;
+  static #canvasContexts = new Map();
 
   static #pendingTextLayers = new Set();
 
@@ -423,13 +423,15 @@ class TextLayer {
       return;
     }
     this.#ascentCache.clear();
-
-    this.#canvasCtx?.canvas.remove();
-    this.#canvasCtx = null;
+    for (const canvasContext of this.#canvasContexts.values()) {
+      canvasContext.canvas.remove();
+    }
+    this.#canvasContexts.clear();
   }
 
   static #getCtx(lang = null) {
-    if (!this.#canvasCtx) {
+    let canvasContext = this.#canvasContexts.get((lang ||= ""));
+    if (!this.#canvasContexts) {
       // We don't use an OffscreenCanvas here because we use serif/sans serif
       // fonts with it and they depends on the locale.
       // In Firefox, the <html> element get a lang attribute that depends on
@@ -442,10 +444,12 @@ class TextLayer {
       // OffscreenCanvas.
       const canvas = document.createElement("canvas");
       canvas.className = "hiddenCanvasElement";
+      canvas.lang = lang;
       document.body.append(canvas);
-      this.#canvasCtx = canvas.getContext("2d", { alpha: false });
+      canvasContext = canvas.getContext("2d", { alpha: false });
+      this.#canvasContexts.set(lang, canvasContext);
     }
-    return this.#canvasCtx;
+    return canvasContext;
   }
 
   static #getAscent(fontFamily, lang) {

diff --git a/test/pdfs/issue16843.pdf.link b/test/pdfs/issue16843.pdf.link
@@ -0,0 +1 @@
+https://github.com/mozilla/pdf.js/files/12366234/16_2020-044.pdf
diff --git a/test/test_manifest.json b/test/test_manifest.json
@@ -2202,6 +2202,15 @@
     "lastPage": 1,
     "type": "eq"
   },
+  {
+    "id": "issue16843",
+    "file": "pdfs/issue16843.pdf",
+    "md5": "2845b2f7f02690c388c24c488297028a",
+    "rounds": 1,
+    "link": true,
+    "firstPage": 1,
+    "type": "text"
+  },
   {
     "id": "issue5509",
     "file": "pdfs/issue5509.pdf",