Text mode second try

We first try the text mode in SVG. We first add a show method to the SVGdevice

Javascript Editor

rpnSVGDevice = class {
    constructor(node, urlnode) { 
        this.node = node;
        this.canshow = true;
        this.fonts = {};
        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.textmode * context.showmode) 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;         
    }
    show(s, context, targetwidth = 0) {
        if (!(context.device.svg + context.device.svgurl)) return context;
        if (context.device.svg) this.node.style.display = "block";
        if (!this.fonts.hasOwnProperty(context.graphics.font)) {
            this.fonts[context.graphics.font] = 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();
        const decomposed = decompose_2d_matrix(matrix)
        const x = context.graphics.current[0];
        const y = context.height - context.graphics.current[1]
        node.setAttribute("text-anchor","start")
        node.setAttribute("transform", "translate(" + x + " " + y  +") rotate(" +  -decomposed.rotation*180/Math.PI + ")" ); 
        if (targetwidth) {
            node.setAttribute("textLength", targetwidth)
            node.setAttribute("lengthAdjust", "spacing")
        }
        node.innerHTML = htmlspecialchars(s); // clean XML
        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) {
            const style = document.createElement("STYLE");
            const src = readSyncDataURL(fontbasepath + font + ".ttf", "font/ttf");
            style.innerHTML = "@font-face { font-family: '" + font + "'; font-weight: normal; src:  url('" + src + "') format('truetype')} }";
            node.appendChild(style)
        }
        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;
    }

}

readSyncDataURL=function(url, filetype = ""){
// var url=URL.createObjectURL(file);//Create Object URL
var xhr=new XMLHttpRequest();
xhr.open("GET",url,false);//Synchronous XMLHttpRequest on Object URL
xhr.overrideMimeType("text/plain; charset=x-user-defined");//Override MIME Type to prevent UTF-8 related errors
xhr.send();
URL.revokeObjectURL(url);
var returnText="";
for (var i=0;i < xhr.responseText.length;i++){
returnText+=String.fromCharCode(xhr.responseText.charCodeAt(i)&0xff);};//remove higher byte
return "data:"+filetype+";base64,"+btoa(returnText);}//Generate data URL

decompose_2d_matrix=function(mat) {
  var a = mat[0];
  var b = mat[1];
  var c = mat[2];
  var d = mat[3];
  var e = mat[4];
  var f = mat[5];

var delta = a * d - b * c;

let result = {
    translation: [e, f],
    rotation: 0,
    scale: [0, 0],
    skew: [0, 0],
  };

// Apply the QR-like decomposition.
  if ((a != 0) + (b != 0)) {
    var r = Math.sqrt(a * a + b * b);
    result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
    result.scale = [r, delta / r];
    result.skew = [Math.atan((a * c + b * d) / (r * r)), 0];
  } else if ((c != 0) + (d != 0)) {
    var s = Math.sqrt(c * c + d * d);
    result.rotation =
      Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s));
    result.scale = [delta / s, s];
    result.skew = [0, Math.atan((a * c + b * d) / (s * s))];
  } else {
    // a = b = c = d = 0
  }

return result;
}

The we rewrite the show operator that it uses the show method if the device supports it (has a show method) and if there is a textmode

Javascript Editor

operators.show = function(context) {
    const [s] = context.pop("string");
    if (!context.graphics.current.length) {
       context.error("nocurrentpoint");
    }
    if (!context.graphics.font) {
       context.error("nocurrentfont");
    }
    if (context.device.textmode) {
        for (n of context.nodes) {
           if (n.canshow) context = n.show(s.value, context);
        }
    }
    if (!s) return context;
    const font = fonts[context.graphics.font];
    const scale = context.graphics.size / font.head.unitsPerEm;  
    var ps = " currentpoint currentpoint translate currentmatrix " + scale + " " + scale + " scale ";
    for(var i = 0; i < s.value.length; i++) {
        const c = s.value.charCodeAt(i);
        const gi = font.glyphIndex(c);
        ps += font.glyphPath(gi);
        ps += " fill ";
        ps += font.glyphWidth(gi) + " 0 translate ";  
    }
    ps += " setmatrix neg exch neg exch translate ";
    context.showmode = true; 
    context = rpn(ps, context); 
    context.showmode = false; 
    return context;
}

operators.widthshow = function(context) {
    const [s, ch, cy, cx ] = context.pop("string", "number", "number", "number");
    if (!context.graphics.current.length) {
       context.error("nocurrentpoint");
    }
    if (!context.graphics.font) {
       context.error("nocurrentfont");
    }
    if (!s) return context;
    const font = fonts[context.graphics.font];
    const scale = context.graphics.size / font.head.unitsPerEm;  
    const [cx0, cy0] = [cx.value / scale, cy.value / scale];
    const [currentx0, currenty0] = context.graphics.current;
    var targetwidth = 0;
    var ps = " currentpoint currentpoint translate currentmatrix " + scale + " " + scale + " scale ";
    for(var i = 0; i < s.value.length; i++) {
        const c = s.value.charCodeAt(i);
        const gi = font.glyphIndex(c);
        ps += font.glyphPath(gi);
        ps += " fill ";
        ps += font.glyphWidth(gi) + " 0 translate "; 
        targetwidth +=  font.glyphWidth(gi) ;
        if (c == ch.value) { 
           ps += cx0 + " " + cy0 + " translate "; 
           targetwidth +=  cx0 ; 
        }
    }
    ps += " setmatrix neg exch neg exch translate "; 
    context.showmode = true; 
    context = rpn(ps, context);
    context.showmode = false;  
    
    if (context.device.textmode) {
        targetwidth *= scale;
        context.graphics.current = [currentx0, currenty0]
        for (n of context.nodes) {
           if (n.canshow) context = n.show(s.value, context, targetwidth);
        }
    }

return context;
}

Javascript Editor

Seems to work. We check the other text examples

Javascript Editor

postScriptEditor(`
10 dict begin /raw 0 def /svg 1 def /textmode 1 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-Italic 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
`);

Ok for SVG, We do PDF the next chapter.

ps20241026.js 3079 lines.

My Journey to PostScript