Site Guide

General navigation and usage of the site:

• Mobile-friendly; optimized for phone or tablet
• Desktop-friendly; see more simultaneous perspectives on a large screen

UpTheNeck.com is made up of several different 'web applications', like Chord Finder and Chord Diagram Editor.  Most of these applications offer an 'Export' function, where you can save .svg or .png diagrams to your device.  (You can also use your browser's Print dialog to save a .pdf file from the Export page.)

Help

In the upper right-hand corner of pages with web apps, you'll see a ? button, which opens a help window.  At the bottom of the Help window, is a link to the User Guide.

Options

• Simplify Enharmonics:
  Translate awkward note-names.  'Enharmonic' is the term for different notenames that produce the same sound.  (A♯ = B♭)  This concept extends to strange names like E♯ and C♭, in some chords.  If you'd rather not see double-sharps, C♭, etc.,   enable this option, and the 'simpler' (while technically harmonically incorrect) note-names will be displayed.  When this option is disabled (default), the harmonically correct notenames wil be displayed.    The 𝄫7 tone of a Cdim7 chord, for example, will produce a B𝄫.  With the option enabled, it would be labeled as A.

• Chordname Size:
  Chordname Size can be changed independent of the chord diagram size.   
  Large fonts provide good visibility when the diagram is reduced to a small size; smaller font sizes may look better for long chordnames like CMin7♭5.

• High G / Low G:
  Ukulele is usually tuned 'reentrant', with the 4th (G) string tuned higher than the third (C) string.  For low-G ukulele, chord shapes and Chord Factors will be the same, but sounds and notes on the staff will be one octave apart. 

• Chordname Size:
  Chordname Size can be changed independent of the chord diagram size. 

• Realistic Grid / Classic Grid:
  Chord diagrams are traditionally drawn on a uniform grid representing strings vertically, and frets horizontally.  Our Realistic Grid shows the fret sizes in proportion to an actual fretboard, and results in more realistic chord shapes up the neck.

• Decorations - Dots on the diagrams represent where to put your fingers.  These finger-dots are sometimes decorated with an outer circle to denote the Root of the chord.
   
• Color-coding
  Root notes are sometimes color-coded red in chord diagrams.  Our built-in color-schemes all incorporate red root notes.  We extend that concept of color-coding to other Chord Factors, specifically the thirds and sevenths .  For thirds, we use blue for minor thirds (to represent the 'blue' feeling of a minor chord), and green for a major third (to represent happiness or contentment.)
  • Beet Root - all Root notes will be colored beet red.  The shade of red we use was inspired by Brad Bordessa's `Ukulele Chord Shapes book.
  • Moody Thirds - Blue for minor thirds, Green for major thirds.
  • Moody Sevenths - Dark Blue for minor sevenths, and Dark Green for major sevenths.
• Match colors on staff - For any chord diagram, we usually show a representation of that chord on a music notation staff.  To aid in learning the notes on the staff and how they relate to the chord-shape on the fingerboard, you can color-code the notes on the staff to match the colors of the finger-dots on the diagram.
• Image Size - when exporting diagrams, the Export page will have an Image Size slider. 
  Size can usually be adjusted again wherever you're importing the image to, and for SVG diagrams, they can always be scaled without losing image quality.  In the case of .PNG images, you may want to export a Large image, and shrink it when using, to preserve image quality.
  Note that, if you select an Image Size wider than the window or device width, the displayed diagram may be scaled to fit within the display window... but the exported diagram will be the specified size.

Re-using your diagrams

You can use the exported .png or .svg files  in your documents.  For .png files, it's usually as simple as cut and paste.

For .svg files, however, you'll find that fewer apps offer support for this file type.

• There is an SVG Viewer app for Chrome:
  https://chrome.google.com/webstore/detail/svg-viewer/lngkbicefbnocjicnbemapilgglemjgg?hl=en
• A popular free SVG editor is Inkscape: 
  https://inkscape.org/

Sound

Many of our pages can produce sound.  For every page that can produce sound, there's a convenient Mute button (speaker icon) and Volume control in the upper right-hand corner.  If you're logged in, the Mute and Volume selections will be remembered when you change pages.

Fonts

Diagrams exported from UpTheNeck often contain special unicode symbols such as sharp (♯) and flat (♭) signs.  Not all fonts support these symbols, so we embed a valid font inside each SVG diagram.  Even so, some programs may not display these symbols properly.  The Thunderbird mail tool, for example, displays these characters correctly when sending a message, but may not display them properly in a received message.