El tipo de columna **cdata se utiliza para mostrar datos textuales arbitrarios en notación musical como si fueran etiquetas de acordes. El nombre es la abreviatura de “datos similares a los acordes” (o chord-like data). He aquí un ejemplo básico:
Diferencias con **vdata
Una columna **vdata se utiliza para mostrar texto de forma similar, pero sólo puede mostrarse debajo del pentagrama, y el texto no puede asociarse a los silencios o a las posiciones de tiempo que no tienen notas.
El texto **cdata aún no puede mostrarse debajo del pentagrama, pero debería ser posible en el futuro.
Posicionamiento refinado
El texto de **cdata se posiciona en un momento determinado. Normalmente este tiempo se infiere del contenido de las columnas **kern. Sin embargo, si necesita posicionarse de una manera que no se puede inferir, añada una columna **recip a los datos. Cada línea de la columna **recip especifica la duración de la línea.
Las líneas **kern en blanco dividen la duración de la línea anterior en partes iguales, por lo que en el siguiente ejemplo, los textos **cdata b, d, f y h se sitúan a mitad de camino entre las blancas (por tanto, en las posiciones de las negras):
Una codificación equivalente que utiliza una columna **recip:
Si en cambio quieres retrasar el texto b, d, f, y h en una corchea, es necesario que haya tres líneas en blanco después de cada blanca para forzar que a las líneas vacías se les asigne una duración de una corchea:
Esto es algo frágil, ya que eliminar las líneas de datos nulas (con rid -d) haría que el espaciado volviera al nivel original de una negra. Aquí está el mismo resultado usando una columna **recip:
Múltiples líneas de datos
Se pueden dar múltiples líneas de datos como columnas separadas **cdata. Las columnas se adjuntarán al pentagrama creado por la primera columna **kern que se encuentre a la izquierda de las columnas **cdata:
Etiquetado de datos en SVG
El verdadero tipo de datos de **cdata se puede dar añadiendo un guión después de **cdata y luego el nombre del tipo de datos real. Esto hará que el texto en la imagen SVG renderizada de la notación se etiquete con un nombre de clase basado en el tipo de datos, y esto puede ser manipulado por CSS, como para resaltar diferentes tipos de datos de texto en colores diferentes:
Si inspeccionas la imagen SVG de la notación, verás que el contenido del texto incluye etiquetas de clase basadas en el tipo de datos que se da después del guión en las columnas **cdata, como este código SVG para mostrar el número 3, donde hay una clase number añadida a la primera línea. El otro nombre de clase, syl, es un nombre de clase añadido por verovio para indicar que el elemento gráfico es una sílaba de texto:
<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>
El coloreado del texto y los cambios de fuente se hacen con el siguiente código CSS:
svg .letter {
fill: chartreuse;
text-shadow: 0px 0px 10px orange;
}
svg .number {
fill: hotpink;
font-family: Helvetica;
font-weight: bold;
}