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▼
Make six entries for a six-string guitar, four for a
uke and so on
Frets is a comma separated list of fingered fret numbers,
one entry per string. Enter 0 or space for an open string, 1 for fret 1 and
so on. Anything else such as x or null implies a mute string.
Labels and Footer must be comma
separated lists or null.
Labels appear inside the dots to indicate the preferred
fingering. Labels for un-fretted strings are not accessed, but
must be present e.g. as x, space or null
Footer is usually employed to show the note name or chord
function for each string.
Null entries for Title and Footer means that these
elements take up no space in the chart.
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▼
Tip: Take care when beautifying your image code. While this makes the code
much easier to follow, added spaces or new lines can throw text elements
off-centre. Use ugly code, as is, to display the graphic
Security Issues
SVG graphics have restricted access because SVG is more than just an image
format. It is a complete XML document format that can include embedded
scripts, such as SVG, CSS and importantly JavaScript.
Innocent looking images can contain embedded malware that executes as soon as
it loads. Chordography images are a potential concern because they are
rendered as inline markup. Nevertheless they should not fall foul of
security restrictions as they are locally generated. In practice, this may
depend on the O/S, the browser and which version is being used.
At the time of writing, Chrome and Opera are the most reliable Windows
browsers,and Copy fails in Firefox
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▼
width and height attributes, collectively called the viewport, tell the browser how much screen real estate it should allocate to the graphic.
After downloading the image, you can edit these values in the code to scale the image. The preserveAspectRatio attribute, value "xMidYMid meet", ensures the undistorted image is centred in the viewport using padding as necessary. Or you can set an appropriate scale factor in the Core Properties (see below) before downloading.
viewBox defines the full-size canvas.
Tip: If you delete either the width or the height attribute, the browser will scale the viewBox to the other one. If you delete both, the browser will scale the viewBox to the width of the enclosing HTML element. Delete the viewBox attribute and no scaling
will occur
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▼
To open up the Core Properties Editor, hold down the Alt key and click the Update button.
Default Core Properties
Property |
Value |
Description |
barre |
auto |
Optional barre control |
barHeight |
6 |
Barre mean height (px) |
barGirth |
2 |
Barre central thickness (px) |
cellWidth |
16 |
Horizontal string spacing (px) |
cellHeight |
16 |
Vertical fret spacing (px) |
dotSize |
12 |
Diameter of fingered dots (px) |
fontHeight |
12 |
Font size (px) |
fontBaseline |
0 |
Font vertical position (px) |
minSpan |
4 |
Minimum vertical span (frets) |
nutHeight |
4 |
Nut thickness (px) |
padding |
5 |
Clear space around the chart (px) |
scale |
1 |
Scale factor (any positive number) |
style |
default |
Pre-defined in-line style |
Notes on default core properties
- Pixel values (px) relate to the unscaled image
No labels normally means no barre is drawn.
Label with spaces to override
- A barre may be drawn if two or more fingered stages on the
same fret have the same label. If one or more frets
qualify, select "auto" to draw all of them, "single" to draw
only the uppermost one (played with the index finger), or
"none".
- cellHeight and cellWidth affect the overall chart size and
aspect ratio. Both should be greater than dotSize
- fontHeight should be less than dotSize.
- fontBaseline is used to position labels precisely in the
centre of fingered dots, which may be necessary if
different fonts or labels are used.
- Set minSpan to 12 if you prefer to draw the whole fretboard
- The scale factor adjusts the graphic's width and height
attributes relative to the full size canvas dimensions
defined by viewBox.
- Inline styles make charts self-contained, usable without
an external style sheet. Select "none" if you intend to use
an external style sheet with your charts. The grey border and
drop-shadow are not part of the inline style.
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▼
Assigned element classes
group |
sub group/element |
chart |
grid, text |
grid |
frets, strings, dots, nut, barre |
text |
title, header, labels, loFret, footer |
loFret is the fret number shown
alongside the first fingered fret
SVG style defaults are stroke: none and fill: black,
so in the absence of any CSS, text and shapes will be solid black
and grid lines fail to display. The following represents the
minimum CSS needed to display a chord chart, equivalent to inline
style "plain":
svg .grid {
stroke: black;
}
svg .labels {
fill: white;
}
The set of inline style examples available to the Core Properties
Editor is defined in chart.data.js: see Roll your own: Downloads
below
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▼
JavaScript
The source-code comprises a JavaScript module to which you will
need a link in your HTML <head> section. The module contains a
single factory function chart() that works in two
stages. The first stage optionally modifies the graphic's core
data (see Core object modifier) and returns an anonymous function.
The second stage executes the anonymous function to create the
graphic.
The anonymous function is assigned here to addGraphic.
Parameter udi (user data input) defines the chart and
placeholder locates it on the page. Graphics are
added to the placeholder, so existing content may need to be
removed, as shown below.
let addGraphic = chart(),
udi = {
title: "C7♭9",
frets: "x,3,2,3,2,3",
labels: "x,2,1,3,1,4",
footer: ",C,E,B♭,D♭,G"
},
placeholder = document.getElementById("placeholder");
while (placeholder.hasChildNodes())
placeholder.removeChild(placeholder.lastChild);
addGraphic(udi, placeholder);
Only the frets element of udi is essential to create a
chart; title, labels and footer may be
null, or omitted completely
Core object modifier
Source-code module chart() optionally
modifies the default core data with parameter com
(core object modifier), a subset of core property values.
The following example would modify cellHeight,
padding, and inline style:
let com = {
cellHeight: 18,
padding: 5,
style: "pretty"
},
addGraphic = chart(com);
Function addGraphic would then create all subsequent
graphics with the modified parameters.
Chordography uses com to allow users to modify core data "on
the fly". This will seldom be necessary in other applications,
where you may prefer to modify the default core values in the data
file (see Downloads, below)
HTML
In addition to a link to the source code, you will need to add
a placeholder in your HTML <body> section to contain the
graphic:
<div id="placeholder">graphic goes
here</div>
Downloads
Source code files can be downloaded in the table below.
Download links may work as normal navigation links if the files
reside on an external server and so are a potential security
concern. You should be able to view the file on the linked page,
and save its contents using "Save As" once you have seen what you
are getting.
Source code files
Filename |
Description |
chart.js
|
Comprises factory function chart(com), used to generate
chord charts |
chart.data.js
|
Examples of inline styles, udi and default core
properties used by chart.js |