display.resources

since 0.9.6

display.resourcesJavaScriptresourcesJavaScriptdisplay.resourcesJSONresourcesJSONDisplay.Resources.netdisplay.resourcesAndroid

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.

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

 class RenderingResources

Properties

barNumberColor

The color to use for displaying the bar numbers above the music sheet.

JavaScript

barNumberColor: Color = rgb(200, 0, 0);

C#

Color BarNumberColor { get; set; } = rgb(200, 0, 0)

Kotlin

var barNumberColor: Color = rgb(200, 0, 0)

barNumberFont

Deprecated

use elementFonts with BarNumber

The font to use for displaying the bar numbers above the music sheet.

JavaScript

barNumberFont: Font = 11px Arial, sans-serif;

C#

Font BarNumberFont { get; set; } = 11px Arial, sans-serif

Kotlin

var barNumberFont: Font = 11px Arial, sans-serif

barSeparatorColor

The color to use for rendering bar separators, the accolade and repeat signs.

JavaScript

barSeparatorColor: Color = rgb(34, 34, 17);

C#

Color BarSeparatorColor { get; set; } = rgb(34, 34, 17)

Kotlin

var barSeparatorColor: Color = rgb(34, 34, 17)

copyrightFont

Deprecated

use elementFonts with ScoreCopyright

The font to use for displaying the songs copyright information in the header of the music sheet.

JavaScript

copyrightFont: Font = bold 12px Arial, sans-serif;

C#

Font CopyrightFont { get; set; } = bold 12px Arial, sans-serif

Kotlin

var copyrightFont: Font = bold 12px Arial, sans-serif

defaultFonts

The default fonts for notation elements if not specified by the user.

JavaScript

static defaultFonts: Map<NotationElement, Font>;

C#

static Map<NotationElement, Font> DefaultFonts { get; set; }

Kotlin

companion object { var defaultFonts: alphaTab.collections.Map<NotationElement, Font> }

directionsFont

Deprecated

use elementFonts with EffectDirections

The font to use for displaying the directions texts.

JavaScript

directionsFont: Font = 14px Georgia, serif;

C#

Font DirectionsFont { get; set; } = 14px Georgia, serif

Kotlin

var directionsFont: Font = 14px Georgia, serif

effectFont

Deprecated

use elementFonts with the respective

Ununsed, see deprecation note.

JavaScript

effectFont: Font = italic 12px Georgia, serif;

C#

Font EffectFont { get; set; } = italic 12px Georgia, serif

Kotlin

var effectFont: Font = italic 12px Georgia, serif

elementFonts

The fonts used by individual elements. Check defaultFonts for the elements which have custom fonts. Removing fonts from this map can lead to unexpected side effects and errors. Only update it with new values.

JavaScript

readonly elementFonts: Map<NotationElement, Font>;

C#

Map<NotationElement, Font> ElementFonts { get; }

Kotlin

val elementFonts: alphaTab.collections.Map<NotationElement, Font>

engravingSettings

The SMuFL Metrics to use for rendering music symbols.

JavaScript

engravingSettings: EngravingSettings = alphaTab;

C#

EngravingSettings EngravingSettings { get; set; } = alphaTab

Kotlin

var engravingSettings: EngravingSettings = alphaTab

fingeringFont

Deprecated

Since 1.7.0 alphaTab uses the glyphs contained in the SMuFL font

Unused, see deprecation note.

JavaScript

fingeringFont: Font = 14px Georgia, serif;

C#

Font FingeringFont { get; set; } = 14px Georgia, serif

Kotlin

var fingeringFont: Font = 14px Georgia, serif

fretboardNumberFont

Deprecated

use elementFonts with ChordDiagramFretboardNumbers

The font to use for displaying the fretboard numbers in chord diagrams.

JavaScript

fretboardNumberFont: Font = 11px Arial, sans-serif;

C#

Font FretboardNumberFont { get; set; } = 11px Arial, sans-serif

Kotlin

var fretboardNumberFont: Font = 11px Arial, sans-serif

graceFont

The font to use for grace notation related texts in the music sheet.

JavaScript

graceFont: Font = 11px Arial, sans-serif;

C#

Font GraceFont { get; set; } = 11px Arial, sans-serif

Kotlin

var graceFont: Font = 11px Arial, sans-serif

inlineFingeringFont

Deprecated

Since 1.7.0 alphaTab uses the glyphs contained in the SMuFL font

Unused, see deprecation note.

JavaScript

inlineFingeringFont: Font = 12px Georgia, serif;

C#

Font InlineFingeringFont { get; set; } = 12px Georgia, serif

Kotlin

var inlineFingeringFont: Font = 12px Georgia, serif

mainGlyphColor

The color to use for music notation elements of the primary voice.

JavaScript

mainGlyphColor: Color = rgb(0, 0, 0);

C#

Color MainGlyphColor { get; set; } = rgb(0, 0, 0)

Kotlin

var mainGlyphColor: Color = rgb(0, 0, 0)

markerFont

Deprecated

use elementFonts with EffectMarker

The font to use for section marker labels shown above the music sheet.

JavaScript

markerFont: Font = bold 14px Georgia, serif;

C#

Font MarkerFont { get; set; } = bold 14px Georgia, serif

Kotlin

var markerFont: Font = bold 14px Georgia, serif

numberedNotationFont

The font to use for displaying the numbered music notation in the music sheet.

JavaScript

numberedNotationFont: Font = 14px Arial, sans-serif;

C#

Font NumberedNotationFont { get; set; } = 14px Arial, sans-serif

Kotlin

var numberedNotationFont: Font = 14px Arial, sans-serif

numberedNotationGraceFont

The font to use for displaying the grace notes in numbered music notation in the music sheet.

JavaScript

numberedNotationGraceFont: Font = 16px Arial, sans-serif;

C#

Font NumberedNotationGraceFont { get; set; } = 16px Arial, sans-serif

Kotlin

var numberedNotationGraceFont: Font = 16px Arial, sans-serif

scoreInfoColor

The color to use for displaying the song information above the music sheets.

JavaScript

scoreInfoColor: Color = rgb(0, 0, 0);

C#

Color ScoreInfoColor { get; set; } = rgb(0, 0, 0)

Kotlin

var scoreInfoColor: Color = rgb(0, 0, 0)

secondaryGlyphColor

The color to use for music notation elements of the secondary voices.

JavaScript

secondaryGlyphColor: Color = rgb(0,0,0,0.4);

C#

Color SecondaryGlyphColor { get; set; } = rgb(0,0,0,0.4)

Kotlin

var secondaryGlyphColor: Color = rgb(0,0,0,0.4)

staffLineColor

The color to use for rendering the lines of staves.

JavaScript

staffLineColor: Color = rgb(165, 165, 165);

C#

Color StaffLineColor { get; set; } = rgb(165, 165, 165)

Kotlin

var staffLineColor: Color = rgb(165, 165, 165)

subTitleFont

Deprecated

use elementFonts with ScoreSubTitle

The font to use for displaying the songs subtitle in the header of the music sheet.

JavaScript

subTitleFont: Font = 20px Georgia, serif;

C#

Font SubTitleFont { get; set; } = 20px Georgia, serif

Kotlin

var subTitleFont: Font = 20px Georgia, serif

tablatureFont

The font to use for displaying the guitar tablature numbers in the music sheet.

JavaScript

tablatureFont: Font = 13px Arial, sans-serif;

C#

Font TablatureFont { get; set; } = 13px Arial, sans-serif

Kotlin

var tablatureFont: Font = 13px Arial, sans-serif

timerFont

Deprecated

use elementFonts with EffectBeatTimer

The font to use for displaying beat time information in the music sheet.

JavaScript

timerFont: Font = 12px Georgia, serif;

C#

Font TimerFont { get; set; } = 12px Georgia, serif

Kotlin

var timerFont: Font = 12px Georgia, serif

titleFont

Deprecated

use elementFonts with ScoreTitle

The font to use for displaying the songs title in the header of the music sheet.

JavaScript

titleFont: Font = 32px Georgia, serif;

C#

Font TitleFont { get; set; } = 32px Georgia, serif

Kotlin

var titleFont: Font = 32px Georgia, serif

wordsFont

Deprecated

use elementFonts with ScoreWords

The font to use for displaying the lyrics information in the header of the music sheet.

JavaScript

wordsFont: Font = 15px Arial, sans-serif;

C#

Font WordsFont { get; set; } = 15px Arial, sans-serif

Kotlin

var wordsFont: Font = 15px Arial, sans-serif