abcjs Configurator

Default Formatting

Each tune can contain formatting parameters, and that is certainly needed for specific purposes. However, if you have a number of tunes, there's a good chance that you will want the same formatting styles for all of them.

You may specify the standard %% formatting commands in the string you pass to renderAbc().

Options

Elements

Number of Tunes To Show

Explanation of "Number of Tunes To Show"

The input ABC string can have multiple tunes in it, separated by "X:" lines. Each tune goes in its own SVG and requires markup. This sample app has 24 DIVs declared in the form <div id="paper1">, so up to 24 tunes can be displayed. If you don't specify anything here, only the first tune is displayed. To cherry pick a tune, you can either preprocess the ABC string (see the Analyze page for details), or use this in conjunction with the "Starting Tune" parameter.

Starting Tune

Explanation of "Starting Tune"

If there are multiple tunes in the input string, then this chooses which tune to display. For control over what is displayed, use with the "Number of Tunes" parameter. This is zero-based. If this is greater than the number of tunes in the input string, then nothing is displayed.

Formatting Parameters

titlefont

Explanation of "titlefont"

The font used for the title. Sample format: "Verdana 16 italic bold"

composerfont

Explanation of "composerfont"

The font used for the composer. Sample format: "Verdana 16 italic bold"

gchordfont

Explanation of "gchordfont"

The font used for the accompaniment chord names. Sample format: "Verdana 16 italic bold box"

partsfont

Explanation of "partsfont"

The font used for the part labels. Sample format: "Verdana 16 italic bold box"

annotationfont

Explanation of "annotationfont"

The font used for the annotations. Sample format: "Verdana 16 italic bold"

footerfont

Explanation of "footerfont"

The font used for the footer. Sample format: "Verdana 16 italic bold"

headerfont

Explanation of "headerfont"

The font used for the header. Sample format: "Verdana 16 italic bold"

historyfont

Explanation of "historyfont"

The font used for the history. Sample format: "Verdana 16 italic bold"

infofont

Explanation of "infofont"

The font used for the info fields. Sample format: "Verdana 16 italic bold"

measurefont

Explanation of "measurefont"

The font used for the meaure numbers. Sample format: "Verdana 16 italic bold box"

repeatfont

Explanation of "repeatfont"

The font used for the 1st & 2nd repeat numbers. Sample format: "Verdana 16 italic bold"

subtitlefont

Explanation of "subtitlefont"

The font used for the subtitle. Sample format: "Verdana 16 italic bold"

tempofont

Explanation of "tempofont"

The font used for the tempo. Sample format: "Verdana 16 italic bold"

textfont

Explanation of "textfont"

The font used for the extra text. Sample format: "Verdana 16 italic bold"

voicefont

Explanation of "voicefont"

The font used for the voice labels. Sample format: "Verdana 16 italic bold"

vocalfont

Explanation of "vocalfont"

The font used for the interspersed lyrics. Sample format: "Verdana 16 italic bold"

wordsfont

Explanation of "wordsfont"

The font used for the extra verses at the bottom. Sample format: "Verdana 16 italic bold"

Output

JavaScript

import abcjs from 'abcjs';