display.resources

since 0.9.6

display.resourcesJavaScriptresourcesJavaScriptdisplay.resourcesJSONresourcesJSONDisplay.Resources.netdisplay.resourcesAndroid

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:

Platform	Prefix	Example Usage
JavaScript	display.resources.	settings.display.resources.wordsFont = ...
JSON	display.resources.	var settings = { display: { resources: { wordsFonts: '...'} } };
JSON	resources.	var settings = { resources: { wordsFonts: '...'} };
.net	Display.Resources.	settings.Display.Resources.WordsFonts = ...
Android	display.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.

JavaScript

resources: RenderingResources = false;

C#

RenderingResources Resources { get; set; } = false

Kotlin

var resources: RenderingResources = false

RenderingResources

Following resources exist for adjusting the style.

Description

This public class contains central definitions for controlling the visual appearance.

 class RenderingResources

Properties

barNumberColor	Color	`rgb(200, 0, 0)`	The color to use for displaying the bar numbers above the music sheet.
barNumberFont	Font	`11px Arial, sans-serif`	The font to use for displaying the bar numbers above the music sheet.
barSeparatorColor	Color	`rgb(34, 34, 17)`	The color to use for rendering bar separators, the accolade and repeat signs.
copyrightFont	Font	`bold 12px Arial, sans-serif`	The font to use for displaying the songs copyright information in the header of the music sheet.
directionsFont	Font	`14px Georgia, serif`	The font to use for displaying the directions texts.
effectFont	Font	`italic 12px Georgia, serif`	The font to use for displaying certain effect related elements in the music sheet.
fingeringFont	Font	`14px Georgia, serif`	The font to use for displaying finger information in the music sheet.
fretboardNumberFont	Font	`11px Arial, sans-serif`	The font to use for displaying the fretboard numbers in chord diagrams.
graceFont	Font	`11px Arial, sans-serif`	The font to use for grace notation related texts in the music sheet.
inlineFingeringFont	Font	`12px Georgia, serif`	The font to use for displaying finger information when inline into the music sheet.
mainGlyphColor	Color	`rgb(0, 0, 0)`	The color to use for music notation elements of the primary voice.
markerFont	Font	`bold 14px Georgia, serif`	The font to use for section marker labels shown above the music sheet.
numberedNotationFont	Font	`14px Arial, sans-serif`	The font to use for displaying the numbered music notation in the music sheet.
numberedNotationGraceFont	Font	`16px Arial, sans-serif`	The font to use for displaying the grace notes in numbered music notation in the music sheet.
scoreInfoColor	Color	`rgb(0, 0, 0)`	The color to use for displaying the song information above the music sheets.
secondaryGlyphColor	Color	`rgb(0,0,0,0.4)`	The color to use for music notation elements of the secondary voices.
staffLineColor	Color	`rgb(165, 165, 165)`	The color to use for rendering the lines of staves.
subTitleFont	Font	`20px Georgia, serif`	The font to use for displaying the songs subtitle in the header of the music sheet.
tablatureFont	Font	`13px Arial, sans-serif`	The font to use for displaying the guitar tablature numbers in the music sheet.
timerFont	Font	`12px Georgia, serif`	The font to use for displaying beat time information in the music sheet.
titleFont	Font	`32px Georgia, serif`	The font to use for displaying the songs title in the header of the music sheet.
wordsFont	Font	`15px Arial, sans-serif`	The font to use for displaying the lyrics information in the header of the music sheet.