This is a really clever use of grid & a case where the named templates is actually well done instead of overused.
Printing Music with CSS Grid
51–60 of 89 posts
Re: Printing Music with CSS Grid
#52I have spent weeks recently working on a little side project converting MIDIs to colored children’s piano sheet music. I am most of the way there but have been dragging my feet on building the web ui specifically because I was unsure how to render the notes in a flexible way that could look good on multiple devices. This looks like it could be a good jumping off point, and I fully intend to give it a try.
My daughter absolutely loves my Little Tikes piano from the 1980s but all the sheet music I find online, even for the newer Little Tikes pianos, have different colors associated with notes. I have built up a small library of simple MIDIs, and my intent is to have some preset toy pianos to choose from or let the end user specify colors-to-notes manually.
Re: Printing Music with CSS Grid
#53I utilized JavaScript to render music notation from pppp to ffff iirc that can connect to a MIDI keyboard, allowing users to practice along with the interactive notes. Initially, I experimented with Adobe Flex before transitioning to web-based solutions and yes, it can read and play any MIDI files to my SF2 soundfont.
The only problem is that MuseScore community took years to fix a missing measurement in MusicXML structure, I had to patch the code on my own.
Re: Printing Music with CSS Grid
#54I have spent weeks recently working on a little side project converting MIDIs to colored children’s piano sheet music. I am most of the way there but have been dragging my feet on building the web ui specifically because I was unsure how to render the notes in a flexible way that could look good on multiple devices. This looks like it could be a good jumping off point, and I fully intend to give it a try. My daughter…
For a shortcut, Musescore has a plugin called colornotes that does this, installable from the GUI. You can alter the color scheme by editing the .js plugin code: https://github.com/musescore/MuseScore/blob/master/share/ext...
It can also print note names inside of each head.
Re: Printing Music with CSS Grid
#55Nice 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)
Yes, lilypond generates SVG that rescales smoothly
Re: Printing Music with CSS Grid
#56This 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.
I don’t know that this could be done cleanly without intertwining stlying and line breaking, which quite honestly sounds like a nightmare. (Line breaking is enough of a horror show as is, what with ligatures and bidi and ...)
Re: Printing Music with CSS Grid
#57Earlier 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)
Yes, lilypond generates SVG that rescales smoothly
So the measures on a line automatically wrap if viewed on a phone?
Re: Printing Music with CSS Grid
#58It'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.
It the equivalent of typesetting for music. Choosing fonts/styles, nudging spacing, improving redability, experimenting with page layout, etc
Re: Printing Music with CSS Grid
#59Impressive 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: htt…
Could you perhaps elaborate about what makes it 'not up to snuff', given how much you used it as a chance to promote your own stuff?
Re: Printing Music with CSS Grid
#60Impressive 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: htt…
Could you perhaps elaborate about what makes it 'not up to snuff', given how much you used it as a chance to promote your own stuff?
Maybe the segment on engraving of Tantacruls Musescore 4 video is a good explanation of some of the things involved:
https://youtu.be/Qct6LKbneKQ?t=2005
the whole video is worth watching as well (and there are several videos on the channel focusing on the UI of notation apps, worth watching for anyone who does UI but isn't interested in music production as well)