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! :)
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.
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'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...
On the other hand I do like that it is low resolution so one is limited from trying to add lots of details.
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.
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!
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
In italian "Brutalita" (but with an accent on the last a: "Brutalità") it means brutality.
It's most obvious with O, {, & and # which are impossible to draw with the grid that's presented to you.
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.
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...
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.
en: Hello, World! zh: 你好，世界！
You can copy that in their font editor to give it a try.
"The name means "little brutal" in Spanish."
so the emphasis is on the 'i'
Brutalità is brutality in english.
