pixeltex 👌

PIXELTEX - a fun little latex and emoji pixel typesetter
MINIGENT - an extensive 3x4 pixel font for miniature typesetting

MINIGENT 🎩

While working on some pixel art, I started designing some tiny letters to go with it. Suprisingly, I had a ton of fun and soon it escalated a little bit. I tried out greek letters, emojis and even full-on typeset formulas. Seeing the results and the potential, I decided to set out and extend the font with the most relevant symbols for everyday use and basic LaTeX typesetting.

The MINIGENT font is designed for readibility (unbroken reading flow at small and large scales) and extensability (recognizable symbol quantity without duplication), while trying to stay as small as possible (most symbols designed for 3x4, while the whole set ranges from 2x2 to 5x5).

The font itself lives in font/minigent.js and is split into symbol sets, similar to the Unicode Table. Each set contains a list of symbols, which in turn is defined by the following fields.

• bits: binary pixel array; always starts at top line y=-2; length determines symbol shape
• unicode: unicode number
• name: clear-text name
• symbol: actual clear-text unicode symbol
• code: optional token macro, e.g. 😁 or \alpha

PIXELTEX 👌

After playing around with the font and drawing some simple pixel math, I was instantly hooked. What if there was a typesetter that renders whatever text or formulas you enter in real-time to fun, pretty pixel images? Oh man!

The journey then though was - as is so often - longer than expected. In fact, this turned out to be my first full-fledged lexer / parser project, which was a struggle to say the least. Though I'm quite proud of how it turned out in the end. As always, there's a ton I'd do differently now, but that's the joy of learning things.

When you type something into the input area, PIXELTEX executes the following steps.

Input:String → Tokenizer:TokenList → Parser:AbstractSyntaxTree → Rasterizer:LayoutTree → Renderer:Canvas

The Tokenizer looks up symbols and according bit arrays directly from minigent.js, which allows for easy extendability. The rendered images can also be saved directly to png for use and sharing!

License

Feel free to use and share the code and font!

• The PIXELTEX source code is licensed under the MIT license.
• The MINIGENT font and data in minigent.js is licensed under CC-BY 4.0.

Conclusion

Looking forward to seeing the kool things you're going to create with it, and always thankful for feedback :). I'm doing these projects in my free time, so if you appreciate it feel free to drop me a coin or two ❤️.

Cheers and best ✌️.