Most Popular This Week

Due to changing needs and technologies, the SMT Executive Board has decided to retire SMT Discuss (effective Nov. 9, 2021). Posts will be preserved for archival purposes, but new posts and replies are no longer permitted.

Theory symbols in online publications

If you're like me, you probably notice broken characters on websites with music theory texts all the time. Take, for example, this passage from the Grove Music Online entry on Notation:

The first symbol in this paragraph is supposed to be a circle. The character they've used is Unicode U+1D1C8 (Musical Symbol Tempus Perfectum Cum Prolatione Imperfecta). It does not render properly--in my browser at least, as the screenshot above shows--because the font that the Grove web designers have selected for entry body texts (Merriweather, is listed first in the relevant CSS declaration) does not include a glyph in the 1D1C8 slot. Now, there are alternatives that might have led to a more consistent user experience. For example, the editors could have employed one of the more commonly used glyphs such as U+25EF (Large Circle), but that would have led to other problems and they still wouldn't have the corresponding symbols for major prolation, let alone tempus imperfectum.

I do not mean to disparage the Grove, of course, this kind of situation is quite common. It happens all over the place because, it turns out, using inline music theory symbols is surprisingly difficult when it comes to presenting different readers (with different browsers installed on different comupters) a consistent experience. And the issue is not just with arcane medieval symbols: careted scale degree numbers, half-diminished chord symbols, figured bass numerals, and even sharps, flats, and naturals are all subject to the same inconsistencies

I am confronted with this matter now because I am preparing an open-access textbook for online publication. I would like to do as much as I can to standardize the reader experience and so I am wondering if anyone here has any insights on how best to approach this matter.

Some possibilities:

• Embedded graphics in-line with the surrounding text

• Using a custom font for symbol characters

• Repurposing common characters that look like music theory symbols, such as using ø (Latin small letter o with stroke) for half-diminished

• Writing out the symbols in longhand: ^5 for the fifth scale degree, viio6/5 for a fully-diminished seventh chord in first inversion, etc. (This sort of convention appears in older, typewritten manuscripts such as dissertations, but I've never seen any attempt to standardize the practice.)

Some concerns:

• Cross-browser compatibility

• Accessibility issues such as fallbacks for screen readers for visually impaired readers

Any information/suggestions/anecdotes on this would be greatly appreciated!

• The Unicode block of musical symbols is supported by only about half a dozen fonts – see https://en.wikipedia.org/wiki/Musical_Symbols_(Unicode_block). It is therefore hopeless to expect that many of us could read these glyphs in any device that does not embed the fonts. The same is true, of course, for custom (non Unicode) musical fonts.

The only viable solutions appear therefore to be either to use a format that allows embedding the fonts (PDF, for instance), or to embed in-line graphics.

Some PDF virtual printers allow embedding only the glyphs used, which reduces the weigth of the result. This is a much better solution than embedding graphics – which however is the only solution for documents in HTML.

• MTO uses MathXML for some symbols, like time signatures and figured bass. Examples:

I64 = <nobr>I$<msubsup><mtext></mtext><mn>4</mn><mn>6</mn></msubsup>$</nobr>

3/4 = <nobr>$<msubsup><mtext></mtext><mn>4</mn><mn>3</mn></msubsup>$</nobr>

In other cases, we have to use inline graphics, because of the unreliability of fonts in the browser. Also, the Unicode symbols for flats and sharps look pretty bad (like Comic Sans).

Brent Yorgason

SMT Discuss Manager
smtdiscuss@societymusictheory.org
Somewhere in the Universe
• Thanks for the replies.

Nicolas, yes, you're right. The Unicode block of musical symbols is limited to the point of being worthless. PDF is a great option, but my current project will be published primarily in Pressbooks, meaning that I need to find a reliable HTML/CSS solution.

Brent, thanks for your insight. MathML is useful but the lack of support in Chrome is a dealbreaker, I'm afraid! You mentioned "the unreliability of fonts in the browser." Could you clarify what you mean? Has MTO had issues with embedding (custom) fonts?

• You can use MathML (and TeX) in chrome via MathJax. Just include a statement like this in the head tag:

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>;

<script>

MathJax.Hub.Config({

TeX: { noErrors: { disabled: true } }

});

</script>

We do use some custom fonts, but they seem to render slightly differently from browser to browser. Also, I'm not aware of a good music font that is free to embed on the web ...

SMT Discuss Manager
smtdiscuss@societymusictheory.org
Somewhere in the Universe
• Following up on my previous post, here is the solution I came up with for my project (an open-source/open-access theory textbook). I liked Brent's suggestion of using MathML for formatting numbers, but my book will be published in Pressbooks and, as far as I can tell, I won't be able to use any javascript solutions. Instead, I will be using custom fonts and CSS.

Brent, you mentioned that you were "not aware of a good music font that is free to embed on the web." Do you know about SMuFL's Bravura? According to the website, it "The Bravura font family is made available under the SIL Open Font License, which means that the fonts are free to download, use, embed, redistribute with other software (including commercial sofware) or to create derivative versions." Using Bravura/Bravura Text as a source, I created two custom fonts, one for miscellaneous symbols and another for figured bass and time signatures. I embed these fonts using @font-face in my CSS.

For the figured bass and time signature font, I remapped the Bravura figured bass characters to the normal Arabic numeral Unicode positions. Doing this allows screen readers to interpret the symbols as numbers and facilitates users copying and pasting the text. The figured bass numerals are individually wrapped in <span class="num"></span> tags which are then grouped in a larger set with <span class="figbass"></span>. These are then styled in the CSS using "display: inline-flex" to stack the individual numbers:

.figbass {

display: inline-flex;

flex-direction: column;

position: relative;

}

For extra clarification, I also put hidden slashes between the stacked levels of the figures. These slashes are hidden with the technique recommended by HTML5 Boilerplate.

The code, then, for a supertonic seventh chord in first inversion would look like this:

ii<span class="figbass"><span class="num">6</span><span class="visuallyhidden">/</span><span class="num">5</span></span> chord

This results in the following (screenshot):

If a user were to copy and paste this text (or if it were read by a screen reader), they would get: "ii6/5 chord"

Accidentals and other symbols are handled similarly. In this case, the symbols are kept in their assigned positions in the Bravura Text font (in the Unicode private use area, starting at U+E000) and are called by their position number in the HTML. In cases where embedded fonts are not available or working for a user, I've also included a hidden fallback. In most cases, these are the most visually similar ASCII characters. A double sharp, for example, resembles a lowercase "x," so there is a hidden "x" next to every visible double sharp. For practical layout reasons--and to avoid repetitive characters--the actual symbols are rendered using a CSS pseudo class. Unlike the ASCII fallbacks, these will be visible in the browser and will not be copy/paste-able.

For example, to write "B-flat major" with a symbol instead of "-flat," I use the following code:

B<span class="theorysymbol accidentalFlat"></span><span class="visuallyhidden">b</span> major

Here's the CSS that styles it:

.theorysymbol {

font-family: BravuraText;

}

.accidentalFlat::before {

font-size: 1.5em;

position: relative;

top: 0.25em;

display: inline-block;

line-height: 0.5em;

content: "\e260";

}

And here's how it shows up:

Finally, if the user copies and pastes the text they will get: "Bb major" (with a lowercase "b").

Scale-degree numbers are accomplished by customizing Times New Roman, putting a circumflex above each of the normal Arabic numerals.

My custom fonts are currently residing at GitHub: https://github.com/andremount/musictheorytutorial

I wrote up a demo fiddle with more examples here.