feat(troika-three-text): Add a property to toggle ligatures

packages/troika-3d-text/src/facade/Text3DFacade.js

@@ -19,6 +19,7 @@ export const TEXT_MESH_PROPS = [
   'textAlign',
   'textIndent',
   'whiteSpace',
+  'enableLigatures',
   'material',
   'color',
   'colorRanges',

packages/troika-examples/text/TextExample.jsx

@@ -116,6 +116,7 @@ class TextExample extends React.Component {
       textScale: 1,
       lineHeight: 1.15,
       letterSpacing: 0,
+      enableLigatures: true,
       maxWidth: 2, //2m
       textAlign: 'justify',
       textIndent: 0,
@@ -217,6 +218,7 @@ class TextExample extends React.Component {
               textIndent: state.textIndent,
               lineHeight: state.lineHeight,
               letterSpacing: state.letterSpacing,
+              enableLigatures: state.enableLigatures,
               anchorX: state.anchorX,
               anchorY: state.anchorY,
               selectable: state.selectable,
@@ -342,6 +344,7 @@ class TextExample extends React.Component {
                 {type: 'number', path: "maxWidth", min: 1, max: 5, step: 0.01},
                 {type: 'number', path: "lineHeight", min: 1, max: 2, step: 0.01},
                 {type: 'number', path: "letterSpacing", min: -0.1, max: 0.5, step: 0.01},
+                {type: 'boolean', path: "enableLigatures", label: "Ligatures"},
                 {type: 'number', path: "fillOpacity", min: 0, max: 1, step: 0.0001},
                 {type: 'number', path: "curveRadius", min: -5, max: 5, step: 0.001},
 

packages/troika-three-text/src/FontParser.js

@@ -13,7 +13,7 @@ import { defineWorkerModule } from 'troika-worker-utils'
  * @property {number} descender
  * @property {number} xHeight
  * @property {(number) => boolean} supportsCodePoint
- * @property {(text:string, fontSize:number, letterSpacing:number, callback) => number} forEachGlyph
+ * @property {(text:string, fontSize:number, letterSpacing:number, enableLigatures:boolean, callback) => number} forEachGlyph
  * @property {number} lineGap
  * @property {number} capHeight
  * @property {number} unitsPerEm
@@ -122,34 +122,39 @@ function parserFactory(Typr, woff2otf) {
     return joiningForms
   }
 
-  function stringToGlyphs (font, str) {
+  function stringToGlyphs(font, str, letterSpacing, enableLigatures) {
     const glyphIds = []
     for (let i = 0; i < str.length; i++) {
       const cc = str.codePointAt(i)
       if (cc > 0xffff) i++
       glyphIds.push(Typr.U.codeToGlyph(font, cc))
     }
 
+    if (!enableLigatures) return glyphIds
+
     const gsub = font['GSUB']
     if (gsub) {
-      const {lookupList, featureList} = gsub
+      const { lookupList, featureList } = gsub
       let joiningForms
       const supportedFeatures = /^(rlig|liga|mset|isol|init|fina|medi|half|pres|blws|ccmp)$/
+      // These features are ignored when non-zero letter spacing is applied
+      const ignoreLetterSpacingFeatures = /^(liga|dlig|clig)$/
       const usedLookups = []
       featureList.forEach(feature => {
-        if (supportedFeatures.test(feature.tag)) {
-          for (let ti = 0; ti < feature.tab.length; ti++) {
-            if (usedLookups[feature.tab[ti]]) continue
-            usedLookups[feature.tab[ti]] = true
-            const tab = lookupList[feature.tab[ti]]
-            const isJoiningFeature = /^(isol|init|fina|medi)$/.test(feature.tag)
-            if (isJoiningFeature && !joiningForms) { //lazy
-              joiningForms = detectJoiningForms(str)
-            }
-            for (let ci = 0; ci < glyphIds.length; ci++) {
-              if (!joiningForms || !isJoiningFeature || formsToFeatures[joiningForms[ci]] === feature.tag) {
-                Typr.U._applySubs(glyphIds, ci, tab, lookupList)
-              }
+        if (!supportedFeatures.test(feature.tag)) return
+        if (letterSpacing !== 0 && ignoreLetterSpacingFeatures.test(feature.tag)) return
+
+        for (let ti = 0; ti < feature.tab.length; ti++) {
+          if (usedLookups[feature.tab[ti]]) continue
+          usedLookups[feature.tab[ti]] = true
+          const tab = lookupList[feature.tab[ti]]
+          const isJoiningFeature = /^(isol|init|fina|medi)$/.test(feature.tag)
+          if (isJoiningFeature && !joiningForms) { //lazy
+            joiningForms = detectJoiningForms(str)
+          }
+          for (let ci = 0; ci < glyphIds.length; ci++) {
+            if (!joiningForms || !isJoiningFeature || formsToFeatures[joiningForms[ci]] === feature.tag) {
+              Typr.U._applySubs(glyphIds, ci, tab, lookupList)
             }
           }
         }
@@ -321,11 +326,11 @@ function parserFactory(Typr, woff2otf) {
       supportsCodePoint(code) {
         return Typr.U.codeToGlyph(typrFont, code) > 0
       },
-      forEachGlyph(text, fontSize, letterSpacing, callback) {
+      forEachGlyph(text, fontSize, letterSpacing, enableLigatures, callback) {
         let penX = 0
         const fontScale = 1 / fontObj.unitsPerEm * fontSize
 
-        const glyphIds = stringToGlyphs(typrFont, text)
+        const glyphIds = stringToGlyphs(typrFont, text, letterSpacing, enableLigatures)
         let charIndex = 0
         const positions = calcGlyphPositions(typrFont, glyphIds)
 

packages/troika-three-text/src/Text.js

@@ -66,6 +66,7 @@ const SYNCABLE_PROPS = [
   'textAlign',
   'textIndent',
   'whiteSpace',
+  'enableLigatures',
   'anchorX',
   'anchorY',
   'colorRanges',
@@ -222,6 +223,13 @@ class Text extends Mesh {
      */
     this.whiteSpace = 'normal'
 
+    /**
+     * @member {boolean} enableLigatures
+     * Toggles ligature substitution.
+     * Defaults to true.
+     */
+    this.enableLigatures = true
+
 
     // === Presentation properties: === //
 
@@ -432,6 +440,7 @@ class Text extends Mesh {
           textAlign: this.textAlign,
           textIndent: this.textIndent,
           whiteSpace: this.whiteSpace,
+          enableLigatures: this.enableLigatures,
           overflowWrap: this.overflowWrap,
           anchorX: this.anchorX,
           anchorY: this.anchorY,

packages/troika-three-text/src/Typesetter.js

@@ -21,6 +21,7 @@
  * @property {string} [textAlign='left']
  * @property {number} [textIndent=0]
  * @property {'normal'|'nowrap'} [whiteSpace='normal']
+ * @property {boolean} [enableLigatures=true]
  * @property {'normal'|'break-word'} [overflowWrap='normal']
  * @property {AnchorXValue} [anchorX=0]
  * @property {AnchorYValue} [anchorY=0]
@@ -156,6 +157,7 @@ export function createTypesetter(resolveFonts, bidi) {
       textAlign='left',
       textIndent=0,
       whiteSpace='normal',
+      enableLigatures=true,
       overflowWrap='normal',
       anchorX = 0,
       anchorY = 0,
@@ -256,7 +258,7 @@ export function createTypesetter(resolveFonts, bidi) {
 
         const runText = text.slice(run.start, run.end + 1)
         let prevGlyphX, prevGlyphObj
-        fontObj.forEachGlyph(runText, fontSize, letterSpacing, (glyphObj, glyphX, glyphY, charIndex) => {
+        fontObj.forEachGlyph(runText, fontSize, letterSpacing, enableLigatures, (glyphObj, glyphX, glyphY, charIndex) => {
           glyphX += prevRunEndX
           charIndex += run.start
           prevGlyphX = glyphX
@@ -503,7 +505,7 @@ export function createTypesetter(resolveFonts, bidi) {
               if (rtl) {
                 const mirrored = bidi.getMirroredCharacter(text[glyphInfo.charIndex])
                 if (mirrored) {
-                  glyphInfo.fontData.fontObj.forEachGlyph(mirrored, 0, 0, setGlyphObj)
+                  glyphInfo.fontData.fontObj.forEachGlyph(mirrored, 0, 0, enableLigatures, setGlyphObj)
                 }
               }