Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibilities. Let us fix this pressing problem.

The Scribe prototype

Some years ago I prototyped a music renderer I called Scribe that outputs SVG from JSON. The original goal was to produce a responsive music renderer. It was a good demo, but to progress I was going to have to write a complex multi-pass layout engine, and, well, other things got in the way.

Shortly after making that I was busy adopting Grid into our projects at Cruncher when something about it struck me as familiar, and I wondered if it might not be an answer to some of the layout problems I had been tackling in Scribe.

The class .stave

The musical staff is grid-like. Pitch is plotted up the vertical axis and time runs left to right along the horizontal axis. I am going to define these two axes in two seperate classes. The vertical axis, defining grid rows, will be called .stave. We'll get to the time axis in a bit.

A .stave has fixed-size grid rows named with standard pitch names, and a background image that draws the staff. So for a treble clef stave the row map might look like this:

    .stave {
        display: grid;
        row-gap: 0;
        grid-template-rows:
            [A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
            [D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
            [G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
            [C4] 0.25em ;

        background-image:    url('/path/to/stave.svg');
        background-repeat:   no-repeat;
        background-size:     100% 2.25em;
        background-position: 0 50%;
    }
    

Which, applied to a <div> gives us:

Ok. Not much to see, but on inspecting it we do see that each line and each space on the stave now has its own pitch-named grid line to identify each row:

Placing pitches up the stave

Any given row on a stave may contain any of several pitches. The pitches G♭, G and G♯ must all sit on the G stave line, for example.

To place DOM elements that represent those pitches in their correct rows I am going to put pitch names in data-pitch attributes and use CSS to map data-pitch values to stave rows.

    .stave > [data-pitch^="G"][data-pitch$="4"] { grid-row-start: G4; }
    

This rule captures pitches that start with 'G' and end with '4', so it assigns pitches 'G♭4', 'G4' and 'G♯4' (and double flat 'G𝄫4' and double sharp 'G𝄪4') to the G4 row. That does need to be done for every stave row:

    .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }
    .stave > [data-pitch^="G"][data-pitch$="5"] { grid-row-start: G5; }
    .stave > [data-pitch^="F"][data-pitch$="5"] { grid-row-start: F5; }
    .stave > [data-pitch^="E"][data-pitch$="5"] { grid-row-start: E5; }
    .stave > [data-pitch^="D"][data-pitch$="5"] { grid-row-start: D5; }

    ...

    .stave > [data-pitch^="D"][data-pitch$="4"] { grid-row-start: D4; }
    .stave > [data-pitch^="C"][data-pitch$="4"] { grid-row-start: C4; }
    

That should give us enough to begin placing symbols on a stave! I have a bunch of SVG symbols that were prepared for the Scribe prototype, so let's try placing a couple on a stave:

    <div class="stave">
        <svg data-pitch="G4" class="head">
            <use href="#head[2]"></use>
        </svg>
        <svg data-pitch="E5" class="head">
            <use href="#head[2]"></use>
        </svg>
    </div>
    

That looks promising. Next, time.

The class .bar and its beats

Rhythm is perhaps a little trickier to handle. There is not one immediately obvious smallest rhythmic division to adopt that will support all kinds of rhythms. A judgement call must be made about what minimum note lengths and what cross-rhythms to support inside a grid.

A 24-column-per-beat approach supports beat divisions to evenly lay out eighth notes (12 columns), sixteenth notes (6 columns) 32nd notes (3 columns) as well as triplet values of those notes. It's a good starting point.

Here is a 4 beat bar defined as 4 × 24 = 96 grid columns, plus a column at the beginning and one at the end:

    .bar {
        column-gap: 0.03125em;
        grid-template-columns:
            [bar-begin]
            max-content
            repeat(96, minmax(max-content, auto))
            max-content
            [bar-end];
    }
    

Add a couple of bar lines as ::before and ::after content, and put a clef symbol in there centred on the stave with data-pitch="B4", and we get:

    <div class="stave bar">
        <svg data-pitch="B4" class="treble-clef">
            <use href="#treble-clef"></use>
        </svg>
    </div>
    

Inspect that and we see that the clef has dropped into the first column, and there are 96 zero-width columns, 24 per beat, each seperated by a small column-gap:

Placing symbols at beats

This time I am going to use data-beat attributes to assign elements a beat, and CSS rules to map beats to grid columns. The CSS map looks like this, with a rule for each 1/24th of a beat:

    .bar > [data-beat^="1"]    { grid-column-start: 2; }
    .bar > [data-beat^="1.04"] { grid-column-start: 3; }
    .bar > [data-beat^="1.08"] { grid-column-start: 4; }
    .bar > [data-beat^="1.12"] { grid-column-start: 5; }
    .bar > [data-beat^="1.16"] { grid-column-start: 6; }
    .bar > [data-beat^="1.20"] { grid-column-start: 7; }
    .bar > [data-beat^="1.25"] { grid-column-start: 8; }

    ...

    .bar > [data-beat^="4.95"] { grid-column-start: 97; }
    

The attribute ^= starts-with selector makes the rule error-tolerant. At some point, inevitably, unrounded or floating point numbers will be rendered into data-beat. Two of their decimal places is enough to identify a 1/24th-of-a-beat grid column.

Put that together with our stave class and we are able to position symbols by beat and pitch by setting data-beat to a beat between 1 and 5, and data-pitch to a note name. As we do, the beat columns containing those symbols grow to accommodate them:

    <div class="stave bar">
        <svg class="clef" data-pitch="B4">…</svg>
        <svg class="flat" data-beat="1" data-pitch="Bb4">…</svg>
        <svg class="head" data-beat="1" data-pitch="Bb4">…</svg>
        <svg class="head" data-beat="2" data-pitch="D4">…</svg>
        <svg class="head" data-beat="3" data-pitch="G5">…</svg>
        <svg class="rest" data-beat="4" data-pitch="B4">…</svg>
    </div>
    

Ooo. Stems?

Yup. Tails?

Yup. The tail spacing can be improved (which should be achievable with margins) – but the positioning works.

Fluid and responsive notation

Stick a whole bunch of bars like these together in a flexbox container that wraps and we start to see responsive music:

    <figure class="flex">
        <div class="treble-stave stave bar">…</div>
        <div class="treble-stave stave bar">…</div>
        <div class="treble-stave stave bar">…</div>
        …
    </figure>
    

There are clearly a bunch of things missing from this, but this is a great base to start from. It already wraps more gracefully than I have yet seen an online music renderer do.

The space between the notes

Ignoring these beams for a moment, notice that note heads that occur closer in time to one another are rendered slightly closer together:

It's a subtle, deliberate effect created by the small column-gap, which serves as a sort of time 'ether' into which symbol elements slot. Columns themselves are zero width unless there is a note head in them, but there are more column-gaps – 24 per beat – between events that are further apart in beats, and so more distance.

Constant spacing can be controlled by adjusting margins on the symbols. To get a more constant spacing here we would reduce the column-gap while increasing the margin of note heads:

But ugh, that looks bad, because the head spacings give the reader no clue as to how rapid the rhythm is. The point is, CSS is giving us some nice control over the metrics. And the aim now is to tweak those metrics for readability.

Clefs and time signatures

You may be wondering why I employed seperate classes for vertical and horizontal spacing, why not just one? Seperating the axes means that one can be swapped out without the other. Take the melody:

To display this same melody on a bass clef, the stave class can be swapped out for a bass-stave class that maps the same data-pitch attributes to bass stave lines:

    <div class="bass-stave bar">...</div>
    

Or, with CSS that mapped data-duration="5" to 120 grid-template-columns on .bar, the same stave could be given a time signature of 5/4:

    <div class="bass-stave bar" data-duration="5">...</div>
    

Clearly I am glossing over a few details. Not everything is as simple as a class change, and a few stems and ledger lines need repositioned.

Here's a stave class that remaps pitches entirely. General MIDI places drum and percussion voices on a bunch of notes in the bottom octaves of a keyboard, but those notes are not related to where drums are printed on a stave. In CSS a drums-stave class can be defined that maps those pitches to their correct rows:

    <div class="drums-stave bar" data-duration="4">...</div>
    

    <div class="percussion-stave bar" data-duration="4">...</div>
    

That's some very readable drum notation. I'm pretty pleased with that.

Chords and lyrics

CSS Grid allows us to align other symbols inside the notation grid too. Chords and lyrics, dynamics and so on can be lined up with, and span, timed events:

But what about those beams?

Beams, chords and some of the longer rests are made to span columns by mapping their data-duration attributes to grid-column-end span values:

    .stave > [data-duration="0.25"] { grid-column-end: span 6; }
    .stave > [data-duration="0.5"]  { grid-column-end: span 12; }
    .stave > [data-duration="0.75"] { grid-column-end: span 18; }
    .stave > [data-duration="1"]    { grid-column-end: span 24; }
    .stave > [data-duration="1.25"] { grid-column-end: span 30; }
    ...
    

Simple as, bru.

Sizing

Lastly, the whole system is sized in em, so to scale it we simply change the font-size:

Limits of Flex and Grid

Is it the perfect system? Honestly, I'm quietly gobsmacked that it works so well, but if we are looking for caveats… 1. CSS cannot automatically position a new clef/key signature at the beginning of each wrapped line, or 2. tie a head to a new head on a new line. And 3., angled beams are a whole story onto themselves; 1/16th and 1/32nd note beams are hard to align because we cannot know precisely where their stems are until after the Grid has laid them out:

So it's going to need a bit of tidy-up JavaScript to finish the job completely, but CSS shoulders the bulk of the layout work here, and that means far less layout work to do in JavaScript.

Let me know what you think

If you like this CSS system or this blog post, or if you can see how to make improvements, please do let me know. I'm on Bluesky @stephen.band, Mastodon @stephband@front-end.social, and Twitter (still, just about) @stephband. Or join me in making this in the Scribe repo...

I have written an interpreter around this new CSS system and wrapped that up in the element <scribe-music>. It's nowhere near production-ready, but as it is already capable of rendering a responsive lead sheet and notating drums I think it's interesting and useful.

Whazzitdo?

The <scribe-music> element renders music notation from data found in it's content:

        <scribe-music type="sequence">
            0 chord D maj 4
            0 F#5 0.2 4
            0 A4  0.2 4
            0 D4  0.2 4
        </scribe-music>
    

Or from a file fetched by its src attribute, such as this JSON:

        <scribe-music
            clef="drums"
            type="application/json"
            src="/static/blog/printing-music/data/caravan.json">
        </scribe-music>
    

Or from a JS object set on the element's .data property.

There's some basic documentation about all that in the README.

Try it out

You can try the current development build by importing these files in a web page:

        <link rel="stylesheet" href="https://stephen.band/scribe/scribe-music/module.css" />
        <script type="module" src="https://stephen.band/scribe/scribe-music/module.js"></script>
    

As I said, it's in development. Asides from some immediate improvements I can make to Scribe 0.3, like tuning the autospeller, fixing the 1/16th-note beams and detecting and displaying tuplets, some longer-term features I would like to investigate are:

• Support for SMuFL fonts – changing the font used for notation symbols. So far I have not been able to display their extended character sets reliably cross-browser.
• Support for nested sequences – enabling multi-part tunes.
• Split-stave rendering – placing multiple parts on one stave. The mechanics for this are already half in place – the drums stave and piano stave currently auto-split by pitch.
• Multi-stave rendering – placing multiple parts on multiple, aligned, staves.

I leave you with a transposable lead sheet for Dolphin Dance, rendered by <scribe-music>: