About jTab

Guitar tab is all over the internet, but it is usually in either a fixed/non-interactive form, or painstaking ASCII format. jTab is an open source, javascript-based library that lets you change that. It automatically converts a simple text notation to a web-friendly graphical presentation on the fly.

You can use it to post snippets on your blog, host user contributions on a web site, or just for personal transcription purposes. It is also scriptable with javascript for more sophisticated applications.

Technically, jTab is a javascript-based library that renders notation using CSS and scalable vector graphics (SVG). It works in most modern browsers that support javascript, CSS and scalable vector graphics (SVG) - for example: Firefox, Google Chrome and Internet Explorer (see browser support).

Live Examples

Show don't tell! So before going further, here are some examples of jTab in action. More examples are available here.

Interactive/Explicit Rendering using Javascript

jTab can be used to render notation in real-time using Javascript. This could be based on user input (like here), or with the notation feed being generated or retrieved from some system or web service.

Try it out. Enter a phrase here (see notation for help):
jTab will render your phrase 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..

E / / / | A7 / B7 / ||

Here's an example combining chords and tab notation..

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 |

Or just tab notation..

$4.7/9.$3.6/8.$2.5/7 9p7 $2.9.$3.9.$4.9

Notation Reference

If you find this a little dry to read, see the examples page which demostrate all these features and more.

Chord Notation

Chord notation is quite conventional e.g. C Gm F#7 Db.

jTab also supports CAGED major chord notation. This is a convenient method for indicating major chords at various positions on the fretboard.

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. 

%Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger[Name]
You must always include all six strings.

Here's an example: 

%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]
%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]

Tab Notation

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).

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 (".")

Examples:

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:

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.

Downloading/obtaining jTab

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

The master source code repository is on github (http://github.com/tardate/jtab/tree/master). You will always find the latest version here and be able to contribute to the project yourself.

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

1. Include jTab Javascript files

jTab is provided as a single javascript source file (jtab.js) that needs to be included on your page. It depends on two additional libraries that must also be included: jQuery, and Raphaël (raphael.js). Compatible versions of these libraries located along with jtab.js, or if you are already using a version of these libraries you probably do not need to include them again.

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. 

<head>
  ... (other stuff) ...
  <!-- recommended to avoid security warnings with SVG in IE8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <!-- optional: helpers to preset jtab region heights to avoid rendering jitter -->
  <link type="text/css" rel="stylesheet" href="http://jtab.tardate.com/css/jtab-helper.css"/>

  <!-- mandatory script includes for jtab -->
  <script src="http://jtab.tardate.com/javascripts/jquery.js" type="text/javascript"></script>
  <script src="http://jtab.tardate.com/javascripts/raphael.js" type="text/javascript"></script>
  <script src="http://jtab.tardate.com/javascripts/jtab.js" type="text/javascript"></script>

</head>
<body>
    ...

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 Rendering

Seriously, 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!):

E / / / | Am / B / ||

3. Explicit Rendering with Scripting

You can script the rendering of a guitar tab phrase into any HTML block using a line of javascript to call the jtab.render() function. jtab.render() takes two parameters. The first is the ID or name of the HTML element to render the tab into, and the second is the actual line of tab notation (a string). Obviously, you can bring all your javascripting expertise to bear: the tab notation may be preset in the page, pulled from a database, the result of a web services call, entered by the user, or ... 

<div id="mytab"></div>
<script type="text/javascript">
    jtab.render($('#mytab'),'Am7 C');
</script>

Actual result is this:

jTab rendering here..

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:

Note that width is indeterminate - it depends on your notation.

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: 

    <script type="text/javascript">
    jtab.renderimplicit();
    </script>

Feedback & Contribute

jTab was created and is maintained by Paul Gallagher and released as open source for all to exploit. Main contributors: @tardate, @jasonong, bborn, binarybitlan, balpha.

Feedback and contributions are eagerly sought, particularly for things like:

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!).

Limitations

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:

Browser Support

jTab works in most modern browsers that support javascript, CSS and scalable vector graphics (SVG) - for example, Firefox 3+, Google Chrome and Internet Explorer.

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:

Let us know if you find more to be listed here.