Printing music with CSS Grid – Blog – Cruncher – web development agency in Lausanne
Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web!
Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibilities. Let us fix this pressing problem.
Some years ago I prototyped a music renderer I called Scribe that outputs SVG from JSON. The original goal was to produce a responsive music renderer. It was a good demo, but to progress I was going to have to write a complex multi-pass layout engine, and, well, other things got in the way.
Shortly after making that I was busy adopting Grid into our projects at Cruncher when something about it struck me as familiar, and I wondered if it might not be an answer to some of the layout problems I had been tackling in Scribe.
The musical staff is grid-like. Pitch is plotted up the vertical axis and time runs left to right along the horizontal axis. I am going to define these two axes in two seperate classes. The vertical axis, defining grid rows, will be called .stave. We'll get to the time axis in a bit.
