feat: add SVG table support (#672)

add SVG table parsing, writing and drawing
opentypejs · Apr 12, 2024 · d3d3078 · d3d3078
1 parent 976c723
commit d3d3078
Show file tree

Hide file tree

Showing 15 changed files with 560 additions and 25 deletions.
diff --git a/docs/font-inspector.html b/docs/font-inspector.html
@@ -103,6 +103,17 @@ <h1>Free Software</h1>
 var font = null;
 const fontSize = 32;
 const textToRender = 'Grumpy wizards make toxic brew for the evil Queen and Jack.';
+const drawOptions = {
+    kerning: true,
+    features: [
+    /**
+     * these 4 features are required to render Arabic text properly
+     * and shouldn't be turned off when rendering arabic text.
+     */
+        { script: 'arab', tags: ['init', 'medi', 'fina', 'rlig'] },
+        { script: 'latn', tags: ['liga', 'rlig'] }
+    ]
+};
 
 function escapeHtml(unsafe) {
     return unsafe
@@ -134,18 +145,7 @@ <h1>Free Software</h1>
     var previewCanvas = document.getElementById('preview');
     var previewCtx = previewCanvas.getContext("2d");
     previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
-    var options = {
-        kerning: true,
-        features: [
-        /**
-         * these 4 features are required to render Arabic text properly
-         * and shouldn't be turned off when rendering arabic text.
-         */
-            { script: 'arab', tags: ['init', 'medi', 'fina', 'rlig'] },
-            { script: 'latn', tags: ['liga', 'rlig'] }
-        ]
-    };
-    options = Object.assign({}, font.defaultRenderOptions, options);
+    var options = Object.assign({}, font.defaultRenderOptions, drawOptions);
     font.draw(previewCtx, textToRender, 0, 32, fontSize, options);
 }
 
@@ -261,9 +261,19 @@ <h1>Free Software</h1>
 }
 
 function onFontLoaded(font) {
+    if (window.font) {
+        window.font.onGlyphUpdated = null;
+    }
     window.font = font;
     renderText(font);
     displayFontData(font);
+    font.onGlyphUpdated = (glyphId) => {
+        const options = Object.assign({}, font.defaultRenderOptions, drawOptions);
+        const glyphIds = font.stringToGlyphIndexes(textToRender, options);
+        if (glyphIds.includes(glyphId)) {
+            renderText(font);
+        }
+    };
 }
 
 document.getElementById('update').addEventListener('click', () => displayFontData(window.font));

diff --git a/docs/glyph-inspector.html b/docs/glyph-inspector.html
@@ -227,6 +227,11 @@ <h1>Free Software</h1>
         }
         return;
     }
+    const image = path._image;
+    if ( image ) {
+        ctx.drawImage(image.image, image.x, image.y, image.width, image.height);
+        return;
+    }
     var i, cmd, x1, y1, x2, y2;
     var arrows = [];
     ctx.beginPath();
@@ -490,6 +495,9 @@ <h1>Free Software</h1>
 };
 
 function onFontLoaded(font) {
+    if (window.font) {
+        window.font.onGlyphUpdated = null
+    }
     window.font = font;
     options = Object.assign({}, window.font.defaultRenderOptions);
     window.fontOptions = options;
@@ -525,6 +533,13 @@ <h1>Free Software</h1>
     displayGlyphPage(0);
     displayGlyph(-1);
     displayGlyphData(-1);
+
+    font.onGlyphUpdated = (glyphId) => {
+        const firstGlyph = pageSelected * cellCount;
+        if (firstGlyph <= glyphId && glyphId < firstGlyph + cellCount) {
+            renderGlyphItem(document.getElementById('g'+(glyphId - firstGlyph)), glyphId);
+        }
+    };
 }
 
 function cellSelect(event) {

diff --git a/docs/index.html b/docs/index.html
@@ -116,15 +116,7 @@ <h1>Free Software</h1>
     if (!font) return;
     const textToRender = form.textField.value;
     var previewCtx = document.getElementById('preview').getContext('2d');
-    var options = {
-        kerning: form.kerning.checked,
-        hinting: form.hinting.checked,
-        features: {
-            liga: form.ligatures.checked,
-            rlig: form.ligatures.checked
-        }
-    };
-    options = Object.assign({}, font.defaultRenderOptions, options);
+    var options = Object.assign({}, font.defaultRenderOptions, getDrawOptions());
     previewCtx.clearRect(0, 0, 940, 300);
     const fontSize = +form.fontsize.value;
     font.draw(previewCtx, textToRender, 0, 200, fontSize, options);
@@ -142,6 +134,17 @@ <h1>Free Software</h1>
     snapPath.draw(snapCtx);
 }
 
+function getDrawOptions() {
+    return {
+        kerning: form.kerning.checked,
+        hinting: form.hinting.checked,
+        features: {
+            liga: form.ligatures.checked,
+            rlig: form.ligatures.checked
+        }
+    };
+}
+
 function enableHighDPICanvas(canvas) {
     if (typeof canvas === 'string') {
         canvas = document.getElementById(canvas);
@@ -184,6 +187,9 @@ <h1>Free Software</h1>
 }
 
 function onFontLoaded(font) {
+    if (window.font) {
+        window.font.onGlyphUpdated = null
+    }
     window.font = font;
 
     // Show the first 100 glyphs.
@@ -194,9 +200,11 @@ <h1>Free Software</h1>
     const x = 50;
     const y = 120;
     const fontSize = 72;
+    const ctxs = new Array(amount);
     for (let i = 0; i < amount; i++) {
         const glyph = font.glyphs.get(i);
         const ctx = createGlyphCanvas(glyph, 150);
+        ctxs[i] = ctx;
         glyph.draw(ctx, x, y, fontSize, {}, font);
         glyph.drawPoints(ctx, x, y, fontSize);
         glyph.drawMetrics(ctx, x, y, fontSize);
@@ -214,6 +222,23 @@ <h1>Free Software</h1>
     }
 
     renderText();
+
+    font.onGlyphUpdated = (glyphId) => {
+        if (0 <= glyphId && glyphId < amount) {
+            const glyph = font.glyphs.get(glyphId);
+            const ctx = ctxs[glyphId];
+            glyph.draw(ctx, x, y, fontSize, {}, font);
+            glyph.drawPoints(ctx, x, y, fontSize);
+            glyph.drawMetrics(ctx, x, y, fontSize);
+        }
+
+        const textToRender = form.textField.value;
+        const options = Object.assign({}, font.defaultRenderOptions, getDrawOptions());
+        const glyphIds = font.stringToGlyphIndexes(textToRender, options);
+        if (glyphIds.includes(glyphId)) {
+            renderText();
+        }
+    };
 }
 const loadScript = (src) => new Promise((onload) => document.head.append(Object.assign(document.createElement('script'), {src, onload})));
 async function display(file, name) {

diff --git a/src/font.js b/src/font.js
@@ -8,6 +8,7 @@ import Position from './position.js';
 import Substitution from './substitution.js';
 import { PaletteManager } from './palettes.js';
 import { LayerManager } from './layers.js';
+import { SVGImageManager } from './svgimages.js';
 import { isBrowser, checkArgument } from './util.js';
 import HintingTrueType from './hintingtt.js';
 import Bidi from './bidi.js';
@@ -142,6 +143,7 @@ function Font(options) {
     this.tables = this.tables || {};
     this.palettes = new PaletteManager(this);
     this.layers = new LayerManager(this);
+    this.svgImages = new SVGImageManager(this);
 
     // needed for low memory mode only.
     this._push = null;
@@ -332,7 +334,8 @@ Font.prototype.getKerningValue = function(leftGlyph, rightGlyph) {
  *                                 See https://www.microsoft.com/typography/otspec/featuretags.htm
  * @property {boolean} [hinting=false] - whether to apply font hinting to the outlines
  * @property {integer} [usePalette=0] For COLR/CPAL fonts, the zero-based index of the color palette to use. (Use `Font.palettes.get()` to get the available palettes)
- * @property {integer} [drawLayers=true] For COLR/CPAL fonts, this can be turned to false in order to draw the fallback glyphs instead
+ * @property {boolean} [drawLayers=true] For COLR/CPAL fonts, this can be turned to false in order to draw the fallback glyphs instead
+ * @property {boolean} [drawSVG=true] For SVG fonts, this can be turned to false in order to draw the fallback glyphs instead
  */
 Font.prototype.defaultRenderOptions = {
     kerning: true,
@@ -348,6 +351,7 @@ Font.prototype.defaultRenderOptions = {
     hinting: false,
     usePalette: 0,
     drawLayers: true,
+    drawSVG: true,
 };
 
 /**
@@ -417,7 +421,7 @@ Font.prototype.getPath = function(text, x, y, fontSize, options) {
     }
     this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
         const glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
-        if ( options.drawLayers ) {
+        if ( options.drawSVG || options.drawLayers ) {
             const layers = glyphPath._layers;
             if ( layers && layers.length ) {
                 for(let l = 0; l < layers.length; l++) {

diff --git a/src/glyph.js b/src/glyph.js
@@ -170,6 +170,21 @@ Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
     }
 
     const p = new Path();
+    if ( options.drawSVG ) {
+        const svgImage = this.getSvgImage(font);
+        if ( svgImage ) {
+            const layer = new Path();
+            layer._image = {
+                image: svgImage.image,
+                x: x + svgImage.leftSideBearing * scale,
+                y: y - svgImage.baseline * scale,
+                width: svgImage.image.width * scale,
+                height: svgImage.image.height * scale,
+            };
+            p._layers = [layer];
+            return p;
+        }
+    }
     if ( options.drawLayers ) {
         const layers = this.getLayers(font);
         if ( layers && layers.length ) {
@@ -226,6 +241,17 @@ Glyph.prototype.getLayers = function(font) {
     return font.layers.get(this.index);
 };
 
+/**
+ * @param {opentype.Font} font
+ * @returns {import('./svgimages.js').SVGImage | undefined}
+ */
+Glyph.prototype.getSvgImage = function(font) {
+    if(!font) {
+        throw Error('The font object is required to read the svg table in order to get the image.');
+    }
+    return font.svgImages.get(this.index);
+};
+
 /**
  * Split the glyph into contours.
  * This function is here for backwards compatibility, and to

diff --git a/src/opentype.js b/src/opentype.js
@@ -36,6 +36,7 @@ import os2 from './tables/os2.js';
 import post from './tables/post.js';
 import meta from './tables/meta.js';
 import gasp from './tables/gasp.js';
+import svg from './tables/svg.js';
 import { PaletteManager } from './palettes.js';
 /**
  * The opentype library.
@@ -396,6 +397,10 @@ function parseBuffer(buffer, opt={}) {
                 table = uncompressTable(data, tableEntry);
                 font.tables.gasp = gasp.parse(table.data, table.offset);
                 break;
+            case 'SVG ':
+                table = uncompressTable(data, tableEntry);
+                font.tables.svg = svg.parse(table.data, table.offset);
+                break;
         }
     }
 

diff --git a/src/path.js b/src/path.js
@@ -512,7 +512,13 @@ Path.prototype.draw = function(ctx) {
         }
         return;
     }
-
+
+    const image = this._image;
+    if ( image ) {
+        ctx.drawImage(image.image, image.x, image.y, image.width, image.height);
+        return;
+    }
+
     ctx.beginPath();
     for (let i = 0; i < this.commands.length; i += 1) {
         const cmd = this.commands[i];
@@ -640,6 +646,14 @@ Path.prototype.toSVG = function(options, pathData) {
         */
         console.warn('toSVG() does not support colr font layers yet');
     }
+    if (this._image) {
+        /**
+         * @TODO: implement SVG output for SVG glyphs
+         * We can't simply output the whole SVG document as it is, we should first sanitize it
+         * to make sure it doesn't contain any malicious scripts or features not supported in SVG fonts.
+         */
+        console.warn('toSVG() does not support SVG glyphs yet');
+    }
     if (!pathData) {
         pathData = this.toPathData(options);
     }