Converting BDF / PCF fonts?

Hello! I can see from the Espruino source that a few fonts (like Haxor Narrow) were converted from bdf / pcf font files.

I'd like to try out some other bdf fonts. Is the converter you used available anywhere @Gordon, before I try to make one myself?

Good question!

I have a font converter at https://github.com/espruino/EspruinoWebTools/blob/master/fontconverter.js which I'm using for most stuff now (like creating the font pack apps, and hopefully at some point https://www.espruino.com/Font+Converter), but it doesn't handle BDF yet.

I've got a very hacky tool that I don't think I ever released, which I've attached below. It loads BDF and spits out a C file that can be compiled into Espruino.

If you were up for a challenge it'd be awesome if you could add the BDF loading code from that tool into the main https://github.com/espruino/EspruinoWebTools/blob/master/fontconverter.js - that way you could export to JS (or a PBF file) to try things out more easily.

1 Attachment

• convertfont.js

Thanks for the code, @Gordon! I'm up for a challenge :)

I've been poking around some other font related code from the Espruino repos - I'm wondering what the format of the font bitmap data is, as passed to Graphics.setFontCustom? Is it (1) a wide bitmap, consisting of all characters side by side on the x axis, (2) individual bitmap data for each character just concatenated together or (3) something else? This'll help me visualise the process.

I think this might help - short, but I think it contains the jist of it: https://www.espruino.com/Fonts#custom-fonts

You'll need a string containing a column-first, most significant bit first, 1 bit per pixel bitmap containing the font bitmap. Optionally you can also have another string containing the widths of each character.

Yep yep, it was that bit of documentation which led to the question: afiak, there's not a specific definition of "font bitmap"? Maybe I haven't grokked "column-first, most significant bit first" properly.

It's not super-important I guess, since most of the code seems to be working with per-glyph bitmaps and sticking it all together is already managed by fontconverter.js.

Basically imagine writing all your characters in a line: ABCDEFGHJ... then just rotate it by 90 degrees - and that's your font bitmap, then the font widths buffer contains the width of each character... That's basically all there is to it.

There's this tool to create 7 segment fonts which may/may not be useful - it runs on Espruino and generates the bitmap using a Graphics instance: https://github.com/espruino/EspruinoDocs/blob/master/modules/sevenseg_font_tools.js#L119-L120

Ohhh, I get it now. Flipping it through 90 degrees was the bit that made it all click. Thankyou! I'll crack on when I next get some tinkering time.

Just to add that https://github.com/espruino/EspruinoWebTools/blob/master/fontconverter.js will now load BDF files, although current tests seem to show it outputting fonts upside-down which is a bit confusing (as the debugChars function outputs them the right way)

edit: it's fine now - not upside-down, but the x/y offsets of characters weren't working