Show don't tell! So before going further, here are some examples of jTab in action. More examples are available here.
Implicit Rendering using CSS
jTab implicitly renders tab notation on a web page that is contained in blocks marked with the special class name 'jtab'. This can be used for posting transcriptions to your blog for example - just include jTab in your blog template then when posting you don't need to remember anything else except to set the class name on your notation.
Here, a chord phrase is written directly into the web page..
Here's an example combining chords and tab notation..
Or just tab notation..
If you find this a little dry to read, see the examples page which demostrate all these features and more.
Chord notation is quite conventional e.g. C Gm F#7 Db.
- The root note (A..G) must be uppercase
- Seperate every item with spaces
- # indicates sharp
- b (lowercase B) indicates flat
- m (lowercase) indicates minor
- maj (lowercase) indicates major
- sus (lowercase) indicates suspended
- dim (lowercase) indicates diminished
- aug (lowercase) indicates augmented
- add (lowercase) indicates extensions
- Variations on the root chord: m, 6, m6, 69, 7, m7, maj7, 7b5, 7#5, m7b5, 7b9, 9, m9, maj9, add9, 13, sus2, sus4, dim, dim7, aug
- / indicates repeat of the previous chord
- | is a standard bar line
- || is an ending bar line
jTab also supports CAGED major chord notation. This is a convenient method for indicating major chords at various positions on the fretboard.
- May be applied to all chords
- Position is indicated by following the chord with a colon and the position number 1,2,3...
- e.g. C:1, Cm7:5, Eaug:2, Dsus2:3
A full chart of chords supported by jTab as available here.
Custom Chord Notation
jTab also supports custom chord notation, where the frets and fingers for any arbitrary chord can be explicitly defined.
- Frets: Numeric position on the fretboard
- Fingers: 1,2,3,4,T (uppercase)
- For open strings, enter: 0/0
- Muted or not played strings: X/X or x/x (case-insensitive)
- Name: enclose the name of the chord in square brackets (name is optional, to leave it out just exclude the brackets)
Here's an example:
Representing tab notation is little special to jTab, but aims to be as simple as possible.
Basic entry of notes on a single string is done by setting the string and then following with the notation (separated by spaces).
- Indicating the string is done with the dollar sign ("$") followed by the string number (1-6, high to low). e.g. $2 is the B string in standard tuning
- Alternatively, you can use the string tuning instead of string number, EADGBe low to high in standard tuning. e.g. $B is the 2nd string in standard tuning.
- Then you can in fact follow with anything you like - fret position, slides ( / \ ) hammerons (h), pulloffs (p) etc (just avoid uppercase characters to avoid confusion with chords)
- $2 0 1 3 (a simple three note sequence on the B string)
- $2 0 1 3 $1 0 1 3/5 (a sequence of notes starting on the B string, continuing on the high E string, finishing with a slide to A)
- $B 0 1 3 $e 0 1 3/5 (same, but using string notes instead of numbers)
What about more than one note at the same time? To handle multiple notes played on different strings, join all the individual string notation together with periods (".")
- $3.6.$2.5h7 $1 5 $2 7 (start with two notes on G and B strings followed by a hammeron and two individual notes)
- $4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9 (three notes across D,G,B strings with a slide up two steps and a twist)
Tab for a whole or partial chord can be easier to enter as a full six-string block. A shorthand is possible if you want to enter notes across all 6 strings:
- Below the 10th fret, just concatenate the six string fret positions (from low string to high) e.g. 022100 is E chord at the nut.
- Periods are required to separate each string e.g. 220.127.116.11.8.8 is C chord at the 8th fret (which can also be written as C:4 in CAGED notation)
- substitute an X or x for mute strings e.g. X02220 is an A chord
Mixing Chord & Tab Notation
You can mix chord and tab notation without restriction in the one phrase. This will result in a tab line being drawn, with chord charts above where relevant.
Rendering Options: Color
jTab will render using the color and background-color styles of the enclosing HTML element.
Rendering Options: Size
jTab currently only renders in a single size. Having the ability to control the size of the rendered tab is something we'd like to get into a future update.
jTab is open source and free to use. You are welcome to use and reuse it however you like.
The project home page is at http://jtab.tardate.com
There is also a version located at jtab.tardate.com that you can point to directly (although performance may suffer a little).
How To Install jTab on your Web Page or Site
You can download these files and use them locally on your own site. There is also a version located at http://jtab.tardate.com that you can point to directly (although performance may suffer a little). The example below shows how to pull the files direct from tardate.com.
Note the optional jtab-helper.css file. It is used to preset jtab region heights to avoid screen layout resizing during rendering. More information about that here.
2. Performing Implicit RenderingSeriously, how easy is this? Just put your notation text inside any block tag (e.g. DIV) and give it the class name "jtab"..
<div class="jtab"> E / / / | Am / B / || </div>
The HTML code above produces the following (view the source of this page to prove it yourself!):
3. Explicit Rendering with Scripting
Actual result is this:
Troubleshooting and Tips
Page layout jitters while rendering jTab
jTab automatically resize HTML DOM objects to fit the notation it is rendering. Because of this, page layout main jitter around as the page elements are changing size. To avoid this, you can pre-size your jtab elements to avoid the resizing.
At the moment, the standard height of jTab renderings is as follows:
- Chord and tab diagram: 218px
- Chord-only diagram: 118px
- Tab-only diagram: 100px
An optional stylesheet is included in the jTab kit (css/jtab-helper.css)and can be included in you pages:
<link type="text/css" rel="stylesheet" href="http://jtab.tardate.com/css/jtab-helper.css"/>
The stylesheet presets the jtab class to the maximum possible height, and provides class modifiers if you know you will only have tab or chord elements present.
<div class="jtab">(pre-sized for chord and tab)</div> <div class="jtab chordonly">(pre-sized for chord only)</div> <div class="jtab tabonly">(pre-sized for tab only)</div>
Inline blocks and IE
Implicit rendering with normally inline blocks (like a SPAN tag) can be an issue in IE. Rendering a series of SPAN tags may result in the guitar tabs being written over each other (it seems IE does not automatically adjust the size of the block to fit the rendered guitar tab, whereas Firefox does for example).
Solution: just avoid inline blocks. Hold your guitar tab in a DIV tag for instance.
Implicit rendering isn't happening?
jTab hooks the window.onload function in order to "automagically" do its implicit, CSS-based rendering. It plays well with other onload handlers installed before jTab, however if anything on your page installs an onload handler after jTab, it may overwrite the jTab hook and prevent it running.
Solution 1: restructure your page so that jtab.js is included after anything else that may interfere with it.
Solution 2: include an explicit call to the rendering function at the end of your page:
Feedback & Contribute
Feedback and contributions are eagerly sought, particularly for things like:
- Spotted any incorrect fingerings?
- Browser incompatibility or rendering issues?
- Features you'd really like to see included
- Or just let me know how you are using jTab and what you think!
Source: The master jTab source is hosted on github. All are welcome to fork and update.
Issues: A formal isues list (with prioritisation) is maintained in the github issues list.
Discuss: We have established a mailing list to discuss internal development issues, usage, and ideas for enhancement. All are welcomed to join: visit the mailing list group on Google.
Kudos: Aside from just scratching a personal itch, jTab was greatly inspired by Dmitry Baranovskiy's fantastic work on the Raphaël SVG library, and Alex Gorbatchev's syntaxhighlighter (for opening the door to what is possible!).
jTab is a new project, so there are definitely some things it can't do at the moment. See the issues list on github for all currently open issues. Some of the main things to note:
- Chord diagrams don't render a barre symbol or other common annotations.
- No explicit support for alternate tunings
- Currently only six-string beasts. No bass, lutes, mandolins, banjoes etc etc.. sorry ;-)
Internet Explorer is a little problemmatic however. IE7 is the most reliable, IE6 has some imperfect rendering, and as of writing IE8 is exhibiting very poor performance rendering SVG (in the order of 10x slower than Firefox/Chome, and much slower than IE7).
jTab in the Wild
Here are some places where you can see jTab in action:
- ChordMaster 2000 - a tool to help you learn chord fingerings for guitar
- Guitar Tab Shortcode - jTab as a WordPress plugin by Matthew Marichiba
- Musical Practice and Performance - a StackExchange site dedicated to musical Q&A
Let us know if you find more to be listed here.