Printing Music with CSS Grid

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 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!

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.

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 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.

CSS grids are quite interesting. I once implemented a furniture designer with it (pure frontend JS, no backend): https://alnvdl.github.io/2023/01/07/designing-furniture-usin...

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.

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).

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.

Just going to remind people of https://www.musicxml.com and https://opensheetmusicdisplay.org for a more complete solution at a much larger cost.

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.

The visual quality is really good.

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.

Cool, I often use grid for precise placement of items even for small widgets like toggle buttons.

If you’d like an intro into grid:

https://cssprinciples.com/3/grid/

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

This feels like a CSS benchmark haha

This looks really nice. I'd like to see if this could replace the janky notation functionality in Impro-Visor ( https://github.com/Impro-Visor/Impro-Visor ).

This is a really clever use of grid & a case where the named templates is actually well done instead of overused.

Increadible what css can do today. It is some kind of general purpose representation language

Looks good, and with surprisingly clean CSS.

woah, amazing work! The interactive (transposable) at the very end should be top of the fold imo. Super impressive.

beautiful music notation. The main page of the site also has a tasteful use of position sticky!

I'm super impressed.

This is pretty cool!

Pretty awesome!

This is great!

This feels so wrong in one way, and simultaneously so right in another.

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.