Printing Music with CSS Grid • Hacker News Board

Re: Printing Music with CSS Grid

#21

Post by mewpmewp2 » Tue, Apr 30, 2024, 10:59 PM UTC

vintagedave wrote: post #10

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

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.

Re: Printing Music with CSS Grid

#22

Post by rocken7 » Tue, Apr 30, 2024, 11:05 PM UTC

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.

Re: Printing Music with CSS Grid

#23

Post by sfink » Tue, Apr 30, 2024, 11:07 PM UTC

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

Re: Printing Music with CSS Grid

#24

Post by xhevahir » Tue, Apr 30, 2024, 11:16 PM UTC

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

Re: Printing Music with CSS Grid

#25

Post by lukan » Tue, Apr 30, 2024, 11:20 PM UTC

Tokkemon wrote: post #17

atonse wrote: post #9

Earlier quoted context omitted.

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.

A PDF is still not that responsive. Clean HTML/CSS is.

Re: Printing Music with CSS Grid

#26

Post by rdevsrex » Tue, Apr 30, 2024, 11:25 PM UTC

This is pretty cool!

Re: Printing Music with CSS Grid

#27

Post by ulrischa » Tue, Apr 30, 2024, 11:28 PM UTC

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

Re: Printing Music with CSS Grid

#28

Post by alnvdl » Tue, Apr 30, 2024, 11:30 PM UTC

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

Re: Printing Music with CSS Grid

#29

Post by bredren » Tue, Apr 30, 2024, 11:44 PM UTC

alnvdl wrote: post #28

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

Hey, that's a great lightweight tool. Thanks for sharing that.

Re: Printing Music with CSS Grid

#30

Post by scop » Tue, Apr 30, 2024, 11:47 PM UTC

Tokkemon wrote: post #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 S…

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.