javierbyte

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.

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

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/

this is great! how do you feel using the coordinates? can I link the video on the github readme?

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 would be amazing!

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

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? :)

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.

Yes! Author here, the emojis text with css transforms.

Visualize emojis to scale. The chicken is not bigger than the car anymore!

I had to check the title to make sure it is not there. I totally read "from COVID-19" in my mind.

> I'd like to buy a computer that's just like Macbook, except with repairable/swappable/upgradeable components

That's the thing, making something plug and play and mostly "driver-free" would be very hard to almost impossible. Framework laptops look amazing but they will require at least a bit more maintenance and knowledge, and that is fine too.

> I'm still waiting to hear about the aircraft that has gone down

So sad to hear. No one shines a laser on an aircraft accidentally, and it is not like the police are using lasers as an excuse to systematically punish a minority. We don't need to wait for a tragedy to happen here.

I think the point is that if Apple did optimize the algorithm using ImageNet then they and we are seeing the same best case scenario.

Still, there is more to it. Don't wait to retire to do what makes you happy.

If your phone is broken you don't always have the option to do that.

Also, you can try reducing the "contrast" and "definition" settings. I think in this case the hoodie is taking a lot of the lines, I'll take a look, thanks!

Yes, in this case the SVG is a list of coordinate pairs, should be fairly easy to extract.

https://github.com/javierbyte/pintr/blob/master/lib/svg.js#L...

* Update to add a link to the code that generates the SVG.

Author here, that sounds soo cool! If you decide to try please let me know if you need any support!

Thanks! Author here, are you testing with the HEIC files from your computers? To me it seems that iOS does not have issues with HEIC but probably it is doing some conversion before.