Prologue

37c3

37c3 (December 2023) is the first chaos communication congress I went to. I did enjoy all the exposure to the technology, but what caught my attention was the LED badge that was being given out at the FOSSASIA desk.

An example of the badge, taken from Badge Magic website
An example of the badge, taken from Badge Magic website

The badge operates via an Android app called Badge Magic and it can send over text and related configuration. I also set up a Python application called led-name-badge-ls32 which gives more granular control over what is displayed and how it is displayed. It also takes in 1-bit PNG files which can be sent to the badge for display.

An example of a 1-bit PNG.
An example of a 1-bit PNG.

This made things a lot easier when it came to putting text art or pixel art into the LED badge. Although there is a bit of difficulty in making sure the art sits and fits correctly into an 11 px height PNG.

A bit of manual pixel spotting helped create this.
A bit of manual pixel spotting helped create this.

38c3

During 38c3 (December 2024), in one of the areas there was a wall onto which fluorescent tape was used to create art, and anyone was free to go over and create art.

The
wall of fluorescent tapes.
The wall of fluorescent tapes.

With enough Malayalam speakers around, one of us ended up taping “അടിപ്പോളി” (which roughly translates to fantastic).

A
close up of അടിപ്പോളി
A close up of അടിപ്പോളി

This made me think: how about we display Malayalam on our badges?

Ignorance is bliss …

Also me thinking fonts on LED are trivial ...
Also me thinking fonts on LED are trivial ...

The original LED badge Python program can handle some trivial text, but it was not designed for handling Unicode Malayalam.

After a bit of searching, I came across an example Go application for a FreeType font rasterizer, that takes in a piece of text and a given font and renders a PNG.

So basically all I had to do is

  • Build the program
  • Get a font
  • Pass in some text
  • Set height to 11px

And I should be good to feed it into the LED badge.

After some initial tweaking of the example code and juggling around some fonts, I got it to display some English text.

When I used something like Source Code Pro, I ended up with blurry edges which do not translate well to an 11 px height LED display.

At 11 px the blurry edges do not translate well ...
At 11 px the blurry edges do not translate well ...

I searched for monospaced fonts since I was aware they are meant to be used in low-resolution situations like an LED matrix. I came across Terminal Vector, which is basically the font used by Windows Console Terminal. And to my surprise it turned out quite nicely, even on the LED display.

Sharp edges, and pretty much a 1-bit PNG.
Sharp edges, and pretty much a 1-bit PNG.

My choice of technique and monospace fonts here is going to affect a whole series of back-and-forth when I switch to non-Latin glyphs.

I also came across k8x12, which was producing legible LED display output.

Attempt to display Malayalam

With all the newfound techniques, I thought I had it solved for Malayalam. Convert a given word to a PNG via this example Go program and we’re good.

When I spoke to Ashik, he suggested I try Manjari first. So without much thought, I downloaded the font and ran it through the Go program.

Attempt to render കേരളം
Attempt to render കേരളം

The edges were not sharp, unlike what I had experienced with Terminal Vector, which meant that sending this to the LED badge just rendered junk.

After a few attempts that were leading nowhere, I asked Ashik if there were fonts similar to Terminal Vector or k8x12 for Malayalam. He suggested trying out Nupuram Dots as another example.

This was objectively worse than Manjari
This was objectively worse than Manjari

This is when the realization slowly started creeping in — that I was missing a lot of context on font rendering, and more importantly, shaping. But in my ignorance, I looked around for “blocky” Malayalam fonts and came across Ishtika.

Very blocky, but at the cost of the curvy aesthetics
Very blocky, but at the cost of the curvy aesthetics

Thinking that this would work like Terminal Vector at this point was plain stupid, but at least I should attempt to give it a try.

It was not only blurry but also not fully in frame
...
It was not only blurry but also not fully in frame ...

And it was the worst of all three, where the text itself was only partially visible, and again it was blurry with no sharp edges.

After a lot of back-and-forth with Ashik, my attempts to get Malayalam fonts to work with the LED badge had begun to diminish, especially due to my lack of understanding of how fonts worked.

Epilogue

Also my attempt to make 1 bit PNG with Malayalam
Also my attempt to make 1 bit PNG with Malayalam

I spent a considerable amount of time at 38c3 trying to display Malayalam on an LED badge. Ashik’s suggestion was that we may have to hand-redraw many of these glyphs to make them pixel-accurate. This was definitely way out of my league.

I even spent a bit of time with FontForge, and felt overwhelmed by the UI and the things you need to learn in order to design a single glyph within a font. Malayalam having more than 59 glyphs, I did not want to end up hand-tracing each of them either.

Here is a list of things I learned from this interaction

  • Indic fonts are hard, especially because they do not only vary in width but also in height, where parts of a glyph can go below and above the bottom and top baselines respectively.
  • Bitmap (pixel / raster) fonts are very different from Outline (vector / scalable) fonts.
  • Bézier curves define the outlines of glyphs, while HarfBuzz is the shaping engine that decides which glyphs to draw and where to place them.
  • FreeType is a font rendering engine.

All that being said, we are still a long way from actually getting Malayalam fonts to display on an LED badge.