How to know the baseline and x value for font.getPath() ?

Hello, this question have already been asked but the answer given didn’t work : var baseline = (font.ascender / font.unitsPerEm * fontSize); So since it’s been a while maybe now there is a solution for it.

Expected Behavior

When I use font.getPath(‘text’, 0,0,40) => the text will be cut on the top or the bottom, or the right… And I would like to know the value of x and y relatively to the font and text. Or to make it simple, i would like the text to not be cut.

Steps to Reproduce (for bugs)

I made a small repo to visualize the text generated

1. git clone https://github.com/microSoftware/display-font.git
2. npm install
3. node opentype.js (or nodemon opentype.js if you want to watch for modif)
4. modify the words to see which one work and don’t work
5. Go on http://localhost:8900 to see the result

Thank you

[fdb]

font.getPath draws the text with 0,0 being the baseline.

So, given a function hline that looks like this:

function hline(y) {
    ctx.beginPath();
    ctx.moveTo(-9999, Math.round(y)-0.5);
    ctx.lineTo(9999, Math.round(y)-0.5);
    ctx.stroke();
}

You can see the relationship between baseline, ascender and descender here: this code:

// Translate the canvas 150 pixels down.
ctx.translate(0, 150);
// Draw the baseline.
hline(0);

// Calculate / draw ascender and descender.
var fontSize = 64;
var fontScale = 1 / font.unitsPerEm * fontSize;
// Note that ascender / descender are bottom-up, so we need to flip (negate) them.
var topY = -(font.ascender * fontScale);
var bottomY = -(font.descender * fontScale);
ctx.strokeStyle = '#66f';
hline(topY);
hline(bottomY);

// Draw the text at 0,0 (baseline).
var path = font.getPath('The quick brown fox jumps over the lazy dog', 0, 0, fontSize);
path.draw(ctx);

Will draw the text like this, with ascender/descender in blue:

Working example in JSFiddle

[axkibe]

Use path.getBoundingBox()

Then y1 of that is what you seek.

But note that ‘X’ is for example in most fonts taller than ‘o’, so both letters would be positioned to the top if you use it like that.