Author here! I'm so happy to see Brutalita randomly popping up on Hacker News!
I had fun building this small project, there are a few fun things I did to make this work:
- The editor is a textarea with a monospace font, but the text is transparent, the font is rendered on top of it using SVG of the same size and line height as the monospace font behind it. This way I didn't have to recreate a whole editor and got the real-time preview I wanted.
- The way the SVG preview and the 'real font' are constructed is different. I talk about this a bit more on my blog [1] but in short in SVG I can use "thick lines" with rounded corners, and for the font I have to render polygons and I found a great library "mfogel/polygon-clipping" that makes the process of combining them a breeze.
Thank you all for the interest! I might work on an update or two ;)
The editor does not seem to allow to move nodes, nor does it allow to delete a node, or at least to delete the last node of a chain. This makes the editing process more like a puzzle + skill game. One wrong click, and you have to redo from start. Or put every segment on a separate map, and be good at mentally combining them.
edit: tried to type "à", and the letter is not recognized in the font (appears in red in the editor).
Would there be a way to tell the editor that "à" = "a" + "`", rather than retyping the symbol from scratch?
edit2 : Having to remove all the [2..n] points if you want to change the second point you made is also a bit of a pain, especially for people like me with little experience of where the points end up being on the line vertically.
Douglas Hofstadter went there with his Letter Spirit project/concept/something. I can't find a decent single link about it, but there seems to have been an HN discussion https://news.ycombinator.com/item?id=37754559
(Thanks for this complaint - I hadn't realized that Rehling's thesis was linked from the Waybacked version of his personal page, and that finally completes my collection!)
You can also read Chapter 10 in Hofstadter's 1995 book "Fluid Concepts and Creative Analogies" for a pretty solid overview.
But yeah, seeing this project immediately reminded me of Letter Spirit, since it's basically a web editor for gridfonts.
Reminded me a teenie tiny bit of the original font used by Habbo Hotel Volter (Goldfish) which has a rough pixel look to it (at least that's how my nostalgia makes me see it) they got rid of the Volter font when Habbo upgraded from Adobe Shockwave to Adobe Flash, they went to Ubuntu font if I remember correctly. I still miss the old font.
My favorite thing about Habbo's font from back in 2001 is the "emojis" that it had. If you played Habbo back then, you were likely using emojis before they were cool. ;)
That editor is really cool; you can even see the font change live on the left!
Yeah, that is recent, they have had Origins out for over a year. Friends of mine were indirectly involved in what lead to Origins being a thing. Someone discovered you can just run Shockwave as a standalone executable. The developer leading the efforts for Origins was also iconic in the Habbo reverse engineering scene, where players would recreate the back-end server. He was known as Myrax back then. ;)
As for that IRC... was it Totov? or... and I don't recall if Jordan had one with Habbo stuff or not...
Java makes it sound like you're talking about Totov where Blunk was born by Nillus and Office.Boy after Nillus coding up two or three C# based emulators.
I'd like more info on the possible "operations" that form the font glyph though. First I thought it was all just choosing dots on the 3x5 grid and connecting them with lines, but there also seem to be "half-strokes" (lowercase i) and "rounded corners" that don't align with the dots (used for almost all "round" letters like O, C etc). Especially the latter seem to be crucial if you don't want all the round segment to look like diamonds.
So how do I do those things in the editor and are there even more of them?
Edit: Or is it really just 5x9 instead of 3x5 with only every second grid point visible? Lowercase "f" looks like that.
Also, it's kind of obvious you can't draw a "#" sign on a 3x5 grid...
To me the magic here is that the font used on the website text updates in realtime when you make changes to any glyph. Anyone know how that's happening, exactly?
Hey! For the real-time editor I have an invisible textarea in the background with a monospace font and I'm rendering SVGs on top of it, each character is a React component.
Sorry, I have only browsed this on my phone and haven't looked at the structure at all..I mean the whole text of the page that says "Brutalita is an experimental font..."
I can select the text from this and copy it. When you say that the text area is invisible... you mean it's not display:none or hidden... it's the color of the background and still selectable but it's covered with white SVG glyphs? Hah... if that's what I'm understanding it's a very funny trick!
I tried to do that, and now I’m just confused. The included glyph for the lower case n doesn’t actually fit the grid, so you can’t seem to replicate it. But also that grid doesn’t have enough resolution to do the tilde. Maybe I’m missing something?
Noticed that on desktop, the real grid, including the "half points" is shown and you can actually work with it. So it might just be a problem with the mobile version.
Enter a N or n into the Editing box, you'll see the two grids that make the glyph up along with a blank third grid on the bottom, add a small tilde in the top two rows. Or copy and paste the actual Ñ or ñ characters into the Editing box to create it new, and you can use it immediately with the alphabet textbox on the left.
Yes, and those glyphs don’t fit the grid. Try to redraw the n from the original font yourself. You can’t, because you can’t add points between the grid dots.
Yes this threw me off when I first opened it. When you select the letter field you see a flashing cursor but you can't erase the character and type a new one. Instead you have to type a new character which overwrites the old "editing" character. This is confusing because it's not the behavior that the user expects when they see a flashing cursor in a text input.
I would suggest allowing people to erase the letter and type a new one in the editing field.
Once I figured out this little UI hiccup I found it absolutely delightful to play with this. What a fascinating experiment in making a font immediately editable, like a mini font-REPL. I've often been interested in (but never dabbled in) creating or editing fonts. This made that itch immediately scratchable in a raw, primitive way that unlocked something interesting in my brain.
Reminds when I was doing my own bitmap fonts on ZX Spectrum and Amiga. They were probably very ugly by today's standards but they were mine :) I guess I'll create one for my terminal, it probably won't be used there for too long but it would remind me of times when I was more in control of my machine.
One does not need a WWW-based editor to make that kind of font, if you're going to give it a go. A text editor and Viznut's perl scripts yields BDF files quite straightforwardly.
Hi, Thank you so much for this. Brutalita is PERFECT, I edited the BGRP letters and will be using it for a new game I'm working on. I was just looking for something like this, kinda futuristic but minimal and simple. I love it.
Cool but pretty bad edit UI. Can't figure out how to edit an existing letter without starting from scratch. One letter at a time. What are even the additional grids below the letter being edited?
Will need to try this in a terminal but on initial glance it looks similar to terminus (a font I've been trying to find a replacement for for over 20 years....)
very cool idea for the editor. I remember having to add an entire sprite sheet for fonts. I wonder if it can generate a sprite sheet for generated fonts
This needs more upvotes. Hopefully the author reads this comment and provides a hint on how to create extra grids (accidentally deleted one, now I only have 2)
I had fun building this small project, there are a few fun things I did to make this work:
- The editor is a textarea with a monospace font, but the text is transparent, the font is rendered on top of it using SVG of the same size and line height as the monospace font behind it. This way I didn't have to recreate a whole editor and got the real-time preview I wanted.
- The way the SVG preview and the 'real font' are constructed is different. I talk about this a bit more on my blog [1] but in short in SVG I can use "thick lines" with rounded corners, and for the font I have to render polygons and I found a great library "mfogel/polygon-clipping" that makes the process of combining them a breeze.
Thank you all for the interest! I might work on an update or two ;)
[1] https://javier.xyz/blog/brutalita-learning-opentypejs