Online font editor

[Shdwdrgn]

I found that the automatic conversions of small fonts into bitmaps left a lot of artifacts (my particular case was DejaVu Sans 9) and I needed a way to clean them up. I just put this together over the last few days but as far as I can tell it seems to be working, and the fonts I tested are showing correctly on my SSD1306 128x64 I2C display. I thought I would offer it up to the community since I had seen other posts in various places asking for ways to modify the font data.

The editor can be found here: http://sourpuss.net/projects/fontedit/

To get started, you can paste an existing font file into the code box at the bottom or select one from the drop list, then click the 'Load' button. Then select a character from the table at the top-right and make edits in the central grid. When you are satisfied with your changes, click the 'Save' button and a new file will be generated in the code box. Note that you must save your edits before switching to another character (for example, if you click the same character in the table again, the previous version will be reloaded in the editor).

I am working with the latest version of esp8266-oled-ssd1306 so in my files the font variables are type uint8_t instead of char, however this makes no difference to the editor and you can load either type of file.

A few caveats I know of:

• There is currently no way to create a new font from scratch. If there some interest in the tool I will expand on its capabilities though.
• The page does not really scale, so if you try to load a large font on a small computer screen, you will see the character table get shoved out of place.
• The red bar to adjust the width of a character sometimes jumps out of place while editing the pixels. There's probably an easy fix, I just haven't looked into it yet. I usually just move it back to the correct position right before saving my edits.
• Overall there has been extremely limited tested, so things will probably break. I'm working with Firefox 78 and I plan to set up an HTML5 canvas in the right-hand table to show the bitmapped characters instead of a desktop font for selecting what to edit, so a modern browser will be required.

I've really enjoyed using this library over the past few years, so this is my thank-you to the original authors and the community at large for making it so easy to work with.

[Shdwdrgn]

Just wanted to say I pushed out a huge update to the code (still in progress). I've rebuilt the interface and added the ability to load a font from your own desktop. There is a full undo buffer and some copy/paste functionality, and I'm closing in on the ability to create a new font from scratch. I'll keep working on getting everything wrapped up, but these changes should make the editor a lot easier to use.

[marcelstoer]

Thanks, I was also mentioning it here #281 (comment)

[Shdwdrgn]

Awesome, sounds like this would solve that person's problem as well.

I fixed up the display issues when working with new (empty) fonts, believe I have it working correctly. Someone should be able to set the parameters and create a new font by hand now. I'll try to get the save (download) button working this weekend and wrap up some known issues before I put it aside and wait to see if there's any bug reports. One of those days I'll post the code to my own git so that actual bug reporting can be done.

[marcelstoer]

Thanks for your efforts! As commented there we would still welcome someone to create a PR for our README to document font handling.

[Shdwdrgn]

I've been wondering if the format was documented anywhere. I didn't have any luck finding info so I ended up reverse-engineering it. I just added a new indicator to my editor, if you mouse over the table of bits it will highlight those bits in the pixel grid. That should make it much more obvious as to how to characters are created, and I can use this to generate some screen shots and try to put together a small document on how the fonts are created.

[lorol]

https://rawgit.com/lorol/esp8266-oled-ssd1306/master/resources/glyphEditor.html
Some of my old stuff.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.