Question

I’m trying to figure out a good way to be able to store plain text music lyrics with synchronized guitar chords. When displayed, I’d like to see the lyrics rendered double-spaced with the chords in the “whitespace” line above the corresponding words. This is for my own personal lyrics book so ultimately the rendering will be most commonly on dead trees vs a screen but this may change eventually. I figured I’d give Markdown a shot and was able to get the following format “sort of” working when combined with some CSS to have <a> tags render as quasi-superscripts. I kind of like how using the <a> tag worked out, because I can have reference links on the bottom of the file for any included chords:

#Supertramp - Give A Little Bit

[A]

[D]Give a little bit[A][] [D]

  Give a little bit[G] of your[A] love to me[G][][A]

[D]: http://guitar.about.com/library/blchord_dmajor.htm  "D major"
[G]: http://guitar.about.com/library/blchord_gmajor.htm  "G major"
[A]: http://guitar.about.com/library/blchord_amajor.htm  "A major"

The CSS and converted markdown is here: http://jsfiddle.net/654ct/13/

h1 {
    font-family: Arial;
    font-size: 2em;
    margin-bottom: 1em;
}
p { 
    line-height:1em; 
    margin-bottom:1.1em;  
    font-family: Arial;
} 
a {
    position: relative;
    top: -1em;
    display:inline-block; 
    width: 0;
    overflow:visible; 
    color:#00F;
    font-weight:bold;
    font-family: Arial;
    text-decoration: none;
} 

I borrowed much of the CSS from here: Styling text to make it appear above the line (for chords above the lyrics) I am writing a new topic since this is mostly an appeal for help with the markdown.

The nice thing about this format so far is that the chords are able to be written “inline” with the lyrics so the words and music stay in sync no matter what font is used. Also I get the added benefit that the markdown itself is fairly readable.

The only problems are:

1. If there are two chords that need to be played without any words in between, the chord characters “overlap” each other when rendered in HTML. (I believe this is caused by the width:0; but this is required as far as I can tell to eliminate the gaps in the lyrics when there are chord changes.)
2. In the same scenario, all chords but the last one need to have a [] after the chord letter or else the second chord will be interpreted as a description of the first. This makes the markdown a bit busier than I’d like.

Is there a good way to solve either or both of these problems with CSS or by changing the markdown? If not, is someone aware of a completely different alternative other than writing my own guitar-chord specific markup language for this? (Even if I did write my own markup language for this, I would still need help with problem 1.) I’m aware of the tab format and I’m looking for something significantly less elaborate since all I need is a reminder of when each chord comes up not an explicit diagram of where my fingers need to be.

Thanks!

Answer 1

If you are just looking at getting the the song book printed out as opposed to developing your own application for creating the styled music sheets then you should check out this
Transposition App.

If you paste a chord/lyric text file in and then set the old and new keys the same it will give you the desired output.

You can choose to have chord names or the full chord fingering chart (click on the chart to change positions prior to printing).

I’m not involved with this application in any way – I just use it quite regularly when printing out my own music prior to gigging.

Examples of output:

Chord letter only.

Chord finger chart