Get font outlines

When you use the show operator to paint a string, the path of the characters is filled.

Javascript Editor

But what if you want to have the characters outlined and not filled? There must be a way to get the path and then to apply stroke. There is a postScript operator charpath. It gets the path of the font and adds it to the current path. You can then do whatever you want with it.

When you google charpath and type 3 fonts you will get plenty of information that is not possible to get the outline of a type 3 font. The reasoning is that type 3 fonts use the entire PostScript language to paint the character and are responsible of filling the character. You find the fill operator in the CharProcs procedure of each character like the official Adobe example or in the BuildGlyph procedure like in our Computer Modern fonts. It seems difficult to get around that fill operator.

However, this reasoning is not taking into account the full power of PostScript. In PostScript, each operator can be redefined, even the built in operators. What if we redefine fill as stroke?

Javascript Editor

It works. For every fill operator in the font, now stroke is applied. Now you might say, this is great, but it comes at a big price: Our fill operator is now lost. We will not be able to fill any other paths any more. This would be a show stopper.

It is true that in this simple version, fill is lost. We need to confine the redefinition of fill to the show operator. We will do this using the dictionary stack. We add a dictionary stack, add the definition, use show and then drop the dictionary.

Javascript Editor

As you can see, it is still possible to fill a square after stroking the characters.

With this knowledge, we can develop the charpath in PostScript before we implement it in Javascript.

Javascript Editor

Or properly Javascript

Javascript Editor

Now can we do the same to get the metrics of the font? We need first to fix something with the show operator. The show operator should place the current point at the end of the painted string.

Javascript Editor

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;
    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 = rpn("BuildChar", context);
       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;

return context;
};

Javascript Editor

Now we can silently run show and compare current position of start and end

Javascript Editor

We are now ready to layout text.

The current code is 1865 lines ps20240822.js

My Journey to PostScript