[HN Gopher] Printing Music with CSS Grid
       ___________________________________________________________________
        
       Printing Music with CSS Grid
        
       Author : speckx
       Score  : 159 points
       Date   : 2024-04-30 20:39 UTC (2 hours 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.
        
       | 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.
        
       | 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.
        
         | 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.
        
       | 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.
        
       | 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).
        
       ___________________________________________________________________
       (page generated 2024-04-30 23:00 UTC)