Add support for musical notation typeface(s)

A network manager writes:

We are working on publishing a music theory text, and to have sharps, flats, etc., show up, the author has a font hosted externally that is imported into the CSS. I think before we migrated to PressbooksEDU we installed the fonts on the PrinceXML server, but now we have to use the external links. I’ve tried listing the font urls both using @import & @font-face, but neither allows the correct symbols to appear in the PDF export (they just show up as “?”)

We are using McLuhan theme, and there is 1 typeface that is needed. BravuraText (This is a standard music font that is openly available--it might come in handy for other music texts)

[x] They would like us to add general support for BravuraText (an openly licensed music font): https://github.com/steinbergmedia/bravura

This particular author would also like to use BravuraTextFiguredBass: https://github.com/andremount/musictheorytutorial

Our preferred method would be to add support for 'Musical Notation' as a script/language and make the BravuraText available when it has been selected in a book.

More details from Andre:

the fonts used are the ones listed here:

https://github.com/andremount/musictheorytutorial

There are a variety of reasons I need to import these fonts. In some cases, the imported font is just to get a clean looking circumflex above a digit. In most cases, though, they're being used throughout the book inside CSS pseudo elements to replace ASCII characters.

Here's an example of what I'm doing:

Bb major

I want that to show up like:

The HTML for this would be:

Bb major

The lowercase "b" in "Bb major" is preceded by an empty element which is styled to include a ::before pseudo element. The content of the pseudo element is the character code for the flat symbol in the imported font. Here's the CSS:

.theorysymbol {
  font-family: BravuraText;
}

.accidentalFlat::before {
  font-size: 2em;
  position: relative;
  top: 0.25em;
  padding-left: 0.02em;
  padding-right: 0.01em;
  display: inline-block;
  line-height: 0.5em;
  content: "\E260";
}

The "b" is wrapped in tags and hidden by the CSS:

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  left: 614px;
}

There are several reasons for doing it this way:

Using "b" instead of a flat symbol, though clear enough to most readers, looks unprofessional.
The "b" should be present, however, for accessibility since screen readers won't recognize the custom characters
The hidden "b" also needs to be there for users to accurately copy and paste selections from the text since pseudo elements are excluded from these actions

pressbooks / pressbooks-book

Add support for musical notation typeface(s) #706