How’d I get that tab, notation and chord diagram into my blog?

Do you ever want to share musical information with others? It doesn’t matter if you’re want to send an email, create printed material or post something to a blog, the essential problem is the same. Here are some of the things which you might want to do if you are a musician or music lover.

• Put guitar tab into your blog. Or, tab for any fretted instrument.
• Put mandolin tab (or tab for any fretted instrument) into a document.
• Create a book of chord diagrams (again, for any fretted instrument) to share with students.
• Share a lead line for a jazz solo in an email in standard music notation.

I’ve faced these same things. If you saw my recent posts you will have seen I included images of fretboard diagrams, standard music notation, guitar tab and tab combined with standard notation. It mostly doesn’t matter where you want to put the tab, notation or diagrams. The question is what are the best ways to create and embed this musical information.

So, here’s my recommendations. Before I go any further, a warning. This is going to be technical and geeky. I’m going to attempt to give you clear, easy to follow instructions but if being geek scares you, then this isn’t for you. And if you never share musical knowledge, then you can stop reading here. But if you know stuff and don’t share it, shame on you – just my opinion.

I’m going provide some examples to illustrate the methods.

The examples are:

1. Put the guitar tab of a C major scale into HTML for a blog.
2. Create a high quality image of the tab which can be put anywhere.
3. Create a high quality image of the tab + standard notation.
4. Create the standard notation of a C major scale (not tab) and an image for embedding.
5. Create a chord diagram of a C major guitar chord played as a bar at the third fret.
6. Create a finger diagram of the note positions for a C major scale placed in the cAged position on the guitar.

Example 1: Put text tab into HTML.

Examples 2 to 6 all will result in the creation of a high quality PNG image that can be put into a blog, email or document. Images are great for sharing and can even be put in Facebook or Google+. But if you are sharing standard instrument tab for stringed instruments, sometimes all you need is tab as text. This was the original intent of tab. Something easily shared by plain text email or even standard typewritten snail mail (if you’re old enough to remember typewriters other than as something in a museum).

The first problem with using plain text tab is that the font must be monospaced. The Courier family of fonts are the standard monospaced font.  So if you are creating a plain text document or email with tab choose Courier (Courier New on Windows) so the tab for each string can be in alignment. You don’t have to make everything monospaced, only the tab. If you’re working in HTML, read on.

The second problem if you are working in HTML is to keep each line from wrapping. There are a number of tricks that can be used. I’ll share several.

One of the best ways of inserting tab as text into HTML is to surround the tab with one of the HTML tags designed to display plain text without interpretation. The best is the use the code for pre-formatted text. If you put a <pre> tag before the tab begins and a </pre> after the end of the tab, everything in between, including new lines, will be displayed as you had entered it. It should be displayed in a monospaced font ¹. Just what we need.

If you are working in an online wysiwyg blog editor, you will need to switch to HTML mode to enter the <pre>tags – or there may be an editor option to apply the <pre> formatting to a highlighted section. Just beware that typing angle brackets <> into an online wysiwyg editor will probably convert those brackets to HTML entities and you won’t get the result you expected.

C major scale guitar tab, open position – inserted as text.

E--------------------------------------------------
B---------------------0--1-------------------------
G---------------0--2-------------------------------
D------0--2--3-------------------------------------
A---3----------------------------------------------
E--------------------------------------------------

Note that some online editors won’t allow certain HTML tags to be used ². Alternative methods to achieve the above are to try the <code>text</code>tags to surround your tab. If you use this will you have to add <br /> tags at the end of each line to force the line to break where you want it to.

Another work around is to use the <span>text<span> tags to format the enclosed tab to use a monospaced font. Again you will have to <br /> at the end of lines. The opening span tag needs to include either a class or a style statement. the style statement allows inline CSS formatting and would be something like the following:

<span style="font-family: Courier, monospace;">
your tab as text...
</span>

If you know CSS and can create or already have a class for monospaced text, you can use that instead of the inline style statement. E.g.,

<span class="monosp">your tab as text...</span>

If you are blogging or using other online CMS software you may have or be able to install plugins that handle showing code in your posts. For example, I used a WordPress plugin to display the html span code examples above. I am not covering how to use these here because there are many plugins for many CMS/blogging platforms and each works a little differently. The method I’ve shown should work for any HTML, unless your blog software strips out HTML code. However, if you blog and know about plugins you might want to look for one that allows plain text to be entered easily. If you have a blog at WordPress.com, the plugin I used above is already included.

High Quality Tab Images

Standard text based tablature has been around for a long time and still serves a purpose, but as technology changes we become use to higher resolution, better looking music output and software that makes tab easy to create. The remaining examples are going to use a variety of software programs to produce a high quality image you can blog or post or email or print. The good news is there are free programs that you can use for each of the examples. You could use commercial software too, but if you don’t already own the type of program needed for each example, you can download something for free. Also, most (but not all) of the software is cross-platform and can be obtained for Mac and Linux as well as Windows.

I’ve reviewed most of the software you will need in previous articles. Here’s the software I’m going to use for the other examples – in the coming posts on this topic.

• Tux Guitar. Software for creating fretted instrument tab and notation. It is free, open source and cross platform.
• MuseScore. Software for creating standard music notation with a graphical interface. Free, open source and cross platform.
• Lilypond. Software for creating standard music notation. It is text based. It can also create chord diagrams and fretboard diagrams for scales. Tux Guitar and MuseScore both can save to the lilypond format and lilypond is thus useful to “tweak” something created with those programs. It is free, open source and cross platform.
• QuikChord3. This creates chord and scale diagrams for fretted instruments. You can save the files as a PNG graphic image. The program was recently released to the public domain, so it is free. However, it is not a cross platform program. Windows only.
•  Gadwin PrintScreen free edition. This is screen capture software that gives you more options than the standard PrtScn button on your computer. An “easy” way to get something to paste into a document or blog is to capture an area of the screen from Tux Guitar or MuseScore that shows what you want. This is not a preferred way and the quality will not be high, but it is easy. Free version available, Windows only (scroll down to find the free version from their download page).
• Image editing software. Any of the following will do. GIMP which is free, open source and cross platform. Paint.net is free but Windows only. Photoshop which is expensive and overkill but if you already own it, it will work fine. For that matter, many other programs you may already own – including ones that came with your computer – will probably work. You mostly will just need to crop and maybe re-size images, although layers are nice for some advanced techniques.

1. Whether or not pre-formatted text using the <pre> codes is displayed in a monospaced font is determined by the CSS. It is standard to format <pre> in a monospaced format but not required.
2. Wordpress uses the tinymce wysiwyg editor for writing blogs online. It likes to strip out many useful html codes. If you are comfortable working in HTML you can disable the wysiwyg editor on per profile basis. However, most of us like modern editors and must use other work arounds.