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 · b17cce5 · b17cce5
1 parent 59637c1
commit b17cce5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/display/text_layer.js b/src/display/text_layer.js
@@ -62,11 +62,12 @@ const MAX_TEXT_DIVS_TO_RENDER = 100000;
 const DEFAULT_FONT_SIZE = 30;
 const DEFAULT_FONT_ASCENT = 0.8;
 const ascentCache = new Map();
-let _canvasContext = null;
+const _canvasContexts = new Map();
 const pendingTextLayers = new Set();
 
 function getCtx(lang = null) {
-  if (!_canvasContext) {
+  let canvasContext = _canvasContexts.get((lang ||= ""));
+  if (!canvasContext) {
     // 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 what
@@ -78,19 +79,23 @@ function getCtx(lang = null) {
     // OffscreenCanvas.
     const canvas = document.createElement("canvas");
     canvas.className = "hiddenCanvasElement";
+    canvas.lang = lang;
     document.body.append(canvas);
-    _canvasContext = canvas.getContext("2d", { alpha: false });
+    canvasContext = canvas.getContext("2d", { alpha: false });
+    _canvasContexts.set(lang, canvasContext);
   }
 
-  return _canvasContext;
+  return canvasContext;
 }
 
 function cleanupTextLayer() {
   if (pendingTextLayers.size > 0) {
     return;
   }
-  _canvasContext?.canvas.remove();
-  _canvasContext = null;
+  for (const canvasContext of _canvasContexts.values()) {
+    canvasContext.canvas.remove();
+  }
+  _canvasContexts.clear();
 }
 
 function 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",