SVG as text experiments

SVG can describe paths, but also text. For this we need to embed a font in the SVG file for the case the font is not present on the clients computer. The font in an SVG file has the same structure as SVG font files. The latter were proposed as a font format, but depreciated in favour of OpenType fonts, which is a pity, because besides PostScript Type 3 fonts is the only font format that has a textual form. This is probably too much of open source for font foundries.

The font tag is a very simple structure:

font with properties id, horiz-adv-x (default width)

font-face with properties font-family, font-weight, font-stretch, units-per-em, panose-1 (deprecated appearance list for fonts), ascent, descent, x-height, cap-height (all for alignment), bbox (of the biggest character), underline-thickness, underline-position, unicode-range
missing-glyph with properties horiz-adv-x and d (path)
glyph with properties glyph-name, unicode, horiz-adv-x and d (path)

The paths are the same as for fill and stroke. Do we have all information from our Type 3 fonts to recreate the SVG font? FontInfo has full name, weight, UnderlinePosition and UnderlineThickness and we have the FontBBox and can use FontMatrix to build UnitsPerEm. For the paths, we can try for each glyph to ignore setcachedevice and paint and hope it makes a sensible path (Type 3 fonts could have arbitrary code, something we cannot reproduce on SVG).

Now we don't have measurement: ascent, descent, x-height, cap-height. We can try 2 things: we try to ignore to specify it, or we use some default values, to have at least a ballpoint. For example, for Courier, Helvetica and Times the values would be

units-per-em: 2048
ascent: 1638
descent: -410
x-height: 866 (Courier), 1071 (Helvetica), 916 (Times)
cap-height: 1170 (Courier), 1470 (Helvetica), 1356 (Times)

At runtime, we do not know what kind of fond it is and are somewhere in the dark. I will choose the median values for x-height and cap-height.

We will add a device property textmode (default 0).

Then we implement a show() method in rpnSVGdevice and modify the show operator so that if textmode is set and the device supports it, it calls directly the show mode.

The show() method in rpnSVGdevice builds also the SVG font if necessary.

Javascript Editor

Number.prototype.roundX = function(x) { return this.toPrecision(5) / 1 }

rpnFontPath = "site/files/";

rpnSVGFont = class {
    constructor(dict) {
        this.dict = dict.value;
    }

getStyle(getfile = false) {
        const style = document.createElement("STYLE");
        var src;
        if (getfile) {
           src = readSyncDataURL(rpnFontPath + this.dict.FontName.value + ".ttf", "font/ttf");
        } else {
           src = this.dict.FontName.value  + ".ttf";
        }

style.innerHTML = "@font-face { font-family: '" + this.dict.FontName.value + "'; font-weight: normal; src:  url('" + src + "') format('truetype')} }";

return style;

}
    
    getNode() {
        const node = document.createElement("FONT");
        node.id = this.dict.FontName.value;
        node.setAttribute("horiz-adv-x","0");
        const fontface = document.createElement("FONT-FACE");
        const fontinfo = this.dict.FontInfo.value;
        fontface.setAttribute("font-family",this.dict.FontName.value);
        fontface.setAttribute("font-weight",fontinfo.Weight.value);
        const scale = Math.round(1/ this.dict.FontMatrix.value[0].value);
        fontface.setAttribute("units-per-em",scale);
        fontface.setAttribute("ascent",Math.round(1638/2048*scale));
        fontface.setAttribute("descent",Math.round(-410/2048*scale));
        fontface.setAttribute("x-height",Math.round(916/2048*scale));
        fontface.setAttribute("cap-height", Math.round(1170/2048*scale)); 
        fontface.setAttribute("bbox",this.dict.FontBBox.value);
        const fontfacesource = document.createElement("FONT-FACE-SOURCE");
        const fontfacename = document.createElement("FONT-FACE-NAME");
        fontfacename.setAttribute("name",this.dict.FontName.value);
        fontfacesource.appendChild(fontfacename);
        fontface.appendChild(fontfacesource);
        node.appendChild(fontface);
        const missingglyph = document.createElement("MISSING-GLYPH");
        missingglyph.setAttribute("horiz-adv-x","2000");
        missingglyph.setAttribute("d","Z");
        node.appendChild(missingglyph);
        var i = 32;
        const dev = new rpnSVGDevice();
        for (var g of this.dict.Encoding.value) { 
            if (g.value == ".notdef") continue;
            if (g.value == "uni000D") continue;
            if (i > 127) continue;
            const glyph = document.createElement("GLYPH");
            glyph.setAttribute("name",g.value);
            glyph.setAttribute("unicode", String.fromCharCode(i));
            const pspath = this.dict.CharProcs.value[g.value].value;
            const ctx = rpn(pspath);
            glyph.setAttribute("horiz-adv-x", ctx.graphics.cachedevice[0]);
            glyph.setAttribute("d",dev.getPath(ctx, false));

if (g.value == "less") { 
                  glyph.setAttribute("unicode", "MAGIC");
                  const s = glyph.outerHTML.replace("MAGIC","&"+"lt;"); 
                  glyph.outerHTML = s;
            } 
            
            node.appendChild(glyph);
            i++;
        }
        return node; 
    }
}

rpnSVGDevice = class {
    constructor(node, urlnode) { 
        this.node = node;
        if (!node) this.node = document.createElement("SVG");
        this.node.setAttribute("xmlns","http://www.w3.org/2000/svg")
        this.urlnode = urlnode;
        this.initgraphics( this.node.width, this.node.height, 1);
        this.fonts = {};
    }
    initgraphics(width, height, oversampling) {
        if (Number.isFinite(width))             this.node.setAttribute("width",width+"px"); 
        if (Number.isFinite(height)) 
        this.node.setAttribute("height",height+"px"); 
        if (Number.isFinite(width) && Number.isFinite(height))         
        this.node.setAttribute("viewbox", "0 0 " + width+" " + height);
        this.node.style.backgroundColor = "white";
        this.node.style.display = (context.device.svg) ? "block" : "none";
        this.node.innerHTML = "";
        this.textmode = 1;
    };
    getPath(context, reverse = true) {
       const p = [];
       for (var subpath of context.graphics.path) {
           if (!subpath.length) continue;
           const l = subpath[0];
           if (reverse) l[2] = context.height - l[2];
           p.push("M " +l[1].roundX() + " " + l[2].roundX());
           for (var line of subpath) {
               if (reverse) line[4] = context.height - line[4];
               if (line[0] == "C") {
                  if (reverse) {
                      line[6] = context.height - line[6];
                      line[8] = context.height - line[8];
                  } 
                  p.push("C " + line[3].roundX() + " " + line[4]. roundX() + " " + line[5].roundX() + " " + line[6].roundX() + " " + line[7].roundX() + " " + line[8]).roundX();
               } else {
                  p.push("L "+ line[3].roundX() + " " + line[4].roundX());
               }
           }
        } 
        p.push("Z");
        return p.join(" ");
    }
    fill(context) { 
        if (!(context.device.svg + context.device.svgurl)) return context;
        if (context.device.textmode * context.inshow) return context;
        if (context.device.svg) this.node.style.display = "block";
        const node = document.createElement("PATH");
        node.setAttribute("id","fill"+this.node.childElementCount); 
        node.setAttribute("d", this.getPath(context));
        node.setAttribute("stroke","none");
        node.setAttribute("fill", "rgb(" + Math.round(context.graphics.color[0]) + ", " + Math.round(context.graphics.color[1]) + ", " + Math.round(context.graphics.color[2]) + ")");
        this.node.appendChild(node);
        return context;     
    }
    show(s, context) {
        if (!(context.device.svg + context.device.svgurl)) return context;
        if (context.device.svg) this.node.style.display = "block";
        if (context.incharpath) return context;
        if (!this.fonts.hasOwnProperty(context.graphics.font)) {
            this.fonts[context.graphics.font] = new rpnSVGFont (context.fontdict[context.graphics.font]);
        }
        const node = document.createElement("TEXT");
        node.setAttribute("x", 0);
        node.setAttribute("y", 0);
        node.setAttribute("font-family", context.graphics.font);
        node.setAttribute("font-size", context.graphics.size);
        node.setAttribute("fill", "rgb(" + Math.round(context.graphics.color[0]) + ", " + Math.round(context.graphics.color[1]) + ", " + Math.round(context.graphics.color[2]) + ")" );
        const matrix = context.graphics.matrix.slice();
        matrix[1] = - matrix[1];
        matrix[3] = - matrix[3];
        matrix[5] = context.height - matrix[5];
        node.setAttribute("transform", "matrix(" + matrix.join(" ") + ") scale (1 -1) " ); 
        node.innerHTML = htmlspecialchars(s); // clean XML
        this.node.appendChild(node);
        return context;
    }
    stroke(context) { 
        if (!(context.device.svg + context.device.svgurl)) return context;
        if (context.device.svg) this.node.style.display = "block";
        const node = document.createElement("PATH");
        node.setAttribute("id","stroke"+this.node.childElementCount); 
        node.setAttribute("d", this.getPath(context));
        node.setAttribute("fill","none");
        node.setAttribute("stroke-width",context.graphics.linewidth);
        node.setAttribute("stroke", "rgb(" + Math.round(context.graphics.color[0]) + ", " + Math.round(context.graphics.color[1]) + ", " + Math.round(context.graphics.color[2]) + ")");
        this.node.appendChild(node);
        return context;         
    }
    showpage(context) { 
        if (!(context.device.svg + context.device.svgurl)) {
            this.node.style.display = "none";
            if (this.urlnode) this.urlnode.style.display = "none";
            return context;
        }
        const node = document.createElement("DEFS");
        this.node.insertBefore(node, this.node.firstChild);
        for (const font in this.fonts) {
            if (context.device.truetype) {
                this.node.insertBefore(this.fonts[font].getStyle(context.device.truetypefile), this.node.firstChild);
            } else {
                node.appendChild(this.fonts[font].getNode());
            }
        }
        
        
        this.node.outerHTML = this.node.outerHTML // force refresh
        if (context.device.svgurl) {
            const file = starttag + "?xml version='1.0' encoding='UTF-8'?" + endtag + this.node.outerHTML;
            const url = "data:image/svg+xml;base64," + btoa(file);
            this.urlnode.href = url; 
            this.urlnode.setAttribute("download", "PS.svg"); 
        } 
        this.node.style.display = (context.device.svg) ? "block" : "none";
        if (this.urlnode) 
         this.urlnode.style.display = (context.device.svgurl) ? "block" : "none";
        return context;
    }

}

operators.charpath = function(context) {
    context.incharpath = 1;
    context = rpn("1 dict begin /fill { } def show end", context);
    context.incharpath = 0;
    return context;
}

operators.show = function(context) {
    const [s] = context.pop("string");
    if (!context.graphics.current.length) {
       context.stack.push(new rpnError("nocurrentpoint"));
       return context;
    }
    if (!s) return context;
    if (context.device.textmode) {
        for (n of context.nodes) { 
            if (n.hasOwnProperty("textmode")) {
                context = n.show(s.value, context);  
            }
        }
    }
    const font = context.fontdict[context.graphics.font];
    const bak = context.graphics.matrix.slice();
    const matrix = font.value.FontMatrix.value;
    const size = context.graphics.size;
    var m = context.graphics.matrix.slice();
    m =  matrixMultiplication(m, [matrix[0].value * size, matrix[1].value * size, matrix[2].value * size, matrix[3].value * size, matrix[4].value, matrix[5].value ]);
    m[4] += context.graphics.current[0];
    m[5] += context.graphics.current[1];
    context.graphics.matrix = m;
    context.dictstack.push(font.value);
    for(var i = 0; i < s.value.length; i++) {
       context.stack.push(font);
       const c = s.value.charCodeAt(i);
       context.stack.push(new rpnNumber(c));
       context.inshow = 1;
       context = rpn("BuildChar", context);
       context.inshow = 0;
       const x = context.graphics.cachedevice[0];
       const y = context.graphics.cachedevice[1];
       const m = context.graphics.matrix.slice();
       context.graphics.matrix[4] += x*m[0] + y*m[2];
       context.graphics.matrix[5] += x*m[1] + y*m[3];
       
    }
    context.dictstack.pop();
    context.graphics.current = [ context.graphics.matrix[4], context.graphics.matrix[5] ];
    context.graphics.matrix = bak;
    context.inshow = false;
    return context;
};

rpnContext = class {
    constructor() { 
        this.stack = [];
        this.heap = [];
        this.lasterror = "";
        this.currentcode = "";
        this.width = 600;
        this.height = 800;
        this.dictstack = [];
        this.dictstack.push({});
        this.graphicsstack = [];
        this.graphicsstack.push({ path: [], current: [], color: [0, 0, 0, 255], linewidth: 1, matrix : [1, 0, 0, 1, 0, 0] , font: "", size: 12, cachedevice : [0, 0, 0, 0, 0, 0] });
        this.fontdict = {};
        this.device = { canvas: 0, canvasurl: 0, color: 0, console: 1, oversampling: 1, pdf: 0, pdfurl: 0, raw: 1, rawurl : 0, svg: 0, svgurl: 0, textmode: 1, transparent: 1, truetype: 0 , truetypefile: 1};
        this.nodes = [];
    }
    get dict() {
        return this.dictstack[this.dictstack.length - 1];
    }
    get graphics() {
        return this.graphicsstack[this.graphicsstack.length - 1];
    }
    error(s) {
        this.lasterror = s;
        this.stack.push(new rpnError(s));
        return this;
    }
    itransform(x,y) {
       const m = this.graphics.matrix; 
       const det = m[0]*m[3] - m[1]*m[2]
       return [ (x*m[3] - y*m[2] +m[2]*m[5] - m[4]*m[3])/det, 
(-x*m[1] + y*m[0] + m[4]*m[1] - m[0]*m[5])/det ]
    }
    pop(...parameters) {
        if (this.stack.length < parameters.length) {
            this.error("stackunderflow");
            return [];
        }
        const result = [];
        for (var p of parameters) {
            const data = this.stack.pop(); 
            if (p == "any") {
                result.push(data);
            } else if (p.includes(data.type)) {
                result.push(data);   
            } else {
                console.log(data.type+p);
                this.error("typeerror");
                return [];
            }
         }
         return result;
    }
    popArray() {
        var found = false;
        var arr = [];
        while (this.stack.length && ! found) {
            const value = this.stack.pop();
            if (value.type == "mark") {
                found = true;
            } else {
                arr.push(value);
            }   
        }
        if (! found) {
            return this.error("stackunderflow");
        }
        arr.reverse();
        const a = new rpnArray(arr, this.heap);
        a.reference.inc();
        this.stack.push(a); 
    }
    transform(x,y) {
       const m = this.graphics.matrix; 
       return [ x * m[0] + y * m[2] + m[4],
x * m[1] + y * m[3] + m[5] ];
    }
};

operators.setpagedevice = function(context) {
    const [d] = context.pop("dictionary");
    if (!d) return context;
    const dict = d.value;
    if (dict.canvas)  context.device.canvas = dict.canvas.value;
    if (dict.canvasurl) context.device.canvasurl = dict.canvasurl.value;
    if (dict.color)  context.device.color = dict.color.value;
    if (dict.console)  context.device.console = dict.console.value;
    if (dict.height) context.height = dict.height.value;
    if (dict.oversampling) {
        const oversampling = Math.min(16,Math.max(1, dict.oversampling.value));
        context.device.oversampling = oversampling;
    }
    if (dict.pdf) context.device.pdf = dict.pdf.value;
    if (dict.pdfurl) context.device.pdfurl = dict.pdfurl.value;
    if (dict.raw)  context.device.raw = dict.raw.value;
    if (dict.rawurl) context.device.rawurl = dict.rawurl.value;
    if (dict.svg) context.device.svg = dict.svg.value;
    if (dict.svgurl) context.device.svgurl = dict.svgurl.value;
    if (dict.textmode) context.device.textmode = dict.textmode.value;
    if (dict.truetype) context.device.truetype = dict.truetype.value;
    if (dict.truetypefile) context.device.truetypefile = dict.truetypefile.value;
    if (dict.transparent) context.device.transparent = dict.transparent.value;
    if (dict.width) context.width = dict.width.value;
    if (dict.height + dict.oversampling + dict.width) {
        for (n of context.nodes) n.initgraphics(context.width, context.height, context.device.oversampling);
    }
    
    return context;
};

Javascript Editor

Unfortunately, as it does not work, we will not use it. The only application that reads still the SVG font tag is an old Opera browser on my MacBook.

What can we do? We can define an external TrueType font.

Javascript Editor

This works, as long as the TrueType font is in the same folder as the SVG file. But can we embed the font, too? We can get it as Data URI. With a little help of Stackoverflow

Javascript Editor

We have a working model for SVG. But now we need always 2 fonts. Is there a way to use the TrueType fonts directly? We do not include this page in the code base and try first if we cannot read Truetype fonts directly.

My Journey to Postscript