Including TrueType to the codebase

The rpnBinary class

Javascript Editor

rpnBinary = class { 
   constructor (buffer) {
       this.data = new Uint8Array(buffer.length);
       for(var i=0; i < buffer.length; i++) {
           this.data[i] = buffer.codePointAt(i);
       }
       this.position = 0
       this.position = 0;
   }
   getUint8() { return this.data[this.position++]; }
   getUint16() { return this.getUint8() * 256 + this.getUint8(); }
   getUint32() { return this.getUint8() * 256*256*256 + this.getUint8() * 256*256 + this.getUint8() * 256 + this.getUint8(); }
   getInt16() { 
       var n = this.getUint16(); 
       if (n & 0x8000) n -= 1 * 256*256;
       return n;
   }
   getInt32 () { return this.getUint32(); }
   getFWord() { return this.getInt16() ; }
   getUFWord() { return this.getUint16() ; }
   getOffset16() { return this.getUint16() ; }
   getOffset32() { return this.getUint32() ; }
   getF2Dot14() { return this.getInt16() * 1.0 / (256*64) ; }
   getFixed() { return this.getInt32() * 1.0 / (256*256)  ; }
   getString(n) { 
       var string = "";
       for (var i = 0; i < n; i++) {
           string += String.fromCharCode(this.getUint8());
       }
       return string;
   }
   getDate() { 
       const macTime = this.getUint32() * 0x100000000 + this.getUint32();
       const utcTime = macTime * 1000 + Date.UTC(1904, 1, 1)
       return new Date(utcTime);
   }
   getPosition() { return this.position; }
   setPosition(p) { this.position = p; } 
}

readSyncURL = function(url){
   const xhr=new XMLHttpRequest();
   xhr.open("GET",url,false);
   xhr.overrideMimeType("text/plain; charset=x-user-defined");//Override MIME Type to prevent UTF-8 related errors
   xhr.send();
   URL.revokeObjectURL(url);
   return xhr.responseText;
}

The rpnTTF class

Javascript Editor

rpnTTF = class {
    constructor(path) {
        this.path = path;
        this.error = "";
        const file = readSyncURL(path);
        this.reader = new rpnBinary(file);

this.reader.getUint32() // scalarType
        const numTables = this.reader.getUint16()
        this.reader.getUint16() // searchRange
        this.reader.getUint16() // entrySelector
        this.reader.getUint16() // rangeShift

this.tables = {};
        for (var i = 0; i < numTables; i++) {
             const tag = this.reader.getString(4)
             this.tables[tag] = {
                 checksum: this.reader.getUint32(),
                 offset: this.reader.getUint32(),
                 length: this.reader.getUint32(),
             }
        }
       
        this.reader.setPosition(this.tables.head.offset);
        this.head = {
            majorVersion: this.reader.getUint16(),
            minorVersion: this.reader.getUint16(),
            fontRevision: this.reader.getFixed(),
            checksumAdjustment: this.reader.getUint32(),
            magicNumber: this.reader.getUint32(),
            flags: this.reader.getUint16(),
            unitsPerEm: this.reader.getUint16(),
            created: this.reader.getDate(),
            modified: this.reader.getDate(),
            xMin: this.reader.getFWord(),
            yMin: this.reader.getFWord(),
            xMax: this.reader.getFWord(),
            yMax: this.reader.getFWord(),
            macStyle: this.reader.getUint16(),
            lowestRecPPEM: this.reader.getUint16(),
            fontDirectionHint: this.reader.getInt16(),
            indexToLocFormat: this.reader.getInt16(),
            glyphDataFormat: this.reader.getInt16()
        };
        if (!this.tables.maxp) {
            this.error =  "truetype error maxp missing";
            return
        }
        this.reader.setPosition(this.tables.maxp.offset);
        this.maxp = {
           version: this.reader.getFixed(),
           numGlyphs: this.reader.getUint16(),
           maxPoints: this.reader.getUint16(),
           maxContours: this.reader.getUint16(),
           maxCompositePoints: this.reader.getUint16(),
           maxCompositeContours: this.reader.getUint16(),
           maxZones: this.reader.getUint16(),
           maxTwilightPoints: this.reader.getUint16(),
           maxStorage: this.reader.getUint16(),
           maxFunctionDefs: this.reader.getUint16(),
           maxInstructionDefs: this.reader.getUint16(),
           maxStackElements: this.reader.getUint16(),
           maxSizeOfInstructions: this.reader.getUint16(),
           maxComponentElements: this.reader.getUint16(),
           maxComponentDepth: this.reader.getUint16()
        }
        this.reader.setPosition(this.tables.cmap.offset);
        this.cmap = {
            version: this.reader.getUint16(),
            numTables: this.reader.getUint16(),
            encodingRecords: [],
            glyphIndexMap: {},
        }
        if (this.cmap.version) {
            this.error =  "truetype error camp version not 0";
            return
        }
        for (var i = 0; i < this.cmap.numTables; i++) {
            this.cmap.encodingRecords.push({
                platformID: this.reader.getUint16(),
                encodingID: this.reader.getUint16(),
                offset: this.reader.getOffset32(),
            })
        }
        // we only support platform 0 and and encoding 3
        var encodingsOffset = -1;
        for (var i = 0; i < this.cmap.encodingRecords.length; i++) {
            const  { platformID, encodingID, offset } =  this.cmap. encodingRecords[i];
            if ( platformID == 0 && encodingID == 3 ) encodingsOffset = offset; // unicode 
            if ( platformID == 3 && encodingID == 1 ) encodingsOffset = offset; // windows
            if (encodingsOffset > -1 ) break;
        }
        if (encodingsOffset == -1 ) {
             this.error = "truetype unsupported encoding";
             return;
        }
        const formatstart = this.tables.cmap.offset + encodingsOffset
        this.reader.setPosition(formatstart);
        const format = this.reader.getUint16();
        if (!(format == 4) ) {
            this.error = "truetype unsupported format";
            return;
        }

this.cmap.format = {
            format: 4,
            length: this.reader.getUint16(),
            language: this.reader.getUint16(),
            segCountX2: this.reader.getUint16(),
            searchRange: this.reader.getUint16(),
            entrySelector: this.reader.getUint16(),
            rangeShift: this.reader.getUint16(),
            endCode: [],
            startCode: [],
            idDelta: [],
            idRangeOffset: [],
            glyphIndexMap: {}, // This one is my addition, contains final unicode->index mapping
}
        const segCount = this.cmap.format.segCountX2 / 2; 
        for (var i = 0; i < segCount; i++) {
            this.cmap.format.endCode.push(this.reader.getUint16())
        }

this.reader.getUint16() // Reserved pad.

for (var i = 0; i < segCount; i++) {
            this.cmap.format.startCode.push(this.reader.getUint16())
        }

for (var i = 0; i < segCount; i++) {
            this.cmap.format.idDelta.push(this.reader.getInt16())
        }

for (var i = 0; i < segCount; i++) {
            this.cmap.format.idRangeOffset.push(this.reader.getUint16())
        }
 
        const remaining_bytes =  formatstart + this.cmap.format.length - this.reader.getPosition(); 
        this.cmap.format.glyphIdArray = [];
        for (var i = 0; i < remaining_bytes / 2; i++) {
            this.cmap.format.glyphIdArray.push(this.reader.getUint16());
        }
         
        this.reader.setPosition(this.tables.hhea.offset);
        this.hhea = {
           version: this.reader.getFixed(),
           ascent: this.reader.getFWord(),
           descent: this.reader.getFWord(),
           lineGap: this.reader.getFWord(),
           advanceWidthMax: this.reader.getUFWord(),
           minLeftSideBearing: this.reader.getFWord(),
           minRightSideBearing: this.reader.getFWord(),
           xMaxExtent: this.reader.getFWord(),
           caretSlopeRise: this.reader.getInt16(),
           caretSlopeRun: this.reader.getInt16(),
           caretOffset: this.reader.getFWord(),
           reserved0: this.reader.getInt16(),
           reserved1: this.reader.getInt16(),
           reserved2: this.reader.getInt16(),
           reserved3: this.reader.getInt16(),
           metricDataFormat: this.reader.getInt16(),
           numOfLongHorMetrics: this.reader.getInt16()
         }
         this.reader.setPosition(this.tables.hmtx.offset);
         const hMetrics = [];
         for (var i = 0; i < this.hhea.numOfLongHorMetrics; i++) {
             hMetrics.push({
                 advanceWidth: this.reader.getUint16(),
                 leftSideBearing: this.reader.getInt16()
             })
         } 
         const leftSideBearing = [];
         for (var i = 0; i < this.maxp.numGlyphs - this.hhea.numOfLongHorMetrics; i++) {
             leftSideBearing.push(reader.getFWord())
         }
         this.hmtx = {
             hMetrics,
             leftSideBearing
         }
         this.reader.setPosition(this.tables.loca.offset);
         const loca = [];
         for (let i = 0; i < this.maxp.numGlyphs + 1; i++) {
             if (this.head.indexToLocFormat)
                 loca.push(this.reader.getOffset32());
             else
                 loca.push(this.reader.getOffset16());
         }
         this.glyphs = [];
         for (var i = 0; i < loca.length - 1; i++) {
             const length = loca[i+1] - loca[i];
             if (!length) {
                 this.glyphs.push(null);
                 continue;
             }
             const multiplier = this.head.indexToLocFormat === 0 ? 2 : 1
             const locaOffset = loca[i] * multiplier;
             this.reader.setPosition(this.tables.glyf.offset + locaOffset)
             const glyph = {
                 numberOfContours: this.reader.getInt16(),
                 xMin: this.reader.getInt16(),
                 yMin: this.reader.getInt16(),
                 xMax: this.reader.getInt16(),
                 yMax: this.reader.getInt16()
             };
             if (glyph.numberOfContours >= 0) {
             glyph.endPtsOfContours = []
             for (var j = 0; j < glyph.numberOfContours; j++) {
                 glyph.endPtsOfContours.push(this.reader.getUint16());
             }
             glyph.instructionLength = this.reader.getUint16();
             glyph.instructions = [];
             for (var j = 0; j < glyph.instructionLength; j++) {
                 glyph.instructions.push(this.reader.getUint8());
             }
             const numPoints = Math.max(...glyph.endPtsOfContours)+1;
             const flags = [];
             glyph.points = []; 
             for (var j = 0; j < numPoints; j++) {
                 const flag = this.reader.getUint8();
                 flags.push(flag);
                 glyph.points.push( { x: 0, y: 0, onCurve: flag & 1 });
                 if (flag & 8) {
                     var repeatCount = this.reader.getUint8();
                     j += repeatCount;
                     while (repeatCount--) {
                         flags.push(flag);     
                          glyph.points.push( { x: 0, y: 0, onCurve: flag & 1 });              
                     }
                 } 
             }
             if (glyph.points.length) glyph.points[0]["onCurve"] = 1;

function readCoords(name, byteFlag, deltaFlag, reader) {
                var value = 0;

for (var i = 0; i < numPoints; i++) {
                    var flag = flags[i];
                    if (flag & byteFlag) {
                        if (flag & deltaFlag) {
                            value += reader.getUint8();
                        } else {
                            value -= reader.getUint8();
                        }
                    } else if (~flag & deltaFlag) {
                        value += reader.getInt16();
                    } else {
                        // value is unchanged.
                    }

glyph.points[i][name] = value;
                }
            }
            readCoords("x", 2, 16, this.reader);
            readCoords("y", 4, 32, this.reader);
            } else { 
            glyph.components = [];
            // read composite glyph
            do {
                const flag = reader.getUint16();
                const index = reader.getUint16();
                glyph.components.push(index);
                const argument1 = (flags & 0x0001) ? reader.getUint16() : reader.getUint8();
                const argument2 = (flags & 0x0001) ? reader.getUint16() : reader.getUint8();
                var scale = 1.0;
                var xscale = 1.0;
                var yscale = 1.0;
                if (flag & 0x0008) {
                    scale = reader.getF2Dot14();
                } else if (flag & 0x0040) {
                    xscale = reader.getF2Dot14();
                    yscale = reader.getF2Dot14();
                } else if (flag & 0x0080) {
                    xscale = reader.getF2Dot14();
                    reader.getF2Dot14();
                    reader.getF2Dot14();
                    yscale = reader.getF2Dot14();
                }
            } while (flags & 0x0020)
            }

this.glyphs.push(glyph); 
       
          }

}
    glyphIndex(unicode) {
        for(var i = 0; i < this.cmap.format.segCountX2 / 2 ; i++) {
            if (unicode >= this.cmap.format.startCode[i] && unicode <= this.cmap.format.endCode[i] ) {
                if (this.cmap.format.idRangeOffset[i]) {
                    const idx = this.cmap.format.idRangeOffset[i]/2 + unicode - this.cmap.format.startCode[i] - this.cmap.format.idRangeOffset.length; // offset calculation starts at beginning of idRangeOffset, not glyphIdArray, so we must subtract 2 bytes per value              
                    return this.cmap.format.glyphIdArray[idx] + this.cmap.format.idDelta[i] ;
                } else {
                    return unicode + this.cmap.format.idDelta[i] ;
                }
            }           
        }
        return 0; //missing glyph
    }
    glyphWidth(gi) {
        return this.hmtx.hMetrics[gi].advanceWidth;
    }
    glyphPath(gi) {
        const glyph = this.glyphs[gi];
        if (!glyph) return "";
        var ps = "";
        var points = [];
        var endPtsOfContours = [];
        if (glyph.points.length) {
            points = glyph.points;
            endPtsOfContours = glyph.endPtsOfContours;
        } else if (glyph.components.length) {
            for (var j = 0; j < glyph.components.length; j++) {
                const cglyph = this.glyphs[glyph.components[j]];
                points = points.concat(cglyph.points);
                endPtsOfContours = endPtsOfContours.concat(cglyph.points);
            }
        }
        
        if (points.length) { 
            var p = points[0]; 
            ps += p.x + " " + p.y + " moveto "; 
            var bezier = [];
            for (var j = 1; j <  points.length; j++) {
                p = points[j];  
                if (p.onCurve) {
                   if (bezier.length) {
                       ps += bezier[0] + " " + bezier[1] + " " + p.x + " " + p.y + " qcurveto ";
                       bezier = [];
                   } else
                   ps += p.x + " " + p.y + " lineto ";
                } else {
                  if (bezier.length) {
                      ps += bezier[0] + " " + bezier[1] + " " + (bezier[0] + p.x)/2 + " " + (bezier[1] + p.y)/2 + " qcurveto ";
                  } 
                  bezier = [p.x, p.y];  
                } 
                if (endPtsOfContours.includes(j)) { 
                    ps += " closepath " ;
                    if (j <  points.length-1) {
                        j++;
                         p = points[j];  
                        ps += p.x + " " + p.y + " moveto "; 
                        bezier = [];
                    }
                }      
          
           }
            
        } 
        return ps;
    }
    
}

fonts = {}
fontbasepath = "site/files/";

The operators

Javascript Editor

operators.qcurveto = function(context) {
    const [y3, x3, yq, xq] = context.pop("number","number","number","number");
    if (!y3) return context;
    if (!context.graphics.current.length) {
       context.error("nocurrentpoint");
    } else if (!context.graphics.path.length) {
       context.error("nocurrentpath");
    } else {
      const subpath = context.graphics.path.pop();
      const [xqt, yqt] = context.transform(xq.value, yq.value); 
      const [x3t, y3t] = context.transform(x3.value, y3.value);
      const [x0t, y0t] = context.graphics.current;
      const [x1t, y1t] = [x0t + 2/3*(xqt-x0t), y0t + 1/3*(yqt-y0t)];
      const [x2t, y2t] = [x3t + 2/3*(xqt-x3t), y3t + 2/3*(yqt-y3t)]; 
      subpath.push([ "C", context.graphics.current[0], context.graphics.current[1], x1t, y1t, x2t, y2t, x3t, y3t ]);
      context.graphics.path.push(subpath); 
      context.graphics.current = [ x3t, y3t ];
    }
    return context;
};

operators.findfont = function(context) {
    const [n] = context.pop("name");
    if (!n) return context;
    if (!fonts[n.value]) {
        fonts[n.value] = new rpnTTF(fontbasepath + n.value  + ".ttf");
    }
    if (!fonts[n.value]) {
        context.error("invalidfont " );
        return context;
    }
    if (fonts[n.value].error) {
        context.error("invalidfont " + fonts[n.value].error );
        return context;
    }
    const dict = new rpnDictionary(1);
    dict.value.FontName = n;
    context.stack.push(dict);
    return context;
};

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 (!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 = rpn(ps, context); 
    return context;
}

operators.charpath = function(context) {
    const [s] = context.pop("string");
    if (!context.graphics.current.length) {
       context.error("nocurrentpoint");
       return context;
    }
    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;  
    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 += font.glyphWidth(gi) + " 0 translate ";  
    }
    ps += " setmatrix neg exch neg exch translate "; 
    context = rpn(ps, context); 
    return context;
}

operators.stringwidth = function(context) {
    const [s] = context.pop("string");
    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;  
    var width = 0;
    for(var i = 0; i < s.value.length; i++) {
        const c = s.value.charCodeAt(i);
        const gi = font.glyphIndex(c);
        width += font.glyphWidth(gi) * scale;  
    }
    context.stack.push(new rpnNumber(width));
    context.stack.push(new rpnNumber(0)); 
    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];
    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 ";  
        if (c == ch.value) { 
           ps += cx0 + " " + cy0 + " translate ";  
        }
    }
    ps += " setmatrix neg exch neg exch translate "; 
    context = rpn(ps, context); 
    return context;
}

Testing

Javascript Editor

postScriptEditor(`
10 dict begin /rawurl 1 def /oversampling 2 def /canvas 1 def /svg 1 def /pdfurl 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
`);

Seems to work, but for the moment, we only have text as path. We will do text mode in the next chapter.

The code base has become much longer with TrueType. We are at 2970 lines and 105 kb ps20241016.js

My Journey to PostScript