| flat | natural | sharp | double-flat | double-sharp |
|---|---|---|---|---|
| ♭ | ♮ | ♯ |
But, depending on the device you are using to read this, you may notice one of these problems:
- None of the symbols show up properly: they are either missing or replaced with squares, diamonds, question marks, or some other “placeholder” symbol.
- The flat, natural, and sharp appear properly, but the double-sharp and double-flat are missing or placeholders.
- The symbols don’t quite match each other—they appear as though they come from different fonts.
And for the blogger or other online writer, there is an additional problem: these characters aren’t easily typed from a keyboard. Using them means copy-and-pasting or remembering obscure numeric codes. And then you hope that your readers’ devices can display them.
So, for most situations, some kind of text substitution is made. Two styles are fairly common:
- Spelling out the symbols in words, such as “A-flat.”
- Using a “close-enough” character, such as “A#” (pound sign, number sign, or hash) or “Bb” (lower-case B).
Using words is my preferred method, since using “#” and “b” is semantically incorrect, garbles the meaning for non-visual browsing devices (such as screen readers for the blind), isn’t compatible with all fonts (such as those that don’t have a clearly-differentiated upper- and lowercase B), and can be ambiguous:
- “Today I did my patented Ab Workout. It’s basically all the major and minor scales starting from Ab.”
- “Today I did my patented Ab Workout. It’s basically a bunch of sit-ups.”
Thus, I recommend this usage: “A-flat,” “B-natural,” “C-sharp,” “D-double-sharp,” “E-double-flat.” Note the hyphens (with no spaces), and the lower-case accidental names (even for titles: Sonata in D-flat).
This solves the major issues of typing and reading the accidentals in an onscreen situation, but leaves us with a rather inelegant and typographically boring representation of the true musical symbols. This would be intolerable for print media, and, as screen text steadily replaces print text, a better solution is required. Here are some possible scenarios (warning—a little technical):
JavaScript
In this scenario, the symbols are displayed when possible, according to the web design principle of progressive enhancement: the writer uses text-based “accidentals” as described above, and they are upgraded to proper symbols when viewed on capable devices. This brings me to my latest project, jQuery Accidentals, a beta-release JavaScript/jQuery solution for performing this conversion automatically. Technical details are available for perusal by the code-savvy. This is, in my opinion, currently the most effective, reliable, and reader-accessible method for using accidental symbols online. Note that determining which devices are capable of displaying these symbols is problematic and imprecise; jQuery Accidentals runs by default in a “safe” mode, and only performs the conversions when it can make a reasonably solid guess—otherwise the textual representations are left unchanged.
I have also released this tool in the form of a WordPress plugin, a convenient set-it-and-forget-it solution for users of the world’s most popular blogging platform.
JavaScript + Web Fonts
The difficulty in determining whether a device can display a certain symbol is that different devices likely have different fonts installed, and not all fonts contain all symbols. A small handful of fonts are reasonably common across web-capable devices, but none of these can be counted on for musical symbols.
This problem can be solved in theory by using web font technology, such as Google’s free Web Fonts repository. Using this method, a web designer specifies a font of known characteristics to be automatically downloaded by client devices and used to display onscreen text. A web font containing suitable musical symbols, used in conjunction with a client-side script solution such as jQuery Accidentals, could reliably provide proper symbols to a vast majority of devices. Unfortunately, at this time none of the 500+ Google Web Fonts contain musical symbols. At such time as suitable web fonts become available, this will be a solution preferable to Javascript-only.
Image replacement
CSS-based image replacement techniques maintain semantic integrity, but they do increase pageload time, increase bandwidth consumption, and require a certain degree of web-technology knowledge to set up. jQuery Accidentals can assist with implementing this method if desired.
An additional set of problems is inherent in an image-based solution. In many cases, musical symbol images would have to be custom-made to suit the individual situation: if one writer/designer uses black text, and another uses dark grey, then separate black and grey images are required. The images must also be sized properly for the text in question, or resized automatically at the risk of some degradation of quality. A server-side solution (perhaps built on something like ImageMagick) could automate some sizing and coloring tasks, but various font-related technologies such as hinting and smoothing on various devices further complicate the issue of making symbols look like they belong in the text.
A call to, um, accidental action
- If you’re a blogger or otherwise using a computer to write music-related content for on-screen use, use consistent, intelligent text representations of musical accidental symbols. If you can, upgrade the reading experience by converting these into actual symbols for capable computers, tablets, smartphones, etc. If you want, use the jQuery Accidentals script or WordPress plugin to do it. If you end up using my tools, I would be pleased to hear about it.
- If you’re into this sort of thing, please test out my code and submit issues and/or solutions on GitHub. Bug reports or suggestions on the WordPress plugin are also very much welcomed.