<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="examples-styles.css"/> <title>abcjs: Glyph Demo</title> <script src="../dist/abcjs-basic.js" type="text/javascript"></script> <script type="text/javascript"> var abc1 = "X:1\nT:Quarter Tones\n%%scale 3\nK: C ^/f _/B\n_/C^/C _/c^/c _/B^/B|\n"; var abc2 = "X:1\nT:Koron and Sori\n%%scale 3\nK: C ^/f _/B\n_/C^/C _/c^/c _/B^/B|\n"; var koron = { d: [ ['M',0,-4], ['l', 0, 20], ['l', 1.5, 0], ['l', 0, -12], ['l', 8.5, -4], ['l', -8.5, -4], ['l', 0, 1.5], ['l', 6, 2.5], ['l', -6, 2.5], ['l', 0, -6.5], ['z']],w:10,h:20 }; var sori = { d: [ ['M',0,-9], // left vertical line ['m',3,0.82], ['l',0, 19.18], ['l', 1.70, 0], ['l', 0, -19.18], ['z'], // right vertical line ['m',3.06,-0.82], ['l',0, 19.18], ['l', 1.7, 0], ['l', 0, -19.18], ['z'], // top diagonal line ['m', -6.06,3.2], ['l', 3, 1.29], ['l',0, 1.39], ['l',-3,-1.29], ['l',0,-1.39], ['z'], ['m', 4.7,1.95], ['l', 1.25, .6], ['l',0, 1.39], ['l',-1.25,-.6], ['l',0,-1.39], ['z'], ['m', 3,1.3], ['l', 4.5, 2.5], ['l', -2.25,0], ['l',-2.2,-1.1], ['l',0,-1.39], ['z'], // bottom diagonal line ['m', 0,5], ['l', 4.5, -2.5], ['l', -2.25,0], ['l',-2.2,1.1], ['l',0,1.39], ['z'], ['m', -3,1.5], ['l', 1.25, -.6], ['l',0, -1.39], ['l',-1.25,.6], ['l',0,1.39], ['z'], ['m', -4.2,1.7], ['l', 3, -1.29], ['l',0, -1.39], ['l',-3,1.29], ['l',0,1.39], ['z']],w:15,h:20 }; function load() { ABCJS.renderAbc("paper1", abc1); ABCJS.setGlyph('accidentals.halfflat', koron); ABCJS.setGlyph('accidentals.halfsharp', sori); ABCJS.renderAbc("paper2", abc2); } </script> </head> <body onload="load()"> <header> <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> <h1>Changing Glyphs</h1> </header> <div class="container"> <p> This is an example of modifying the font used to create the music. In this case, the <b>quarter sharp</b> and <b>quarter flat</b> symbols are changed to the Koron and Sori symbols. </p> <p> The path supplied must use <b>relative</b> positioning. </p> <p> NOTE: Use this feature at your own risk because the format of the font may change in the future! </p> <div id="paper1"></div> <div id="paper2"></div> </div> </body> </html>