Creating fingering charts with diagrams from the Fingering Diagram Builder

My Fingering Diagram Builder has been around for a little over five years now. I was careful to name it the Fingering Diagram Builder instead of the Fingering Chart Builder because it is a tool for creating individual diagrams, not for assembling them into comprehensive fingering charts. But the difference can be a little confusing, so I get frequent questions from users who complain that they can’t figure out how to create and download a “chart” with multiple fingerings on it.

The reason I didn’t try to build a complete system for creating fingering charts is that I assumed users would have widely-varying needs, and would do better to assemble charts using some other kind of software. Here are a few examples of how that might be done, using music notation software, using a word processor, and using a text editor to create HTML code (such as for a website). All the software I’m using here is free to download on Windows, Mac OS, and Linux, but whatever free or commercial programs you are already using probably have similar features. You’re on your own to work out the details (and feel free to share them in the comments if you are feeling helpful).

Creating a fingering chart in music notation software

I am using MuseScore here, but commercial software like Finale and Sibelius and other free software like LilyPond could be used in similar ways.

First I set up a musical “score” with the notes for the chart. I used whole notes, separated by double bar lines, but that’s up to you.

MuseScore setup

Next I created my fingering diagrams in the FDB. I sized the diagrams “tiny” with “thick” lines.

Adding the diagrams to the score is very simple in MuseScore—I just dragged the downloaded diagrams from my file manager right onto the score. If I drag the diagram and hover it on top of a note, that note gets highlighted. Then I can release the diagram and it attaches to the note.

musescore-drop

Initially the diagrams are placed right on top of the note. I selected the diagrams and used the Inspector panel to give them a horizontal offset of -2.5sp and a vertical offset of -10.5 sp, which moved them above the staff, more or less centered above the noteheads. I adjusted the A and tenor B-flat fingerings’ horizontal offsets a bit more to make them look just right.

Here is the finished product, a small chart with a few bassoon fingerings:

bassoon-fingering-chart-sample

Creating a fingering chart in word processing software

I am using LibreOffice Writer, but something like Microsoft Word or Apple Pages would work just as well.

First I opened a new document and inserted a table. My table has three rows and seven columns.
writer-table

Then I dragged the downloaded diagrams from my file manager into the bottom row of the table.

writer-diagrams

I merged some cells together, dragged in some images of notes on staves, and added some text.

writer-complete

A few more little tweaks and here is the finished chart:

clarinet-fingering-chart-sample

Creating an HTML fingering chart in text editing software

This code be used in any text editor or HTML source editor, and of course similar results could be accomplished with a visual/WYSIWYG editor. I’m not showing complete code here, just the most relevant parts.

I started with a framework for a table that I could use to show a note with two alternate fingerings. (This is a flute fingering chart with horizontally-oriented diagrams. For an instrument with vertically-oriented diagrams, you may want to rearrange things a bit.)

<table>
  <tr>
    <th rowspan=2><!— note image here —></th>
    <td><!— first fingering image here —></td>
    <td><!— first fingering text here —></td>
  </tr>
  <tr>
    <td><!— second fingering image here —></td>
    <td><!— second fingering text here —></td>
  </tr>
</table>

Then I plugged in <img> tags and text:

<table>
  <tr>
    <th rowspan=2><img src="images/f-sharp-note.png" /></th>
    <td><img src="images/f-sharp-standard.png"</td>
    <td>Standard</td>
  </tr>
  <tr>
    <td><img src="images/f-sharp-trill.png"</td>
    <td>Trill from E</td>
  </tr>
</table>

I duplicated that code for additional notes. Since this is a sample alternate/trill fingering chart, each note has at least two fingerings. For notes with more fingerings, I added <tr>s and changed the rowspan values accordingly.

I also added a little CSS to spruce things up:

<style>
  table {
    display: inline-block; /* make tables wrap gracefully depending on screen width */
    margin: 1em; /* put some space between tables for legibility/clarity */
  }
  th img {
    max-width: 8em; /* manage size of note images */
  }
</style>

Here is the result:

flute-fingering-chart-sample

I hope that sparks a few ideas for you if you are considering putting together a fingering chart. If you have other methods or tips, please share in the comments section!

8 thoughts on “Creating fingering charts with diagrams from the Fingering Diagram Builder”

  1. Out of curiosity, is there a specific way that you like to notate flick, or optional, keys on your bassoon diagrams? There are a few notes in the lower register where I’d like to note that the whisper key is optional. I’d also like to highlight the flick keys in a way where I can specify that a certain background in the key means flicked.

    I’ve noticed that you have different color options for this, but these won’t necessarily copy well, especially in grayscale or monochrome.

    Any thoughts?

    Reply
      • These charts are great, but I would love to see the option to introduce a line or a cross to put over a key to show which key to trill. I’m preparing a part for publishing, and the main part of the score will be in b/w so can’t use the colours option to show multi phonic trill fingerings. Any plans to introduce this feature?
        Thanks!! Ruth

  2. I have used the fingering diagrams to create a “blank” fingering chart for my students. I use it to test them, to have them keep track of new fingerings as they learn them, etc. It is a great resource!

    Reply
  3. Hi, Bret! Really appreciate the work you have done with making coding fingerings more accessible. A friend of mine (Japhet) and I just finished a fingering chart project or our own that is strictly for mobile/tablet devices. I’d love to hear your thoughts! You can find it on your phone at http://www.fingercharts.com/flute/

    Also, WOW, you have the biggest resource page I have ever seen in the flute world—thanks!!

    Reply
  4. Where did you find the images of notes on stave stave lines, you mention in the example of making a chart using a word processor?

    Reply

Leave a Comment

Comments that take a negative or confrontational tone are subject to email and name verification before being approved. In other words: no anonymous trolls allowed—take responsibility for your words.

This site uses Akismet to reduce spam. Learn how your comment data is processed.