Friday, 28 December 2018

Chord Charts

Chord charts

Chord charts show where to place your fingers on the fretboard to play a given chord. Chordography enables you to quickly create and download chord charts for any fretted instrument in any tuning. Or, you can download the JavaScript source-code to generate graphics directly in your own web pages.

Chart Layout

Charts have a conventional layout. Strings are drawn vertically, nut at the top, to distinguish chord charts from tablature.

  • horizontal lines represent frets
  • o in the header indicates an open string
  • x indicates a mute, unfretted string
  • dots show finger positons; optional labels suggest fingering
  • the first fingered fret is numbered when the nut is not shown
  • an optional footer shows the note sounded by each string

Chart Data

To create a new chart, first make changes to the four input fields: Title, Frets, Labels and Footer. Then click Update to generate the corresponding graphic and SVG attributes, and Save to download the current image.

…more▼

Alternative Controls

Holding down the Alt key whilst activating a button control triggers an alternative function:

Alt + Update opens up the Core Properties Editor (see below)
Alt + Save copies the graphic script to the clipboard

…more▼

Attributes

width and height of the graphic in screen pixels refers to the scaled image, as displayed.

size in bytes varies with the graphic's content. Typically around 1k byte, the size is minimal even by SVG standards.

…more▼

Core properties

SVG images are versatile. They can be scaled without loss of quality, and colours, fonts, line and fill styles can all be controlled with CSS. Chordography goes a step further, as you can also modify the graphic's core properties.

…more▼

CSS

Chordography makes it easy to target styles, whether using inline styles or an external style sheet, as each major group and element is assigned a class.

…more▼

Roll your own

That's all you need to create and download chord charts in a variety of bespoke styles, shapes and sizes. But there is more. With the source code you can also generate and display your graphics directly.

…more▼