Lyrics & Knowledge Personal Pages Record Shop Auction Links Radio & Media Kids Membership Help
The Mudcat Cafemuddy

Post to this Thread - Sort Descending - Printer Friendly - Home


Tech: Grishka's tool aligning chord symbols

GUEST,Grishka 31 Mar 14 - 06:55 AM
GUEST,Grishka 31 Mar 14 - 07:02 AM
GUEST,Ed 31 Mar 14 - 07:14 AM
GUEST,Grishka 31 Mar 14 - 07:16 AM
Nick 31 Mar 14 - 07:17 AM
GUEST,Grishka 03 Apr 14 - 11:01 AM
Jack Campin 03 Apr 14 - 05:02 PM
Bill D 03 Apr 14 - 06:05 PM
JohnInKansas 03 Apr 14 - 09:39 PM
JohnInKansas 03 Apr 14 - 09:43 PM
GUEST,Grishka 04 Apr 14 - 02:49 PM
Stringsinger 04 Apr 14 - 07:52 PM
Stringsinger 04 Apr 14 - 07:54 PM
Jason Xion Wang 26 Apr 14 - 11:49 AM
GUEST,Grishka 26 Apr 14 - 12:35 PM
Jason Xion Wang 26 Apr 14 - 01:37 PM
Share Thread
more
Lyrics & Knowledge Search [Advanced]
DT  Forum
Sort (Forum) by:relevance date
DT Lyrics:





Subject: Tech: Grishka's tool aligning chord symbols
From: GUEST,Grishka
Date: 31 Mar 14 - 06:55 AM

From time to time Mudcatters ask for methods of aligning chord symbols with lyrics, easy to read and easy to create. The customary method of writing each chord symbol in parentheses or brackets, directly preceding its syllable, is ideal for posting to Mudcat, but not as easy to read as the usual notation with the chord symbol on top of its syllable. Software transforming the former to the latter would be handy. I happen to possess a simple tool for the purpose, written together with friends, and was aked to share it in a recent thread.

It transforms an input like
(C)We shall (F)over(G7)come (Am)(Ab7)
(C/G)We shall (F#dim)over-(G7/F)come (A7/E)

to (e.g.)
C  
We shall 
F  
over
G7  
come 
Am  
 
A♭7  
 

C/G  
We shall 
F♯dim  
over-
G7/F 
come 
A7/E 
 




I do not want to upload an executable files for strangers. Therefore, I spent quite a bit of time on transforming the programme to a web script, which is easy to verify as innocuous, and easier still to get running.

The procedure is as follows: I will send the script in my next message to this thread. You select the complete message text (in the very browser window you are just reading), press Ctrl-C to copy it to the clipboard, open a new text file in a text editor, paste the content of the clipboard to it (Ctrl-V), and save the file in plain text format (not "as HTML"), naming the resulting file with the suffix .html, e.g. "Chordalign.html". Open this file in your browser (usually by double clicking on a symbol for that file) and follow the instructions. That's it! No compiler, no installation, no spyware, no need to be online during operation.

The results of the tool can be entered directly to the Mudcat entry field, as demonstrated (- you may want to uncheck "Automatic Linebreaks", but always check "Preview" until satisfied!). This makes sense for short snippets as contributions to discussion. To answer future Lyr/ChordReqs with complete lyrics, I find it preferable to post the original version (with parentheses/brackets, but with any non-English characters "escaped" [which the tool performs en passant]) and provide a link to this thread, so that future readers will have the choice.

Feel free to modify the tool to your need; a degree in computer science is not required. For example, choose an available font you like (make sure it has those nice flat/sharp characters).

If you find a bug, please inform us immediately. In serious cases I may ask the elves to update the content of the next message.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: GUEST,Grishka
Date: 31 Mar 14 - 07:02 AM

<!DOCTYPE html>
<html>
<body onload="document.getElementById ('textareaCode').focus ();">
<script type="text/javascript">
        // Edit the following two lines, e.g. use "div" instead of "blockquote".
        // § will be replaced by the value in the entry field at transform time
        var gBeginWith = "<blockquote style=\"font-family: Arial Unicode MS; font-size:§%;\">";
        var gEndWith = "\n</blockquote>";

        var mBeginOfChord;
        var mEndOfChord;
        var mPretty;

        function IdentifyChordSeparators (aEntered)
        {
                var lChordsInParentheses = true;
                var lBracketIdx = aEntered.indexOf ('[');
                if (lBracketIdx >= 0) {
                        var lParenIdx = aEntered.indexOf ('(');
                        if (lParenIdx < 0 || lParenIdx > lBracketIdx)
                                lChordsInParentheses = false;
                }
                if (lChordsInParentheses) {
                        mBeginOfChord = '(';
                        mEndOfChord = ')';
                }
                else {
                        mBeginOfChord = '[';
                        mEndOfChord = ']';
                }
        }
        function Add (aWhat)
        {
                mPretty = mPretty + aWhat;
        }
        function AddEscaped (aWhat)
        {
                for (var i = 0; i < aWhat.length; i++) {
                        var lChar = aWhat.charCodeAt (i);
                        if (lChar >= 127)
                                Add ("&#" + lChar + ";");
                        else
                                Add (String.fromCharCode (lChar));
                }
        }
        function ProcessNoteName (aChordPart)
        {
                if (aChordPart.charAt (0) == '\\') { // formatting done by the user!
                        Add (aChordPart.substring (1));
                        return "";
                }
                AddEscaped (aChordPart.charAt (0));
                switch (aChordPart.charAt (1)) {
                case 'b':
                        Add ("&#x266d;"); // a prettier flat sign
                        return aChordPart.substring (2);
                case '#':
                        Add ("&#x266f;"); // a prettier sharp sign
                        return aChordPart.substring (2);
                }
                return aChordPart.substring (1);
        }
        function AddChord (aChord)
        {
                var lStillTodo = ProcessNoteName (aChord);
                if (lStillTodo.charAt (0) == 'm' && lStillTodo.charAt (1) != 'a') {
                        Add ("m");
                        lStillTodo = lStillTodo.substring (1);
                }
                if (lStillTodo.charAt (0) == '/') { // the bass note must follow immediately
                        Add ("/");
                        AddEscaped (ProcessNoteName (lStillTodo.substring (1)));
                        Add ("<sup>&nbsp;&nbsp;</sup>");
                }
                else {
                        Add ("<sup>");
                        var aSlash = lStillTodo.indexOf ('/');
                        if (aSlash >= 0) { // the bass note must appear in normal size
                                AddEscaped (lStillTodo.substring (0, aSlash));
                                Add ("</sup>/");
                                AddEscaped (ProcessNoteName (lStillTodo.substring (aSlash + 1)));
                                Add ("&nbsp;"); // ensure distance to the next chord
                        }
                        else {
                                AddEscaped (lStillTodo);
                                Add ("&nbsp;&nbsp;</sup>");
                        }
                }
        }
        function AddChordDiv (aChordDiv, aIsFirst)
        {
                // a section of one chord and its lyrics
                if (aIsFirst)
                        Add ("<div style=\"clear:left;float:left;\">");
                else
                        Add ("<div style=\"float:left;\">");

                var lEnd = aChordDiv.indexOf (mEndOfChord); // if < 0, syntax error
                var lChord = aChordDiv.substring (0, lEnd).trim ();
                if (lChord.length == 0)
                        Add ("&nbsp;<sup>&nbsp;</sup>");
                else
                        AddChord (lChord);
                Add ("<br />");
                var lLyrics = aChordDiv.substring (lEnd + 1);
                if (lLyrics.length == 0)
                        Add ("&nbsp;");
                else {
                        AddEscaped (lLyrics.trim ());
                        if (lLyrics.charAt (lLyrics.length - 1) == ' ')
                                Add ("&nbsp;");
                }
                Add ("</div>");
        }
        function AddLine (aLine)
        {
                Add ("\n"); // used as a token only!
                if (aLine.length == 0) {
                        Add ("<div style=\"clear:left;\">&nbsp;</div>");
                        return;
                }
                var lChords = aLine.split (mBeginOfChord);
                if (lChords.length == 1) { // no chord found
                        // line without chords, e.g. title does not need superscript space
                        Add ("<div style=\"clear:left;\">");
                        AddEscaped (aLine);
                        Add ("</div>");
                        return;
                }
                if (lChords [0].length == 0) // the line starts with a chord
                        AddChordDiv (lChords [1], true);
                else {
                        AddChordDiv (mEndOfChord + lChords [0], true); // fake an empty chord
                        AddChordDiv (lChords [1], false);
                }
                for (var i = 2; i < lChords.length; i++)
                        AddChordDiv (lChords [i], false);
        }
        function TransformIt (aPurpose)
        {
                document.getElementById ("transformed").innerHTML = "Error!"; // in case of a crash

                var lEntered = document.getElementById ("textareaCode").value;
                IdentifyChordSeparators (lEntered);

                var lLineSep = "\n"; // determine the line separator, to be on the safe side
                var lIdxA = lEntered.indexOf ('\n');
                if (lIdxA < 0)
                        lLineSep = "\r";
                else if (lEntered.charAt (lIdxA - 1) == '\r')
                        lLineSep = "\r\n";
                var lLines = lEntered.split (lLineSep);

                mPretty = gBeginWith.replace ("§", document.getElementById ("fontsize").value);
                for (var i = 0; i < lLines.length; i++)
                        AddLine (lLines [i].trim ());
                Add (gEndWith);
                document.getElementById ("transformed").innerHTML = mPretty;

                var lWindow;
                switch (aPurpose) {
                case "As HTML":
                        lWindow = open ("", "SourceWindow", "height=500, width=1000");
                        lWindow.document.write ("<code>" + mPretty.replace (/&/g, "&amp;").replace (/</g, "&lt;")
                                .replace (/>/g, "&gt;").replace (/\n/g, "<br />") + "</code>");
                        lWindow.document.close ();
                        lWindow.focus ();
                        break;
                case "Print":
                        lWindow = open ("", "PrintWindow", "height=500, width=700");
                        lWindow.document.write (mPretty);
                        lWindow.document.close ();
                        lWindow.focus ();
                        lWindow.print ();
                        break;
                }
        }
</script>

<div style="top:0;height:40%;width:98%;position:absolute;">
<textarea id="textareaCode" wrap="logical" style="height:85%;width:100%;"></textarea>
<button type="button" onclick="TransformIt ('')">Transform</button>
<button type="button" onclick="TransformIt ('As HTML')">As HTML</button>
<button type="button" onclick="TransformIt ('Print')" style="margin-right:30px;">Print</button>
<label for="fontsize">Font size in %:</label>
<input id="fontsize" type="number" min="20" max="2000" value="100">
</div>

<div id="transformed" style="bottom:0;height:60%;width:98%;overflow-y:scroll;position:absolute;"><h2>Chordalign</h2>
<noscript><p style="color:red;">To use this tool, you must <b>activate JavaScript</b>
and reload the file.</p></noscript>

<p>Enter or &ldquo;paste&rdquo; your song lyrics above, with chord symbols either all in parentheses or
all in brackets, each directly preceding its syllable (if any). You can enter characters of any language, which will
be processed for codepage independence. Use HTML items at your own risk. To exempt a &ldquo;chord&rdquo;
from the automatized recognition of superscripts and accidentals, prefix it with \.</p>

<p>Example:<br />
<code>(C)We shall (F7)over(G/B)come, (Am7)(Ab7/Gb)<br />
&amp;#40;T&aacute; m&eacute; (Baug)cinnte,&amp;mdash;&amp;#41; (Cmaj7)We (Abmaj7)shall (F#dim7)ov-(G9/F)er-(Em7)come!(\C°)<br />
(\&lt;i&gt;Interlude:&lt;/i&gt;)(Ammaj7)(C7 &amp;#40;-11&amp;#41;)</code></p>

<p>When you click either of the buttons, the transformed text will appear here. It is meant for testing only
(&mdash;errors, such as unmatched parentheses, result in incomplete or wrong display&mdash;), <b>not
suitable for clipboard copying</b>. To use the result elsewhere, click &ldquo;As HTML&rdquo;,
select the whole content of the new window (Ctrl-A), and copy&amp;paste it to the desired destination.</p>

<p><i>Donated to the public domain by &ldquo;Grishka and Friends&rdquo;. Have fun!</i></p></div>
</body>
</html>gt;/");
                                AddEscaped (ProcessNoteName (lStillTodo.substring (aSlash + 1)));
                                Add ("


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: GUEST,Ed
Date: 31 Mar 14 - 07:14 AM

That looks like a really useful little utility.

Thanks very much.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: GUEST,Grishka
Date: 31 Mar 14 - 07:16 AM

The first "bug" is that some text miraculously arrived behind the last </html> - it had best be deleted. Thanks.

BTW, you can enter a link (blue clicky) to this thread into your Mudcat messages as follows:

<a href="thread.cfm?threadid=154141">Chordalign</a>.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: Nick
Date: 31 Mar 14 - 07:17 AM

Excellent


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: GUEST,Grishka
Date: 03 Apr 14 - 11:01 AM

Comments like "Works OK on my MacWin with FireChrome 2.10", "Printing on my Opera 17.2 also prints the browser decorations" etc. would be helpful for other potential users.

I should have mentioned that if you see my above example well-aligned, but in the same font as ordinary text, you obviously do not have the font "Arial Unicode MS" installed; replace that snippet in the above programme text with the name of a font you have installed.

If printing directly from your browser window does not yield the result you like, try a "HTML to PDF" utility - often available as a plugin to your browser. Bill D may be able to recommend such tools.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: Jack Campin
Date: 03 Apr 14 - 05:02 PM

Works ok on my iPhone 3g but I'll never use it - all the aligning I do I can either do with text editor and a fixed width font or else it involves staff notation generated from ABC.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: Bill D
Date: 03 Apr 14 - 06:05 PM

I used to do it this way... what's the basic difference in ease of use & readability?


WeC shallF overG7comeAm Ab7


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: JohnInKansas
Date: 03 Apr 14 - 09:39 PM

If you type your lyric with chords in a monospaced typeface like Courier and tag it "preformatted" between <pre> and </pre> tags:

<pre>
C        F    G7        
We shall over come Am A♭7</pre>

=

C       F    G7      
We shall over come Am A♭7


There are some "difficulties" with extra line breaks, so preview is advised. (And of course Courier isn't exactly beautiful.)

John


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: JohnInKansas
Date: 03 Apr 14 - 09:43 PM

(In preview the superscripts showed, but got lost in the post.)

It's admittedly an imperfect workaround.

John


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: GUEST,Grishka
Date: 04 Apr 14 - 02:49 PM

Jack, thanks for your message, which may reassure those who do want the tool but have doubts whether it works at all. This thread should be primarily about "tech".

Monospaced fonts such as Courier have the nostalgic charm of old typewriter days, but in my experience, other fonts have a better performance in terms of legibility per square centimetre of paper.

Bill D,
what's the basic difference in ease of use & readability?
A matter of taste and habit, but since you ask: Use: Parentheses are easier to type than <sup></sup>. Readability: Your method still interrupts the lyrics.

Anyway, I posted the tool because "GUEST Tony" asked me for it; whoever finds it useless should not use it. I am aware that my programming style is not up to professional standards (as someone observed), and encourage anybody to improve on it.

All HTML formatting has the problem that it does not blend easily into word processors. Ideas, Bill D and others?


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: Stringsinger
Date: 04 Apr 14 - 07:52 PM

I had the honor of playing this song on the last installment of Michael Johnathan's "Woodsongs Radio Hour" 3/31/14 which might be archived. I was privileged to join Pete at his wife, Toshi's memorial service in New York, singing this song at the very end of the evening.

The chord progression I used was the one I first introduced in the early Fifties, the one Guy Carawan used in Greensboro, N.C. that he learned from me.

I think the best way to do this is simplify. The problem here is that there are a lot of chords as part of the Black Gospel tradition, not the simpler spiritual tradition.

I just hope that when this gets printed, because of the nature of the transference of data
to the final message received, everything will line up properly.

Example:


      C            F               C (Ami)
1. We shall over—come,   
C                F         C (Ami)
We shall over—come

C            G7 G#o7    Am    D7   G D7 G7
We shall o---ver—come some day
F    E7        Am              F   F#o7)
And it's deep with-in my      
C    C7   F G7   Ami (Ab7)
heart      I do believe
C          F    (Fmi)   C         G7 C F C
We shall o—ver——come some day
    C                F            C (Ami)
2. We will live in peace,
C            F               C (Ami)
We will live in peace
C          G7 (G#o7)    Am    D7   G   D7 G7
We will live    in peace some day
          C          F (F#o7)
And it's deep with—— in   my
C    C7    F G7    Ami
heart      I do believe
C       F   (Fmi) C   G7   C F C
We will live in peace some day.
      C           F         C (Ami)
3.   We are not afraid,
C                F           C (Ami)
We are not afraid
C      G7      G#o7       Am    D7 G   D7 G7
We are not a—------fraid, to-day
F    E7    Am                F   (F#o7)
And it's deep with—— in   my
C         Gm7 C7    F G7 G#o7 Ami
heart                     I do be-----lieve
C             F (Fmi)    C    G7   C F C
We are    not a——fraid to—day
    C                 F            C (Ami)
4. We will end Jim Crow,
C               F        C (Ami)
We will end Jim Crow,
C          G7    G#o7      Am    D7   G D7 G7
We will   end Jim          Crow some day
          C          F   (F#o7)
And it's deep with—— in   my
C    Gm7 C7    F G7 G#o7 Ami (Ab7)
heart               I do be----lieve
C         F    (Fmi)    C    G7    C F C
We will end Jim      Crow some day
      C                F            C (Ami)
5. We shall stand to-ge—ther,
C                    F               C (Ami)
We shall stand to-ge—ther,
C         G7       G#o7      Am    D7 G   D7 G7
We shall stand to-------ge—ther now
          C          F   (F#o7)
And it's deep with—— in   my
C      Gm7 C7    F G7 G#o7      Ami Ab7
heart                I do be------lieve
C             F    (Fmi)    C       G7    C F   C
We shall stand to——ge——ther now
          C               F      C (Ami)
6. The truth shall set us free.
      C               F            C (Ami)
The truth shall set us free.
      C                G7 G#o7   Am D7 G D7 G7      
The truth shall set us          free to—day
          C                        F (F#o7)
And it's deep with—— in   my
C    Gm7 C7    F G7   Ami
heart                I do believe
C                      F (Fmi) C   G7   C F C
The truth shall set us free to—day
       C       F               C   Ami
7. Todos ven—ce—re—-mos,
C          F             C   Ami
Todos ven—ce—re—-mos,
C       G7   G#o7Am D7          G   D7 G7
Todos ven—ce—-re—mos, a—qui.
                C                  F   (F#o7)
And it's deep with—— in   my
C    Gm7 C7    F   G7          Ami Ab7
heart                I    do be---lieve
C          F      Fmi C G7 C   F   C
Todos ven—ce—re—mos now


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: Stringsinger
Date: 04 Apr 14 - 07:54 PM

Well it didn't quite line up the way I wrote it when using the reply box but most of it
got through.


Post - Top - Home - Printer Friendly - Translate

Subject: Test
From: Jason Xion Wang
Date: 26 Apr 14 - 11:49 AM

I'll have a try.


Green, Green

(McGuire/Sparks)

 

Lick  
 
C  
 
Am/C  
 
C  
 
Lick  
 
C  
 
Am/C  
 
C  
 
Lick  
 

 

C  
Green, green, it's 
F  
green they say

  
On the 
C  
far side of the 
G  
hill 
Lick  
 

C  
Green, green, I'm 
F  
going away

C  
To where the 
F  
grass is 
G  
greener 
C  
still

 

Am/C  
Well, 
C  
I told my 
Em  
momma on the 
F  
day I was 
C  
born

  
Don't you 
F  
cry when you 
G3fr  
see I'm 
C  
gone

  
You 
Am/C  
know 
C  
there ain't no 
Em  
woman's gonna 
F  
settle me 
C  
down

  
I just 
F  
gotta keep 
G3fr  
travelin' 
C  
on

Lick  
A-singin'

 

C  
Green, green, it's 
F  
green they say

  
On the 
C  
far side of the 
G  
hill 
Lick  
 

C  
Green, green, I'm 
F  
going away

C  
To where the 
F  
grass is 
G  
greener 
C  
still

 

Am/C  
Nah, 
C  
there ain't no
Em  
body in this 
F  
whole wide 
C  
world

  
Gonna 
F  
tell me how to 
G3fr  
spend my 
C  
time 
Am/C  
 
C  
 

  
I'm just a 
Em  
good lovin' 
F  
ramblin' 
C  
man

  
Sayin', 
F  
"Buddy, can you 
G3fr  
spare me a 
C  
dime?"

Lick  
Hear me cryin', it's a

 

C  
Green, green, it's 
F  
green they say

  
On the 
C  
far side of the 
G  
hill 
Lick  
 

C  
Green, green, I'm 
F  
going away

C  
To where the 
F  
grass is 
G  
greener 
C  
still 
Am/C  
 

 

C  
Yeah, I don't 
Em  
care where the 
F  
sun goes 
C  
down

  
Where I 
F  
lay my 
G3fr  
weary 
C  
head 
Am/C  
 
C  
 

  
Green, green 
Em  
valley or 
F  
rocky 
C  
road

  
It's 
F  
there I'm gonna 
G3fr  
make my 
C  
bed

Lick  
Easy now

 

C  
Green, green, it's 
F  
green they say

  
On the 
C  
far side of the 
G  
hill 
Lick  
 

C  
Green, green, I'm 
F  
going away

C  
To where the 
F  
grass is 
G  
greener 
C  
still

Lick  
Everybody, I wanna hear it now!

 

C  
Green, green, it's 
F  
green they say

  
On the 
C  
far side of the 
G  
hill 
Lick  
 

C  
Green, green, I'm 
F  
going away

C  
To where the 
F  
grass is 
G  
greener 
C  
still 
Lick  
 

C  
To where the 
F  
grass is 
G  
greener 
C  
still 
Lick  
 

C  
To where the 
F  
grass is 
G  
greener 
C  
still 
Lick  
 

C  
 
Am/C  
 
C  
 


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: GUEST,Grishka
Date: 26 Apr 14 - 12:35 PM

As I mentioned above, for posting Chordalign results to Mudcat, it is advisable to uncheck (= deselect = click away the hook at) "Automatic Linebreaks". Otherwise, is the result as you intended, Jason?


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: Grishka's tool aligning chord symbols
From: Jason Xion Wang
Date: 26 Apr 14 - 01:37 PM

Yes, Grishka, the output is great! A real amazing tool indeed!


Post - Top - Home - Printer Friendly - Translate
  Share Thread:
More...

Reply to Thread
Subject:  Help
From:
Preview   Automatic Linebreaks   Make a link ("blue clicky")


Mudcat time: 17 June 9:56 PM EDT

[ Home ]

All original material is copyright © 1998 by the Mudcat Café Music Foundation, Inc. All photos, music, images, etc. are copyright © by their rightful owners. Every effort is taken to attribute appropriate copyright to images, content, music, etc. We are not a copyright resource.