[HN Gopher] Show HN: I made a grid based font editor and font
___________________________________________________________________
Show HN: I made a grid based font editor and font
Author : javierbyte
Score : 150 points
Date : 2022-01-13 14:36 UTC (8 hours ago)
(HTM) web link (brutalita.com)
(TXT) w3m dump (brutalita.com)
| martneumann wrote:
| 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
| javierbyte wrote:
| 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? :)
| all2 wrote:
| 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?
| javierbyte wrote:
| 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 :)
| airstrike wrote:
| 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 :)
| airstrike wrote:
| 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
| javierbyte wrote:
| 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.
| byproxy wrote:
| Doesn't seem to produce a valid font file for Windows, for what
| it's worth.
| rbanffy wrote:
| I haven't looked into the font, but when building mine one
| mistake I made was to assign a glyph to NUL.
| bogdanoff_2 wrote:
| It's cool how I can add non-ascii characters and they just work.
| reaperducer wrote:
| 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.
| speps wrote:
| You might know this awesome channel already, but here is a
| video of an excellent segmented font:
| https://www.youtube.com/watch?v=MRjVXxm4Z7I
| jcuenod wrote:
| This is awesome!
| mumintrollet wrote:
| This is such a cool project! The font looks really nice as well
| :)
| RicoElectrico wrote:
| This reminds me of Hershey plotter fonts.
| thanatos519 wrote:
| Awesome! I am going to make a direct JSON renderer for the
| PixelBlaze!
| javierbyte wrote:
| That would be amazing!
| javierbyte wrote:
| 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.
| Timpy wrote:
| 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.
| awb wrote:
| I also lost some font progress to this feature. Maybe a
| "clear" button would be more intuitive?
|
| Awesome project though and beautiful fonts!
| chipgap98 wrote:
| This is great. The ability to delete a cell without deleting the
| whole layer would be really helpful.
| javierbyte wrote:
| I made that change, and added a separate button to delete the
| layer :)
| rbanffy wrote:
| I really like the font. Reminds me of the vector fonts used in
| computers like the Tektronix storage tube-based ones.
| trinsic2 wrote:
| Nice! I have been looking for something like this for awhile.
| Thanks for making it.
| phkahler wrote:
| This would be nice for creating vector fonts (.lff) for Librecad
| and/or solvespace.
| TheRealPomax wrote:
| It'd be interesting to know why highlighting the font makes it
| highlight as a different typeface.
| javierbyte wrote:
| 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.
| Xavdidtheshadow wrote:
| This is extremely cool! Being able to tweak glyphs on the right
| and use them on the left is pretty amazing feeling.
| tomcam wrote:
| Really fun idea, very well executed, and the font (to me) looks
| way better than I'd have guessed.
___________________________________________________________________
(page generated 2022-01-13 23:01 UTC)