It's most obvious with O, {, & and # which are impossible to draw with the grid that's presented to you.
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!
https://webonastick.com/fonts/routed-gothic/
Discussed here a few times. https://news.ycombinator.com/item?id=30190397
Not yet.
https://store.steampowered.com/app/3809900/Habbo_Hotel_Origi...
I lost the archive on an old hard-drive however the scene still limps along. C# and Java were the main languages used.
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 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.
This is a great example of what art can do.
Each (poly) line has a separate layer. Preview '#' character to get an idea. A new layer is created every time you fill the previous one.
"The name means "little brutal" in Spanish."
so the emphasis is on the 'i'
Brutalità is brutality in english.
There is no way to undo, redo, or move the anchor points. At least you can delete the last line segment by clicking on the last point.
In italian "Brutalita" (but with an accent on the last a: "Brutalità") it means brutality.
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.
* https://github.com/jdebp/unscii/blob/2.1.1f/src/font-topaz.t...
* https://github.com/jdebp/unscii/blob/2.1.1f/src/font-spectru...
On the other hand I do like that it is low resolution so one is limited from trying to add lots of details.
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.
It would be cool for marketing style fonts though.
https://web.archive.org/web/20220331021500/http://goosie.cog...
And John Rehling did a second portion in his doctoral work:
https://web.archive.org/web/20150320160815/https://www.cogsc...
(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.
en: Hello, World! zh: 你好，世界！
You can copy that in their font editor to give it a try.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
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 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 ;)
But well, it is an addictive game! :)
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...
limbero•4mo ago