refactor: unify font substitution engines

.changeset/soft-camels-visit.md

@@ -0,0 +1,6 @@
+---
+"@react-pdf/textkit": minor
+"@react-pdf/layout": minor
+---
+
+refactor: unify font substitution engines

packages/layout/src/svg/layoutText.ts

@@ -6,14 +6,14 @@ import layoutEngine, {
   justification,
   scriptItemizer,
   wordHyphenation,
+  fontSubstitution,
   textDecoration,
   fromFragments,
   Fragment,
   Font,
 } from '@react-pdf/textkit';
 
 import transformText from '../text/transformText';
-import fontSubstitution from '../text/fontSubstitution';
 import {
   SafeNode,
   SafeTextNode,

packages/layout/src/text/layoutText.ts

@@ -5,10 +5,10 @@ import layoutEngine, {
   scriptItemizer,
   wordHyphenation,
   textDecoration,
+  fontSubstitution,
 } from '@react-pdf/textkit';
 import FontStore from '@react-pdf/font';
 
-import fontSubstitution from './fontSubstitution';
 import getAttributedString from './getAttributedString';
 import { SafeTextNode } from '../types';
 

packages/textkit/src/engines/fontSubstitution/index.ts

@@ -1,60 +1,81 @@
 import { last } from '@react-pdf/fns';
-
-import empty from '../../attributedString/empty';
 import { AttributedString, Run } from '../../types';
 
-/**
- * @param run - Run
- * @returns Font size
- */
-const getFontSize = (run: Run) => {
-  return run.attributes.fontSize || 12;
-};
+const IGNORED_CODE_POINTS = [173];
+
+const getFontSize = (run: Run) => run.attributes.fontSize || 12;
 
-/**
- * Resolve font runs in an AttributedString, grouping equal
- * runs and performing font substitution where necessary.
- */
-const fontSubstitution = () => {
-  /**
-   * @param attributedString - Attributed string
-   * @returns Attributed string
-   */
-  return (attributedString: AttributedString) => {
-    const { string, runs } = attributedString;
+const pickFontFromFontStack = (codePoint, fontStack, lastFont) => {
+  const fontStackWithFallback = [...fontStack, lastFont];
+  for (let i = 0; i < fontStackWithFallback.length; i += 1) {
+    const font = fontStackWithFallback[i];
+    if (
+      !IGNORED_CODE_POINTS.includes(codePoint) &&
+      font &&
+      font.hasGlyphForCodePoint &&
+      font.hasGlyphForCodePoint(codePoint)
+    ) {
+      return font;
+    }
+  }
+  return fontStack.at(-1);
+};
 
+const fontSubstitution =
+  () =>
+  ({ string, runs }: AttributedString) => {
     let lastFont = null;
+    let lastFontSize = null;
     let lastIndex = 0;
     let index = 0;
-    const res: Run[] = [];
 
-    if (!string) return empty();
+    const res: Run[] = [];
 
-    for (const run of runs) {
-      const fontSize = getFontSize(run);
-      const defaultFont = run.attributes.font;
+    for (let i = 0; i < runs.length; i += 1) {
+      const run = runs[i];
 
       if (string.length === 0) {
-        res.push({ start: 0, end: 0, attributes: { font: defaultFont } });
+        res.push({
+          start: 0,
+          end: 0,
+          attributes: { font: run.attributes.font },
+        });
         break;
       }
 
-      for (const char of string.slice(run.start, run.end)) {
-        const font = defaultFont;
+      const chars = string.slice(run.start, run.end);
+
+      for (let j = 0; j < chars.length; j += 1) {
+        const char = chars[j];
+        const codePoint = char.codePointAt(0);
+        // If the default font does not have a glyph and the fallback font does, we use it
+        const font = pickFontFromFontStack(
+          codePoint,
+          run.attributes.font,
+          lastFont,
+        );
 
-        if (font !== lastFont) {
+        const fontSize = getFontSize(run);
+
+        // If anything that would impact res has changed, update it
+        if (
+          font !== lastFont ||
+          fontSize !== lastFontSize ||
+          font.unitsPerEm !== lastFont.unitsPerEm
+        ) {
           if (lastFont) {
             res.push({
               start: lastIndex,
               end: index,
               attributes: {
                 font: lastFont,
-                scale: lastFont ? fontSize / lastFont.unitsPerEm : 0,
+                scale: lastFontSize / lastFont.unitsPerEm,
               },
             });
           }
 
           lastFont = font;
+          lastFontSize = fontSize;
           lastIndex = index;
         }
 
@@ -70,13 +91,12 @@ const fontSubstitution = () => {
         end: string.length,
         attributes: {
           font: lastFont,
-          scale: lastFont ? fontSize / lastFont.unitsPerEm : 0,
+          scale: fontSize / lastFont.unitsPerEm,
         },
       });
     }
 
-    return { string, runs: res };
+    return { string, runs: res } as AttributedString;
   };
-};
 
 export default fontSubstitution;