**adata, **bdata and **cdata

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:

Staff placement of **cdata

Data can be placed above the staff by using the *above tandem interpretation, and *below to return display of the data spine below the staff.

When there are multiple data spines to display above or below the staff, tandem spines from left to right will be placed near to far with respect to the staff:

**adata and **bdata

The **adata and **bdata data types are similar to **cdata, but will display spines above/below the staff respectively by default.

In addition, the tag after **adata- or **bdata- will displayed as a label before the first data token in the spine:

Here is an example of placing data text above the staff using the shed filter (data labels):

Without initial data labels:

Coloring data

Each data spine’s text can be given a different color:

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: limegreen;
  	text-shadow: 0px 0px 10px orange;
}

svg .number {
	fill: hotpink;
	font-family: Helvetica;
	font-weight: bold;
}

Embedded SVG CSS

SVG styling can be embedded within the output SVG image of music notation generated by verovio. Here is an example of embedding the SVG styling of data text: