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):
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.
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.
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.