The author expresses frustration at the lack of fluid and responsive music rendering for the web, proposing a solution through a prototype called Scribe designed to output SVG from JSON data. By creating classes for stave lines and beats, the author demonstrates how to position musical symbols on a stave using CSS rules. The system allows for flexibility in displaying different clefs, time signatures, and even drum notation. While the system has some limitations in handling clefs and beams, the bulk of layout work is shouldered by CSS, reducing the need for additional JavaScript. The author encourages feedback on the system and introduces a custom element, , for rendering music notation. Extensions for future development include support for SMuFL fonts and multi-part tunes.
https://cruncher.ch/blog/printing-music-with-css-grid/