Записываем музыку при помощи CSS Grid

Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!

В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.

Прототип Scribe

SVG, отрендеренный Scribe 0.2

Несколько лет назад я создал прототип рендерера музыки, который назвал Scribe. Он выполняет преобразование JSON в SVG. Изначально я стремился к созданию адаптивного рендерера музыки. Это было хорошее демо, но для дальнейшего развития пришлось бы писать сложный многопроходный движок генерации макетов, а у меня тогда возникли другие дела.

Вскоре после этого я занялся адаптированием Grid под проекты компании, и тут мне почудилось нечто знакомое: я задался вопросом, а не станет ли он решением некоторых проблем, с которыми я столкнулся при разработке Scribe?

Класс .stave

Нотный стан выстроен в подобие сетки. Высота ноты откладывается по вертикальной оси, а время идёт влево по горизонтальной оси. Я определю эти две оси в двух отдельных классах. Вертикальная ось, описывающая строки сетки, будет называться .stave. К оси времени мы вернёмся чуть позже.

.stave содержит строки сетки фиксированного размера, имеющие имена стандартных высот нот, и фоновое изображение, отрисовывающее стан. То есть для нотных линеек скрипичного ключа 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%;
}

Если применить этот код к <div>, то получим следующее:


Неплохо. Не особо информативно, но, изучив результат, мы увидим, что у каждой линейки и у каждого пустого поля теперь есть собственная строка сетки с названием высоты ноты, обозначающая каждую строку:

▍ Размещаем высоты нот на нотном стане

Каждая из строк стана может содержать одну из нескольких высот нот. Например, ноты G♭, G и G♯ должны находиться на одной линейке G.

Чтобы разместить описывающие эти ноты элементы DOM в нужные строки, я помещу названия нот в атрибуты data-pitch и использую CSS, чтобы сопоставить значения data-pitch со строками линеек.

.stave > [data-pitch^="G"][data-pitch$="4"] { grid-row-start: G4; }

Это правило обрабатывает ноты, начинающиеся с 'G' и заканчивающиеся на '4', то есть оно присваивает ноты 'G♭4', 'G4' и 'G♯4' (а также дубль-бемоль 'G