opentypejs / opentype.js

Read and write OpenType fonts using JavaScript.
https://opentype.js.org/
MIT License
4.49k stars 479 forks source link

Get anchor point coordinates #418

Open rguliev opened 4 years ago

rguliev commented 4 years ago

Hi, Thanks a lot for your project!

In ttf fonts (do not know about others), symbols may have anchor points. In my case, they are used to define the diacritics position. For example: Screenshot from 2019-12-17 21-29-16

Is there a way to get that anchor point coordinates?

velociwabbit commented 3 years ago

try converting the font to TypeFace.js http://gero3.github.io/facetype.js/

and then looking at the resultant glyph.... in there will be something like this (I am using segoe from ms which i believe is a ttf)

Also The path instructions ("o") can also be converted to svg paths https://convertio.co/ttf-svg/ if you are more familiar with svg paths (i certainly am).

here are the results .

Not sure if this helps you.

        ";": {
            "ha": 444,
            "x_min": 29,
            "x_max": 390,
            "o": "m 390 561 q 346 461 390 499 q 227 424 302 424 q 113 463 157 424 q 68 561 68 503 q 112 657 68 621 q 229 694 155 694 q 346 657 301 694 q 390 561 390 621 m 262 -161 l 29 -161 l 98 184 l 359 184 l 262 -161 z "
        },
rguliev commented 3 years ago

Thanks for your answer. svg-path gives only the letter itself, but where are anchor point coordinates?

velociwabbit commented 3 years ago

I think you have to derive them from the o and the xmin, x max... that is why i suggested svg because it is easier to reverse engineer.

if you take an svg glyph and put it into inkscape (which is an svg editor) my guess is that they will be able to figure it out. If that is true (which i am half guessing because inkscape does some really cool things with paths) you can look at the source code for how they do it.

wish I had an easier answer but the information you are requesting appears not to be included in a ttf file . I have been playing with both svg conversion and JSON conversion all morning and there is only path info and scalars that are converted.

My one last suggestion is to download facetype from github and take a look at their typeface.min.js (its not minified) converter and see if you can glean it from that code.

lucky you :)

moyogo commented 3 years ago

Anchors are stored in lookups in the GPOS table of TTFs. They are not in the glyf table where contour and component info is stored in TTF.