refactor: use TextMetrics for font size if supported

Author: weizhenye

src/index.js

@@ -122,7 +122,9 @@ export default class ASS {
       },
     }));
 
-    container.append($fixFontSize);
+    if ($fixFontSize) {
+      container.append($fixFontSize);
+    }
 
     const { box } = this.#store;
     box.className = 'ASS-box';
@@ -168,7 +170,9 @@ export default class ASS {
     video.removeEventListener('waiting', this.#pause);
     video.removeEventListener('seeking', this.#seek);
 
-    $fixFontSize.remove();
+    if ($fixFontSize) {
+      $fixFontSize.remove();
+    }
     box.remove();
     observer.unobserve(this.#store.video);
 

src/renderer/font-size.js

@@ -1,21 +1,33 @@
 // https://github.com/weizhenye/ASS/wiki/Font-Size-in-ASS
 
+const useTextMetrics = 'fontBoundingBoxAscent' in TextMetrics.prototype;
+
 // It seems max line-height is 1200px in Firefox.
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
-const unitsPerEm = isFirefox ? 512 : 2048;
+const unitsPerEm = !useTextMetrics && isFirefox ? 512 : 2048;
 const lineSpacing = Object.create(null);
 
-export const $fixFontSize = document.createElement('div');
-$fixFontSize.className = 'ASS-fix-font-size';
-$fixFontSize.style.fontSize = `${unitsPerEm}px`;
+const ctx = document.createElement('canvas').getContext('2d');
+
+const $div = document.createElement('div');
+$div.className = 'ASS-fix-font-size';
+$div.style.fontSize = `${unitsPerEm}px`;
 const $span = document.createElement('span');
 $span.textContent = '0';
-$fixFontSize.append($span);
+$div.append($span);
+
+export const $fixFontSize = useTextMetrics ? null : $div;
 
 export function getRealFontSize(fn, fs) {
   if (!lineSpacing[fn]) {
-    $span.style.fontFamily = fn;
-    lineSpacing[fn] = $span.clientHeight;
+    if (useTextMetrics) {
+      ctx.font = `${unitsPerEm}px "${fn}"`;
+      const tm = ctx.measureText('');
+      lineSpacing[fn] = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
+    } else {
+      $span.style.fontFamily = `"${fn}"`;
+      lineSpacing[fn] = $span.clientHeight;
+    }
   }
   return fs * unitsPerEm / lineSpacing[fn];
 }