Lyrics-related options

This page demonstrates plugin options involving lyrics. The following musical incipit is used for the examples, and this initial display of the music shows the default style for the lyrics:

<script>
   displayHumdrum({
      source: "lyricExample",
      scale: 30,
      header: true
   });
</script>
<script type="text/x-humdrum" id="lyricExample">
!!!OTL: If Music Be the Food of Love
!!!COM: Purcell, Henry
!!!ODT: 1692
!!!LYR: Heveningham, Henry
!!!OMD: Slow
**kern	**text
*k[b-e-a-d-]	*
*M4/4	*
*met(c)	*
4cc	If
=1	=1
(8dd-L	Mu-
8ccJ)	.
(8b-L	-sic_
8a-J)	.
(8gL	be_
8a-J)	.
(8b-L	the_
8ccJ)	.
=2	=2
(8b-L	food_
8a-J)	.
(8gL	of_
8fJ)	.
4.en	Love,
8c	sing
=3	=3
4f	on,
4f	sing
4.a-	on,
8f	sing
=4	=4
4cc	on,
4cc	sing
4.ee-	on,
*-	*-
</script>

lyricSize

The lyricSize option can be used to control the size of lyrics relative to the size of the music. The default size is 4.5 diatonic steps:

<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricSize-default",
      scale: 30
   });
</script>
<script type="text/x-humdrum" id="lyricSize-default"></script>

The minimum size is 2 diatonic steps:

<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricSize-min",
      lyricSize: 2,
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricSize-min"></script>

and maximum size is 8 diatonic steps:

<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricSize-max",
      incipit: true,
      lyricSize: 8,
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricSize-max"></script>

In this case the larger text forces the music to be spaced wider, so the inicipit option is given to prevent displaying the overflow music. Also notice that the tempo designation, Slow (and probably other types of text on the page), is affected by the lyricSize option.

lyricTopMinMargin

The lyricTopMinMargin option controls spacing between lyrics and the music (or lyrics) above them. The default spacing is 3.0 diatonic steps:

<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricTopMinMargin-default",
      incipit: true,
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricTopMinMargin-default"></script>

The minimum spacing is 3.0:

<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricTopMinMargin-min",
      incipit: true,
      lyricTopMinMargin: 3.0,
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricTopMinMargin-min"></script>

The maximum spacing is 8.0 diatonic steps:

<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricTopMinMargin-max",
      incipit: true,
      lyricTopMinMargin: 8.0,
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricTopMinMargin-max"></script>

Coloring lyrics with CSS

Here is an example of how to color the lyrics of a musical example. This is not controlled directly by the plugin, but rather with CSS styling of the resulting SVG image.

<style>
#lyricColor-svg .verse tspan.text, #lyricColor-svg .verse rect { fill: red; }
</style>
<script>
   displayHumdrum({
      source: "lyricExample",
      target: "lyricColor",
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricColor"></script>

The SVG image generated from the musical data is placed into a div element that matches the ID of the target container, adding an extension of “-svg” to the base ID. So in this case the CSS selector #lyricColor-svg .verse tspan.text means to find the container element for the SVG of this example, then within elements having a class label of verse, set the style of the tspan elements that have a class label of text (i.e., where the lyrics are stored in the SVG imges). In normal HTML content, text is colored using the text CSS attribute; however, in this case the SVG equivalent is to use fill (and for other type of elements, stroke may need to be set).

Coloring lyrics within Humdrum

Here is an example of how to color lyrics of a musical example using markup embedded directly into the Humdrum data.

<script>
   displayHumdrum({
      source: "lyricColorHumdrum",
      scale: 30,
   });
</script>
<script type="text/x-humdrum" id="lyricColorHumdrum">
!!!OMD: Slow
**kern	**text
*k[b-e-a-d-]	*
*M4/4	*
*met(c)	*
*	*color:hotpink
4cc	If
=1	=1
(8dd-L	Mu-
8ccJ)	.
(8b-L	-sic_
8a-J)	.
(8gL	be_
8a-J)	.
(8b-L	the_
8ccJ)	.
=2	=2
(8b-L	food_
8a-J)	.
(8gL	of_
8fJ)	.
4.en	Love,
8c	sing
=3	=3
4f	on,
4f	sing
4.a-	on,
8f	sing
=4	=4
4cc	on,
4cc	sing
4.ee-	on,
*-	*-
</script>

Currently the color control must come before the start of the music. In the future, coloring individual words will probably be implemented.