Theory symbols in online publications

Comments

• 5 Comments sorted by Votes Date Added
• Nicolas Meeùs

  July 2018 @NicolasSend Nicolas a private message.Vote Up0Vote Down

  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.

   

   
• SMT Discuss

  July 2018 @smtdiscussSend smtdiscuss a private message.Vote Up0Vote Down

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

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

  3/4 = <nobr><math><msubsup><mtext></mtext><mn>4</mn><mn>3</mn></msubsup></math></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
• Andre Mount

  July 2018 @amountSend amount a private message.Vote Up0Vote Down

  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?
• SMT Discuss

  July 2018 @smtdiscussSend smtdiscuss a private message.Vote Up0Vote Down

  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
• Andre Mount

  July 2018 edited July 2018 @amountSend amount a private message.Vote Up0Vote Down

  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.