Impressive hack — kudos from a fellow sheet music software developer!
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 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!
navbaker 24 hours ago [-]
Oh wow, small world! I use soundslice nearly everyday as an end user of a few music education sites!!!
heroprotagonist 1 days ago [-]
Could you perhaps elaborate about what makes it 'not up to snuff', given how much you used it as a chance to promote your own stuff?
asddubs 1 days ago [-]
Maybe the segment on engraving of Tantacruls Musescore 4 video is a good explanation of some of the things involved:
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)
FelipeCortez 1 days ago [-]
Take a look at the visual tests for VexFlow to get an idea of the complexity music engraving can have: https://www.vexflow.com/tests/
colonwqbang 22 hours ago [-]
Perhaps you noticed that the beams aren't really attached to the notes they are supposed to be beaming together.
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.
20 hours ago [-]
2024throwaway 1 days ago [-]
Such unnecessary aggression towards someone who built something cool and useful.
sojournerc 15 hours ago [-]
It was constructive criticism from someone with expertise
2024throwaway 15 hours ago [-]
It was neither.
sojournerc 14 hours ago [-]
They said they've spent 10 years developing scoring software... Wtf
2024throwaway 14 hours ago [-]
Those are two separate usernames. I was defending the person who has worked on it for 10 years.
vintagedave 2 days ago [-]
This is extraordinary. While JavaScript is needed now, I’d encourage the author to see what needs to be added to CSS to allow a CSS-only solution, and promote it in the CSS community. For example, repeating the clef when wrapping is akin to a sticky table header, and would have more applications than only music.
These css selectors are actually fairly common I would say. They were used for querySelector a lot before Angular, React, etc. In addition in current times they are frequently used to grab elements by their data-testid either for jest tests or e2e tests.
wizzwizz4 2 days ago [-]
I'd suggest a ::line pseudoelement for that. We already have ::first-line, which could perhaps be considered an abbreviated ::line:first-of-type. Though, ::first-line doesn't seem to support enough properties to be useful here, so maybe another approach is needed.
stephbd 2 days ago [-]
My only thought on this was to have a strip down the side with a vertically repeating background of an SVG data URL with the clef in it. But I don't like it. It'll be brittle. And it wouldn't support clef / key / time changes very easily.
mananaysiempre 1 days ago [-]
I don’t know that this could be done cleanly without intertwining stlying and line breaking, which quite honestly sounds like a nightmare. (Line breaking is enough of a horror show as is, what with ligatures and bidi and ...)
thrtythreeforty 2 days ago [-]
I started the article thinking "ohhh the horror, this will not go well." And I ended up being mildly impressed with the typesetting quality, especially for the relative simplicity of the approach. So kudos to the author for demonstrating the flexibility of CSS.
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.
stephbd 2 days ago [-]
It would be nigh-on impossible to align parts across different grids – but it's perfectly possible to generate one huge grid with multiple staves in it. I'm pretty confident that will work out.
dsmmcken 2 days ago [-]
> align parts across different grids
Maybe a CSS `subgrid` would help? Subgrid is newly available. (I know nothing about music notation, and basing this entirely off that statement).
This was an interesting (and unexpectedly) practical use of CSS for non web-dev purposes. Great idea!
bredren 2 days ago [-]
Hey, that's a great lightweight tool. Thanks for sharing that.
russelg 2 days ago [-]
Awesome post! I can see myself using your planner for sure.
spankalee 2 days ago [-]
This is very cool! Like the author, I'm pretty impressed that just CSS can get you this far.
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.
Nice to have an alternative to Lilypond (lilypond.org), but given the extreme complexity of notation, I would bet that any brevity gains are short lived.
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.
mrweasel 1 days ago [-]
If you can make do with a more limited feature set, I'd properly go with a CSS alternative, rather than using Lilypond (depending on your environment and use case). Lilypond is fairly complicated and not without security risk and have been used as an attack vector due to it being able to embed Postscript.
stephbd 2 days ago [-]
I would also suggest checking out ABCjs for web rendering.
atonse 2 days ago [-]
But does Lilypond generate responsive sheets?
That to me was the coolest part of this (apart from what others have said, the power of modern CSS)
Tokkemon 2 days ago [-]
They can be rendered at any size.
lukan 2 days ago [-]
A PDF is still not that responsive. Clean HTML/CSS is.
dheera 21 hours ago [-]
You don't have to render to PDF, you can just have some UI that keeps re-rendering Lilypond source to your screen size and zoom level every time you zoom.
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.
lukan 20 hours ago [-]
"you can just have some UI that keeps re-rendering Lilypond source to your screen size and zoom level every time you zoom."
And have you done that or seen it responsive?
dheera 18 hours ago [-]
If you want it to be responsive just do the Apple trick of instantly presenting a highly blurred image until the render is complete. The blurred image doesn't even have to be of the real thing, but it makes users feel warm and fuzzy.
lukan 7 hours ago [-]
I take that as a no.
bollu 1 days ago [-]
Yes, lilypond generates SVG that rescales smoothly
atonse 1 days ago [-]
So the measures on a line automatically wrap if viewed on a phone?
consf 19 hours ago [-]
LilyPond helped me to digitize my old sheet music at the time
groby_b 15 hours ago [-]
Did you transcribe manually? Or is there some sort of service that gets most of the job done via OCR?
TheRealPomax 2 days ago [-]
Not everyone needs to typeset a full symphony with all the crazy notation for every single instrument though, having an easy responsive web presentation for even 50% of the "simple" scoring you do is a fantastic option to have.
Tokkemon 2 days ago [-]
But this solution won't even get you that far, let's be honest.
TheRealPomax 21 hours ago [-]
Can't say I share that conviction? This is absolutely perfect for stuff like "I came up with something, let me score it and share it" without having to reach for notion/musescore/etc or lilypad.
groby_b 15 hours ago [-]
At least for Guitar, that's far from what you need even for simple scoring. I'd be surprised if you get enough support for fairly straightforward piano scores either.
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.
donatj 1 days ago [-]
I have spent weeks recently working on a little side project converting MIDIs to colored children’s piano sheet music. I am most of the way there but have been dragging my feet on building the web ui specifically because I was unsure how to render the notes in a flexible way that could look good on multiple devices. This looks like it could be a good jumping off point, and I fully intend to give it a try.
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.
It's a nifty solution. But speaking as a music engraver, it could use a lot of improvement, and I don't think there's enough tolerance in CSS to make it work. The beams, slurs, and ties, in particular have real problems visually. This is why other methods of getting notation into the browser don't use such tools. You need pinpoint precision for vector rendering, which is why almost all browser notation is done with SVG or some sort of Canvas drawing.
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).
xhevahir 2 days ago [-]
>One can already do scalable notation in the browser with other tools (Check out Adrian Holovaty's Soundslice or Sibelius Cloud Publishing).
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.
scop 2 days ago [-]
What is a music engraver? I could google it, but I would appreciate a music engraver actually telling me vs some random page on the internet.
Tokkemon 2 days ago [-]
Sure. It's an old-fashioned term for the artisans who engraved music notation onto metal plates. These were then inked for pressing. It's a highly specialized skill and requires a deep knowledge of now notation works and how musicians will respond to it. Today it is all done on computer but the artistry of knowing how the notation should look and the meaning behind it is still there. That's the basics but the work we do is quite varied and complicated.
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.
amiga386 2 days ago [-]
That's very much it. You could also make an analogy to the arts of typography and typesetting.
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])
I know absolutely nothing about notation software, but I remember watching that MuseScore rewrite video (link [1] above) a few months ago and was absolutely enthralled. Definitely recommend watching Tantacrul's videos to anyone who wants to learn more.
analog31 2 days ago [-]
As a player (jazz bassist) I'm amazed by the subtlety of making notation work. Oddly enough, most of my band's material is still not in computer readable form. A lot of it was hand copied.
n_plus_1_acc 1 days ago [-]
It the equivalent of typesetting for music. Choosing fonts/styles, nudging spacing, improving redability, experimenting with page layout, etc
Tokkemon 20 hours ago [-]
Sort of, there's a lot more editorial that goes into it than only typesetting.
> Other than the clever solution of using CSS, why would you do this?
Seems lightweight enough for maybe a music theory blog post or interactive notebook.
bubiniccxxbb 2 days ago [-]
[dead]
ssttoo 5 hours ago [-]
Nice! I run a website with music theory exercises where the notation is pretty simple. I’d love to switch to something like this, because the vexflow (what I use now) API is a little much of a re-learning curve for my twice-a-year-let’s-add-a-new-exercise cadence
I utilized JavaScript to render music notation from pppp to ffff iirc that can connect to a MIDI keyboard, allowing users to practice along with the interactive notes. Initially, I experimented with Adobe Flex before transitioning to web-based solutions and yes, it can read and play any MIDI files to my SF2 soundfont.
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.
emadda 1 days ago [-]
Cool, I often use grid for precise placement of items even for small widgets like toggle buttons.
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.
stephbd 1 days ago [-]
The beauty of the system is that a flex box rule of flex: 1 1 25%; will give you 4 bars per line (each averaging 25% of the width). The system is flexible.
shermantanktop 11 hours ago [-]
Hear hear. Most pop/jazz/rock music is generally built off powers of 2 at multiple levels.
This is a really clever use of grid & a case where the named templates is actually well done instead of overused.
2 days ago [-]
naltroc 1 days ago [-]
woah, amazing work!
The interactive (transposable) at the very end should be top of the fold imo. Super impressive.
consf 19 hours ago [-]
It looks really cool
darepublic 1 days ago [-]
beautiful music notation. The main page of the site also has a tasteful use of position sticky!
coldtea 2 days ago [-]
Looks good, and with surprisingly clean CSS.
ramijames 2 days ago [-]
I'm super impressed.
rdevsrex 2 days ago [-]
This is pretty cool!
elijahbenizzy 1 days ago [-]
This is great!
rcarmo 2 days ago [-]
Pretty awesome!
ulrischa 2 days ago [-]
Increadible what css can do today. It is some kind of general purpose representation language
sfink 2 days ago [-]
This feels so wrong in one way, and simultaneously so right in another.
rocken7 2 days ago [-]
imagine a bot drone that flies around a big city like NY,
and just tags walls + suitable spots with interesting gen art from various sources .. likely a lawsuit in the making but cool to see.
consf 19 hours ago [-]
Tagging public or private property without permission is definitely illegal
Rendered at 15:10:13 GMT+0000 (Coordinated Universal Time) with Vercel.
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!
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.
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/
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.
Maybe a CSS `subgrid` would help? Subgrid is newly available. (I know nothing about music notation, and basing this entirely off that statement).
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.
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.
That to me was the coolest part of this (apart from what others have said, the power of modern CSS)
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.
And have you done that or seen it responsive?
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.
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.
It can also print note names inside of each head.
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).
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.
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.
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
[2] https://www.youtube.com/watch?v=dKx1wnXClcI
[3] https://www.youtube.com/watch?v=4hZxo96x48A
https://en.wikipedia.org/wiki/Music_engraving
Seems lightweight enough for maybe a music theory blog post or interactive notebook.
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.
If you’d like an intro into grid:
https://cssprinciples.com/3/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.