CSS Grid से sheet music प्रिंट करना

 (cruncher.ch)
11 पॉइंट द्वारा GN⁺ 2024-05-01 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • छोटे मोबाइल स्क्रीन पर A4 PDF को zoom करके बजाने वाले संगीतकारों के लिए, वेब पर fluid और responsive sheet music rendering की ज़रूरत होती है

Scribe प्रोटोटाइप

  • पहले JSON से SVG आउटपुट करने वाला Scribe नाम का एक music renderer प्रोटोटाइप के रूप में बनाया गया था
  • मूल लक्ष्य एक responsive music renderer बनाना था, लेकिन इसके लिए जटिल multi-pass layout engine लिखना पड़ता, इसलिए प्रगति कठिन थी
  • बाद में जब CSS Grid को प्रोजेक्ट में शामिल किया गया, तो लगा कि यह Scribe में सामने आए layout problems का समाधान हो सकता है

.stave क्लास

  • staff grid जैसा होता है। vertical axis pitch है, और horizontal axis time
  • .stave क्लास में vertical axis के grid rows परिभाषित किए जाते हैं
  • standard pitch names के साथ fixed-size grid rows बनाए जाते हैं और staff draw करने के लिए background image का उपयोग किया जाता है
  • treble clef staff के लिए row map का उदाहरण: 
    .stave {  
  display: grid;  
  row-gap: 0;  
  grid-template-rows:   
    [A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em  
    [D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em  
    [G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em  
    [C4] 0.25em ;  
  background-image: url('/path/to/stave.svg');  
  background-repeat: no-repeat;  
  background-size: 100% 2.25em;  
  background-position: 0 50%;  
}
  • हर staff line और उसके बीच के gap पर pitch name वाला grid line बन जाता है

staff पर pitch रखना

  • staff की हर row में कई pitches रखी जा सकती हैं
  • DOM elements को सही row में रखने के लिए data-pitch attribute में pitch name डाला जाता है और CSS के ज़रिए data-pitch values को staff rows से map किया जाता है 
    .stave > [data-pitch^="G"][data-pitch$="4"] { grid-row-start: G4; }
  • यह rule उन pitches को पकड़ता है जो 'G' से शुरू और '4' पर खत्म होती हैं, और G♭4, G4, G♯4 आदि को G4 row में assign करता है
  • यह काम हर staff row के लिए करना पड़ता है
  • अब कुछ symbols को staff पर रखा जा सकता है

.bar क्लास और beat

  • rhythm को handle करना थोड़ा ज्यादा मुश्किल है
  • सभी तरह के rhythms को support करने वाला कोई स्पष्ट minimum rhythmic division नहीं है
  • प्रति beat 24 columns वाला approach एक अच्छी शुरुआत है, क्योंकि इससे eighth notes, sixteenth notes, thirty-second notes और triplets को बराबरी से रखा जा सकता है
  • 4 beats को 4 × 24 = 96 grid columns के रूप में define किया जाता है और शुरुआत व अंत में columns जोड़े जाते हैं: 
    .bar {  
  column-gap: 0.03125em;  
  grid-template-columns:  
    [bar-begin]  
    max-content  
    repeat(96, minmax(max-content, auto))  
    max-content  
    [bar-end];  
}
  • ::before और ::after से bar lines जोड़ी जाती हैं, और data-pitch="B4" के साथ clef को बीच में रखा जाता है

beat पर symbols रखना

  • इस बार data-beat attribute का उपयोग करके elements को beats दिए जाते हैं, और CSS rules से beats को grid columns से map किया जाता है
  • CSS map में हर 1/24 beat के लिए एक rule होता है
  • attribute ^= starts-with selector का उपयोग करने से rules कुछ हद तक error-tolerant हो जाते हैं
  • .stave क्लास के साथ मिलाकर data-beat को 1 से 5 के बीच beat और data-pitch को note name के रूप में सेट करके symbols को beat और pitch के अनुसार रखा जा सकता है

fluid और responsive sheet music

  • ऐसे कई bars को flexbox container में रखने पर responsive sheet music देखा जा सकता है
  • अभी भी बहुत-सी चीज़ें missing हैं, लेकिन शुरुआत के लिए यह अच्छा आधार है
  • यह पहले से ही online music renderers की तुलना में कहीं अधिक elegant line breaks देता है

notes के बीच space

  • समय में एक-दूसरे के अधिक करीब आने वाले note heads थोड़े और करीब render होते हैं
  • यह छोटे column-gap से पैदा होने वाला subtle और intentional effect है, जो symbols को slots में जाने देने वाले तरह-तरह के temporal 'ether' की तरह काम करता है
  • columns स्वयं तब 0 width रखते हैं जब note heads नहीं होते, लेकिन समय में दूर स्थित events के बीच अधिक column gaps (प्रति beat 24) होने से ज्यादा distance बनती है
  • symbols के margins को adjust करके consistent spacing को नियंत्रित किया जा सकता है

clef और time signatures

  • vertical और horizontal spacing के लिए अलग classes उपयोग करने का कारण यह है कि दूसरे को छुए बिना एक को बदला जा सके
  • उसी melody को bass clef में दिखाने के लिए .stave क्लास को bass-stave क्लास से बदलना होगा, जो उसी data-pitch attributes को bass staff rows पर map करती है
  • CSS में data-duration="5" को .bar के 120 grid template columns से map करके उसी staff पर 5/4 time signature दिया जा सकता है

chords और lyrics

  • CSS Grid का उपयोग करके music grid के भीतर दूसरे symbols को भी align किया जा सकता है
  • chords, lyrics, dynamics आदि को timed events के साथ align और extend किया जा सकता है

note stems

  • note stems, chords, और कुछ लंबे rests को data-duration attribute को grid-column-end span values से map करके columns पर फैलाया जाता है

scaling

  • पूरा system em units में sized है, इसलिए सिर्फ font-size बदलकर scale किया जा सकता है

Flex और Grid की सीमाएँ

  • यह perfect system नहीं है। सीमाएँ:
    1. CSS line break के समय नया clef/key signature अपने-आप नहीं रख सकता
    2. नई line के नए notes से beam connect नहीं की जा सकती
    3. slanted note stems की सही position Grid layout होने के बाद ही पता चलती है, इसलिए align करना मुश्किल है
  • इसे पूरी तरह finish करने के लिए थोड़ा cleanup JavaScript चाहिए, लेकिन layout का अधिकांश काम CSS कर देता है, इसलिए JavaScript में layout का काम काफी कम हो जाता है

custom element

  • इस नए CSS system के आसपास एक interpreter लिखा गया और उसे एक element में wrap किया गया
  • यह अभी production-ready नहीं है, लेकिन responsive lead sheets render कर सकता है और drums notate कर सकता है, इसलिए रोचक और उपयोगी है
  • यह content data, src attribute से लाए गए file, और element की .data property में set किए गए JS object से sheet music render करता है
  • मौजूदा development build को web page में import करके आज़माया जा सकता है

आगे की योजना

  • Scribe 0.3 improvements के अलावा, लंबी अवधि में जाँचने लायक features:
    • SMuFL font support - sheet music symbols में उपयोग होने वाले fonts बदलना
    • nested sequence support - multi-part songs सक्षम करना
    • split staff rendering - एक staff पर कई parts रखना
    • multi-staff rendering - कई aligned staffs पर कई parts रखना

GN⁺ की राय

  • वेब पर sheet music को fluid और responsive तरीके से render करना संगीतकारों और music enthusiasts दोनों के लिए बहुत उपयोगी हो सकता है। यह छोटे screens पर PDF sheet music को zoom in/out करके देखने की असुविधा को कम कर सकता है
  • CSS के Grid और Flex layouts का उपयोग करने वाला यह approach दिलचस्प है। यह एक अच्छा उदाहरण है कि जटिल layout engine के बिना भी सिर्फ CSS से काफी कुछ हल किया जा सकता है
  • लेकिन sheet music की प्रकृति के कारण कुछ हिस्सों में सिर्फ CSS की सीमाएँ हैं। line breaks के समय clef या key signature को अपने-आप रखना, या beams को अपने-आप जोड़ना जैसे काम, जहाँ musical context समझना पड़ता है, वहाँ JavaScript की मदद चाहिए होगी
  • lead sheet rendering और drum notation support जैसे कई हिस्से पहले से implement हो चुके हैं, इसलिए लगता है कि यह जल्द ही काफी उपयोगी स्तर तक सुधर सकता है। अगर इसे open source किया जाए और development जारी रहे, तो यह MuseScore जैसे मौजूदा notation editors का अच्छा विकल्प बन सकता है
  • आगे की योजना में शामिल SMuFL font support, multi-part और multi-staff rendering support जैसी सुविधाएँ लागू हो जाती हैं, तो sheet music expression की पूर्णता काफी बढ़ सकती है। यह एक उम्मीद जगाने वाला प्रोजेक्ट है

संबंधित पढ़ाई

2 टिप्पणियां

 
roxie 2024-05-06

इसके पीछे कोई वजह तो होगी न
 
GN⁺ 2024-05-01
Hacker News की राय
  • Sheet music सॉफ़्टवेयर डेवलपर की ओर से CSS Grid का इस्तेमाल करके musical score render करने के तरीके की सराहना की गई
    • वह Soundslice नाम की web-based sheet music rendering service को 10 साल से ज़्यादा समय से विकसित कर रहे हैं, और 2014 में पहली बार "responsive" web sheet music rendering लागू किया था
    • संबंधित तकनीकी विवरण के लिए यह प्रस्तुति वीडियो लिंक देखें: https://www.youtube.com/watch?v=XH5EtQge_Bg
    • Soundslice के responsive score का उदाहरण: https://www.soundslice.com/slices/zzNlc/
    • यह web-based editor, practice features, photo/PDF से score data निकालने वाली scan feature सहित कई टूल प्रदान करता है
    • CSS Grid तरीका हल्के प्रोजेक्ट्स के लिए उपयोगी हो सकता है, लेकिन full score की जटिल और सूक्ष्म अभिव्यक्तियों को पूरी तरह लागू करना मुश्किल होगा
  • CSS community को ऐसा प्रस्ताव देना भी अच्छा हो सकता है कि यह JavaScript के बिना सिर्फ CSS से लागू किया जा सके
    • उदाहरण के लिए, line break होने पर clef को दोबारा दिखाना sticky table header जैसा है, और इसका इस्तेमाल sheet music के अलावा भी हो सकता है
  • CSS का attribute selector([...]) syntax प्रभावशाली लगा। उदाहरण: .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }
  • music engraver के नज़रिए से देखें तो visual improvement की अभी काफी ज़रूरत लगती है। सिर्फ CSS से precision की सीमा होने के कारण यह कठिन दिखता है
    • note stem, slur, tie जैसी अभिव्यक्तियों में समस्या है
    • ज़्यादातर browser-based sheet music SVG या Canvas से vector rendering करके pinpoint precision हासिल करते हैं
    • CSS के अलावा भी Soundslice, Sibelius Cloud Publishing जैसे दूसरे टूल पहले से मौजूद हैं जो browser में scalable score लागू करते हैं
  • शुरुआत में लगा था कि CSS से sheet music दिखाना शायद ठीक से काम नहीं करेगा, लेकिन सरल तरीके से मिली typography quality प्रभावशाली है। लेखक को बधाई
    • हालांकि, chord, 8th/16th note spacing, parts के बीच alignment जैसे विशेष मामलों में यह सही चलेगा या नहीं, इस पर चिंता है। Lilypond ने ऐसी जटिल अभिव्यक्तियों में अपनी flexibility साबित की है
  • CSS Grid दिलचस्प है। पहले मैंने pure frontend JS के साथ CSS Grid का उपयोग करके furniture designer जैसा कुछ बनाया था: https://alnvdl.github.io/2023/01/07/designing-furniture-using-the-css-grid.html
  • <scribe-music> custom element से भी उम्मीद है
    • कुछ साल पहले एक intern ने VexFlow को web component के रूप में wrap करने वाला प्रोजेक्ट किया था, लेकिन उसका maintenance नहीं हुआ: https://github.com/PolymerLabs/vexflow-elements/blob/web-components/demo/index.html
    • web music notation के लिए अच्छी तरह maintained और इस्तेमाल में आसान library बहुत मददगार होगी
  • Lilypond(lilypond.org) का alternative आना अच्छी बात है, लेकिन notation बहुत जटिल है, इसलिए conciseness का फायदा शायद लंबे समय तक नहीं टिकेगा
    • Asciidoc enthusiasts के लिए Lilypond को Asciidoc toolchain में integrate करना आसान है। इसे DocBook PDF pipeline में इस्तेमाल किया जा रहा है, और output काफ़ी अच्छा है। यह TeX जैसा है
  • https://www.musicxml.com और https://opensheetmusicdisplay.org की याद दिलाता है। लागत कहीं ज़्यादा है, लेकिन यह complete solution हैं
  • सोच रहा हूँ कि क्या Impro-Visor(https://github.com/Impro-Visor/Impro-Visor) की कमजोर sheet music feature को इससे बदला जा सकता है
  • CSS benchmark जैसा एहसास