jTab Shortcode lets you do two things easily: 1) Display chords and tab graphics by entering text in jTab notation into your blog post, and 2) Enter & render jTab Notation in Real-Time using a form.
More show, less tell!
1. Render Chords and Tab in jTab Notation
Ex: Just chords
[jtab phrase="C / Am / F / G G7"]
Ex: Tab and chords
[jtab phrase="Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 |"]
Ex: Just tab notation
[jtab phrase="$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9"]
2. Render jTab Notation in Real-Time
[jtab showform='true' phrase='C Am F G' buttontext='jTab me, baby!']
Chord notation for the jTab library is quite conventional and easy to remember, 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.
Representing tab notation is a 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.
Parameters & Implementation Details
Below are the parameters you can pass to the jTab shortcode. All parameters are optional.
- phrase – The phrase to render, given in jTab notation.
- class – A class to assign to the jTab div. Each jTab phrase is wrapped in a separate div of class “jtab”. Specifying class will add your custom class name to the div.
- id – An ID to assign to the jTab div. Default is nothing. When showform is true, id is ignored.
- showform – Set to “true” to display the input field and button to allow live rendering of jTab notation. Default is “false”. If you also provide phrase, the form will start pre-populated with that phrase. showform can be used only once on a page.
- Ex: [jtab showform='true' phrase='C Am F G' buttontext='jTab me, baby!']
- buttontext – The text to show on the submit button when showform is true. Default is “jTab this!”
jTab will render using the color and background-color styles of the enclosing HTML element.