abcjs Configurator

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.

Parser Parameters

Transpose

Explanation of "Transpose"

Transpose the input by this number of half-steps. The number can be negative to visualTranspose down in pitch.

Format For Printing

Explanation of "Format For Printing"

Make the size of the SVG appropriate for a letter-sized area.

Parse Header Only

Explanation of "Parse Header Only"

Only parse the header of each tune instead of the whole tune. This is useful to create an index.

Stop Parsing on Warning

Explanation of "Stop Parsing on Warning"

Only parse a tune until a warning is encountered.

Insert Hint Measures

Explanation of "Insert Hint Measures"

At the end of each line, put a copy of the first measure of the next line. This measure has the class "abcjs-hint" and should be styled in a unique way so that it is clear.

Engraver Parameters

Scale

Explanation of "Scale"

Sets the size of the music. Full size is "1". "2" is twice as large. "0.5" is half as large. Note that this doesn't change the staff width, so it will change the layout. If you just want to make the SVG bigger, use the css transform() functionality. Experiment with this in conjunction with "Staff Width".

Staff Width

Explanation of "Staff Width"

This is the width of the staff line in pixels. This is not the total width, because there are margins.

Padding Left

Explanation of "Padding Left"

The padding numbers are how much padding to put in the SVG around the edges. This differs from CSS padding because it is inside the SVG. Note that the right and bottom padding is ignored if the "Print" option is selected.

Padding Top

Padding Right

Padding Bottom

Responsive Sizing

Explanation of "Responsive Sizing"

This changes the styles on both the encompassing element and the SVG element that causes the SVG to grow and shrink in response to changes of the width of the parent element.

Add Classes

Explanation of "Add Classes"

This adds many classes to the elements in the SVG. That allows the various parts of the music to be found and manipulated after being drawn.

User Click Listener

Explanation of "User Click Listener"

This is a callback whenever the user clicks on an element of the SVG. The parameters passed are "abcElem" and "tuneNumber". The "abcElem" contains many properties that are useful for determining what was clicked on. Those properties are subject to change in a future version of abcjs, though, so use with caution. If there are multiple tunes in the source ABC string, then "tuneNumber" is the tune that was clicked on.

Renderer Params

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.

viewportVertical

Explanation of "viewportVertical"

viewportVertical, viewportHorizontal, and scrollHorizontal change some of the styles of the target element and the SVG element. They also add an extra DIV with the class "abcjs-inner" to wrap the SVG. Depending on your layout, one or more combinations of these may help your formatting.

viewportHorizontal

Explanation of "viewportHorizontal"

scrollHorizontal

Explanation of "scrollHorizontal"

Separate SVG Per Line

Explanation of "Separate SVG Per Line"

Each line of music is rendered in its own SVG. They all appear as children of the original element that the music is drawn to, and each SVG is also wrapped in a DIV. The heading is attached to the first line of music and the footer is attached to the last line of music.