fix: hyphenation (#3267)

Author: diegomura

packages/examples/vite/src/examples/index.ts

@@ -19,6 +19,7 @@ import svg from './svg';
 import svgTransform from './svg-transform';
 import transformOrigin from './transform-origin';
 import forms from './forms';
+import softHyphens from './soft-hyphens';
 
 const EXAMPLES = [
   duplicatedImages,
@@ -42,6 +43,7 @@ const EXAMPLES = [
   transformOrigin,
   imageStressTest,
   forms,
+  softHyphens,
 ];
 
 export default EXAMPLES;

packages/examples/vite/src/examples/soft-hyphens/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Document, Page, Font, Text, StyleSheet } from '@react-pdf/renderer';
+
+const shy = '\u00ad';
+
+Font.register({
+  family: 'Oswald',
+  src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf',
+});
+
+const styles = StyleSheet.create({
+  body: {
+    padding: 20,
+  },
+  text: {
+    fontFamily: 'Oswald',
+    fontSize: 20,
+    width: 100,
+    border: '1px solid red',
+  },
+});
+
+const SoftHyphens = () => (
+  <Document>
+    <Page style={styles.body}>
+      <Text
+        style={styles.text}
+      >{`Potentieel broeikas${shy}gas${shy}emissie${shy}rapport`}</Text>
+    </Page>
+  </Document>
+);
+
+export default {
+  id: 'soft-hyphens',
+  name: 'Soft Hyphens',
+  description: '',
+  Document: SoftHyphens,
+};

packages/layout/tests/text/layoutText.test.ts

@@ -96,7 +96,7 @@ describe('text layoutText', () => {
     const lines = layoutText(node, 50, 100, fontStore);
 
     expect(lines[0].string).toEqual('really-');
-    expect(lines[1].string).toEqual('long');
+    expect(lines[1].string).toEqual('long-');
     expect(lines[2].string).toEqual('text');
     expect(hyphenationCallback).toHaveBeenCalledWith(
       'reallylongtext',

packages/renderer/tests/snapshots/text-test-jsx-tests-text-test-jsx-text-should-hyphenate-text-with-soft-hyphen-1-snap.png

@@ -126,4 +126,33 @@ describe('text', () => {
 
     expect(image).toMatchImageSnapshot();
   });
+
+  test('should hyphenate text with soft hyphen', async () => {
+    const shy = '\u00ad';
+
+    const style = {
+      text: {
+        fontFamily: 'Oswald',
+        fontSize: 20,
+        width: 100,
+        border: '1px solid red',
+      },
+    };
+
+    const image = await renderToImage(
+      <Document>
+        <Page style={{ padding: 20 }}>
+          <Text
+            style={style.text}
+          >{`Potentieel broeikas${shy}gas${shy}emissie${shy}rapport`}</Text>
+
+          <Text
+            style={style.text}
+          >{`Potentieel broeikas${shy}gasemissie${shy}rapport`}</Text>
+        </Page>
+      </Document>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
 });

packages/renderer/tests/text.test.jsx

@@ -10,18 +10,21 @@ const pickFontFromFontStack = (
   fontStack: Font[],
   lastFont?: Font,
 ) => {
+  if (IGNORED_CODE_POINTS.includes(codePoint)) return 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);
 };
 
@@ -52,6 +55,7 @@ const fontSubstitution =
       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,

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

@@ -5,10 +5,8 @@ import insertGlyph from '../../attributedString/insertGlyph';
 import advanceWidthBetween from '../../attributedString/advanceWidthBetween';
 import { AttributedString, Attributes, LayoutOptions } from '../../types';
 import { Node } from './types';
-import generateGlyphs from '../../layout/generateGlyphs';
 
-const SOFT_HYPHEN = '\u00AD';
-const HYPHEN_CODE_POINT = 0x002d;
+const HYPHEN = 0x002d;
 const TOLERANCE_STEPS = 5;
 const TOLERANCE_LIMIT = 50;
 
@@ -47,49 +45,23 @@ const breakLines = (
       end = prevNode.end;
 
       line = slice(start, end, attributedString);
-      if (node.width > 0) {
-        // A non-zero-width penalty indicates an additional hyphen should be inserted
-        line = insertGlyph(line.string.length, HYPHEN_CODE_POINT, line);
-      }
+
+      line = insertGlyph(line.string.length, HYPHEN, line);
     } else {
       end = node.end;
       line = slice(start, end, attributedString);
     }
 
     start = end;
 
-    return [...acc, removeSoftHyphens(line)];
+    return [...acc, line];
   }, []);
 
-  const lastLine = slice(
-    start,
-    attributedString.string.length,
-    attributedString,
-  );
-  lines.push(removeSoftHyphens(lastLine));
+  lines.push(slice(start, attributedString.string.length, attributedString));
 
   return lines;
 };
 
-/**
- * Remove all soft hyphen characters from the line.
- * Soft hyphens are not relevant anymore after line breaking, and will only
- * disrupt the rendering later down the line if left in the text.
- *
- * @param line
- */
-const removeSoftHyphens = (line: AttributedString): AttributedString => {
-  const modifiedLine = {
-    ...line,
-    string: line.string.split(SOFT_HYPHEN).join(''),
-  };
-
-  return {
-    ...modifiedLine,
-    ...generateGlyphs()(modifiedLine),
-  };
-};
-
 /**
  * Return Knuth & Plass nodes based on line and previously calculated syllables
  *
@@ -106,7 +78,6 @@ const getNodes = (
   let start = 0;
 
   const hyphenWidth = 5;
-  const softHyphen = '\u00ad';
 
   const { syllables } = attributedString;
 
@@ -136,8 +107,7 @@ const getNodes = (
 
       if (syllables[index + 1] && hyphenated) {
         // Add penalty node. Penalty nodes are used to represent hyphenation points.
-        const penaltyWidth = s.endsWith(softHyphen) ? hyphenWidth : 0;
-        acc.push(knuthPlass.penalty(penaltyWidth, hyphenPenalty, 1));
+        acc.push(knuthPlass.penalty(hyphenWidth, hyphenPenalty, 1));
       }
     }
 

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

@@ -10,7 +10,7 @@ const hyphenator = hyphen(pattern);
  * @returns Word parts
  */
 const splitHyphen = (word: string) => {
-  return word.split(new RegExp(`(?<=${SOFT_HYPHEN})`));
+  return word.split(SOFT_HYPHEN);
 };
 
 const cache: Record<string, string[]> = {};

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

@@ -2,14 +2,26 @@ import fromFragments from '../attributedString/fromFragments';
 import { Engines } from '../engines';
 import { AttributedString, LayoutOptions } from '../types';
 
+const SOFT_HYPHEN = '\u00ad';
+
 /**
  * Default word hyphenation engine used when no one provided.
  * Does not perform word hyphenation at all
  *
  * @param word
  * @returns Same word
  */
-const defaultHyphenationEngine = (word: string) => [word];
+const defaultHyphenate = (word: string) => [word];
+
+/**
+ * Remove soft hyphens from word
+ *
+ * @param word
+ * @returns Word without soft hyphens
+ */
+const removeSoftHyphens = (word: string) => {
+  return word.replaceAll(SOFT_HYPHEN, '');
+};
 
 /**
  * Wrap words of attribute string
@@ -29,27 +41,40 @@ const wrapWords = (
     const syllables = [];
     const fragments = [];
 
-    const builtinHyphenateWord =
-      engines.wordHyphenation?.() || defaultHyphenationEngine;
-    const hyphenateWord = options.hyphenationCallback || builtinHyphenateWord;
+    console.log('>>>> attributedString', attributedString);
+
+    const builtinHyphenate = engines.wordHyphenation?.() || defaultHyphenate;
+
+    const hyphenate = options.hyphenationCallback || builtinHyphenate;
+
+    let offset = 0;
 
     for (let i = 0; i < attributedString.runs.length; i += 1) {
       let string = '';
+
       const run = attributedString.runs[i];
+
       const words = attributedString.string
         .slice(run.start, run.end)
         .split(/([ ]+)/g)
         .filter(Boolean);
 
       for (let j = 0; j < words.length; j += 1) {
         const word = words[j];
-        const parts = hyphenateWord(word, builtinHyphenateWord);
+        const parts = hyphenate(word, builtinHyphenate).map(removeSoftHyphens);
 
         syllables.push(...parts);
         string += parts.join('');
       }
 
-      fragments.push({ ...run, string });
+      // Modify run start and end based on removed soft hyphens.
+      const runOffset = run.end - run.start - string.length;
+      const start = run.start - offset;
+      const end = run.end - offset - runOffset;
+
+      fragments.push({ ...run, start, end, string });
+
+      offset += runOffset;
     }
 
     const result: AttributedString = { ...fromFragments(fragments), syllables };

packages/textkit/src/layout/wrapWords.ts

@@ -129,7 +129,7 @@ export type Paragraph = AttributedString[];
 export type LayoutOptions = {
   hyphenationCallback?: (
     word: string | null,
-    originalHyphenationCallback: (word: string | null) => string[],
+    fallback: (word: string | null) => string[],
   ) => string[];
   tolerance?: number;
   hyphenationPenalty?: number;