January — Il-Verse

January — Il-Verse

Heikki Lotvonen | written on 4.2.2026

I spent January on building Il-Verse, a spatial writing tool where characters are dropped in cardinal directions that collide based on lettershapes.

Il-Verse

January produced yet another tool. The House of Text in Helsinki had a one month residency period for a group of artists working with text. They asked Arja if she could come introduce Centre for Text Margins, and they also wanted to hear more about my residency, so Arja invited me along. I had mentioned earlier that it would be really nice to collaborate with some artists who work with text to test out some new ideas I had for a poetry tool, so this was the perfect opportunity. The result is a visual poetry & experimental typography tool called Il–Verse, which I introduced to the group during one afternoon workshop.

It's based on the same kerning idea I already implemented for the single stroke vector font editor: fit glyphs as close to each other as possible based on the actual vector shape, so they're just about touching, but don't collide. Then add tracking.

But instead of automatically composing paragraphs from words, and words from letters, with Il-Verse you "drop" characters in a straight path (up, down, left or right) until it collides with another letter. It somewhat resembles manual letterpress typesetting, but as a writing tool rather than a design tool.

Parsing the fonts

Before starting with the editor, I had to figure out how to make the collision system and get proper data to work with. I knew AABB [1] is computationally quite fast and simple to implement, so I went with that. Then I only had to figure out how to parse the letterforms into boxes. I remembered a method from Sebastian Lague's video on ray tracing [2] which mentioned a bounding volume hierarchy for subdividing a complex shape into smaller and smaller bounding boxes. I figured that would be the best, as it would produce the least amout of boxes, but with sufficient resolution (I also cull boxes that are not visible from one of the cardinal directions, because letters would only drop from those directions):

As mentioned earlier, this can create too much overlap in combinations like "C-" where the dash would go completely inside the C shape. I tried fixing this by adding a big bounding box that's some percentage of the original shape, and acts as a minimum bounding box size. This worked decently, so that combinations like AT, LY, etc. are not overkerned.

I used TypR.js [3] to get the font vector data, parsed each letter, then made a quick demo with matter.js [4]. The initial results were promising and fun! Almost too fun because I almost pivoted into making a kinetic typography sandbox rather than a poetry tool.

But as I started working on the editor, and had a friend try it, I realized that my initial approach was not going to work for two reasons: first, the binary tree method would produce zero width/height boxes where it found a straight edge, and this would cause all kinds of problems with the collision system, and second, my friend wanted to drop letters inside other letters! Like, drop some letters inside the bowls of the letter "B" for example. Which, I agreed, he should be able to do. But that didn't work with my method because the inner areas were either blocked by the inner bounding box, or because I had culled the inner bounding boxes and there was nothing to collide with. I had done the classic programming sin and optimized too early.

I had to figure out a different approach, and I settled on the following: rasterize the shape, divide it into 50×50 grid, find the largest axis-aligned rectangle inside the grid that the shape occupies, convert it to a bounding box, then repeat until some treshold is reached. This produced a decently low number of bounding boxes with a decent precision. I bet there are better and simpler ways to solve this problem. But this works just fine — I only need to parse the font once after all, and the larger amount of bounding boxes doesn't actually impact performance as much as I had feared. I can easily render 3000+ glyphs on one page, which is more than enough.

Then I did the rest of the editor. It has two modes: In TYPING MODE letters are dropped instantly on key press, and in DROP MODE letters can be placed more carefully with a mouse click. The drop direction can be changed, letters can be rotated and flipped, the font size follows Pierre-Simon Fournier's [5] type scale, and the editor is completely useable also with a keyboard. The cursor can be snapped to grid for precise lines. TAB places an empty bounding box at cursor location, which allows for creating all kinds of layouts. It saves the files as a command history, so the undo state is always preserved! It also functions as a nifty timelapse playback tool. You can load your own font, or use one of the four Computer Modern fonts. It's pretty simple but surprisinly "powerful".

Finally,...