Live data from Hacker News

Printing Music with CSS Grid

cruncher.ch

11–20 of 89 posts

Re: Printing Music with CSS Grid

#11

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.

I would also suggest checking out ABCjs for web rendering.

Re: Printing Music with CSS Grid

#12

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 rel…

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.

Re: Printing Music with CSS Grid

#13

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.

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.

Re: Printing Music with CSS Grid

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

Re: Printing Music with CSS Grid

#16

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.

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.

But this solution won't even get you that far, let's be honest.

Re: Printing Music with CSS Grid

#17
post #9

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)

They can be rendered at any size.

Re: Printing Music with CSS Grid

#18

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

Re: Printing Music with CSS Grid

#20

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

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.
Post reply on HN