Skip to main content

display.resources

since 0.9.6

Description

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: '...'} };
HTMLdata-display-resources-<div data-display-resources-wordsfont="...">
HTMLdata-resources-<div data-resources-wordsfont="...">
.netDisplay.Resources.settings.Display.Resources.WordsFonts = ...

Resources

Following resources exist for adjusting the style.

ResourceTypeDefaultSummary
barNumberColorJavaScript
barNumberColorJSON
barnumbercolorHTML
BarNumberColor.net
colorAllrgb(200, 0, 0)The color to use for displaying the bar numbers above the music sheet.
barSeparatorColorJavaScript
barSeparatorColorJSON
barseparatorcolorHTML
BarSeparatorColor.net
colorAllrgb(34, 34, 17)The color to use for rendering bar separators, the accolade and repeat signs.
mainGlyphColorJavaScript
mainGlyphColorJSON
mainglyphcolorHTML
MainGlyphColor.net
colorAllrgb(0, 0, 0)The color to use for music notation elements of the primary voice.
scoreInfoColorJavaScript
scoreInfoColorJSON
scoreinfocolorHTML
ScoreInfoColor.net
colorAllrgb(0, 0, 0)The color to use for displaying the song information above the music sheets.
secondaryGlyphColorJavaScript
secondaryGlyphColorJSON
secondaryglyphcolorHTML
SecondaryGlyphColor.net
colorAllrgb(0,0,0,0.4)The color to use for music notation elements of the secondary voices.
staffLineColorJavaScript
staffLineColorJSON
stafflinecolorHTML
StaffLineColor.net
colorAllrgb(165, 165, 165)The color to use for rendering the lines of staves.
barNumberFontJavaScript
barNumberFontJSON
barnumberfontHTML
BarNumberFont.net
fontAll11px ArialThe font to use for displaying the bar numbers above the music sheet.
copyrightFontJavaScript
copyrightFontJSON
copyrightfontHTML
CopyrightFont.net
fontAllbold 12px ArialThe font to use for displaying the songs copyright information in the header of the music sheet.,
effectFontJavaScript
effectFontJSON
effectfontHTML
EffectFont.net
fontAllitalic 12px GeorgiaThe font to use for displaying certain effect related elements in the music sheet.
fingeringFontJavaScript
fingeringFontJSON
fingeringfontHTML
FingeringFont.net
fontAll14px GeorgiaThe font to use for displaying finger information in the music sheet.
fretboardNumberFontJavaScript
fretboardNumberFontJSON
fretboardnumberfontHTML
FretboardNumberFont.net
fontAll11px ArialThe font to use for displaying the fretboard numbers in chord diagrams.
graceFontJavaScript
graceFontJSON
gracefontHTML
GraceFont.net
fontAll11px ArialThe font to use for grace notation related texts in the music sheet.
markerFontJavaScript
markerFontJSON
markerfontHTML
MarkerFont.net
fontAllbold 14px GeorgiaThe font to use for section marker labels shown above the music sheet.
subTitleFontJavaScript
subTitleFontJSON
subtitlefontHTML
SubTitleFont.net
fontAll20px GeorgiaThe font to use for displaying the songs subtitle in the header of the music sheet.
tablatureFontJavaScript
tablatureFontJSON
tablaturefontHTML
TablatureFont.net
fontAll13px ArialThe font to use for displaying the guitar tablature numbers in the music sheet.
titleFontJavaScript
titleFontJSON
titlefontHTML
TitleFont.net
fontAll32px GeorgiaThe font to use for displaying the songs title in the header of the music sheet.
wordsFontJavaScript
wordsFontJSON
wordsfontHTML
WordsFont.net
fontAll15px ArialThe font to use for displaying the lyrics information in the header of the music sheet.

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.

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.