The **vdata data type is used to display arbitrary textual data
in music notation as if it were musical lyrics. The name is short
for “verse-like data”. Here is a basic example:
Notice that the letters f, h and k are missing, since the
notation renderer, verovio, cannot attach
lyrics to rests and cannot display lyrics where there is no note
(see the **cdata data type for doing that).
Differences from **text
The **text data format is used to encode lyrics in Humdrum syntax. This represention
maps spaces in the data contents to elision characters, while **vdata text preserves the space
in the rendered notation:
Multiple lines of data
Multiple lines of data can be given as separate **vdata spines. The spines will be attached
to the staff created by the first **kern spine found to the left of the **vdata spines:
SVG labeling of data
The true data type of **vdata data can be given by adding a
hyphen after **vdata and then the name of the actual data type.
This will cause the text in the rendered SVG image of the notation
to be labeled with a class name based on the data type, and this
can then be manipulated by CSS, such as to highlight different
text data types in difference colors:
If you inspect the SVG image of the notation, you will see that the
text content includes class labels based on the data type given
after the dash in the **vdata spines, such as this SVG code for
displaying the number 3, where there is a number class added to
the first line. The other classname, syl, is a classname added
by verovio to indicate that the graphic element is a text syllable:
<g class="syl number" id="syl-L7F3">
<text x="3403" y="2337" font-size="0px">
<tspan class="text" id="text-0000000746016912">
<tspan font-size="405px" class="text"> 3</tspan>
</tspan>
</text>
</g>
The text coloring and font changes are done with the following CSS code:
svg .letter {
fill: chartreuse;
text-shadow: 0px 0px 10px orange;
}
svg .number {
fill: hotpink;
font-family: Helvetica;
font-weight: bold;
}