Printing Music with CSS Grid (cruncher.ch)

Article summary

The article discusses using CSS Grid to print music notation on the web, allowing for fluid and responsive rendering. The author presents a prototype, Scribe, which uses CSS to layout music notation and demonstrates its capabilities. The system uses a combination of CSS classes and attributes to position musical symbols and notes on a staff. The author also introduces a custom element, <scribe-music>, to simplify the process of rendering music notation on the web.

Main themes

• Music notation on the web
• CSS Grid layout
• Responsive design
• Music rendering
• Web components

What commenters say

• The use of CSS Grid for music notation is a novel and impressive approach, but may not be suitable for complex scores.
• Lilypond is a more established and feature-rich solution for music notation, but may not offer the same level of responsiveness as CSS Grid.
• The proposed solution lacks support for certain musical elements, such as beams and slurs, which are crucial for accurate notation.
• The use of CSS selectors with square brackets is a common technique, but may not be well-known among all developers.
• The need for pinpoint precision in music notation makes it challenging to achieve using CSS alone, and may require additional technologies like SVG or Canvas.
• The solution has potential for simple scores and lead sheets, but may not be sufficient for more complex musical compositions.
• The importance of music engraving and notation cannot be overstated, and requires a deep understanding of musical notation and typography.
• The development of a custom element like <scribe-music> could simplify the process of rendering music notation on the web, but may require further development and refinement.