_______ __ _______ | |
| | |.---.-..----.| |--..-----..----. | | |.-----..--.--.--..-----. | |
| || _ || __|| < | -__|| _| | || -__|| | | ||__ --| | |
|___|___||___._||____||__|__||_____||__| |__|____||_____||________||_____| | |
on Gopher (inofficial) | |
Visit Hacker News on the Web | |
COMMENT PAGE FOR: | |
Printing Music with CSS Grid | |
ssttoo wrote 8 hours 18 min ago: | |
Nice! I run a website with music theory exercises where the notation is | |
pretty simple. Iâd love to switch to something like this, because the | |
vexflow (what I use now) API is a little much of a re-learning curve | |
for my twice-a-year-letâs-add-a-new-exercise cadence | |
consf wrote 22 hours 23 min ago: | |
It looks really cool | |
naltroc wrote 1 day ago: | |
woah, amazing work! | |
The interactive (transposable) at the very end should be top of the | |
fold imo. Super impressive. | |
todotask wrote 1 day ago: | |
I 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. | |
donatj wrote 1 day ago: | |
I 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. | |
consf wrote 22 hours 28 min ago: | |
You've unlocked the memory of me playing it | |
hantusk wrote 1 day ago: | |
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: [1] It can also print note names inside | |
of each head. | |
[1]: https://github.com/musescore/MuseScore/blob/master/share/ext... | |
toastal wrote 1 day ago: | |
This is a really clever use of grid & a case where the named templates | |
is actually well done instead of overused. | |
microtherion wrote 1 day ago: | |
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. | |
shermantanktop wrote 13 hours 38 min ago: | |
Hear hear. Most pop/jazz/rock music is generally built off powers of | |
2 at multiple levels. | |
stephbd wrote 1 day ago: | |
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. | |
emadda wrote 1 day ago: | |
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: | |
[1]: https://cssprinciples.com/3/grid/ | |
darepublic wrote 1 day ago: | |
beautiful music notation. The main page of the site also has a | |
tasteful use of position sticky! | |
elijahbenizzy wrote 1 day ago: | |
This is great! | |
adrianh wrote 1 day ago: | |
Impressive 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: [1] Here's an example | |
of responsive Soundslice notation: [2] (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! | |
[1]: https://www.youtube.com/watch?v=XH5EtQge_Bg | |
[2]: https://www.soundslice.com/slices/zzNlc/ | |
gentlereturn wrote 2 hours 24 min ago: | |
sound slice is super cool! | |
navbaker wrote 1 day ago: | |
Oh wow, small world! I use soundslice nearly everyday as an end user | |
of a few music education sites!!! | |
heroprotagonist wrote 1 day ago: | |
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? | |
colonwqbang wrote 1 day ago: | |
Perhaps you noticed that the beams aren't really attached to the | |
notes they are supposed to be beaming together. | |
OP doesn't show any multi-stave (i.e. "full score") example at all | |
-- if the system could do that, it would likely have been part of | |
the demo. | |
This is extremely cool technology, but it's clear that more polish | |
would be needed before it's ready for general use. | |
FelipeCortez wrote 1 day ago: | |
Take a look at the visual tests for VexFlow to get an idea of the | |
complexity music engraving can have: | |
[1]: https://www.vexflow.com/tests/ | |
2024throwaway wrote 1 day ago: | |
Such unnecessary aggression towards someone who built something | |
cool and useful. | |
sojournerc wrote 17 hours 38 min ago: | |
It was constructive criticism from someone with expertise | |
2024throwaway wrote 17 hours 35 min ago: | |
It was neither. | |
sojournerc wrote 17 hours 14 min ago: | |
They said they've spent 10 years developing scoring | |
software... Wtf | |
2024throwaway wrote 16 hours 54 min ago: | |
Those are two separate usernames. I was defending the | |
person who has worked on it for 10 years. | |
asddubs wrote 1 day ago: | |
Maybe the segment on engraving of Tantacruls Musescore 4 video is a | |
good explanation of some of the things involved: [1] 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) | |
[1]: https://youtu.be/Qct6LKbneKQ?t=2005 | |
alnvdl wrote 1 day ago: | |
CSS grids are quite interesting. I once implemented a furniture | |
designer with it (pure frontend JS, no backend): | |
[1]: https://alnvdl.github.io/2023/01/07/designing-furniture-using-... | |
knighthack wrote 1 day ago: | |
This was an interesting (and unexpectedly) practical use of CSS for | |
non web-dev purposes. Great idea! | |
russelg wrote 1 day ago: | |
Awesome post! I can see myself using your planner for sure. | |
bredren wrote 1 day ago: | |
Hey, that's a great lightweight tool. Thanks for sharing that. | |
ulrischa wrote 1 day ago: | |
Increadible what css can do today. It is some kind of general purpose | |
representation language | |
rdevsrex wrote 1 day ago: | |
This is pretty cool! | |
xhevahir wrote 1 day ago: | |
This looks really nice. I'd like to see if this could replace the janky | |
notation functionality in Impro-Visor ( [1] ). | |
[1]: https://github.com/Impro-Visor/Impro-Visor | |
sfink wrote 1 day ago: | |
This feels so wrong in one way, and simultaneously so right in another. | |
rocken7 wrote 1 day ago: | |
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. | |
consf wrote 22 hours 21 min ago: | |
Tagging public or private property without permission is definitely | |
illegal | |
nixpulvis wrote 1 day ago: | |
Just going to remind people of [1] and [2] for a more complete solution | |
at a much larger cost. | |
[1]: https://www.musicxml.com | |
[2]: https://opensheetmusicdisplay.org | |
sonovice wrote 1 day ago: | |
Also have a look at [1] for a pretty complete but still free | |
solution. | |
[1]: https://www.verovio.org | |
spopejoy wrote 1 day ago: | |
Not web, but [1] is free software that reads and writes musicxml. | |
[1]: https://musescore.org | |
nixpulvis wrote 48 min ago: | |
I perfer flat.io | |
Tokkemon wrote 1 day ago: | |
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). | |
xhevahir wrote 1 day ago: | |
>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. | |
mbo wrote 1 day ago: | |
> 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. | |
scop wrote 1 day ago: | |
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. | |
n_plus_1_acc wrote 1 day ago: | |
It the equivalent of typesetting for music. Choosing fonts/styles, | |
nudging spacing, improving redability, experimenting with page | |
layout, etc | |
Tokkemon wrote 23 hours 20 min ago: | |
Sort of, there's a lot more editorial that goes into it than only | |
typesetting. | |
Tokkemon wrote 1 day ago: | |
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. | |
amiga386 wrote 1 day ago: | |
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] [1] [2] [3] | |
[1]: https://www.youtube.com/watch?v=XGo4PJd1lng | |
[2]: https://www.youtube.com/watch?v=Qct6LKbneKQ&t=2004 | |
[3]: https://www.youtube.com/watch?v=dKx1wnXClcI | |
[4]: https://www.youtube.com/watch?v=4hZxo96x48A | |
blitt wrote 1 day ago: | |
I know absolutely nothing about notation software, but I | |
remember watching that MuseScore rewrite video (link [1] above) | |
a few months ago and was absolutely enthralled. Definitely | |
recommend watching Tantacrul's videos to anyone who wants to | |
learn more. | |
analog31 wrote 1 day ago: | |
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. | |
itishappy wrote 1 day ago: | |
someone who makes music look pretty | |
[1]: https://en.wikipedia.org/wiki/Music_engraving | |
coldtea wrote 1 day ago: | |
Looks good, and with surprisingly clean CSS. | |
vintagedave wrote 1 day ago: | |
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âve never seen CSS selectors with square brackets before. Apparently | |
itâs an attribute selector: | |
[1]: https://css-tricks.com/attribute-selectors/ | |
mewpmewp2 wrote 1 day ago: | |
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. | |
wizzwizz4 wrote 1 day ago: | |
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. | |
mananaysiempre wrote 1 day ago: | |
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 ...) | |
stephbd wrote 1 day ago: | |
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. | |
MilStdJunkie wrote 1 day ago: | |
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. | |
consf wrote 22 hours 25 min ago: | |
LilyPond helped me to digitize my old sheet music at the time | |
groby_b wrote 18 hours 11 min ago: | |
Did you transcribe manually? Or is there some sort of service that | |
gets most of the job done via OCR? | |
mrweasel wrote 1 day ago: | |
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. | |
TheRealPomax wrote 1 day ago: | |
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. | |
groby_b wrote 17 hours 59 min ago: | |
At least for Guitar, that's far from what you need even for simple | |
scoring. I'd be surprised if you get enough support for fairly | |
straightforward piano scores either. | |
Don't get me wrong, this is amazing work. It's likely enough for | |
any kind of "chord and basic melody to help you remember enough to | |
get through the gig". But for actual scoring, lilypond & friends | |
are still the tool of choice. (I wish it was easier. I have spent | |
way too much time trying to convince it to do the things I want :) | |
I'm hoping it'll get there, though. | |
Tokkemon wrote 1 day ago: | |
But this solution won't even get you that far, let's be honest. | |
TheRealPomax wrote 23 hours 42 min ago: | |
Can't say I share that conviction? This is absolutely perfect for | |
stuff like "I came up with something, let me score it and share | |
it" without having to reach for notion/musescore/etc or lilypad. | |
stephbd wrote 1 day ago: | |
I would also suggest checking out ABCjs for web rendering. | |
atonse wrote 1 day ago: | |
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) | |
bollu wrote 1 day ago: | |
Yes, lilypond generates SVG that rescales smoothly | |
atonse wrote 1 day ago: | |
So the measures on a line automatically wrap if viewed on a | |
phone? | |
Tokkemon wrote 1 day ago: | |
They can be rendered at any size. | |
lukan wrote 1 day ago: | |
A PDF is still not that responsive. Clean HTML/CSS is. | |
dheera wrote 23 hours 28 min ago: | |
You don't have to render to PDF, you can just have some UI that | |
keeps re-rendering Lilypond source to your screen size and zoom | |
level every time you zoom. | |
Or render each measure to a separate .png file and just for | |
each measure. It will wrap and re-flow, you just have to deal | |
with the clefs separately. | |
lukan wrote 22 hours 32 min ago: | |
"you can just have some UI that keeps re-rendering Lilypond | |
source to your screen size and zoom level every time you | |
zoom." | |
And have you done that or seen it responsive? | |
dheera wrote 21 hours 19 min ago: | |
If you want it to be responsive just do the Apple trick of | |
instantly presenting a highly blurred image until the | |
render is complete. The blurred image doesn't even have to | |
be of the real thing, but it makes users feel warm and | |
fuzzy. | |
lukan wrote 10 hours 0 min ago: | |
I take that as a no. | |
ramijames wrote 1 day ago: | |
I'm super impressed. | |
rcarmo wrote 1 day ago: | |
Pretty awesome! | |
thrtythreeforty wrote 1 day ago: | |
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 relative head spacing of 8th and 16th notes, or letting the | |
program align different parts across different grids - would this also | |
work well? Lilypond has proven to be exceptionally flexible for these | |
kinds of complexities. | |
stephbd wrote 1 day ago: | |
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. | |
dsmmcken wrote 1 day ago: | |
> 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). | |
ivanjermakov wrote 1 day ago: | |
This feels like a CSS benchmark haha | |
spankalee wrote 1 day ago: | |
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: [1] A maintained and easy-to-use library could do a lot of | |
good for music notation on the web. | |
[1]: https://github.com/PolymerLabs/vexflow-elements/blob/web-compo... | |
sonovice wrote 1 day ago: | |
There is [1] which is both easy-to-use and really well maintained. | |
[1]: https://www.verovio.org/ | |
<- back to front page |