Printing Music with CSS Grid

#1

Post by speckx » Tue, Apr 30, 2024, 8:39 PM UTC

Printing Music with CSS Grid
cruncher.ch

Re: Printing Music with CSS Grid

#2

Post by [deleted] » Tue, Apr 30, 2024, 8:51 PM UTC

[deleted]

Re: Printing Music with CSS Grid

#3

Post by spankalee » Tue, Apr 30, 2024, 9:05 PM UTC

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

Re: Printing Music with CSS Grid

#4

Post by ivanjermakov » Tue, Apr 30, 2024, 9:21 PM UTC

This feels like a CSS benchmark haha

Re: Printing Music with CSS Grid

#5

Post by thrtythreeforty » Tue, Apr 30, 2024, 9:24 PM UTC

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.

Re: Printing Music with CSS Grid

#6

Post by rcarmo » Tue, Apr 30, 2024, 9:49 PM UTC

Pretty awesome!

Re: Printing Music with CSS Grid

#7

Post by ramijames » Tue, Apr 30, 2024, 9:50 PM UTC

I'm super impressed.

Re: Printing Music with CSS Grid

#8

Post by MilStdJunkie » Tue, Apr 30, 2024, 10:05 PM UTC

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.

Re: Printing Music with CSS Grid

#9

Post by atonse » Tue, Apr 30, 2024, 10:07 PM UTC

MilStdJunkie wrote: post #8

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.

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)

Re: Printing Music with CSS Grid

#10

Post by vintagedave » Tue, Apr 30, 2024, 10:13 PM UTC

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/