16

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!

6 Answers 6

4

Try out Lilypond, which uses a music-specific language, and generates great-looking output.

2
  • Thank you for the suggestion Craig. Lillypond looks very interesting, but unfortunately for me it appears to be very much oriented toward creating sheet music. I can barely read music and am primarily interested in synchronizing song lyrics with chord changes.
    – NYCdotNet
    Sep 5, 2012 at 15:59
  • @nycdotnet Fair enough. I guess you're right, if you don't want any guitar tabs or music notation. Sep 5, 2012 at 23:07
3

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

1
  • This seems very close to what I was looking for. Thanks!
    – NYCdotNet
    Dec 14, 2012 at 22:40
3

There is a wonderful software to handle and print nicely songbooks : http://www.patacrep.com/en/index.php The whole setup is not very easy, but the result is quite impressive !

If you need to convert raw text songs to the format needed by this application, I just wrote a small JS script : https://github.com/oliverpool/guitar-tabs_songtex.js (demo link available on the readme)

2

There are a couple of similar programs but I like "Songsheet Generator" best.

I have used it for years, it is very reliable, good developer support and an extended chordpro code that allows for some nice little extras like "footnotes", ie. text placed in the footer of the printed page and screen projection.

It is also very easy to define custom chord definitions if you need to share songsheets with someone else - or just a reminder for yourself - and you want to specify a particular chord variation or even specific finger placement on the frets.

Songsheet Generator: http://www.tenbyten.com/software/songsgen/

2

The markup format you proposed is very similar to ChordPro. In that format, your song would be

{title: Supertramp - Give A Little Bit}

[D] Give a little bit [A] [D]
Give a little bit of your l[A]ove to me [G] [A]

Some (but not many) Markdown renderers like JotterPad can process this as chordpro directive. But there is also the standalone open source ChordPro Perl script (to convert it to PDF) or it's predecessor chordii (which is available as Debian package).

A more common markup music format that is a popular choice when you have notes as well is abc.

1
  • The ChordPro Reference Implementation mentioned above can also print the chord diagrams on the chord sheet and be used to create a songbook from multiple files. Oct 27, 2023 at 13:06
0

You may check the My G-Songbook: https://my-gsongbook-2-app.appspot.com/ It concerns at, before and after placement and rendering of chords with diagrams optionally. It is a Google Drive application.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.