abcjs icon indicating copy to clipboard operation
abcjs copied to clipboard

Feature request: option to toggle jazz styling of chord symbols

Open chrisfargen opened this issue 5 years ago • 3 comments

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:

2020-07-23-112719_1484x523_scrot

%%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:

asdmea

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]:

  1. Leave [note][accidental] as it is.
  2. 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>
  1. 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:

  1. Replace degree symbol ° with lowercase letter o (for diminished chords).
  2. 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:|

chrisfargen avatar Jun 10 '20 18:06 chrisfargen

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.

paulrosen avatar Jun 11 '20 06:06 paulrosen

I guess this should be an option so everyone's music doesn't suddenly look different.

Maybe option could be something like %%stylegchord?

chrisfargen avatar Jun 11 '20 13:06 chrisfargen

Will be added in beta 36

paulrosen avatar Nov 24 '21 16:11 paulrosen