Show HN: I made a grid based font editor and font | Hacker News Reader

Show HN: I made a grid based font editor and font

brutalita.com

243 pointsjavierbyte39 comments

Hello HN! I wanted to make a font that I can "snap" to vertices on a grid for an upcoming project, and after starting making it I decided that it was going to be easier to iterate if I made an editor too. It uses opentype.js to generate the font and some invisible textarea tricks combined with svg for the text editor.

It took me a second to realize what I was looking at, but this is a very cool toy to play with.

When I click the same bubble twice in a row it clears the entire field of bubbles. Is this intended behavior? Seems like I should be able to undo a click that I've made. Using Firefox on MacOS.

I also lost some font progress to this feature. Maybe a “clear” button would be more intuitive?

Awesome project though and beautiful fonts!

I have a fascination with segmented LED and LCD fonts. This, I expect, will be a major distraction for me today.

Before everything standardized on 7-, 14-, and 16-segment displays, there were a lot of creative alternatives. A bunch of different 7, 8, 9, and 22-segs, including my favorite one: https://www.flickr.com/photos/adam_sporka/1843883266

I once owned a Fossil watch that had an ~18-segment display that displayed the time in Chinese, and drew the characters slowly. It was endlessly fascinating.

For a Christmas bonus this year, my company sent everyone indoor/outdoor weather gadgets. Enormous beautiful screen, but I keep staring at it thinking about how it could be more efficient with better fonts and fewer segments.

You might know this awesome channel already, but here is a video of an excellent segmented font: https://www.youtube.com/watch?v=MRjVXxm4Z7I

This is so cool.

Some suggestions:

  - I have no idea what the four buttons at the top mean
  - The edit sidebar could be a little bigger. I'd even onsider making it horizontal? (Edit: just noticed it becomes horizontal when zooming in. Nice!)
  - Undo/Redo would be nice
  - Add a little message people can use to give credit to you

I want to change the size of the letter grid... Maybe to 10x10?

Also, I want to change the aspect ratio of the grid. :D

So, a 10x10 letter grid with a 4x3 aspect ratio.

---

Edit: the example is the letter Q, and somehow it has sub-grid lines. If you take a look at the top two corners, you'll see the line's points are between grid-points. Is there a way to turn off snapping?

If you open the editor on a bigger window (I think I made it 1000px or more) you'll get the "full" editor with the dots that you are missing. I may make it an option so you can get the full editor on mobile too.

And yes, more points and different aspect ratio would be nice, currently the `textarea` works by having a native textarea invisible on top of the SVG render, and tuning it to be in sync was a bit hard. So I think I can make custom grids and ratios happen but I'll have to disable the textarea for them, no big deal I guess :)

Shrinking the window and expanding it again sometimes makes the smaller dots disappear from the full-sized editor, but not every time. I'll let you debug that :)

1. Noted, the buttons are confusing. In the meantime: "download" downloads the original font that I made, "download edited" download currently edited font (if you have made any edits) in .otf format, "download json" downloads each char definition as coordinates, and "restore json" lets you restore a previously edited json so you can keep editing your font. Everything happens locally, there are no servers. 2. Yep 3. Do you have something in mind? :)

Would be nice to customize the name of the font before downloading it

Really cool stuff... I'm already halfway through my very own font

Would be nice to be able to edit a glyph while comparing to the current version so you can tweak it without destroying it... and then ultimately click to replace the existing glyph with the new one

Highlighting the x-height and other helper lines on the editor would also help avoiding a ton of iteration

Sounds so good! That is a feature that I want to implement, when I was making the font I wanted the same feature (but decided to finish the font first!) so what I end up doing was using a different character to create a variation of a char and then replacing the coordinates in the JSON file later.

This is extremely cool! Being able to tweak glyphs on the right and use them on the left is pretty amazing feeling.

That's some damn fine yak shaving.

Feature suggestion: Could there be a visual clue which node will be linked to if I click?

This is great. The ability to delete a cell without deleting the whole layer would be really helpful.

I made that change, and added a separate button to delete the layer :)

Really fun idea, very well executed, and the font (to me) looks way better than I’d have guessed.

Doesn't seem to produce a valid font file for Windows, for what it's worth.

I haven’t looked into the font, but when building mine one mistake I made was to assign a glyph to NUL.

This is a very nice tool for experiments with con-scripts (like Tengwar or Zbalermorna).

That said, I'm not sure I understand how the grid editor works. Is there any way to edit the existing node, instead of adding more strokes?

Nice! I have been looking for something like this for awhile. Thanks for making it.

Also worth exploring: https://fontstruct.com/

I really like the font. Reminds me of the vector fonts used in computers like the Tektronix storage tube-based ones.

It'd be interesting to know why highlighting the font makes it highlight as a different typeface.

When you download the font then it is a normal font and that does not happen. On the website, to make it possible to edit the characters in real time I'm drawing the font as SVG behind an invisible textarea; so when the text is edited really the textarea is changing and I'm drawing SVG behind every character to make it look like a textarea with the custom font. I'm curious which browser/OS are you using since I don't see the textarea text when I highlight something.

That's a neat trick!

I'm seeing this, too, in both Chrome and Firefox on Linux.

This would be nice for creating vector fonts (.lff) for Librecad and/or solvespace.

Awesome! I am going to make a direct JSON renderer for the PixelBlaze!

That would be amazing!

Aaaaand done, only 4h later! Antialiased, motion blurred, with colour and nonrectangular projection.

https://forum.electromage.com/t/yet-another-approach-to-text...

I'll be posting the code just as soon as it's cleaned up. It runs at ~30fps but there's quite a bit of redundancy.

this is great! how do you feel using the coordinates? can I link the video on the github readme?

I feel cozy and delicious using the coordinates! I already had a clock renderer (see LEDaliClock video) in which each character had exactly 8 points in a loop, drawing 9 lines, and I lerp'd those coordinates to morph the characters. I dropped those constraints and added the extra loop over your multiple sections and it just worked.

You can link the video as long as you promise to accept my PR when I make a better one. That was made at 01:30 after 4h of hacking and I'm going to make a new one with a tripod and better exposure once I'm happy with the code. Interestingly, any still frame looks terrible and slightly unreadable, but at 30fps with fractional coordinates and antialiased lines, the moving image looks great! Hooray for the persistence of vision!

FWIW: 1h for 25 lines of Ruby, because I forgot how to Ruby. 1h for updating to my latest framebuffer code and drawing your character format, 1h for a stupid bug (as always!), and 1h tweaking the curvy projection and other effects.

FWIW the new video is at https://youtu.be/GWxssA3JNBc

... and I sent you an email!

It's cool how I can add non-ascii characters and they just work.

This is such a cool project! The font looks really nice as well :)

This reminds me of Hershey plotter fonts.

This is awesome!

nice! the fonts knowledge is useful for you https://www.alovez.com/share/page/?id=31

Reply on news.ycombinator.com