| title | Song Details Formatting |
|---|---|
| since | 1.5.0 |
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
import { SinceBadge } from '@site/src/components/SinceBadge';
In the page payout, alphaTab shows the information of the song directly as part of the music sheet. The display of this song information can be adjusted in 3 ways:
- Colors can be adjusted via the
style(see Coloring Music Sheet) - Alignment and the text template can be adjusted via
style. - Fonts can be adjusted via
settings.display.resources
The mechanisms are currently a bit scattered historically. With alphaTab 2.x we plan to consolidate these options.
For some formats like Guitar Pro alphaTab will read the information contained in the file and adjust the alignments and templates. In any case, the song info can be adjusted by updating the settings and the data model after it has been loaded.
The examples here are written in TypeScript (for clarity on types), the same methods and properties are available on all flavors of alphaTab. When and what to set as styles depends on your needs. You might have an own custom style applied to all files, or you have the style stored beside your file and load it along the file itself.
import {FormattingTemplateSample} from '@site/src/components/FormattingTemplateSample'
The most important parts to know:
- The
styleonalphaTab.model.Scoreis used to adjust the style of the visual elements. - The
headerAndFooteronalphaTab.model.ScoreStyleis used to adjust the text, visibility and alignment of the header and footer elements. - The
colorsonalphaTab.model.ScoreStyleis used to adjust the color of the header and footer elements (and others). - The
alphaTab.model.ScoreSubElementdefines the possible list of elements to be styled (not all are song info related)
The template is a string which can have following placeholders which are then replaced with the respective info of the song:
%TITLE%%SUBTITLE%%ARTIST%%ALBUM%%WORDS%%WORDSMUSIC%%MUSIC%%TABBER%%COPYRIGHT%