How to isolate combining characters and center them based on their SVG path in opentype.js?

[lancejpollard]

Any hints at how I can put together a quick script to isolate specific combining characters from an existing font, like NotoSansHebrew, to a new font like NotoSansHebrewDiacritics, where the diacritics/combining-characters have bounding boxes that are the width of the SVG glyph?

I would like to show, for this example, the Hebrew diacritics glyphs, not like this (with the dotted circle or circle in them, to account for the character they are supposed to combine with):

But instead, I would like to show them large and centered, in like some UI box, so all the glyphs appear centered in the padded div or somethign like that. Right now, taking NotoSansHebrew and displaying the diacritics in a div centered, they appear at weird positions because they are supposed to be combined with something. I want to avoid that problem.

Starting with this, what would I need to do? Could you whip together a script perhaps, for this one glyph as an example, or just outline what to do exactly? Not sure if I should capture the SVG, somehow compute its bounding box, and then write it back to a glyph, or if that is even possible.

import fs from 'fs/promises'
import opentype from 'opentype.js'

save()

async function save() {
  const buffer = await fs.readFile(
    `./NotoSansHebrew-Regular.ttf`,
  )
  const font = opentype.parse(buffer.buffer)

  const example = font.charToGlyph('\u0591')

  const newFont = new opentype.Font({
    familyName: 'NotoSansHebrewDiacritics',
    styleName: 'Medium',
    unitsPerEm: 1000,
    ascender: 800,
    descender: -200,
    glyphs: [example],
  })

  await fs.writeFile(
    './NotoSansHebrewDiacritics.otf',
    Buffer.from(newFont.toArrayBuffer()),
  )
}