<div dir="ltr"><div><div><div>Hi Craig,<br><br></div>Apologies for the late reply. That looks good, I'm going to play with it!<br><br></div>Thanks,<br></div>Reinier <br></div><div class="gmail_extra"><br><div class="gmail_quote">2017-10-19 18:38 GMT+02:00 Craig Sapp <span dir="ltr"><<a href="mailto:craigsapp@gmail.com" target="_blank">craigsapp@gmail.com</a>></span>:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hoi Reinier,<div><br></div><div>If you add an attribute called "type" to a note, this attribute will be converted to a class name in the rendered SVG using verovio.</div><div><br></div><div>Example:</div><div><br></div><div><div><font color="#9900ff"><note xml:id="note-L3F1" type="</font><font color="#ff00ff"><b>highlight</b></font><font color="#9900ff">" dur="4" oct="5" pname="f" accid="s"></font></div><div><font color="#9900ff"> <artic xml:id="artic-L3F1" artic="stacc acc" /></font></div><div><font color="#9900ff"></note></font></div><div><br></div><div>representing the note:</div><div><img src="cid:ii_15f3540cf10eadc9" alt="Inline images 1" style="margin-right:0px" width="93" height="74"><br></div><div>I added the attribute type="highlight" to the note. When converted to SVG using verovio:</div><div><br></div><div><div><font color="#0000ff"> <g class="note </font><b><font color="#ff00ff">highlight</font></b><font color="#0000ff">" id="note-L3F1"></font></div><div><font color="#0000ff"> <</font><b><font color="#ff9900">use</font></b><font color="#0000ff"> xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" /></font></div><div><font color="#0000ff"> <g class="</font><b><font color="#ff9900">stem</font></b><font color="#0000ff">" id="stem-0000000078965084"></font></div><div><font color="#0000ff"> <rect x="1094" y="1422" height="608" width="20" /></font></div><div><font color="#0000ff"> </g></font></div><div><font color="#0000ff"> <g class="</font><b><font color="#ff9900">accid</font></b><font color="#0000ff">" id="accid-0000001530885643"></font></div><div><font color="#0000ff"> <use xlink:href="#E262" x="825" y="1400" height="720px" width="720px" /></font></div><div><font color="#0000ff"> </g></font></div><div><font color="#0000ff"> <g class="</font><b><font color="#ff9900">artic</font></b><font color="#0000ff">" id="artic-L3F1"></font></div><div><font color="#0000ff"> <g class="</font><b><font color="#ff9900">articPart</font></b><font color="#0000ff">" id="artic-part-</font><font color="#0000ff">000000002127294<wbr>2"></font></div><div><font color="#0000ff"> <use xlink:href="#E4A2" x="1183" y="1265" height="514px" width="514px" /></font></div><div><font color="#0000ff"> </g></font></div><div><font color="#0000ff"> <g class="</font><b><font color="#ff9900">articPart</font></b><font color="#0000ff">" id="artic-part-</font><font color="#0000ff">000000105205079<wbr>2"></font></div><div><font color="#0000ff"> <use xlink:href="#E4A0" x="1119" y="1172" height="514px" width="514px" /></font></div><div><font color="#0000ff"> </g></font></div><div><font color="#0000ff"> </g></font></div><div><font color="#0000ff"> </g></font></div></div><div><br></div><div>Notice that the note has an added class "highlight" which comes from note@type in the MEI data. This class can be used to select the note or parts of the note for manipulation with CSS. </div><div><br></div><div>Also notice the internal structure of the SVG note. The notehead is given first use element and is not wrapped in a separate g element like the other pieces. The notehead is given by the first <use> element:</div><div><div><font color="#0000ff"> <</font><b><font color="#ff9900">use</font></b><font color="#0000ff"> xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" /></font></div></div><div class="gmail_extra"><br></div></div><div class="gmail_extra">So the CSS code to highlight only the notehead would be:</div><div class="gmail_extra"><br></div><div class="gmail_extra"><font color="#38761d"><style></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight > use {</font></div><div class="gmail_extra"><font color="#38761d"> fill: chocolate;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"></style></font></div><div class="gmail_extra"><img src="cid:ii_15f355904e621460" alt="Inline images 1" style="margin-right:0px" width="163" height="117"><br></div><div class="gmail_extra">The "<font color="#38761d">></font>" in the selector </div><div class="gmail_extra"><font color="#38761d"> g.note.highlight > use</font></div><div class="gmail_extra">means to select all use elements which are direct children of g.note.highlight (not any of the grandchildren or later descendants).</div><div class="gmail_extra"><br class="m_-6080228243401424160gmail-Apple-interchange-newline">Note in particular that in order to use CSS on the SVG image, the SVG must be directly in the DOM (HTML code) and not loaded as an image with <img>.<br></div><div class="gmail_extra"><br></div><div class="gmail_extra">Here is a more complicated stylesheet to highlight all of the components of the note:</div><div class="gmail_extra"><br></div><div class="gmail_extra"><div class="gmail_extra"><font color="#38761d"><style><div id="m_-6080228243401424160gmail_4r2gdgovlun3" style="display:inline-block"></div></font></div><div class="gmail_extra"><font color="#38761d">@namespace xlink '<a href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.org/1999/xlink</a>'<wbr>;</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight > use {</font></div><div class="gmail_extra"><font color="#38761d"> fill: chocolate;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.accid {</font></div><div class="gmail_extra"><font color="#38761d"> fill: limegreen;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.stem {</font></div><div class="gmail_extra"><font color="#38761d"> fill: orange;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.artic {</font></div><div class="gmail_extra"><font color="#38761d"> fill: red;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight use[xlink|href="#E4A2"] {</font></div><div class="gmail_extra"><font color="#38761d"> fill: hotpink;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d"></style></font></div><div class="gmail_extra"><br></div><div class="gmail_extra">which produces:</div><div class="gmail_extra"><br></div><div class="gmail_extra"><img src="cid:ii_15f356d61203da6b" alt="Inline images 4" style="margin-right:0px" width="277" height="212"><br></div><div class="gmail_extra"><br></div><div class="gmail_extra">The last selector:</div><div class="gmail_extra"><span style="color:rgb(56,118,29)"> g.note.highlight use[xlink|href="#E4A2"]</span></div></div><div class="gmail_extra">is used to specifically select staccatos on the highlighted note using the SMuFL codepoint for staccatos. This selector requires loading the xlink namespace into the stylesheet:</div><div class="gmail_extra"> <span style="color:rgb(56,118,29)">@namespace xlink '<a href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.org/1999/xlink</a>'<wbr>;</span></div><div><span style="color:rgb(56,118,29)"><br></span></div><div class="gmail_extra">The stem is shown visually above the notehead, so the notehead may be moved in the future:</div><div class="gmail_extra"> <a href="https://github.com/rism-ch/verovio/issues/520" target="_blank">https://github.com/rism-ch/<wbr>verovio/issues/520</a></div><div class="gmail_extra"><br></div><div class="gmail_extra">Beams and slurs/ties would require more coloring for the stroke attribute. </div><div class="gmail_extra"><br></div><div class="gmail_extra">Here is the full HTML example (with the embedded SVG):</div><div class="gmail_extra"><br></div><div class="gmail_extra"><div class="gmail_extra"><font color="#b45f06"><html></font></div><div class="gmail_extra"><font color="#b45f06"><head></font></div><div class="gmail_extra"><font color="#b45f06"><title>Test Notes</title></font></div><div class="gmail_extra"><font color="#b45f06"></head></font></div><div class="gmail_extra"><font color="#b45f06"><body></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#38761d"><style></font></div><div class="gmail_extra"><font color="#38761d">@namespace xlink '<a href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.org/1999/xlink</a>'<wbr>;</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight > use {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre-wrap"> </span>fill: chocolate;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.accid {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre-wrap"> </span>fill: limegreen;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.stem {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre-wrap"> </span>fill: orange;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight g.artic {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre-wrap"> </span>fill: red;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d">g.note.highlight use[xlink|href="#E4A2"] {</font></div><div class="gmail_extra"><font color="#38761d"><span style="white-space:pre-wrap"> </span>fill: hotpink;</font></div><div class="gmail_extra"><font color="#38761d">}</font></div><div class="gmail_extra"><font color="#38761d"><br></font></div><div class="gmail_extra"><font color="#38761d"></style></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#0000ff"><svg width="2100.00px" height="2970.00px" version="1.1" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/<wbr>svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.<wbr>org/1999/xlink</a>" overflow="visible"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><desc>Engraved by Verovio 2.0.0-dev-ae70647-dirty</desc></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><defs></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c-4 60 11 123 44 189c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5 89c0 117 16 172 69 257c34 54 64 82 89 82c21 0 43 -30 69 -92 s39 -115 41 -159c2 -120 -19 -173 -67 -256c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37 -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c11 -135 -80 -229 -180 -270c8 -57 17 -110 25 -162c5 -31 6 -58 6 -80c0 -30 -5 -53 -14 -70 c-35 -64 -88 -99 -158 -103c-42 -3 -83 6 -124 26c-50 24 -77 59 -80 105c-2 34 5 63 20 87c18 28 45 42 79 44c51 4 99 -40 103 -87c4 -56 -30 -94 -105 -115c17 -24 51 -36 102 -36c62 0 116 43 140 85c9 16 13 41 13 74c0 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939 c-95 0 -135 -175 -135 -286c0 -24 2 -48 5 -71c50 39 92 82 127 128c43 57 63 106 60 148c-4 54 -23 82 -57 81zM406 119l54 -326c80 27 116 88 109 184c-7 99 -62 146 -163 142zM382 117c-74 -2 -132 -50 -128 -127c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10 c-70 33 -116 88 -123 172c-5 73 42 135 88 170c23 17 49 29 78 36l-29 170c-21 -13 -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-49 -75 -71 -140 -67 -195c5 -68 35 -127 93 -176s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><symbol id="E0A4" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path transform="scale(1,-1)" d="M0 -39c0 68 73 172 200 172c66 0 114 -37 114 -95c0 -84 -106 -171 -218 -171c-64 0 -96 30 -96 94z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><symbol id="E262" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path transform="scale(1,-1)" d="M136 186v169h17v-164l44 14v-91l-44 -14v-165l44 12v-91l-44 -13v-155h-17v150l-76 -22v-155h-17v149l-43 -13v90l43 14v167l-43 -14v92l43 13v169h17v-163zM60 73v-167l76 22v168z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><symbol id="E4A2" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path transform="scale(1,-1)" d="M0 45c0 13.333 4.33301 24.667 13 34s19.333 14.333 32 15c14 0 25.667 -4 35 -12s14.333 -19 15 -33c0 -13.333 -4.33301 -24.667 -13 -34s-19.333 -14.333 -32 -15c-14 0 -25.667 4 -35 12s-14.333 19 -15 33z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><symbol id="E4A0" viewBox="0 0 1000 1000" overflow="inherit"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path transform="scale(1,-1)" d="M0 236l347 -119l-347 -117v33l252 84l-252 86v33z" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></symbol></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></defs></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><style type="text/css">g.page-margin{<wbr>font-family:Times;} g.tempo{font-weight:bold;} g.dir, g.dynam{font-style:italic;} g.label{font-weight:normal;}</<wbr>style></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><svg class="definition-scale" viewBox="0 0 21000 29700"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="page-margin" transform="translate(500, 500)"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="system" id="system-0000000147693057"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="section boundaryStart" id="section-0000000211317838" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="measure" id="measure-L2"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="staff" id="staff-L2F1N1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M0 1400 L1829 1400" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M0 1580 L1829 1580" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M0 1760 L1829 1760" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M0 1940 L1829 1940" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M0 2120 L1829 2120" stroke="#000000" stroke-width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="clef"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><use xlink:href="#E050" x="90" y="1940" height="720px" width="720px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="layer" id="layer-L2F1N1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="note highlight" id="note-L3F1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="stem" id="stem-0000000078965084"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><rect x="1094" y="1422" height="608" width="20" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><use xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="accid" id="accid-0000001530885643"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><use xlink:href="#E262" x="825" y="1400" height="720px" width="720px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="artic" id="artic-L3F1"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="articPart" id="artic-part-<wbr>0000000021272942"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><use xlink:href="#E4A2" x="1183" y="1265" height="514px" width="514px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="articPart" id="artic-part-<wbr>0000001052050792"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><use xlink:href="#E4A0" x="1119" y="1172" height="514px" width="514px" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="barLineAttr" id="bline-0000001518569483"></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M1664 1400 L1664 2120" stroke="#000000" stroke-width="30" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><path d="M1784 1400 L1784 2120" stroke="#000000" stroke-width="90" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span><g class="boundaryEnd section-0000000211317838" id="bdend-0000001273392098" /></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></g></font></div><div class="gmail_extra"><font color="#0000ff"><span style="white-space:pre-wrap"> </span></svg></font></div><div class="gmail_extra"><font color="#0000ff"></svg></font></div><div class="gmail_extra"><font color="#b45f06"><br></font></div><div class="gmail_extra"><font color="#b45f06"></body></font></div><div><br></div><div><br></div><div><br></div></div><div class="gmail_extra"><br></div><div class="gmail_extra"><br></div></div>
<br>______________________________<wbr>_________________<br>
mei-l mailing list<br>
<a href="mailto:mei-l@lists.uni-paderborn.de">mei-l@lists.uni-paderborn.de</a><br>
<a href="https://lists.uni-paderborn.de/mailman/listinfo/mei-l" rel="noreferrer" target="_blank">https://lists.uni-paderborn.<wbr>de/mailman/listinfo/mei-l</a><br>
<br></blockquote></div><br></div>