<uke-chord> is a custom HTML element for tab chord diagrams using SVG graphics. It is
tuning agnostic and can be used for any fretted string instrument including the mandolin, 3 string dulcimer, ukulele, guitar, and 7 string guitar.
Install
Download this repo using the 'Download' button and load uke-chord.js (unminified version) or uke-chord.min.js (minified) into your page's HEAD tag. The webcomponents-lite.min.js file offers support for older browsers, so it is optional. The scripts can also be referenced directly from github:
<script src="//pianosnake.github.io/uke-chord/webcomponents-lite.min.js"></script>
<script src="//pianosnake.github.io/uke-chord/uke-chord.min.js"></script>
Use
Add a<uke-chord> element wherever you need a chord diagram in your web page. Then set the following parameters:
frets
This attribute is required. Set the frets attribute to the numeric value of the frets that should be played, left to right. The number of frets determines
the width of the diagram. The limit is 10 strings. Pass an 'x' to indicate a string should not be played and '0' if it should remain open. Make sure to
use quotes around this value.
<uke-chord frets="2010"></uke-chord>
<uke-chord frets="x32010"></uke-chord>
<uke-chord frets="320"></uke-chord>
<uke-chord frets="4xx30xx"></uke-chord>fingers
To add fingerings inside the bubbles use a fingers attribute. List these from left to right.
<uke-chord frets="1323" fingers="1324"></uke-chord>
<uke-chord frets="x32000" fingers="021"></uke-chord>name
To add a chord name above the diagram use a name attribute.
<uke-chord frets="2313" fingers="3214" position=0 name="F7"></uke-chord>
<uke-chord frets="xx0232" fingers="00132" position=0 name="D"></uke-chord>position
Use the position attribute to show a position indicator to the left of the diagram. To show the nut set position to 0. Since this value is an integer it doesn't need to be in quotes.
<uke-chord frets="1323" fingers="1324" position=7></uke-chord>
<uke-chord frets="x32010" fingers="03201" position=0></uke-chord>
<uke-chord frets="222" fingers="111" position=12></uke-chord>sub
To add text under each string use a sub attribute with underscores for blanks. If
using more than one letter per string use a comma to separate the values.
<uke-chord frets="2313" fingers="3214" sub="__R_" position=0></uke-chord>
<uke-chord frets="320003" fingers="210003" sub="EADGBE" position=0></uke-chord>
<uke-chord frets="310" fingers="21" sub="D,A,A/D" position=0></uke-chord>
<uke-chord frets="4222" sub="R,♭3,5,R"></uke-chord>length
By default, there are only 4 frets shown. Set length to another number to show more or less frets.
<uke-chord frets="330013" fingers="230014" length=8 position=0></uke-chord>
<uke-chord frets="222" fingers="111" length=3 position=0></uke-chord>size
Change the diagram size by passing a size attribute set to a number. Numbers greater than 1 will make the
diagram bigger. Numbers smaller than 1 will make it smaller.
<uke-chord frets="2310" fingers="231" size=0.4 position=0 name="F7"></uke-chord>
<uke-chord frets="2310" fingers="231" size=1 position=0 name="F7"></uke-chord>
<uke-chord frets="2310" fingers="231" size=1.5 position=0 name="F7"></uke-chord>r
Some publishers show the root of the chord with a
diamond head. To do this pass an r attribute set to the string where the root of the chord is found.
A root can be duplicated on two strings, so this parameter can contain several digits. The strings are counted from right to left.
<uke-chord frets="5433" length=5 fingers="3211" name="C" position=0 r=14></uke-chord>img
To allow styling with CSS, the SVG output is inlined by default. To get the SVG inside an image, set an img attribute. This allows right clicking on an image and saving it, or in some browsers, dragging the image from the browser.
<uke-chord img frets="2310" fingers="231" position=0></uke-chord>In the wild
This component was originally built for a series of posts on ukulele playing, hence the name.