Vexflow: Using Vexflow Glyphs or Other Music Glyphs in HTML

[HollyJHuber]

Vexflow draws such beautiful accidentals, I would love to be able to use the Vexflow flat, sharp and natural on my HTML pages. Is there a way to access the Vexflow accidentals as glyphs?

Or does anyone have a better solution for using accidentals in my HTML text?

I am trying to avoid loading a special music font like Opus Chords Sans Standard. Thank you!!

[gristow]

You could do it with a custom element. Take a look at this fiddle which I may have gone a bit overkill on.

Alternately, just use unicode symbols in your HTML.

[SalahAdDin]

@gristow You wrote some important, can you put in the documentation?

[gristow]

This is really off of the normal use-case for VexFlow, so I think it's probably not worth putting in the docs.

[mscuthbert]

Bravo @gristow ! I think that it's worth putting in the docs if there's a place for it, only so it doesn't disappear -- it's both a creative use of Vexflow and of customElements -- which is still new enough that this too would be exciting to people as well. :-)

[HollyJHuber]

Wow! Thank you for your elaborate fiddle! I agree, it is a creative use of Vexflow and should be added to the docs. I have tried using unicode symbols in HTML but was frustrated by their awkward spacing. Perhaps I was not using the right font. Thanks for this helpful information!!