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!

With heavy use of SVG <symbol>, one would hope!

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

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 ;)

[1] https://javier.xyz/blog/brutalita-learning-opentypejs

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.

But well, it is an addictive game! :)

If you click on the last node again, it deletes it

Do you accept PR to include some accented characters, or do you prefer keeping a limited set or characters?

I saw another post an hour ago with a similar demo and was inspired to post it here. Isn't it wonderful that browsers and laptops are so powerful nowadays?

Very cool! I also made a CSS based fake depth of field inspired by Shuding :)

https://depth-of-field.vercel.app/

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.

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!

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

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.

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