You can submit your own input string, and the app will generate the gallery of unique glyphs. Build your own designs using the various tools available, then export it to an OTF format when you're done.
This is my first front-end project, and one I picked up to learn React. I'd love to hear any feedback, especially on usability and additional features you'd like to see. Cheers!
- I couldn’t find a way to clear pixels after drawing them, short of using the trash can icon to clear the whole glyph. Especially since I’m on a phone, an “eraser” tool would have been handy for those couple of stray pixels in an otherwise happy tracing.
In Pentacom BitFontMaker (which, as a sister comment points out, Karektar seems to be based on), it looks like they avoided an explicit “eraser” tool by causing strokes to clear pixels whenever the stroke started on a filled pixel.
- My phone has a relatively small screen, and the fixed footer text covers the bottom row of controls such that I can’t use them.
- There is in fact an eraser tool available, as well as shape and fill tools. You can access them on mobile by tapping on the pencil icon, which opens a dropdown menu.
- Early on when I was developing Karektar, I did in fact avoid including an explicit eraser tool, instead using the approach you described. However it felt a bit finicky to use, and that including a separate eraser tool would give an additional degree of freedom. For instance, if you are intending to draw on mobile, but your touch accidentally interacts with a filled pixel, you can still continue to draw without worrying about erasing work you hadn't intended to undo.
- I had a feeling the footer text might pose an issue, apologies about that! The addition was an afterthought, specifically to allow people to access the original repo; but I'll aim to fix it soon.
By the way, towards the first two points: I did also include a modal to describe the key functional aspects, which can be accessed by clicking/tapping on the "Help" button. This was to ensure that people would be aware of elements such as how to access additional tools on mobile. However it seems like some of the interactive elements may still be unintuitive, so I'll see if I can make them clearer. Thanks again for your comment!
Had some trouble figuring out what the "Submit" button was for. Wasn't until fontdrop revealed I was missing capitals that I went back and experimentally added an uppercase to the sample.
nonetheless, very cool thing that can quickly just give you a font file. that directness and immediacy is commendable
also, maybe there could be a 'toggle pixel' mode, instead of separate draw/erase modes. intuitively i'd just want to click on pixel to flip it, and that'd be quicker than 'switching to erase - erasing - switching back to drawing' again and again.
Can we add numbers and basic punctuation to the list of glyphs?
Its export format is C code that defines GFXGlyph and GFXFont structs.
Doesn't work well on mobile and multiple size/style variants doesn't work yet. This was mostly the result of yak shaving after I set out to make a watch face for my SQFMI Watchy.
But one design choice of Pentaocm's tool, which I really appreciate, is how the individual glyph previews update as you make changes on the main canvas. This was an aspect I also implemented in Karektar, though with a larger gallery for more legibility.
A new feature I did develop was the ability to input a custom query for your own unique glyph set. To my knowledge, that is not a feature you'll find in most of these tools.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/png" href="./favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Karektar</title> <script type="module" crossorigin src="./assets/index-f8e9a3f5.js"></script> <link rel="stylesheet" href="./assets/index-90296a42.css"> </head> <body> <div id="root"></div> </body> </html>
edit: I'd rather look for similar offline tool, written in C and working not just in latest browsers.
Your expertise at criticizing beginners' work without offering any constructive feedback is a real inspiration to us all.
I'm especially impressed by your elitism towards modern webdev technologies. I mean, who would use React or TypeScript when you could be using C? How stupid of someone to write code that's simpler and user-friendly, when they could be using a relic from the 1970s.
I'm so sorry you're depressed. It must be hard to see someone create a perfectly cool, working website, though they're just a beginner.
But dw, we're here to support your growth! After all, that's what the tech community is about.
Just kidding - we're obviously all here to be condescending to promising newbies so we can feel superior about our own skills.
PS: If you do find the tool in C, do let us know! We love trying new things, especially if they're designed to discourage new developers.
