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?
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!
With heavy use of SVG <symbol>, one would hope!
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...