stephbd

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.

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.

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.

I would also suggest checking out ABCjs for web rendering.