**cdata: for general text display as lyric text in music notation.

The **cdata spine type is used to display arbitrary textual data in music notation as if it were chord labels. The name is short for “chord-like data”. Here is a basic example:

Differences from **vdata

A **vdata spine is used to display text in a similar manner, but it can only be displayed below the staff, and text cannot be associated with rests or a time positions that do not have notes.

**cdata text cannot yet be shown below the staff, but it should be possible in the future.

Refined positioning

**cdata text is positioned at a particular time. Usually this time is inferred from the contents of **kern spines. However if you need to position in a way that cannot be inferred, add a **recip spine to the data. Each line of the **recip spine specifies the duration of the line.

Blank **kern lines equally divide the duration of the previous line into equal parts so in the following example, the **cdata text b, d, f, and h are positioned half-way between the half note (so at the quarter note positions):

An equivalent encoding using a **recip spine:

If you instead want to delay the text b, d, f, and h by an eight note, there needs to be three blank lines after every half note to force the empty lines to be assigned a duration of an eighth note:

This is somewhat fragile, since removing the null data lines (with rid -d) would cause the spacing to revert to the original quarter-note level. Here is the same result using a **recip spine:

Multiple lines of data

Multiple lines of data can be given as separate **cdata spines. The spines will be attached to the staff created by the first **kern spine found to the left of the **cdata spines:

SVG labeling of data

The true data type of **cdata data can be given by adding a hyphen after **cdata 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 **cdata 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="harm number" id="harm-L7F3">
   <text x="3353" y="323" font-size="0px">
      <tspan class="text" id="text-0000001671342372">
         <tspan font-size="405px" class="text" x="3353" y="323">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;
}