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...
Awesome post! I can see myself using your planner for sure.
Printing Music with CSS Grid
31–40 of 89 posts
Re: Printing Music with CSS Grid
#32CSS 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 was an interesting (and unexpectedly) practical use of CSS for non web-dev purposes. Great idea!
Re: Printing Music with CSS Grid
#33It'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.
someone who makes music look pretty
Re: Printing Music with CSS Grid
#34It'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.
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 do is quite varied and complicated.
It happens that I work for Avid as a designer for Sibelius, the leading music notation program in the world. I also run the Music Engraving Tips Facebook group if you're interested in learning more.
Re: Printing Music with CSS Grid
#35It'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…
[dead]
Re: Printing Music with CSS Grid
#36Earlier 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…
As a player (jazz bassist) I'm amazed by the subtlety of making notation work. Oddly enough, most of my band's material is still not in computer readable form. A lot of it was hand copied.
Re: Printing Music with CSS Grid
#37It'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…
> Other than the clever solution of using CSS, why would you do this?
Seems lightweight enough for maybe a music theory blog post or interactive notebook.
Re: Printing Music with CSS Grid
#38It'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…
>One can already do scalable notation in the browser with other tools (Check out Adrian Holovaty's Soundslice or Sibelius Cloud Publishing).
Can either of those be incorporated in one's own software, without paying somebody? (I don't see a license for this project, but I'm guessing it will be a lot more permissive than whatever that Sibelius thing has.)
Also, the examples for this project are simple leadsheets. I think your average jazz musician is probably a lot less fussy about notation than a professional music engraver would be.
Re: Printing Music with CSS Grid
#39I 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.
> align parts across different grids
Maybe a CSS `subgrid` would help? Subgrid is newly available. (I know nothing about music notation, and basing this entirely off that statement).
Re: Printing Music with CSS Grid
#40Impressive 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!