CSS Grid ile Nota Baskısı

(cruncher.ch)

11 puan yazan GN⁺ 2024-05-01 | 2 yorum | WhatsApp'ta paylaş

Küçük mobil ekranlarda A4 PDF’yi büyüterek çalan müzisyenler için, web üzerinde akışkan ve duyarlı nota görselleştirmesine ihtiyaç var

Scribe prototipi

Geçmişte, JSON’dan SVG üreten Scribe adlı bir müzik renderer’ı prototip olarak geliştirildi
Asıl hedef duyarlı bir müzik renderer’ı üretmekti, ancak karmaşık çok geçişli bir yerleşim motoru yazmak gerektiğinden ilerlemek zordu
Daha sonra projeye CSS Grid eklenince, bunun Scribe’ın uğraştığı yerleşim sorunlarına çözüm olabileceği düşünüldü

`.stave` sınıfı

Porteler ızgaraya benzer. Dikey eksen perdeyi, yatay eksen zamanı ifade eder
.stave sınıfında, dikey eksen olan grid satırları tanımlanır
Standart perde adlarıyla sabit boyutlu grid satırları oluşturulur ve porteyi çizmek için arka plan görseli kullanılır

Sol anahtarlı porte için bir satır eşleme örneği:

.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%;  
}

Her porte çizgisi ve aralığı için perde adına sahip bir grid çizgisi oluşur

Portede perde yerleştirme

Portedeki her satıra birden fazla perde yerleştirilebilir
DOM öğelerinin doğru satıra yerleşmesi için data-pitch özniteliğine perde adı yazılır ve CSS ile data-pitch değeri porte satırlarına eşlenir
```
.stave > [data-pitch^="G"][data-pitch$="4"] { grid-row-start: G4; }  
```
Bu kural, G ile başlayıp 4 ile biten perdeleri yakalar ve G♭4, G4, G♯4 gibi notaları G4 satırına atar
Bunun tüm porte satırları için yapılması gerekir
Artık bazı semboller porteye yerleştirilebilir

`.bar` sınıfı ve vuruşlar

Ritmi ele almak biraz daha zordur
Her türlü ritmi destekleyen açık bir asgari ritim bölümü yoktur
Vuruş başına 24 sütun yaklaşımı; sekizlik, onaltılık, otuzikilik ve triol notaları eşit yerleştirebildiği için iyi bir başlangıçtır

4 vuruş, 4 × 24 = 96 grid sütunu olarak tanımlanır ve başa ile sona sütun eklenir:

.bar {  
  column-gap: 0.03125em;  
  grid-template-columns:  
    [bar-begin]  
    max-content  
    repeat(96, minmax(max-content, auto))  
    max-content  
    [bar-end];  
}

::before ve ::after ile ölçü çizgileri eklenir, data-pitch="B4" ile anahtar işareti ortaya yerleştirilir

Vuruşlara sembol yerleştirme

Bu kez data-beat özniteliği kullanılarak öğelere vuruş atanır ve CSS kurallarıyla vuruşlar grid sütunlarına eşlenir
CSS eşlemesi, her 1/24 vuruş için bir kuraldan oluşur
Öznitelik ^= başlangıç seçicisi kullanıldığında kurallar hataya toleranslı hale gelir
.stave sınıfıyla birlikte kullanıldığında, data-beat değeri 1 ile 5 arasında bir vuruşa, data-pitch ise nota adına ayarlanarak semboller vuruşa ve perdeye göre yerleştirilebilir

Akışkan ve duyarlı nota görünümü

Bu tür birden fazla ölçü bir flexbox kapsayıcısına konduğunda duyarlı bir nota görünümü elde edilebilir
Hâlâ eksik çok şey var, ancak başlangıç için iyi bir temel
Şimdiden çevrimiçi müzik renderer’larından çok daha zarif satır kırımı yapabiliyor

Notalar arasındaki boşluk

Zaman olarak birbirine daha yakın gerçekleşen nota başları biraz daha yakın render edilir
Bu, küçük column-gap tarafından oluşturulan ince ve kasıtlı bir etkidir; sembol öğelerinin yuvalara oturduğu bir tür zamansal “eter” işlevi görür
Nota başı yoksa sütunların kendi genişliği 0’dır, ancak zaman olarak daha uzak olaylar arasında daha fazla sütun aralığı bulunduğundan (vuruş başına 24 adet) daha büyük mesafe oluşur
Sembollerin kenar boşlukları ayarlanarak tutarlı aralık kontrol edilebilir

Anahtar ve ölçü işaretleri

Dikey ve yatay aralıklar için ayrı sınıflar kullanılmasının nedeni, birini diğerine dokunmadan değiştirebilmektir
Aynı melodiyi fa anahtarıyla göstermek için .stave sınıfını, aynı data-pitch özniteliğini bas portesi satırlarına eşleyen bass-stave sınıfıyla değiştirmek yeterlidir
CSS ile data-duration="5" değerini .bar içindeki 120 grid şablon sütununa eşleyerek aynı porteye 5/4 ölçü işareti verilebilir

Akorlar ve sözler

CSS Grid kullanılarak nota ızgarası içinde başka semboller de hizalanabilir
Akorlar, sözler, dinamik işaretler gibi öğeler zamanlanmış olaylarla hizalanıp genişletilebilir

Nota sapları

Nota sapları, akorlar ve bazı uzun suslar, data-duration özniteliğinin grid-column-end aralık değerine eşlenmesiyle sütunlar üzerine yayılabilir

Ölçeklendirme

Tüm sistem em birimiyle boyutlandırıldığı için, yalnızca font-size değiştirilerek ölçeklenebilir

Flex ve Grid’in sınırları

Bu mükemmel bir sistem değil. Sınırları şunlar:
1. CSS, satır kırılırken yeni anahtar/ton işaretini otomatik yerleştiremez
2. Yeni satırdaki yeni notaya bağ kirişi bağlanamaz
3. Eğik nota saplarında doğru konum ancak Grid yerleştirmeden sonra bilinebildiği için hizalama zordur
Tamamlamak için biraz düzenleme amaçlı JavaScript gerekir, ancak CSS yerleşim işinin çoğunu üstlendiğinden JavaScript tarafında yapılacak yerleşim işi çok azalır

Özel öğe

Bu yeni CSS sistemi etrafında bir yorumlayıcı yazıldı ve bir öğeye sarıldı
Henüz üretime hazır değil, ancak duyarlı lead sheet render edebilmesi ve davul notasyonu yazabilmesi onu ilginç ve kullanışlı kılıyor
İçeriğin verisinden, src özniteliğiyle getirilen dosyadan veya öğenin .data özelliğine ayarlanan JS nesnesinden nota render eder
Mevcut geliştirme sürümü bir web sayfasına dosya olarak eklenip denenebilir

Gelecek planları

Scribe 0.3 iyileştirmelerine ek olarak, uzun vadede araştırılmak istenen özellikler:
- SMuFL yazı tipi desteği - nota sembollerinde kullanılan yazı tipini değiştirme
- İç içe dizi desteği - çok partili eserleri etkinleştirme
- Bölünmüş porte render etme - tek bir porteye birden fazla parti yerleştirme
- Çoklu porte render etme - hizalanmış birden fazla porteye birden fazla parti yerleştirme

GN⁺ görüşü

Web’de notaları akışkan ve duyarlı biçimde render etmek, hem müzisyenler hem de müzik meraklıları için çok faydalı görünüyor. Küçük ekranlarda PDF notayı yakınlaştırıp uzaklaştırma zahmetini azaltabilir
CSS’in Grid ve Flex yerleşimlerini kullanan yaklaşım ilgi çekici. Karmaşık bir yerleşim motoru olmadan yalnızca CSS ile oldukça fazla şey yapılabildiğini gösteren iyi bir örnek
Ancak notanın doğası gereği, yalnızca CSS ile sınırların olduğu alanlar da var. Satır kırılırken anahtar veya ton işaretinin otomatik yerleştirilmesi ya da bağ kirişlerinin otomatik bağlanması gibi müzikal bağlamı anlamayı gerektiren noktalarda JavaScript desteği gerekecek
Lead sheet render etme ve davul notası desteği gibi pek çok şeyin şimdiden uygulanmış olduğu söyleniyor; bu yüzden yakında yeterince kullanılabilir bir seviyeye gelebilir. Açık kaynak yapılır ve geliştirme sürerse, MuseScore gibi mevcut nota editörlerine iyi bir alternatif olabilir
Planlanan SMuFL yazı tipi desteği, çok partili ve çoklu porte render desteği gibi özellikler hayata geçerse nota ifadesinin olgunluğu ciddi biçimde artacaktır. Umut vadeden bir proje

2 yorum

roxie 2024-05-06

Bunu yapmanızın bir sebebi olmalı.

GN⁺ 2024-05-01

Hacker News görüşleri

Bir nota yazılımı geliştiricisinden, CSS Grid kullanarak nota render etme yaklaşımına övgü var
- Soundslice adlı web tabanlı nota render etme hizmetini 10 yılı aşkın süredir geliştiriyor ve 2014'te ilk "duyarlı" web nota render etmesini hayata geçirmiş
- İlgili teknik ayrıntılar için sunum videosu bağlantısına bakılabilir: https://www.youtube.com/watch?v=XH5EtQge_Bg
- Soundslice'ın duyarlı nota örneği bağlantısı: https://www.soundslice.com/slices/zzNlc/
- Web tabanlı editör, pratik özellikleri, fotoğraf/PDF'den nota verisi çıkaran tarama özelliği gibi çeşitli araçlar sunuyor
- CSS Grid yaklaşımı hafif projelerde faydalı olabilir, ancak tam partisyonun karmaşık ve ince ifadelerini eksiksiz uygulamak zor olacaktır
JavaScript olmadan yalnızca CSS ile uygulanabilmesi için bunu CSS topluluğuna önermenin de iyi bir fikir olabileceği düşünülüyor
- Örneğin satır kırıldığında sol anahtarı tekrar gösterme, sticky tablo başlığına benziyor ve nota dışında da kullanılabilir
CSS'in attribute selector([...]) söz dizimi etkileyici bulunmuş. Örnek: .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }
Müzik dizgisi yapanlar açısından bakıldığında görsel olarak daha çok iyileştirme gerektiği düşünülüyor. Yalnızca CSS ile hassasiyet sınırları nedeniyle bunun zor olacağı belirtiliyor
- Nota sapları, yaylar, bağlar gibi öğelerin gösteriminde sorunlar var
- Tarayıcıdaki nota gösterimlerinin çoğu, nokta atışı hassasiyet elde etmek için SVG veya Canvas ile vektör render etme kullanıyor
- CSS dışında da tarayıcıda ölçeklenebilir nota sunan Soundslice, Sibelius Cloud Publishing gibi başka araçlar zaten mevcut
Başta CSS ile nota göstermenin pek iyi çalışmayacağı düşünülmüş, ancak basit bir yaklaşımla elde edilen tipografi kalitesi etkileyici bulunmuş. Yazara övgü gönderiliyor
- Yine de akorlar, sekizlik/on altılık nota aralıkları, partiler arası hizalama gibi özel durumlarda iyi çalışıp çalışmayacağı konusunda endişe var. Lilypond bu tür karmaşık gösterimlerde esnekliğini kanıtlamış durumda
CSS Grid ilgi çekici bulunmuş. Daha önce saf frontend JS ile CSS Grid'i kullanarak bir mobilya tasarımcısı uygulaması yapılmış: https://alnvdl.github.io/2023/01/07/designing-furniture-using-the-css-grid.html
<scribe-music> custom element'i de umut verici görünüyor
- Birkaç yıl önce bir stajyerin VexFlow'u web component olarak saran bir proje üzerinde çalıştığı, ancak bunun bakımının yapılmadığı belirtilmiş: https://github.com/PolymerLabs/vexflow-elements/blob/web-components/demo/index.html
- İyi bakılan ve kullanımı kolay bir kütüphane, web müzik notasyonu için büyük fayda sağlayacaktır
Lilypond(lilypond.org) için bir alternatif çıkması sevindirici, ancak notasyon çok karmaşık olduğu için sadeliğin avantajı muhtemelen uzun sürmeyecek
- Asciidoc meraklıları için Lilypond'u Asciidoc araç zincirine entegre etmek kolay. DocBook PDF hattında kullanılıyor ve çıktısı oldukça iyi. TeX'e benziyor
https://www.musicxml.com ve https://opensheetmusicdisplay.org sitelerini hatırlatıyor. Maliyeti çok daha yüksek ama tam teşekküllü bir çözüm
Impro-Visor(https://github.com/Impro-Visor/Impro-Visor) içindeki yetersiz nota özelliğinin bununla değiştirilip değiştirilemeyeceği merak ediliyor
CSS benchmark'ı gibi bir his veriyor