[HN Gopher] Printing Music with CSS Grid
___________________________________________________________________
Printing Music with CSS Grid
Author : speckx
Score : 842 points
Date : 2024-04-30 20:39 UTC (1 days ago)
(HTM) web link (cruncher.ch)
(TXT) w3m dump (cruncher.ch)
| spankalee wrote:
| 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 <scribe-music> 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 of good for
| music notation on the web.
| sonovice wrote:
| There is https://www.verovio.org/ which is both easy-to-use and
| really well maintained.
| ivanjermakov wrote:
| This feels like a CSS benchmark haha
| thrtythreeforty wrote:
| 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:
| 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:
| > 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).
| rcarmo wrote:
| Pretty awesome!
| ramijames wrote:
| I'm super impressed.
| MilStdJunkie wrote:
| 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.
| atonse wrote:
| 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)
| Tokkemon wrote:
| They can be rendered at any size.
| lukan wrote:
| A PDF is still not that responsive. Clean HTML/CSS is.
| dheera wrote:
| 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
| <img> for each measure. It will wrap and re-flow, you
| just have to deal with the clefs separately.
| lukan wrote:
| "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:
| 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.
| bollu wrote:
| Yes, lilypond generates SVG that rescales smoothly
| atonse wrote:
| So the measures on a line automatically wrap if viewed on a
| phone?
| stephbd wrote:
| I would also suggest checking out ABCjs for web rendering.
| TheRealPomax wrote:
| 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.
| Tokkemon wrote:
| But this solution won't even get you that far, let's be
| honest.
| TheRealPomax wrote:
| 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.
| mrweasel wrote:
| 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.
| consf wrote:
| LilyPond helped me to digitize my old sheet music at the time
| vintagedave wrote:
| 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: https://css-
| tricks.com/attribute-selectors/
| wizzwizz4 wrote:
| 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.
| stephbd wrote:
| 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.
| mananaysiempre wrote:
| 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 ...)
| mewpmewp2 wrote:
| 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.
| coldtea wrote:
| Looks good, and with surprisingly clean CSS.
| Tokkemon wrote:
| 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).
| scop wrote:
| 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.
| itishappy wrote:
| someone who makes music look pretty
|
| https://en.wikipedia.org/wiki/Music_engraving
| Tokkemon wrote:
| 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.
| analog31 wrote:
| 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.
| amiga386 wrote:
| 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
| blitt wrote:
| 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.
| n_plus_1_acc wrote:
| It the equivalent of typesetting for music. Choosing
| fonts/styles, nudging spacing, improving redability,
| experimenting with page layout, etc
| Tokkemon wrote:
| Sort of, there's a lot more editorial that goes into it
| than only typesetting.
| mbo wrote:
| > 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.
| xhevahir wrote:
| >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.
| nixpulvis wrote:
| Just going to remind people of https://www.musicxml.com and
| https://opensheetmusicdisplay.org for a more complete solution at
| a much larger cost.
| spopejoy wrote:
| Not web, but https://musescore.org is free software that reads
| and writes musicxml.
| sonovice wrote:
| Also have a look at https://www.verovio.org for a pretty
| complete but still free solution.
| rocken7 wrote:
| 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:
| Tagging public or private property without permission is
| definitely illegal
| sfink wrote:
| This feels so wrong in one way, and simultaneously so right in
| another.
| xhevahir wrote:
| 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 ).
| rdevsrex wrote:
| This is pretty cool!
| ulrischa wrote:
| Increadible what css can do today. It is some kind of general
| purpose representation language
| alnvdl wrote:
| 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...
| bredren wrote:
| Hey, that's a great lightweight tool. Thanks for sharing that.
| russelg wrote:
| Awesome post! I can see myself using your planner for sure.
| knighthack wrote:
| This was an interesting (and unexpectedly) practical use of CSS
| for non web-dev purposes. Great idea!
| adrianh wrote:
| 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:
| 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!
| heroprotagonist wrote:
| 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?
| asddubs wrote:
| 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)
| 2024throwaway wrote:
| Such unnecessary aggression towards someone who built
| something cool and useful.
| FelipeCortez wrote:
| Take a look at the visual tests for VexFlow to get an idea of
| the complexity music engraving can have:
| https://www.vexflow.com/tests/
| colonwqbang wrote:
| 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.
| navbaker wrote:
| Oh wow, small world! I use soundslice nearly everyday as an end
| user of a few music education sites!!!
| elijahbenizzy wrote:
| This is great!
| darepublic wrote:
| beautiful music notation. The main page of the site also has a
| tasteful use of position sticky!
| emadda wrote:
| 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/
| microtherion wrote:
| 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.
| stephbd wrote:
| 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.
| toastal wrote:
| This is a really clever use of grid & a case where the named
| templates is actually well done instead of overused.
| donatj wrote:
| 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.
| hantusk wrote:
| 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.
| consf wrote:
| You've unlocked the memory of me playing it
| todotask wrote:
| 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.
| naltroc wrote:
| woah, amazing work! The interactive (transposable) at the very
| end should be top of the fold imo. Super impressive.
| consf wrote:
| It looks really cool
___________________________________________________________________
(page generated 2024-05-01 23:00 UTC)