Converting BDF / PCF fonts?

Posted on
  • 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/EspruinoWebT­ools/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/EspruinoWebT­ools/blob/master/fontconverter.js - that way you could export to JS (or a PBF file) to try things out more easily.


    1 Attachment

  • 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-fo­nts

    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/EspruinoWebT­ools/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

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Converting BDF / PCF fonts?

Posted by Avatar for prehensile @prehensile

Actions