A few weeks ago I mocked this up, having been spinning on this idea for a while now. The goal was to explore how guitar chord diagrams (and scale charts) might be more elegantly displayed in this modern age of phones, tablets, and laptop/desktop/TV screens of various sizes. Up until now, the standard for displaying these diagrams has been as images or PDFs... it is as if we never left the pre-internet world of paper. With all the cool things possible with SVG, HTML5/CSS3, and general responsive design -- surely a better solution must exist. I shall find it!
Finally, tonight, I dove into making the magic work in the browser. Just the first step, at least. Proving the concept.
First, some fretboard text...
This could be any chord you imagine on guitar, provided you follow the 6-string constraints when typing it out. All lowercase o's will translate to finger "dots" in the SVG below. This basic approach will work for mapping out scale diagrams, once I save those SVGs too.
^^
||||||
|o||||
o|||oo
||||||
Resulting SVG Fretboard
After some crude JS magic, the text above is converted to this SVG goodness. Resize your browser and rejoice at how eternally crisp it is.
More coming soon! This is just the beginning.
Quick Note on the Freboard Size
I spent quite a bit of time with this figuring out how to display the fretboard so its size could scale. For a quick demo, simply resize your browser -- you'll see the fretboard (and its content) all shrink while maintaining scale. Likewise, they could expand/grow and stay in scale too.
The most helpful resource I found on doing this was via this article. Check out the source HTML and CSS to see how I did it. A few extra div's are required, but it definitely seems worth it to me given the cool ways I could use this to display fretboards in different sizes and contexts.
Next Steps
In the next few hours I spent on this, here is where I want to go next:
- Make this proven approach work for multiple fretboards per each page. This will let me refine / polish the overall design while looking at many, many fretboard instances at once. Obvious other benefits exist too, such as eventually showing chord progressions via multiple fretboards (that'd be further down the road, though).
- Make this approach work for scales too (so I'm not only able to show chords). An example of what I mean can be seen here... up until now these scale charts are typically images or PDFs, neither of which does the scales justice in this modern age of glowing rectangular screens.
- Add support for common characters that appear in chord and scale charts (what dots look like on barred strings, fret numbers next to strings, note names under each string, etc). My theoretical approach supports this, it is just a matter of adding the JS and adding the SVG items.
- Add support for instruments with 4 strings (ukulele, bass). Determine if I need to worry about 3,5,7,etc string instruments too.
- Add support for a fretboard background-image that is appropriate for the top of the neck (i.e., for playing "open" chords). This is desired if showing something in the top few frets. If a scale/chord is played "up" the fretboard, I'd use a different bg-image and add a fret number to let users know which fret the dots are relative to.
- Add support for displaying the title/name of each chord/scale, probably directly above each freboard...?
- For scales, do I need to worry about showing intervals inside each dot?
- Eventually, explore a world where the ASCII text for each chord is stored outside of the raw HTML file -- in YAML files, in JSON, etc. This would let me have a canonical library of chords and scales that I could summon into HTML very easily, and prevent me from repeating work (of typing up the exact same ASCII patterns over and again).
