mudcat.org: Tech: Grishka's tool aligning chord symbols

sj

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

Lyrics & Knowledge Search [Advanced]
DT Forum Child
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
G⁷
come
Am

A♭⁷

C/G
We shall
F♯^dim
over-
G⁷/F
come
A⁷/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?

We^C shall^F over^G7come^{Am 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
G^3fr
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
G^3fr
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
G^3fr
spend my
C
time
Am/C

C

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

Sayin',
F
"Buddy, can you
G^3fr
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
G^3fr
weary
C
head
Am/C

C

Green, green
Em
valley or
F
rocky
C
road

It's
F
there I'm gonna
G^3fr
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:

Reply to Thread

Subject:	Help
From:

Preview Automatic Linebreaks Make a link ("blue clicky")

Mudcat time: 3 May 8:13 AM EDT

[ Home ]

All original material is copyright © 2022 by the Mudcat Café Music Foundation. 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.