Javascript is needed to show the music

Here are some global ABC definitions.
They are not visible because they are removed after the generation.

Music on one line

No start of music, end of music on a HTML tag

In this first example, the music is at the same level as the HTML text.
As the ABC code stops on a HTML tag, there would be a HTML element there. A span element permits the line to be continued.

This line has some music and some text at the end

Music in a container

In this second example, the music is contained in a span element. ABC stops on the span end, and HTML text continues.

Same tune (end of line)

Music on many lines

The music lines are in a same HTML line

In this example, the music lines are in a same text line because SVG has display:inline by default.

This tune is horizontal (end of line)

Normal vertical music

To present the music vertically, the span container is modified with a display inline-block, so that it can accept a width.
The width must be the same as the music width for there is no hole between the music and the text that follows.

This tune is vertical (end of line)

Music vertical offset

When inlined, the music is based on the same line as the text.
The attribute vertical-align permits to adjust its vertical offset.

One line tune (end of line)

Tune with many lines (end of line)

abc2svg documentation source author - page hosted by Free