website VS opentype.js

You might take a look at SCM Manager - https://scm-manager.org/

If all these solutions have problems with wrapping texts or require us to build the image with an external tool, why could we just use HTML+CSS to define our image? This is possible! We can create our card with HTML+SVG+CSS, open a browser and create a screenshot of the result. I've used this approach in the past and it worked well. The problem is that the process is very slow. This example creates the cards during the build. Creating the cards during the build requires external caching, because it slows down the build extremely. Also generating cards with this approach in a serverless function is often not possible, because it requires a browser within the function which breaks the size limit of those functions.

[3] https://github.com/opentypejs/opentype.js

With an SVG we can define our image as code, which is pretty neat. But SVG is not able to wrap texts. We can use opentype.js to calculate the width of our texts and to wrap it manually. Finally we have to convert the SVG to a PNG, because the most of social media platforms do not support SVG. This approach could work, but requires a lot of code and it is very complicated.

The repo is public so you can take a look if you're curious. I used opentype.js to convert the font into SVG in real-time. It was a PITA.

Still a few bugs to work out but I learned a ton making this! One of the cool things I learned is that you can read a font file, convert it to a base 64 string, slap it in a style element, and show that font in the browser! Huge thanks to opentype.js as well!