I'm very excited to see the <scribe-music> custom element too! I had an intern work on wrapping VexFlow with web components a few years back, but the summer ended before everything was finished, and it hasn't been maintained: https://github.com/PolymerLabs/vexflow-elements/blob/web-com...
A maintained and easy-to-use library could do a lot of good for music notation on the web.
I am concerned that there are lots of edge cases, essentially ligatures for engraving, that might not compose so well. A triad, or the author's called-out relative head spacing of 8th and 16th notes, or letting the program align different parts across different grids - would this also work well? Lilypond has proven to be exceptionally flexible for these kinds of complexities.
For those Asciidoc freaks among you, Lilypond is fairly easy to get running in your Asciidoc toolchain of choice. I use the DocBook PDF pipeline, and the lilypond output is quite nice looking. It's awfully TeX-like.
Some CSS notation is wholly new to me:
> .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }
I’ve never seen CSS selectors with square brackets before. Apparently it’s an attribute selector: https://css-tricks.com/attribute-selectors/
Other than the clever solution of using CSS, why would you do this? One can already do scalable notation in the browser with other tools (Check out Adrian Holovaty's Soundslice or Sibelius Cloud Publishing).
It happens that I work for Avid as a designer for Sibelius, the leading music notation program in the world. I also run the Music Engraving Tips Facebook group if you're interested in learning more.
Can either of those be incorporated in one's own software, without paying somebody? (I don't see a license for this project, but I'm guessing it will be a lot more permissive than whatever that Sibelius thing has.)
Also, the examples for this project are simple leadsheets. I think your average jazz musician is probably a lot less fussy about notation than a professional music engraver would be.
I've spent more than 10 years now building Soundslice, which does web-based sheet music rendering. I believe we were the first to do "responsive" web notation (that part of the site launched in 2014).
Here's a tech talk I gave with a lot of details: https://www.youtube.com/watch?v=XH5EtQge_Bg
Here's an example of responsive Soundslice notation: https://www.soundslice.com/slices/zzNlc/ (in the settings, set the stave width to maximum to get "Fit to screen" for the true responsive effect)
We've got a whole suite of tools built around this, including an excellent web-based editor, rich practice functionality and a relatively new scanning feature (extracting the musical data from a photo or PDF).
I agree with other commenters here that this CSS Grid approach could be handy for lightweight projects but it likely isn't up to snuff for the incredibly subtle and complex world of full scores. With that said, I just want to stress again that this is super cool and I'm glad it exists!
It's of the same importance to a composer or musician that the notation is legible and beautiful, as it is to a graphic designer or reader that type and layout are legible and beautiful.
If the GP is interested in the topic, there are great videos by Tantacrul on his experience redesigning the notation font for MuseScore [0] and his overview of MuseScore 4.0's engraving improvements [1] - in particular this second video, concerning mainly layout, shows just how far this CSS approach would have to go to have a truly legible, reflowable layout in the face of beams/slurs/ties.
(I don't want to take away from anyone on the Sibelius team, they're likely even better experts on the subject than Tantacrul is, but as far as I know, they didn't make long-form Youtube videos about the topic! He also likely got the job of leading the MuseScore redesign thanks to his previous videos that critiqued and reimagined the interfaces of music composition software... including older versions of Sibelius [2] and MuseScore [3])
[0] https://www.youtube.com/watch?v=XGo4PJd1lng
[1] https://www.youtube.com/watch?v=Qct6LKbneKQ&t=2004
If you’d like an intro into grid:
I'm not entirely convinced of making this responsive, in the particular area of Jazz leadsheets. I've found myself preferring line breaks at regular intervals (mostly every 4 bars, with exceptions for pickups and alternate endings), rather than trying to cram as many bars as possible onto each line.
My daughter absolutely loves my Little Tikes piano from the 1980s but all the sheet music I find online, even for the newer Little Tikes pianos, have different colors associated with notes. I have built up a small library of simple MIDIs, and my intent is to have some preset toy pianos to choose from or let the end user specify colors-to-notes manually.
The only problem is that MuseScore community took years to fix a missing measurement in MusicXML structure, I had to patch the code on my own.
It can also print note names inside of each head.
https://youtu.be/Qct6LKbneKQ?t=2005
the whole video is worth watching as well (and there are several videos on the channel focusing on the UI of notation apps, worth watching for anyone who does UI but isn't interested in music production as well)
OP doesn't show any multi-stave (i.e. "full score") example at all -- if the system could do that, it would likely have been part of the demo.
This is extremely cool technology, but it's clear that more polish would be needed before it's ready for general use.
Or render each measure to a separate .png file and just <img> for each measure. It will wrap and re-flow, you just have to deal with the clefs separately.
Don't get me wrong, this is amazing work. It's likely enough for any kind of "chord and basic melody to help you remember enough to get through the gig". But for actual scoring, lilypond & friends are still the tool of choice. (I wish it was easier. I have spent way too much time trying to convince it to do the things I want :)
I'm hoping it'll get there, though.
They are also extremely useful when it comes to adblocking. Without their partial matching capabilities it'd have been almost impossible to target ad-containing elements in most of these days' js and framework-ladden websites.
I am currently learning some music on the violin, and this looks like something that will help me out.