abcjs
abcjs copied to clipboard
Feature request: option to toggle jazz styling of chord symbols
Update: Found the functionality I'm looking for in abc2svg. Here's a screenshot of jazz chords rendered using an automatic chord styling tool in abc2svg. (Source for the extension.)
Here's a [slightly messy] solution that works for individual tunes in abc2svg:

%%beginsvg
<style>
.sup {
baseline-shift: super;
font-size:0.66em
}
</style>
%%endsvg
%%staffsep 80px
%%setfont-1 * * class=sup
%%gchordfont sans-serifBold 18
X: 1
T: Cooley's
M: 4/4
L: 1/8
R: reel
K: Emin
|:D2||\
"E$1–7"EBBA "D$17"B2 EB|"G$1∆7"~B2 AB "C$1∆7"dBAG|\
"F#$1ø7"FDAD "F#$1m7b5"BDAD|"B7$1b9"FDAD "Ab$19"dAFD|
"G"EBBA "Ab$1o7"B2 EB|"A$1min7"B2 AB "D$17sus4"defg|\
"G$1maj7$0/B"afe^c "Bb$1o7"dBAF|"A$1+7"DE"Eb$19"FD "E$1m6" E2:|
Original post:

It would be nice to incorporate some basic chord symbol styling. Not sure how easy this would be to implement.
I got the result above by manually tweaking the SVG using Chrome DevTools. Here's my procedure:
For each gchord of format [note][accidental][type][/bass]:
- Leave
[note][accidental]as it is. - Remove
[type]from original<tspan>element and append new<tspan>element with content[type]:
<tspan dy="-0.5em" style="font-size:0.6em">[type]</tspan>
-
Remove
[/bass]from original<tspan>element and append new<tspan>element with content[/bass].a. If there is a
[type]specified before it, move element down so that we're back to baseline:<tspan dy="0.5em" style="font-size:0.6em">[/bass]</tspan>b. If there is no
[type]specified before it, we're already at baseline:<tspan style="font-size:0.7em">[/bass]</tspan>
For further consistency, I also did the following:
- Replace degree symbol
°with lowercase lettero(for diminished chords). - Replace hyphen
-with en dash–(for minor chords).
Here's the ABC I used for testing:
%%gchordfont 16
X: 1
T: Cooley's
M: 4/4
L: 1/8
R: reel
K: Emin
|:D2||"E-7"EBBA "D7"B2 EB|"G∆7"~B2 AB "C∆7"dBAG|"F#ø7"FDAD "F#m7b5"BDAD|"B7b9"FDAD "Ab9"dAFD|
"G"EBBA "Ab°7"B2 EB|"Amin7"B2 AB "D7sus4"defg|"Gmaj7/B"afe^c "Bb°7"dBAF|"A+7"DE"Eb9"FD "Em6" E2:|
That does look better - and it would solve some spacing issues because the chords would be a little shorter. I guess this should be an option so everyone's music doesn't suddenly look different.
I guess this should be an option so everyone's music doesn't suddenly look different.
Maybe option could be something like %%stylegchord?
Will be added in beta 36