Show HN: Karektar – Bitmap Font Designer(karektar.newtrino.ink)
karektar.newtrino.ink
Show HN: Karektar – Bitmap Font Designer
https://karektar.newtrino.ink/
28 comments
This is fun! Since you asked for feedback:
- 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.
- 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.
Thanks for the feedback, I appreciate it! To address your points:
- 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!
- 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!
Fun! I took my exported font over to https://fontdrop.info to have a quick look at some lorem ipsum.
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.
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.
"Submit" on mobile doesn't seem to work. I assume it's supposed to update the preview, right?
It's meant to update your glyph set, assuming that you've updated the input string to include new glyphs that were not in the previous set. You can observe the change on mobile by looking at the glyph gallery, which you access by tapping the current glyph icon in the top left of the canvas.
What is the point of the sentence at the bottom then?
I think it doesn’t work because the footer covers it. That seems to be the problem on my iPhone.
Same here
This reminds me that I made a way to create love2d fonts using pico8 files and ended up coming up with a 3x4 font that I absolutely love and hope to use in a homemade game one day.
Thanks, I like it! Would love to be able to see a live preview with some custom text. Also, I miss the uppercase chars but maybe I just didn't see them.
it doesn't really vibe with quick (hell, just fast-ish) strokes across the screen, trying to just write with a pen on screen results in a bunch of dots (strokes with missing pixels inbetween), so one has to move really slow. (maybe it also has to do with the canvas and strokes on it being a bunch of squares as is, and not like a (thinner? smoother?) stroke underneath, that gets aliased into bigger pixels) (ability to move and reposition stokes would be useful as well)
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.
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.
I'd love for this to also allow for shades of gray (the Fallout 1/2 bitmap font is antialiased). It would likely mean harder OTF exporting process for you though. Color fonts are still not supported everywhere, my last attempt ended up with PNG-in-SVG in the OTF.
Howmany pixels are each cube? Bitmap usually assumes one pixel each cube, can't find that info anywhere on the site
How do I preview what I created? The sentence at the top doesn't seem to fill any function or what am I missing?
Very nice!
Can we add numbers and basic punctuation to the list of glyphs?
Can we add numbers and basic punctuation to the list of glyphs?
Nice! I'd built something similar to make fonts for the Adafruit GFX library. http://aravind.rs/fruitfont/
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.
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.
This is really neat, thanks for sharing! To my recollection, I did actually come across GFXFont during my investigations on how to handle font exports, but I wasn't aware of the existence of any online tools which exported to that format.
[deleted]
This looks way too much like the editor in Pentacom' BitFontMaker https://www.pentacom.jp/pentacom/bitfontmaker2/
Admittedly I did take inspiration from BitFontMaker, and a couple of other tools as well, but with the hope of building on them in some ways.
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.
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.
[deleted]
[deleted]
This is literally their entire site. I am so depressed right now.
<!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.
<!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.
This is literally your entire comment. I'm so impressed right now.
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.
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.
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!