Pressing @ while a note is selected will mark the note with a user-signifier based on the last marked-note RDF line in the Humdrum data with a form such as:
!!!RDF**kern: @ = marked note
If there is no marked-note RDF definition in the Humdrum data, one will be
added automatically to the end of the data. Here is an example of
marking notes in the notation, which adds @
to the note tokens in the
Humdrum data.
Changing mark colors
The default color for marked notes in VHV notation is red. If you want to use another color, a color parameter can be added to the RDF:
The color parameter value should be enclosed in quotes if it contains spaces, but otherwise the quotes are optional. Colors can be
named colors as well as
transparent
, or any numeric format recognized by SVG: 3/6 digit hexadecimal colors, RGB colors,
RGBA colors, HSL colors, or HSLA colors. Examples:
The same color in rgb
format:
Adding 50% opacity to the same color in rgba
format:
Multiple marks
Any number of RDF marks can be given in the data. The last marked-note RDF in the data will be the one that the at command uses when marking notes:
In this case there are two RDF marking lines:
!!!RDF**kern: @ = marked note color=turquoise
!!!RDF**kern: N = marked note color=coral
Since the last one uses N
for the mark, typing
at will add the character N
to
the marked note tokens rather than @
.
Meaning of the mark
RDF records are free-form texts, so you can add your own text to the line which explains the meaning of the mark.
!!!RDF**kern: @ = marked note color="orchid" strange note
If you want a more formalized system, then use meaning="..."
:
!!!RDF**kern: @ = marked note color="orchid" meaning="strange note"
This parameter does not yet have any meaning in VHV itself yet, but perhaps it could be mapped to a tooltip on the note in the future.
SVG class attribute
In the SVG notation, marked notes are also labeled with the class
marked
. This class tag can be used to change the color and styling
of the notes with CSS if the SVG image is placed directly into an
HTML document (rather than loaded with an <image>
element):
The above image was created by first marking the notes in VHV, then saving the SVG (SVG code made visible with alt-g) then inserted directly into the HTML page, using this CSS styling:
<style>
svg .note.marked { filter: url(#DropShadow); }
svg .note.marked rect { fill: red; }
svg .note.marked use { fill: url(#MyHighlight); }
</style>
And adding these filters to the top of the SVG:
<defs id="#myDefs">
<linearGradient id="MyHighlight">
<stop offset="0%" stop-color="yellow"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
<filter id="DropShadow" height="130%" width="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="20"/>
<feOffset dx="30" dy="30" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>