No one?

it's unfortunately not doable due to satori/yoga limitations as you have pointed out. you can try workarounds though https://github.com/vercel/satori/issues/484

flex-wrap + gap might be helpful

If you use flex wrap, the text after the span will always be on the next line

which really sucks

[try this](https://og-playground.vercel.app/?share=bZNRb9sgEMe_CmOavEme6nV7qFCWPXST1udN6kseSsLZpsUcAjzHi_Ldy9lJ2pD6wcDvf77_YY4d36ACLvhC6X8ry1iIo4Hvux3NGWtBN20UrPhSVR-KcoaDVrHNmNLBGTkmWhvYHinNf2oPm6jRJm2Dpu_sUZVGN_YuQhdIAhvBH6XHPkRdj7eYoCX_c3ktN0-Nx96qWzTok_6-ruuTa_rqj_4Pgn29JrLfr-ySJgs3B5zv8az8FaeaV_yQ6riJey8diUMaz8SG-M0BnIySVXDSLn-DMVgurqbFK-FUwRs7aTE6bZ8KVkYvbajRd4I9THMjI3z8fO22Jas-PSS7Q0567tEb9e7gcWG4bHE40ZlIDxkZsc-IQm2bHxm8K7q3wjJGJ5ihWtvcMqKS48sPmqGORchQ6B34PF1v82x-vCwk4kUZ2zyk1a8Mr9z0Tvchjbzk6Kh7Axc7PnU-FzdVVfL5anDxjRYK1n3DRS1NgJJDh4_67-joXsVhWqU81Ja_ujUoLqLvYV_yKNcpoqUmGej4-P4Z)

you are a legend

holy sh*t

thank you

it's not a nice solution because you have to manually parse the text and insert elements word by word, but yeah that's about the best we can do given the limitations

Oh yeah it's dirty lol. But I need to do this at scale, basically I want to make images of posts on Twitter, and I need to do this for links, hashtags and mentions

yeah not gonna be easy. i can see twitter bold text is going to be a problem here.

frankly speaking i think i would just use puppeteer or something like that and take a screenshot from a headless browser. managing twitter bold text, non-standard space character, etc. is a nightmare especially if you want to support cjk languages.

That might be a better idea. I'll try to look at how that works

since we are doing this at scale, i assume you at least have a vps right? if so, doing this is very easy.

without a vps, you can still send an old version of headless chrome to vercel.

I do have a vps

I'm not exactly sure how to do this with puppiteer, but I guess I'll have to figure it out

might solve a lot of the sizing issues too

essentially the idea is:
1. launch a headless browser. could use puppeteer for this but i think there are other libraries as well.
2. render some html on it
3. take a screenshot programmatically

thats what we did before vercel/og days

So basically I would just render the post, but I'm thinking about the size. How do I know the size of what I need to ss

just make a page where the meaningful content to screenshot is 1200 pixels wide and 630 pixels high, then take a screenshot of that exact portion

Well, posts could really be any size

At least the height could differ a lot

well, you need to handle your own logic to resize the post accordingly

vercel/og or not you still have to resize your post correctly

True

with vercel/og I basically had to know the size of the post before, so I programatically calculated everything.

Does it have a reply, does it have a quote, does it have images

Would be great if there was a way to just render, and then take a screenshot of what was rendered, not caring about the height

og images must have a set height. 1260 x 630 or a square is the standard

Yep

I mean, I have a lot of it already

if you want to capture the entire page content (not height-limited), [yes it's still possible](https://www.npmjs.com/package/capture-website#fullpage)

https://x-post-image-generation.vercel.app/api/generate?id= 1846242938994807278