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 abl