What code is being used here for use with fonts and glyphs?

Question

I was looking through some of the files used in Vexflow and I'm trying to add new glyphs for the score however, I don't know what code is being used here in the vex.flow.font.js file:

Vex.Flow.Font = {"glyphs":{"vb":{"x_min":0,"x_max":428.75,"ha":438,"o":"m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}

To my understanding, the code above is referenced by another file (glyph.js) to render an svg. Any help would be greatly appreciated, thank you :)

Answer 1

Vex.Flow.Font = {"glyphs": {
    "vb": {
        "x_min": 0,
        "x_max": 428.75,
        "ha": 438,
        "o": "m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}}}

glyphs is a list of glyphs, mapping them from their code to their info. So vb is a glyph code, and the map with four values is its description. x_min and x_max describe horizontal metrics. x_min set to zero means start drawing the glyph at the current cursor point, and the value of x_max specifies cursor's movement to the right. I have no idea what is ha and what does it do. o is the outline of the glyphs to be rendered. It is described in a format similar to SVG paths. For the start, m 262 186 means move to pixel (262, 186), b 273... means draw a bezier curve with these points, etc.