Music Notation as Text on a Webpage

A Printable Text Notation

As discussed previously in this blog, I have been experimenting with modifications of traditional music notation to allow a playable score to be created with a standard text editor, and displayed on and printed from a webpage. This present post illustrates the creation of a webpage using CSS styles to format text into a kind of score that will display and print from a browser.

In order to represent a musical score with text characters, I have created a new notation. The key ideas of my notation are to use a verically oriented staff and to use a custom font for the noteheads. Besides that, I have adopted some ideas to make the notation more closely match the actual structure of the piano keyboard and of music. But the basic formatting ideas could be adapted to something more closely resembling traditional notation.

The vertical orientation of the staff allows all notes sounding at them same instant to be represented and displayed as a single line of text. This greatly simplifies the organization of the “score” text file. Of course, the final printed output page can be rotated if you want to view the staff in the traditonal horizontal orientation.

The staff I use in this example is a “chromatic” staff that has 12 positions per octave;
lines represent the black keys of the piano,
spaces between represent the white keys.
Thus, the staff has the same geometry as the actual piano keyboard. There is a distinct staff position for each key on the keyboard, so sharps and flats are not necessary to indicate which key to play.

I created a custom font for the staff characters and noteheads.
The characters ” [ ] | ” represent the staff lines and spaces. An “empty” staff is typed as appropriate staff-line symbols separated by commas.
The font displays certain letters as noteheads.
To add a note to the staff, replace a comma with a letter: replace the comma before the staff character representing the staff position on which the note occurs with the letter representing the notehead shape for the desired note.

The notehead system I use here is based on the Tonnetz, a method of arranging the tones of the chromatic scale to emphasize their harmonic relationships, particularly the intervals of major and minor thirds and perfect fifths.
The noteheads themselves are a form of “shape-notes”, with a different notehead symbol for each of the twelve tones of the chromatic scale. Specifically, I use a triangle shape in four orientations and three “colors”.
Capital letters ” C D E F G A B ” represent the white key notes (naturals), small letters ” g a b d e ” represent the black key notes (flats) and ” c f ” duplicate two of the black keys, interpreted as “sharps”. (I have also created a similar font that interprets the letters ” d r m f s l t ” (and five more) for encoding a piece in solfeggio (do re mi fa so la ti). And I’ve also constructed a font that uses traditional “round notes” in solid and hollow forms with various up and down stems for traditional notation. So the general system is adaptable to a variety of traditional and experimental notations!)

In my StaffTonnetz system, I don’t use stems, flags, head color, etc. for timing, but instead represent timing by time-proportional spacing of the notes on the staff. The notehead occurs on the starting count, and the tone continues until the next notehead for that part appears. There are also rest and tie symbols for the cases when a tone ends sooner or later than the next note in its voice.

For further details of this notation system, refer to my earlier post: Tonnetz-based 4×3 Notation.
For an example using these same techniques for a more traditional notation, using round noteheads with stems, see the post: Using Custom Fonts to Print Simple Sheet Music with Common Software

The following example illustrates the raw text input for all twelve staff positons and notes:

,|,[,|,[,|,|,],|,],|,],|,|,
C|,[D|,[E|,|g],|a],|b],|C|,
,|d[,|e[,|F|,]G|,]A|,]B|,|d
,|,[,|,[,|,|,],|,],|,],|,|,

Following is the same text displayed using the StaffTonnetz font:

,|,[,|,[,|,|,],|,],|,],|,|,
C|,[D|,[E|,|g],|a],|b],|C|,
,|d[,|e[,|F|,]G|,]A|,]B|,|d
,|,[,|,[,|,|,],|,],|,],|,|,

NOTE: to see the above text displayed correctly, you must first download and install the StaffTonnetz1b font on your computer. See instructions at the end of this post.

Formatting the Webpage

The following discussion assumes you are familiar with the basic concepts of webpages, xhtml, and css.

To format the code as “music” in xhtml, first of all, up in the header of my webpage, I define a CSS paragraph style st-score:


<style>
  p.st-score {
	font-family: StaffTonnetz1b, "Courier New", monospace ;
	font-size: 150%;
	color: black ;
	line-height 1.0;
	margin-top: 	0px;
	margin-bottom:	0px;
	border-top: thin solid black;
	}
</style>


In the style definition, I include my custom font, as well as a monospace font for other ordinary unmodified characters.
(If the custom font is not installed, the score will display at text in the monospace font.)
I override the margins to eliminate extra space between text lines so my “staff line” symbols will meet to form a “solid” line.
I also include a border at the top for a “measure bar,” so a paragraph of text will correspond to a measure of music.

Then, in the body of the page, I add the style tag to the paragraphs of music text:


<p class="st-score">
,|,[,|,[,|,|,],|,],|,],|,|, </br>
C|,[D|,[E|,|g],|a],|b],|C|, </br>
,|d[,|e[,|F|,]G|,]A|,]B|,|d </br>
,|,[,|,[,|,|,],|,],|,],|,|, </br>
</p>

The following is a more musical example, this one based on the theme from Pachelbel’s Canon in D.

First, the score text as it would be coded in html, a paragraph for each measure:


<p class="st-score"> 
,|,[,|,[,|,|,],|,],|,],|,|,[D|,[,|,|,],|,]A|,],|,|,[D|,[,|,|f],|,],|,],|,|, </br> 
,|,[,|,[,|,|,],|,]A|,],|,|,[,|,[,|,|,],|,]A|,],|,|c[,|,[E|,|,],|,],|,],|,|, </br> 
,|,[,|,[,|,|,],|,],|,]B|,|,[,|,[,|,|f],|,],|,]B|,|,[D|,[,|,|,],|,],|,],|,|, </br> 
,|,[,|,[,|,|f],|,],|,],|,|,[,|,[,|,|f],|,]A|,],|,|c[,|,[,|,|,],|,],|,],|,|, </br> 
</p>
<p class="st-score"> 
,|,[,|,[,|,|,]G|,],|,],|,|,[D|,[,|,|,]G|,],|,]B|,|,[,|,[,|,|,],|,],|,],|,|, </br> 
,|,[D|,[,|,|,],|,],|,],|,|,[D|,[,|,|f],|,]A|,],|,|,[,|,[,|,|,],|,],|,],|,|, </br> 
,|,[,|,[,|,|,]G|,],|,],|,|,[D|,[,|,|,]G|,],|,]B|,|,[,|,[,|,|,],|,],|,],|,|, </br> 
,|,[,|,[,|,|,],|,]A|,],|,|,[,|,[E|,|,],|,]A|,],|,|c[,|,[,|,|,],|,],|,],|,|, </br> 
</p>
<p class="st-score"> 
,|,[,|,[,|,|,],|,],|,],|,|,[,|,[,|,|,],|,],|,],|,|,[,|,[,|,|,],|,],|,],|,|, </br>
</p> 

And now, the same text as it would be formatted using my custom font:

*** NOTE: The extra space between measures and lines appears to be an artifact of the blog software. It does not appear in a stand-alone webpage. ***

,|,[,|,[,|,|,],|,],|,],|,|,[D|,[,|,|,],|,]A|,],|,|,[D|,[,|,|f],|,],|,],|,|,
,|,[,|,[,|,|,],|,]A|,],|,|,[,|,[,|,|,],|,]A|,],|,|c[,|,[E|,|,],|,],|,],|,|,
,|,[,|,[,|,|,],|,],|,]B|,|,[,|,[,|,|f],|,],|,]B|,|,[D|,[,|,|,],|,],|,],|,|,
,|,[,|,[,|,|f],|,],|,],|,|,[,|,[,|,|f],|,]A|,],|,|c[,|,[,|,|,],|,],|,],|,|,

,|,[,|,[,|,|,]G|,],|,],|,|,[D|,[,|,|,]G|,],|,]B|,|,[,|,[,|,|,],|,],|,],|,|,
,|,[D|,[,|,|,],|,],|,],|,|,[D|,[,|,|f],|,]A|,],|,|,[,|,[,|,|,],|,],|,],|,|,
,|,[,|,[,|,|,]G|,],|,],|,|,[D|,[,|,|,]G|,],|,]B|,|,[,|,[,|,|,],|,],|,],|,|,
,|,[,|,[,|,|,],|,]A|,],|,|,[,|,[E|,|,],|,]A|,],|,|c[,|,[,|,|,],|,],|,],|,|,

,|,[,|,[,|,|,],|,],|,],|,|,[,|,[,|,|,],|,],|,],|,|,[,|,[,|,|,],|,],|,],|,|,

The StaffTonnetz1b Font

I created the custom notehead font using a free online system at fontstruct.com. To display these examples as intended, you will need to download and install my font StaffTonnetz1b.ttf from that site. I’m still exploring ways to embed custom fonts in the page itself–I plan to cover that in an upcoming post.

Note that the actual character size of this font at a given pitch may be different that the character size of other fonts in your document. This seems to be a limitation of FontStruct. I am investigating other font-creations systems for future versions.

Font Download instructions (as of Nov 2012)

  • go to fontstruct.com;
  • click the Everything tab;
  • search for StaffTonnetz1b;
  • click on the StaffNonnetz1b link;
  • click download;
  • for font install instructions, see their Support > FAQ > Technical Questions > How do I install fonts made with FontStuct;

If you are so inclined, you may explore other fonts I have posted to the FontStruct site, or use their system to create your own font to represent an alternative notation.

About DrTechDaddy

Dr Tech Daddy is a retired computer science professor with additional interests in music, robotics, STEM education, model railroading, mathematical physics, congenital heart disease and heart transplant, and Christian theology.
This entry was posted in Music. Bookmark the permalink.

2 Responses to Music Notation as Text on a Webpage

  1. DrTechDaddy says:

    “If a tree falls in a forest, but no one hears it, did it make a sound?”

    I would define “music” as a structured pattern of sounds.

    We struggle to develop a notation whose graphical patterns are “isomorphic” to the actual sound patterns. Typically this means displacement in one axis proportional to the log of frequency, and displacement in an orthogonal axis proportional to time or perhaps approaching log time.

    But does the composer have to “hear” the sounds before s/he writes the music? Presumably s/he “hears” it in her/his head.
    So if the composer can “imagine” the sound before committing it to instrument or paper,
    couldn’t the “audience” imagine the sound from a score?
    I’ve not yet able to “hear” a piece from notation, but I’m told experienced musicians can.
    But what about those who cannot “hear” at all? Can they experience music?
    Mark Medoff, in “Children of a Lesser God”, [http://en.wikipedia.org/wiki/Children_of_a_Lesser_God], explores this theme in the context of teaching music to the deaf. My brother taught guitar to hearing impaired campers. It seems in both cases, the student perceives “sound” through vibrations sensed by the body by not through the ears, at least not in the normal way.

    Your Woolrich quote offers an alternative perspective on notation, one that is probably more representative of jazz.
    The idea is that the “composition” is not so much an exact pattern of notes to be played as a “theme” or “envelope” within which to improvise. In that sense, a “performance” becomes more like a sports contest, where the score is the “playbook”, in which the general goal and pattern is described in detail, but the execution will vary depending on the “moves” of the other players and the judgment of the performer.

    All that notwithstanding, I believe the music comes first, a priori;
    the notation is an imperfect attempt to archive it, whatever “it” is.

  2. Jishnu says:

    Last week, our discussion reoevvld around one of the central questions of our course: what is notation? However, the readings provoked me towards ruminating on another question. Namely, what is music? I wish that we could gather composers engaged in crafting graphic scores and pose them this question in a single room, because I think that their definition of music would be influenced by the manner in which they notate it.In his article, “Sound, Code, and Image,” Walters offers several tantalizing quotes from various composers who have participated in graphic score notation. Howard Skempton believes that graphic scores say much more about how music works than do scores written by Beethoven, for example (30). Indeed, Skempton argues that “a score has a life of its own” (30). What can we say about Skempton’s understanding of music from these words? Composer John Woolrich also offers an interesting statement: “Notation is to do with hints rather than absolute instruction. You are trying to convey the big image” (28). What exactly is “the big image”? And is it significant that he chooses the word “image” rather than “sound”?One of the graces of graphic scores is that they allow for the interpretation and production of the piece they represent to be dependent on the individual making the music. The meaning of music becomes flexible because it depends on how it is created and by whom. As Walters writes, “the visual aesthetic of this work evokes an imagined music in the observer’s mind, an invisible music more ascetic, beautiful, and formally Modern than any earthly ensemble could produce with real instruments” (26-7). In this portrayal of music, music does not have to be something which is physically sounded, but rather felt internally. It can enter the human body through the eyes rather than the ears. If only because it is interesting to ponder about, I am struggling to give a definition to music when it can be “invisible” and soundless, and wonder if anyone else has thoughts about the definition of music to graphic score composers/notators/readers.

Leave a Reply