Printing Music with CSS Grid • Hacker News Board

Re: Printing Music with CSS Grid

#41

Post by amiga386 » Wed, May 01, 2024, 2:06 AM UTC

Tokkemon wrote: post #34

scop wrote: post #30

Earlier quoted context omitted.

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.

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…

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

[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

Re: Printing Music with CSS Grid

#42

Post by spopejoy » Wed, May 01, 2024, 3:51 AM UTC

nixpulvis wrote: post #19

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

Not web, but https://musescore.org is free software that reads and writes musicxml.

Re: Printing Music with CSS Grid

#43

Post by elijahbenizzy » Wed, May 01, 2024, 4:19 AM UTC

This is great!

Re: Printing Music with CSS Grid

#44

Post by sonovice » Wed, May 01, 2024, 4:39 AM UTC

nixpulvis wrote: post #19

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

Also have a look at https://www.verovio.org for a pretty complete but still free solution.

Re: Printing Music with CSS Grid

#45

Post by sonovice » Wed, May 01, 2024, 4:41 AM UTC

spankalee wrote: post #3

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…

There is https://www.verovio.org/ which is both easy-to-use and really well maintained.

Re: Printing Music with CSS Grid

#46

Post by darepublic » Wed, May 01, 2024, 5:34 AM UTC

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

Re: Printing Music with CSS Grid

#47

Post by emadda » Wed, May 01, 2024, 6:34 AM UTC

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/

Re: Printing Music with CSS Grid

#48

Post by mrweasel » Wed, May 01, 2024, 7:36 AM 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.

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.

Re: Printing Music with CSS Grid

#49

Post by microtherion » Wed, May 01, 2024, 7:50 AM UTC

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.

Re: Printing Music with CSS Grid

#50

Post by stephbd » Wed, May 01, 2024, 7:57 AM UTC

microtherion wrote: post #49

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.

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.