chsmc.org

I’ve remarked before on my gratefulness for CSS as the ubiquitous and expressive visual language of our times, a sort of design Esperanto (that is actually widely spoken).

One would struggle to find a more perfect example of this than Scribe, by Stephen Band. Scribe is a custom element (<scribe-music>) which renders responsive music notation in HTML and CSS grid.

Here’s an example, rendered inline via Scribe:

0 meter 4 1 0 chord D maj 4 0 note F#5 0.2 2 1 note A4 0.2 1 4 note D4 0.2 1

To really understand the magic happening here, you must read Stephen’s excellent blog post about how it all works.

It’s remarkable that this is possible using CSS, and even more remarkable that the language itself morphs to become a syntax not for describing elements on a web page, but to describe pitch over time. CSS as interface for the natural world.

Under the hood, Scribe uses markup like this to represent music in time:

<div class="stave bar">
  <svg class="clef" data-pitch="B4">…</svg>
  <svg class="flat" data-beat="1" data-pitch="Bb4">…</svg>
  <svg class="head" data-beat="1" data-pitch="Bb4">…</svg>
  <svg class="head" data-beat="2" data-pitch="D4">…</svg>
  <svg class="head" data-beat="3" data-pitch="G5">…</svg>
  <svg class="rest" data-beat="4" data-pitch="B4">…</svg>
</div>

Elegant, useful, and thanks to the hard-won stability of the web platform: durable for generations to come.

One might wonder, what other natural or mathematical systems might we be able to represent in CSS? Another example that crossed my feeds recently is time-based CSS animations by Yuan Chuan.

Yuan creates a variable in CSS representing time, and uses keyframe animations to increment the value of the variable by 1 every millisecond. Suddenly CSS has a timer, something powerful for generative art and animation where time itself is used as an input variable.

Need to adjust the frame rate? Easy:

/* 8 fps */
animation-timing-function: step(calc(86400000 / (1000 / 8)));

Yuan has some great examples of how this can be combined with functions in CSS like min(), round(), and newly added trigonometric functioned like sin(), cos(), etc. to create all sorts of useful effects. My favorite example is using all of this to create a clock with a perfectly ticking second hand.

In terms of representing natural systems in CSS, this reminds me of how often I’ve wanted to be able to generate and use random numbers in CSS at runtime. To my delight, it looks like that’s in the works.