02 Notes

I was fascinated to see a font sampler from the 14th century at the National Palace Museum in Taipei Taiwan during a visit last December so for week 02, I've created a font sampler in Chinese.

For text, I used a couple of stanza's of the Dao De Jing (道德经) in serif and sans-serif Chinese script.

One translation, there are many, reads:

The Way that can be named is not the eternal way.

The Name that can be spoken is not the eternal name.

Those who speak do not know, and those that know do not speak.

The page is inspired by The Thousand-Character Classic in Seal and Clerical Script by Yu He (1307-1382). The album transcribes ”The Thousand-Character Classic” in alternative rows of seal and clerical script for the same passage, making it not only easier to decipher the individual characters but also displaying the beauty of these different calligraphic script types. The seal-script character forms are elongated yet solid with the lines slender and powerful.

A bit of a technical challenge, I tried flex box and grid to space each character but didn't get the effect I was looking for and ran into alignment problems. I also tried copying each character twice but didn't want to go that route because the text wouldn't make sense. My solution was to use splitting a JavaScript library to wrap each character with a span element so they became grid items in a grid container from it's parent paragraph element. Splitting also adds CSS variables which I used to set number of columns with min-content to limit it's width.

grid-template-columns: repeat(var(--char-total), min-content);

Technologies

• CSS Grid Layout
• CSS custom properties
• CSS logical properties
• Writing Mode
• Media queries
• Splitting js