Render PostScript to SVG

SVG is the other graphical format for the web. While the HTML Canvas renders to a bitmap, SVG is a vector based format and rendered directly by the browser. SVG graphics can be scaled after creation and they can also be used as independent files, for example to be inserted in a Microsoft Word document.

The structure of SVG is an XML file. Therefore it is a file you can edit in any text editor and manually modify at some extend. You can change the color of objects, make them invisible and modify also the text. The Swiss canton maps on the other pages of this website (https://belle-nuit.com/karten-nationalratswahlen-1971-2023 for instance) are open source SVG files where I only kept the borders and added CSS styles to color the cantons.

SVG can do a lot and interact with Javascript itself, being a DOM object like any other object of HTML. To render PostScript to SVG, we will use only a small subset of the SVG elements. We consider the SVG file as a collection of path which can be filled or stroked. We do not set implicit layers even if SVG has layers. We use the painting model of PostScript, that every object is drawn on the page one after the other. The last object is on top.

So we create a new device rpnSVGdevice. The path node has as a d property which is quite straightforward.

M x y (moveto)
C x1 y1 x2 y2 x3 y3 (curveto)
L x1 y1 (lineto)
Z (closepath)

For the SVG file, an XML header must been set.

For some reason I do not understand, the elements are created in the DOM by Javascript but the page is not updated. It took me hours to understand, because the copied node in a new page rendered well. The workaround to refresh the page is

this.node.outerHTML = this.node.outerHTML // force refresh

Javascript Editor

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)
    }
    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 = "";
        
    };
    getPath(context) {
       const p = [];
       for (var subpath of context.graphics.path) {
           if (!subpath.length) continue;
           p.push("M " + (subpath[0][1]) + " " + (context.height - subpath[0][2]));
           for (var line of subpath) {
               if (line[0] == "C") {
                   p.push("C " +(line[3]) + " " + (context.height - line[4]) + " " + (line[5]) + " " + (context.height - line[6]) + " " +(line[7]) + " " + (context.height - line[8]));
               } else {
                   p.push("L "+(line[3]) + " " + (context.height - line[4]));
               }
           }
        } 
        p.push("Z");
        return p.join(" ");
    }
    fill(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","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;     
    }
    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;
        }
        this.node.style.display = (context.device.svg) ? "block" : "none";
        this.node.outerHTML = this.node.outerHTML // force refresh
        if (context.device.svgurl) {
            this.urlnode.style.display = "block";
            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"); 
        } else {
            if (this.urlnode) this.urlnode.style.display = "none";
        }
       
        return context;
    }

}

postScriptEditor = function(code) {
    const id = Math.floor(Math.random() * 1000);  // create unique id for console.log
    const node = document.createElement("DIV");   // build the HTML nodes
    node.id = "id" & id;
    node.className = "psmain";
    const node2 = document.createElement("DIV");
    node2.className = "editzone";
    node.appendChild(node2);
    const node3 = document.createElement("DIV");
    node3.className = "editheader";
    node3.innerHTML = "PostScript";
    node2.appendChild(node3);
    const node4 = document.createElement("FORM");
    node2.appendChild(node4);
    const node5 = document.createElement("BUTTON");
    node5.type = "button";
    node5.id = "button" + id;
    node5.innerHTML = "Run";
    node4.appendChild(node5);
    const node6 = document.createElement("TEXTAREA"); 
    node6.id = "editor" + id; 
    node6.className = "pseditor"; 
    node6.innerHTML = code;
    node6.rows = code.split(endofline).length + 1;
    node4.appendChild(node6);
    const node7 = document.createElement("DIV");
    node7.id = "console" + id;
    node7.className = "jsconsole";
   
    const node8 = document.createElement("CANVAS");
    node8.id = "raw" + id;
    node8.className = "jscanvas";
    node8.style.display = "none";
    node8.width = 590;
    node8.height = 330;
    node.appendChild(node8);

const node9 = document.createElement("A");
    node9.id = "rawurl" + id;
    node9.innerHTML = "PNG raw";
    node9.style.display = "none";
    node.appendChild(node9);

const node10 = document.createElement("CANVAS");
    node10.id = "canvas" + id;
    node10.className = "jscanvas";
    node10.width = 590;
    node10.height = 330;
    node10.style.display = "none";
    node.appendChild(node10);

const node11 = document.createElement("A");
    node11.id = "canvasurl" + id;
    node11.innerHTML = "PNG canvas";
    node11.style.display = "none";
    node.appendChild(node11);

const node12 = document.createElement("SVG");
    node12.id = "svg" + id;
    node12.className = "jssvg";
    node12.setAttribute("width","590px");
    node12.setAttribute("height","330px");
    node12.style.display = "none";
    node.appendChild(node12);

const node13 = document.createElement("A");
    node13.id = "svgurl" + id;
    node13.innerHTML = "SVG";
    node13.style.display = "none";
    node.appendChild(node13);

node.appendChild(node7);

console.log(node.outerHTML);  // add the node to the parent element

Javascript Editor

And our justified text

Javascript Editor

postScriptEditor(`10 dict begin /svg 1 def /svgurl 1 def /raw 0 def currentdict setpagedevice end

% prologue
% support procedures
% n1 n2 max result
/max { 2 copy gt { pop } { exch pop } ifelse } def

% text countblanks n
/countblanks { 10 dict begin /c 0 def { ( ) search { /c c 1 add def pop pop } { pop c end exit } ifelse } loop } def

% text width justifyshow -
/justifyshow { exch dup stringwidth pop 3 -1 roll exch sub exch dup countblanks 1 max 3 -1 roll exch div 0 32 4 -1 roll widthshow } def

% text width wraptext post width pre 
/wraptext { 10 dict begin /maxwidth exch def /text exch def
/linewidth 0 def
/linelength 0 def
/spaces 0 def
/spacewidth 0 0 moveto ( ) stringwidth pop def
text
{
% search leaves the post on the stack, so we assign it to currenttext
dup /currenttext exch def
( ) search { 
% add word width and check if linewidth is still not bigger than max
dup stringwidth pop linewidth add dup spaces add maxwidth le 
% add space and count characters
{ /linewidth exch def 
length 1 add linelength add /linelength exch def
/spaces spaces spacewidth add def
pop } 
% check if half space ok
{ 
spaces 2 div add maxwidth le
{ length 1 add linelength add /linelength exch def exit}
{ pop pop pop exit }
ifelse

} ifelse
} 
% no space found we are at the last word
{ pop text length /linelength exch def /currenttext () def exit } ifelse } loop
% remove trailing space character if not empty text
currenttext length { /linelength linelength 1 sub def } if 
% set text if only one word
linelength 0 le { /linelength currenttext length def } if 
% output 
currenttext maxwidth text 0 linelength getinterval end
} def

% text x y w l showjustifyblock y
/showjustifyblock { 
/l exch def
/w exch def
/y exch def
/x exch def w
{ wraptext 3 -1 roll dup 4 1 roll length { newpath x y moveto w justifyshow y l sub /y exch def } { x y moveto show pop pop exit } ifelse } loop y } def

% parameter
/bodystart 300 def
/linespace 33 def
/LM 20 def 
/RM 570 def
(CMUSerif-Roman) run
/CMUSerif-Roman findfont 33 scalefont setfont

% main
/linewidth RM LM sub def
/nextline bodystart def
(Acme Widgets was founded in 1952 by Dippy and Daffy Acme to produce high technology widgets for the growing aerospace market. Acme was quickly recognized as being the best widget works in the country. Continued investment in new technology and manufacturing methods has kept Acme Widgets in the forefront of this industry.)
LM nextline linewidth linespace showjustifyblock pop

showpage

`);

The codebase has now 2637 lines ps20240915.js

My Journey to PostScript