Possible to load fonts from string?

[BurningTreeC]

Yesterday I did a quick try to integrate alphaTab in TiddlyWiki5, which is a self-contained Wiki in a single HTML file (or a little bit more advanced on Node.Js configuration)

However, the struggles I came across are the way TiddlyWiki5 needs to load the fonts. We cannot access a directory outside but I can get the font as a string and pass that to the alphaTab API.

Is there currently a way to do so?
Or would it be an idea for improvement?

Thanks for your replies,
Simon

[Danielku15]

I'm not familiar with TiddlyWiki and you might have to check with the Community there how to best embed dynamic UI components there. What I can share from a general usage of alphaTab:

Using alphaTab in a browser environment (similar to Electron having a Node.js backend and a Chromium frontend). Typically these "embedded" browsers still have some capabilities of interacting with the backend through some mechanism.

Generally alphaTab is not loading the custom fonts used for display of texts, but rather only checking if the fonts are available via CSS Font loading APIs of the browser. Hence you have to check how to embedd web fonts in this environment and ensure they are available via the Font APIs. Some references around that:

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
https://talk.tiddlywiki.org/t/embedding-a-font-into-tiddlywiki/9169

One special case is the Music Font (Bravura) where we create a <style /> tag: https://github.com/CoderLine/alphaTab/blob/develop/src/Environment.ts#L147

Here we do not have (yet) much customization available. I haven't tried it yet but following workarounds might work:

1. Replace the Environment.createStyleElement method by assigning a custom function. Then implement the tag generation as needed for your environment.
2. Before running alphaTab create a custom @font-face with the family name alphaTab and configure the fontDirectory to something "random".
3. (if internet resources are fine): Configure the fontDirectory to a remote location like https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/font/

I added #2113 as improvement feature to cover the need of fully customizing the URLs of the font.

Using alphaTab in a headless environment (pure Node.js)

If you use alphaSkia to render PNGs you can load fonts from any Uint8Array (which could be a base64 string you decode or you simply have a constant somewhere embedded):

• https://www.alphatab.net/docs/guides/nodejs#change-the-rendering-settings-to-produce-png-with-our-custom-fonts
• https://www.alphatab.net/docs/guides/nodejs#combine-all-individual-pngs-into-one-final-one-and-save-it

If you want to use SVG display it gets a bit more tricky and we're back to "how does the UI handle custom fonts".

If you can share some more bits how things are organized in this Wiki I might be able to help better.

[BurningTreeC]

Thanks a lot @Danielku15 I got the fonts working with your help!

[Danielku15]

Awesome, how did you solve it? 😁

[BurningTreeC]

I did what you proposed:

• overwrite Environment.createStyleElement -> return false
• I integrated all needed styles and fonts as a TiddlyWiki5 stylesheet
• no internet sources, the wiki must be self-contained

[Danielku15]

Thanks for the insight. This tells me that #2113 is still needed and will serve your needs.

[Danielku15]

v1.6.0 will have the feature you need to customize the music font URLs via settings.

#2113
#2114

[BurningTreeC]

Thanks a lot @Danielku15 !