Skip to main content

resources

since 0.9.6

Description​

Allows adjusting of the used fonts and colors for rendering. AlphaTab allows configuring the colors and fonts used for rendering via the rendering resources settings. Please note that as of today this is the primary way of changing the way how alphaTab styles elements. CSS styling in the browser cannot be guaranteed to work due to its flexibility.

Due to space reasons in the following table the common prefix of the settings are removed. Please refer to these examples to eliminate confusion on the usage:

PlatformPrefixExample Usage
JavaScriptdisplay.resources.settings.display.resources.wordsFont = ...
JSONdisplay.resources.var settings = { display: { resources: { wordsFonts: '...'} } };
JSONresources.var settings = { resources: { wordsFonts: '...'} };
.netDisplay.Resources.settings.Display.Resources.WordsFonts = ...
Androiddisplay.resources.settings.display.resources.wordsFonts = ...

Types​

Fonts​

For the JavaScript platform any font that might be installed on the client machines can be used. Any additional fonts can be added via WebFonts. The rendering of the score will be delayed until it is detected that the font was loaded. Simply use any CSS font property compliant string as configuration. Relative font sizes with percentual values are not supported, remaining values will be considered if supported.

since 1.2.3 Multiple fonts are also supported for the Web version. alphaTab will check if any of the fonts in the list is loaded instead of all. If none is available at the time alphaTab is initialized, it will try to initiate the load of the specified fonts individual through the Browser Font APIs.

For the .net platform any installed font on the system can be used. Simply construct the Font object to configure your desired fonts.

Colors​

For JavaScript you can use any CSS font property compliant string. (#RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(r,g,b), rgba(r,g,b,a) )

On .net simply construct the Color object to configure your desired color.

resources: RenderingResources = false;