Replace soft hyphen with visible hyphen if line break demands it (#1488)

* Replace soft hyphen with visible hyphen if line break demands it * Add changelog entry for #457 * Add soft hyphen support in readme
foliojs · Jan 2, 2024 · 1f70b45 · 1f70b45
1 parent 2d5b416
commit 1f70b45
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Add subset for PDF/UA
 - Fix for line breaks in list items (#1486)
+- Fix for soft hyphen not being replaced by visible hyphen if necessary (#457)
 
 ### [v0.14.0] - 2023-11-09
 

diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Installation uses the [npm](http://npmjs.org/) package manager. Just type the fo
   - Transformations
   - Linear and radial gradients
 - Text
-  - Line wrapping
+  - Line wrapping (with soft hyphen recognition)
   - Text alignments
   - Bulleted lists
 - Font embedding

diff --git a/lib/line_wrapper.js b/lib/line_wrapper.js
@@ -1,6 +1,9 @@
 import { EventEmitter } from 'events';
 import LineBreaker from 'linebreak';
 
+const SOFT_HYPHEN = '\u00AD';
+const HYPHEN = '-';
+
 class LineWrapper extends EventEmitter {
   constructor(document, options) {
     super();
@@ -73,6 +76,13 @@ class LineWrapper extends EventEmitter {
     );
   }
 
+  canFit(word, w) {
+    if (word[word.length - 1] != SOFT_HYPHEN) {
+      return w <= this.spaceLeft;
+    }
+    return w + this.wordWidth(HYPHEN) <= this.spaceLeft;
+  }
+
   eachWord(text, fn) {
     // setup a unicode line breaker
     let bk;
@@ -199,13 +209,13 @@ class LineWrapper extends EventEmitter {
         this.spaceLeft = this.lineWidth;
       }
 
-      if (w <= this.spaceLeft) {
+      if (this.canFit(word, w)) {
         buffer += word;
         textWidth += w;
         wc++;
       }
 
-      if (bk.required || w > this.spaceLeft) {
+      if (bk.required || !this.canFit(word, w)) {
         // if the user specified a max height and an ellipsis, and is about to pass the
         // max height and max columns after the next line, append the ellipsis
         const lh = this.document.currentLineHeight(true);
@@ -246,6 +256,12 @@ class LineWrapper extends EventEmitter {
           this.emit('lastLine', options, this);
         }
 
+        // Previous entry is a soft hyphen - add visible hyphen.
+        if (buffer[buffer.length - 1] == SOFT_HYPHEN) {
+          buffer = buffer.slice(0, -1) + HYPHEN;
+          this.spaceLeft -= this.wordWidth(HYPHEN);
+        }
+
         emitLine();
 
         // if we've reached the edge of the page,

diff --git a/tests/visual/__image_snapshots__/text-spec-js-text-soft-hyphen-1-snap.png b/tests/visual/__image_snapshots__/text-spec-js-text-soft-hyphen-1-snap.png
diff --git a/tests/visual/text.spec.js b/tests/visual/text.spec.js
@@ -20,6 +20,20 @@ describe('text', function() {
     });
   });
 
+  test('soft hyphen', function() {
+    return runDocTest(function(doc) {
+      doc.font('tests/fonts/Roboto-Regular.ttf');
+      doc.text(
+        'Text with soft hyphen - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lo ip\u00ADsum',
+        { align: 'justify' }
+      );
+      doc.text(
+        'Text with soft hyphen on the edge - ttttestttestttestttestttestttestttestttestttestttestttes\u00ADtt\u00ADt',
+        { align: 'justify' }
+      );
+    });
+  });
+
   test('decoration', function() {
     return runDocTest(function(doc) {
       doc.font('tests/fonts/Roboto-Regular.ttf');
@@ -31,7 +45,7 @@ describe('text', function() {
         strike: true
       });
       doc.text('Strike', 100, 160, {
-        underline:true,
+        underline: true,
         strike: true
       });
     });