Living Toki Pona using FlexBox layout and Sitelen Sitelen

TL;DR A small story on how the automatic writing of Sitelen Sitelen Toki Pona using CSS FlexBox forms the basis of a Zen-inspired app including a sneak preview at the end.

ona li lukin e pipi

This post is shows a glimpse of an experimental project I call ‘Living Toki Pona’. Toki Pona is a constructed language from 2001, dedicated to being both minimal and expressive. In the words of the creator Sonja Lang: “It was my attempt to understand the meaning of life in 120 words”. The 120 words are usually written using the Latin alphabet and sound like a form of pidgin. However, the low word count does not really make it a useful language for daily or official communication, but more for a Zen way of describing the simple things in life and as such triggered my interest… in 2004. Being a daft language used by practically nobody my attention drifted elsewhere.

However! A few months ago, I found an adaptation of the most famous course on Toki Pona, the eternal lessons of Jan Pije. Jonathan Gabel reworks Jan Pije’s lessons but focuses completely on a new form of writing he calls Sitelen Sitelen, which translates roughly to hieroglyphs. His work is amazing. Not only did he create fantastic glyphs, reminiscent to the Mayan glyphs, but he also shows a complete non-linear writing style to create full sentences in, again, Mayan-like glyph blocks. In this writing style word order can be horizontal or vertical, glyphs can be squeezed and stretched, glyphs can be inside other glyphs. Jonathan gives basic rules, but the overall rule is that the outcome should be beautiful.

Jonathan’s work is all hand-drawn, so I immediately thought about creating an engine to generate Sitelen Sitelen automatically. The whole squeezing, stretching and nesting of blocks sounded a lot like HTML to me, more specifically I chose to use the relatively new FlexBox layout of the CSS specifications to serve as the rendering engine for my digital Sitelen Sitelen. To get me started I recreated Jonathan’s glyphs as SVGs (hopefully with his permission!). Next, I tweaked the FlexBox layout engine with my own CSS styles to recreate the sentences used in Jonathan and Pije’s lessons. The result for the first few lessons is shown below:

Having fallen in love with the writing style, I then thought about creating an app, as an experiment of course. I don’t expect the masses to adopt Toki Pona. I know I won’t. Nonetheless, I want to use its Zen potential! I want to create an app that makes you translate increasingly complex situations in life to simpler, more practical concepts that can be expressed in Toki Pona. The app should be mainly in Toki Pona using Sitelen Sitelen. The Toki Pona glyphs lend themselves perfectly for in-app icons since iconography itself is a type of minimal language.

I’m creating the app using PhoneGap so that I can use my HTML rendering engine (and because I teach a course in hybrid mobile development). First I want to solve the input system. I don’t want people to input using a standard keyboard but input Sitelen Sitelen directly. As a first test I created a small app in which people can enter their name (how daft!) by adding and removing characters. They can also share their Sitelen Sitelen name.

As an encore, I am using the iOS text-to-speech engine to pronounce the Toki Pona words. I chose for a Finnish voice, because God loves the Finns. Their pronunciation is neutral, regular and without much stress. The Toki Pona pronunciation by a Finn sounds very natural to me!

The following clip shows a small demo of the app so far. To understand the menu you might need to know a bit of Toki Pona: awen = keep/save, pakala = destroy, monsi = back, kulupu = community/shared. Oh yea, for foreign words Sitelen Sitelen uses different glyphs: one for each phoneme (syllable). Names are placed in a cartouche with the glyph jan (meaning person) on top. You have to keep your device still or the cartouche will dance around, just like your monkey brain.

Leave a Reply

Your email address will not be published. Required fields are marked *