photopea / Typr.js

Typr.js - process fonts in Javascript
MIT License
922 stars 73 forks source link

Is there a way to get the dimensions from path? #3

Closed talltyler closed 8 years ago

talltyler commented 8 years ago

Am I just looking for the largest x/y pair in the crds? Is there a way to get any other font metrics from this? Like when wrapping how do you figure out how far down the next line should be drawn?

photopea commented 8 years ago

You are talking about Baseline to Baseline Distance (BTBD). I usually check the "hhea" table and set the line distance as hhea.ascender - hhea.descender (descender is negative, so it is like the sum).

Check Microsofts recommendations on BTBD: https://www.microsoft.com/typography/otspec/recom.htm

Correct rendering fonts is a complex thing, you can find lots of information about it. Just keep in mind, that the correct alignment (glyph to glyph, line to line, word to word) can be deduced without knowing the path (that's how it should be done).

talltyler commented 8 years ago

Sorry I wasn't being clear. What I am looking for is a way to get the width of a path. The path that I am talking about is the one that is returned from your stringToPath method. From what I see there is an array of point coordinates, I assume the largest x value is the width of the path at the current scale, is that correct or is there a better way to get at this information.

photopea commented 8 years ago

So you need a bounding box of the path? You can compute a bounding box of all control points, it can be slightly bigger, but it should be a good approximation.

function getBB(crds)
{
    var xmin = 99999999999, xmax=-xmin;
    var ymin = 99999999999, ymax=-ymin;
    for(var i=0; i<crds.length; i+=2)
    {
        var x = crds[i], y = crds[i+1];
        xmin = Math.min(xmin, x);
        ymin = Math.min(ymin, y);
        xmax = Math.max(xmax, x);
        ymax = Math.max(ymax, y);
    }
    return {x: xmin y:ymin, width:xmax-xmin, height:ymax-ymin};
}

But if you want to break words into lines and you want to find out when to break the line, this is a wrong way of doing it.

talltyler commented 8 years ago

Awesome, thanks