Musical Symbols, Fonts & Unicode

I am glad to announce that I will be implementing Unicode Musical Symbols for both the revamp of existing content and all new content from this point onwards on Ricmedia Guitar.
This may not be the most exciting information but let me explain why it is very important for both your viewing experience, and my workload when writing HTML. You see, if you go to the current website chord section https://www.ricguitar.com/Chords/ you will see all the symbols I use for chord quality like: C♯min or D♭Ma with the sharp and flat signs right? Well when I first wrote the HTML for the site around 2007-2009 Microsoft Windows XP was still king, with Windows Vista just being released. Unfortunately Windows XP had terrible support for Unicode characters like the ones above, so I made the decision to design my own set of musical symbols in simple .gif images and place them wherever I needed them with the usual <img> code. This worked out well after a lot of testing and tweaking but was terrible for search engines and very fiddly for me to insert with long lines of code.
After doing some testing recently I have discovered that Windows 7/IE9+ has great support for Unicode musical symbols and of course browsers like Firefox, Opera, Safari and Google Chrome do too (and have done for many years). Internet Explorer is also falling out of favor world wide (16%) so in terms of support for cutting edge HTML, this is a good thing as Microsoft have been lagging behind for far too long and only now, when their browser domination is severely threatened, they start to support newer HTML features 🙂
So let’s go through the differences between old and new……

• Old code for a sharp symbol: <img src=”https://www.ricguitar.com/common/musical_symbols/sharp.png” width=”8″ height=”16″ alt=”Sharp Sign” />
• Result:
• New code (Unicode) for a sharp symbol: &#9839;
• Result: ♯

As you can see it’s a whole lot simpler for me to just put in a small line of code rather than an image!
I still have to make a complete Unicode musical symbol reference for myself so I can just copy and paste the code but you get the drift 🙂
Cheers!
Richie