feat: Support for Mark to Base Attachment Positioning (incl. GPOS 4, 9)

README.md

@@ -13,6 +13,7 @@ Features
 * Support for composite glyphs (accented letters).
 * Support for WOFF, OTF, TTF (both with TrueType `glyf` and PostScript `cff` outlines)
 * Support for kerning (Using GPOS or the kern table).
+* Support for Mark-to-Base Attachment Positioning.
 * Support for ligatures.
 * Support for TrueType font hinting.
 * Support arabic text rendering (See issue #364 & PR #359 #361)

src/features/positioning/index.js

@@ -0,0 +1,2 @@
+export * from './kern';
+export * from './mark';

src/features/positioning/kern.js

@@ -0,0 +1,20 @@
+/**
+ * Apply kerning positioning advance glyphs advance
+ */
+
+function kern(lookupTable, glyphs) {
+    const coords = [];
+    for (let i = 0; i < glyphs.length; i += 1) {
+        const glyph = glyphs[i];
+        coords[i] = { xAdvance: 0, yAdvance: 0 };
+        if (i > 0) {
+            coords[i] = {
+                xAdvance: this.position.getKerningValue([lookupTable], glyphs[i - 1].index, glyph.index),
+                yAdvance: 0
+            };
+        }
+    }
+    return coords;
+}
+
+export { kern };

src/features/positioning/mark.js

@@ -0,0 +1,25 @@
+/**
+ * Apply MarkToBase positioning advance glyphs advance
+ */
+
+function mark(lookupTable, glyphs) {
+    const coords = [];
+    for (let i = 0; i < glyphs.length; i += 1) {
+        const glyph = glyphs[i];
+        coords[i] = { xAdvance: 0, yAdvance: 0 };
+        if (i > 0) {
+            const coordinatedPair = this.position.getMarkToBaseAttachment([lookupTable], glyphs[i - 1].index, glyph.index);
+            if (coordinatedPair) {
+                const { attachmentMarkPoint, baseMarkPoint } = coordinatedPair;
+                // Base mark's advanceWidth must be ignored to have a proper positiong for the attachment mark
+                coords[i] = {
+                    xAdvance: baseMarkPoint.xCoordinate - attachmentMarkPoint.xCoordinate - glyphs[i - 1].advanceWidth,
+                    yAdvance: baseMarkPoint.yCoordinate - attachmentMarkPoint.yCoordinate
+                };
+            }
+        }
+    }
+    return coords;
+}
+
+export { mark };

src/font.js

@@ -9,6 +9,7 @@ import Substitution from './substitution';
 import { isBrowser, checkArgument, arrayBufferToNodeBuffer } from './util';
 import HintingTrueType from './hintingtt';
 import Bidi from './bidi';
+import { kern, mark } from './features/positioning';
 
 /**
  * @typedef FontOptions
@@ -153,19 +154,25 @@ Font.prototype.charToGlyph = function(c) {
  * @param {any} options features options
  */
 Font.prototype.updateFeatures = function (options) {
-    // TODO: update all features options not only 'latn'.
+    // TODO: update all features options not only 'DFLT', 'latn'.
+    const configureable = ['DFLT', 'latn'];
     return this.defaultRenderOptions.features.map(feature => {
-        if (feature.script === 'latn') {
+        if (configureable.includes(feature.script)) {
             return {
-                script: 'latn',
-                tags: feature.tags.filter(tag => options[tag])
+                script: feature.script,
+                tags: feature.tags.filter(tag => !options || options[tag])
             };
-        } else {
-            return feature;
         }
+        return feature;
     });
 };
 
+Font.prototype.getFeaturesConfig = function (options) {
+    return options ?
+    this.updateFeatures(options.features) :
+    this.defaultRenderOptions.features;
+};
+
 /**
  * Convert the given text to a list of Glyph objects.
  * Note that there is no strict one-to-one mapping between characters and
@@ -183,11 +190,7 @@ Font.prototype.stringToGlyphs = function(s, options) {
     const charToGlyphIndexMod = token => this.charToGlyphIndex(token.char);
     bidi.registerModifier('glyphIndex', null, charToGlyphIndexMod);
 
-    // roll-back to default features
-    let features = options ?
-    this.updateFeatures(options.features) :
-    this.defaultRenderOptions.features;
-
+    const features = this.getFeaturesConfig(options);
     bidi.applyFeatures(this, features);
 
     const indexes = bidi.getTextGlyphs(s);
@@ -279,7 +282,8 @@ Font.prototype.defaultRenderOptions = {
          * and shouldn't be turned off when rendering arabic text.
          */
         { script: 'arab', tags: ['init', 'medi', 'fina', 'rlig'] },
-        { script: 'latn', tags: ['liga', 'rlig'] }
+        { script: 'latn', tags: ['liga', 'rlig'] },
+        { script: 'DFLT', tags: ['mark'] },
     ]
 };
 
@@ -300,27 +304,18 @@ Font.prototype.forEachGlyph = function(text, x, y, fontSize, options, callback)
     options = Object.assign({}, this.defaultRenderOptions, options);
     const fontScale = 1 / this.unitsPerEm * fontSize;
     const glyphs = this.stringToGlyphs(text, options);
-    let kerningLookups;
-    if (options.kerning) {
-        const script = options.script || this.position.getDefaultScriptName();
-        kerningLookups = this.position.getKerningTables(script, options.language);
-    }
+    const glyphsPositions = this.getGlyphsPositions(glyphs, options);
+
     for (let i = 0; i < glyphs.length; i += 1) {
         const glyph = glyphs[i];
-        callback.call(this, glyph, x, y, fontSize, options);
+        const { xAdvance, yAdvance } = glyphsPositions[i];
+
+        callback.call(this, glyph, x + (xAdvance * fontScale), y + (yAdvance * fontScale), fontSize, options);
+
         if (glyph.advanceWidth) {
             x += glyph.advanceWidth * fontScale;
         }
 
-        if (options.kerning && i < glyphs.length - 1) {
-            // We should apply position adjustment lookups in a more generic way.
-            // Here we only use the xAdvance value.
-            const kerningValue = kerningLookups ?
-                  this.position.getKerningValue(kerningLookups, glyph.index, glyphs[i + 1].index) :
-                  this.getKerningValue(glyph, glyphs[i + 1]);
-            x += kerningValue * fontScale;
-        }
-
         if (options.letterSpacing) {
             x += options.letterSpacing * fontSize;
         } else if (options.tracking) {
@@ -330,6 +325,71 @@ Font.prototype.forEachGlyph = function(text, x, y, fontSize, options, callback)
     return x;
 };
 
+/**
+ * Returns array of glyphs' relative position advances for a given sequence.
+ *
+ * Supported features:
+ * - kern - kerning
+ * - mark - mark to base attachments
+ *
+ * @param {opentype.Glyph[]} glyphs
+ * @returns {Object[]} array of { xAdvance: number, yAdvance: number } for a glyph ordered by their index
+ */
+Font.prototype.getGlyphsPositions = function(glyphs, options) {
+
+    const script = options.script || this.position.getDefaultScriptName();
+
+    const features = this
+        .getFeaturesConfig(options)
+        .filter(f => f.script === 'DFLT')
+        .reduce((tags, feature) => tags.concat(feature.tags), []);
+
+    // Force a kern feature
+    if (options && options.kerning) features.push('kern');
+
+    const glyphsPositions = [];
+    for (let i = 0; i < glyphs.length; i += 1) {
+        glyphsPositions[i] = { xAdvance: 0, yAdvance: 0 };
+    }
+
+    let kernLookupTableProcessed = false;
+    const featuresLookups = this.position.getPositionFeatures(features, script, options.language);
+    featuresLookups.forEach(lookupTable => {
+        let kerningValue = 0;
+        let pos = [];
+        switch (lookupTable.feature) {
+            case 'kern':
+                pos = kern.call(this, lookupTable, glyphs);
+                kernLookupTableProcessed = true;
+                break;
+            case 'mark':
+                pos = mark.call(this, lookupTable, glyphs);
+                break;
+        }
+
+        // Reposition glyphs
+        pos.forEach((glyphPosition, index) => {
+            if (lookupTable.feature === 'kern') { 
+                kerningValue += glyphPosition.xAdvance; // kerning apply to entire sequence
+                glyphsPositions[index].xAdvance += kerningValue;
+            } else {
+                glyphsPositions[index].xAdvance += glyphPosition.xAdvance;
+                glyphsPositions[index].yAdvance += glyphPosition.yAdvance;
+            }
+        });
+    });
+
+    // Support for the 'kern' table glyph pairs
+    if (options.kerning && kernLookupTableProcessed === false) {
+        let kerningValue = 0;
+        for (let i = 1; i < glyphs.length; i += 1) {
+            kerningValue += this.getKerningValue(glyphs[i - 1], glyphs[i]); // kerning apply to entire sequence
+            glyphsPositions[i].xAdvance += kerningValue; 
+        }
+    }
+    return glyphsPositions;
+};
+
 /**
  * Create a Path object that represents the given text.
  * @param  {string} text - The text to create.

src/layout.js

@@ -64,9 +64,10 @@ function searchRange(ranges, value) {
  * @exports opentype.Layout
  * @class
  */
-function Layout(font, tableName) {
+function Layout(font, tableName, supportedFeatures) {
     this.font = font;
     this.tableName = tableName;
+    this.supportedFeatures = supportedFeatures || [];
 }
 
 Layout.prototype = {
@@ -194,6 +195,61 @@ Layout.prototype = {
         }
     },
 
+    /**
+     * Returns an ordered, union lookup tables for all requested features.
+     * This follows an ordered processing requirements (specs):
+     * > During text processing, it processes the lookups referenced by that feature in their lookup list order.
+     * > Note that an application may process lookups for multiple features simultaneously. In this case:
+     * > the list of lookups is the union of lookups referenced by all of those features, and these are all processed in their lookup list order.
+     *
+     * https://learn.microsoft.com/en-us/typography/opentype/otspec191alpha/chapter2#lookup-list-table
+     *
+     * @param {string[]} requestedFeatures
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dlft']
+     * @return {Object[]} an ordered lookup list of requested features
+     */
+    getFeaturesLookups: function(requestedFeatures, script, language) {
+        if (!this.font.tables[this.tableName] || !requestedFeatures) {
+            return [];
+        }
+
+        // Fitler out only supported by layout table features
+        requestedFeatures = this.supportedFeatures.filter(f => requestedFeatures.includes(f.featureName));
+
+        const lookupUnionList = {};
+        const allLookups = this.font.tables[this.tableName].lookups;
+        requestedFeatures.forEach(feature => {
+            const { featureName, supportedLookups } = feature;
+            let featureTable = this.getFeatureTable(script, language, featureName);
+            if (featureTable && supportedLookups.length) {
+                let lookupTable;
+                const lookupListIndexes = featureTable.lookupListIndexes;
+                for (let i = 0; i < lookupListIndexes.length; i++) {
+                    const idx = `idx${lookupListIndexes[i]}`;
+                    if (lookupUnionList.hasOwnProperty(idx)) continue; // Skips a lookup table that is already on the processing list
+                    lookupTable = allLookups[lookupListIndexes[i]];
+                    if (!lookupTable) continue;
+                    let validLookupType = supportedLookups.indexOf(lookupTable.lookupType) !== -1;
+                    // Extension lookup table support
+                    if (lookupTable.subtables.length === 1) {
+                        const { extensionLookupType, extension } = lookupTable.subtables[0];
+                        if (extensionLookupType && extension && supportedLookups.indexOf(extensionLookupType) !== -1) {
+                            lookupTable.lookupType = extensionLookupType;
+                            lookupTable.subtables = [extension];
+                            validLookupType = true;
+                        }
+                    }
+                    if (validLookupType) {
+                        lookupTable.feature = featureName;
+                        lookupUnionList[idx] = lookupTable;
+                    }
+                }
+            }
+        });
+        return Object.values(lookupUnionList);
+    },
+
     /**
      * Get a specific feature table.
      * @instance

src/parse.js

@@ -477,6 +477,74 @@ Parser.prototype.parseCoverage = function() {
     throw new Error('0x' + startOffset.toString(16) + ': Coverage format must be 1 or 2.');
 };
 
+/**
+ * Parse a BaseArray Table in GPOS table
+ * https://learn.microsoft.com/en-us/typography/opentype/otspec191alpha/gpos#lookup-type-4-mark-to-base-attachment-positioning-subtable
+ *
+ * @param {Number} marksClassCount
+ * @returns {Array}
+ */
+Parser.prototype.parseBaseArray = function(marksClassCount) {
+    const count = this.parseUShort();
+    return this.parseList(count, Parser.list(
+        marksClassCount,
+        Parser.pointer(Parser.anchor)
+    ));
+};
+
+/**
+ * Parse a MarkArray Table in GPOS table
+ * https://learn.microsoft.com/en-us/typography/opentype/otspec191alpha/gpos_delta#mark-array-table
+ *
+ * @returns {Array}
+ */
+Parser.prototype.parseMarkArray = function() {
+    const count = this.parseUShort();
+    return this.parseRecordList(count, {
+        class: Parser.uShort,
+        attachmentPoint: Parser.pointer(Parser.anchor)
+    });
+};
+
+/**
+ * Parse a an anchor definition Table in GPOS table
+ * https://learn.microsoft.com/en-us/typography/opentype/otspec191alpha/gpos_delta#anchor-tables
+ *
+ * @returns {Object} Anchor object representing format type
+ */
+Parser.prototype.parseAnchorPoint = function() {
+    const startOffset = this.offset + this.relativeOffset;
+    const format = this.parseUShort();
+    switch (format) {
+        case 1:
+            return {
+                format,
+                xCoordinate: this.parseShort(),
+                yCoordinate: this.parseShort()
+            };
+        case 2:
+            return {
+                format,
+                xCoordinate: this.parseShort(),
+                yCoordinate: this.parseShort(),
+                anchorPoint: this.parseUShort()
+            };
+
+        // TODO: Add a support Device offsets
+        // https://learn.microsoft.com/en-us/typography/opentype/otspec191alpha/gpos_delta#anchor-table-format-3-design-units-plus-device-or-variationindex-tables
+        case 3:
+            return {
+                format,
+                xCoordinate: this.parseShort(),
+                yCoordinate: this.parseShort(),
+                xDevice: 0x00,
+                yDevice: 0x00,
+            };
+    }
+
+    throw new Error('0x' + startOffset.toString(16) + ': Anchor format must be 1, 2 or 3.');
+};
+
 // Parse a Class Definition Table in a GSUB, GPOS or GDEF table.
 // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
 Parser.prototype.parseClassDef = function() {
@@ -548,6 +616,7 @@ Parser.uLong = Parser.offset32 = Parser.prototype.parseULong;
 Parser.uLongList = Parser.prototype.parseULongList;
 Parser.struct = Parser.prototype.parseStruct;
 Parser.coverage = Parser.prototype.parseCoverage;
+Parser.anchor = Parser.prototype.parseAnchorPoint;
 Parser.classDef = Parser.prototype.parseClassDef;
 
 ///// Script, Feature, Lookup lists ///////////////////////////////////////////////