Apex - Simple Font Rendering in Flowstone

[tulamide]

Apex consists of 2 parts. A standalone application that is used to prepare a font for use, and the font engine that is responsible for displaying text. Today I will release the first part, the standalone application "Apex". I know there's a lot to read here, but please do. You will get a better understanding of how it works.

A brief and incomplete history of fonts

A computer monitor was used to present an image from the computer divided into evenly distributed picture cells. The name "picture cell" later was reduced to "pixel".
Consequently the first fonts were pixel-based, which means that every bit of information defined exactly one pixel.

But then the printing companies wanted to make use of computers. They had totally different demands regarding fonts. Their smallest unit was the tiniest ink dot they could produce. That measurement was called dpi (dots per inch), and most of them were printing with a resolution of about 300 dpi. (For comparison, modern monitors, pixels being interpreted as dots, have about 96 dpi, smartphones can reach over 200 dpi)

But converting a pixel to a dot resulted in very tiny text prints of what seemed very large on a computer monitor. They needed something more practical, and that resulted in "wysiwyg" (what you see is what you get). Instead of directly transforming a pixel to a dot, they measured a monitor's ppi and through complicated conversion methods transformed it into matching dpi.

The pixel fonts couldn't provide this, as they only have one fixed resolution - based on a pixel. That was the birth of postscript fonts (followed by truetype and open type fonts)

Instead of directly coloring a pixel based on the pixel information in a pixel font, they created vector information (with lines, bezier curves, etc.) on a virtual grid. So just drawing instructions, basically. This way they could have one resolution for the monitor and another, size-matched resolution for the printers. And both appear to be the same size, when you hold a print next to a monitor.

To do that, whenever you hit a key, the system creates a bitmap and draws lines into it that form a character, following the drawing instructions of the font file. This bitmap is then presented on the screen. The process is called "font rendering".

At first my thought was to take over this whole work from the system, so that Flowstone can handle them independendly. That's why I created the spline class in the first place. Unfortunately, postscript, truetype and open type fonts use a metric system that is not easily converted. It is based on so called "em units", and involves knowledge about ppi, desired dpi and various other informations. In short, I couldn't realize it with the tools, Flowstone provides (it lacks system information access a lot).

So I switched to the next best thing: Taking over the font rendering, but divided into two steps. Instead of "on the fly" conversion, I developed a standalone app I call "Apex", and the font engine for use in Flowstone. With Apex, you access any font currently installed in your system and divide it into glyphs of your choice. Basically characters of all kind. Then you set certain properties for the rendering process, such as cell width&height, or kerning of individual characters. Kerning describes how much a character moves from its orignal defined position, to generate a pleasing typeface. If you leave all kerning values at 0, you create a so called monospace font. which is non-proportional in nature. Typewriter fonts are typical monospace fonts.

When you are pleased with the typeface, you export it into a .bmf file, which contains all the information the font engine in Flowstone needs. In Flowstone, you load this file once, and then it gets stored with the schematic in the same way as bitmaps, text or wave files do.

You can also save and load an .afp file to and from Apex, which is the project file and allows you to interrupt your work on a font, make changes, and the like. Any save of a project file is a snapshot of the current state of Apex, minus the existence of the used system font. In other words, make sure a font you accessed in a project, is present in your system, before opening that project file.

Since it is not a "on the fly" conversion, and because of some Flowstone limitations, Apex is limited as well.
- You have to decide on a color during the use of the standalone app. You can't change the color with the font engine.
- Flowstone does not support UTF-8, let alone any other unicode. You are bound to the standard 128 char ASCII set. When you open Apex, you will find in the char list german umlauts. It was very, very tricky to get them in (using Ruby to bypass Flowstone, which is difficult considering that every string has to somehow pass Flowstone, before it gets into Ruby; and making them hardcoded), and I doubt you will have success with other special chars. For everything English it is sufficient though.
- Just as any other pixel font, Apex fonts are bound to one resolution. You can scale a font up or down in the font engine with smooth interpolation, but I wouldn't recommend scaling for drastic font size changes. Instead, better create several font files for the different font sizes. My experience says that you should do a new font file if you'd scale lower than approx 0.75 or above approx 1.2 (remember: scaling is two-dimensional. A scale factor of 0.5 is a quarter of the original font size)
- Kerning, font space and whitespace are very important for proportional fonts. Since I couldn't automate this, I made it as easy as possible to make changes. Take your time and be precise in your work. You can always directly see the changes you make in the lower view, because there the same font engine is active, that you use later in your schematic.
- Flowstone uses grid units as base, not pixels. This can result in virtual subpixels on display. I did everything I could to prevent most of them, but you may find that a font looks strange at certain system font sizes. If you can't get around it with the tools, Apex provides, choose either another system size or switch to a different system installed font. This occurs, because system sizes are actually measuered in "font points", not pixels. But the lack of Flowstone support left me no choice but to interpret them as pixel sizes. A purely hypothetical example: A size of 26 points may actually be 24.34 pixels. Setting it to 26 pixels could then introduce subpixels.


Here's a picture chart of Apex. Most should be self-explanatory, but the development took so long (started in 2014), that I may have become a bit lazy regarding the GUI.
Apex Chart

And here's Apex. I hope you like it! Use it to prepare your fonts, while waiting for the final release of the font engine.

(Just in case you wonder, Paypal says that the link in my signature should accept credit cards. If not, please report!)

[adamszabo]

Thank you! Donated for your hard work

[tulamide]

Thank you so much, Adam!

To everybody reading here: Don't feel obliged to donate. Just download and work with it. And of course, please comment. Even if you don't like it after trying (but give reasons).

[Halon]

Thank you tulamide

[tektoog]

Thanks! I gave you a little something too
Hope it helps to keep you motivated for the making of a video tutorial

[Spogg]

Finally got around to checking this out!

This is an amazing program tulamide. So much work must have gone into this over the last 6 years!

I had a play with Apex and it’s so intuitive to operate. No User guide needed (I’m envious!).

Looking forward to the 2nd part!

I shall buy you a drink!

Cheers

Spogg

[tulamide]

Thank you, Spogg! I'm so glad that you like it, your opinion means a lot to me!

----------------------------------------------

Are you into Pixel art, or want to recreate that old-school 80s font lettering? With Apex you can. It involves a step more than I wish for, but still. In my opening post I talked about pixel fonts. There are online tools out there, that allow you still to create those. Here are examples of pixel fonts I made over the years.
Fewture
Nerhoe
Tiny Tim
The last but one paragraph is the original size of the fonts.

The first two names are wordplays, just pronounce them "future" and "narrow", which is their font style. But I am especially proud of Tiny Tim. It is, up to this day, the smallest font size in existence that includes both, upper- and lowercase, while still being perfectly readable. The glyphs are only 5 pixels high and 4 pixels wide!

(Set Arial to a size of 5 or 6, to understand, why I'm proud )

Ok, back to topic. With bitfontmaker2, you can create your own pixel font. When done, download the font file and install it in your system (you can delete it later, when you're done with Apex). Open Apex, select your font and find the original size. I can't remember, what bitfontmaker saves it to, probably 13 or something like that. But as you created the font, you know when it is the correct size. Now switch off anti-aliasing by selecting the symbol most left. Do the usual work with Apex to create a pleasing typeface, then export to .bmf and you're done! Your very own pixel font for that 80s inspried synthwave instrument you're working on!

Of course, if you are into modern font creation, you can also use truetype/open type font editors like FontForge.

Have fun!