Using a `<span>` inside some text breaks wrapping

[jabrks]

Bug report

Description / Observed Behavior

When using a <span> to change text colour or similar, the text no longer wraps

Expected Behavior

The text wraps as normal as if the <span> is not present

Reproduction

https://og-playground.vercel.app/?share=hVHJTsMwEP0VMwj1EtGwHJAVcilIcKbHXpx4krg4duSFEqL8O-NUrVQuSJY8897Mm22C2koEDoVUXzvDmA-jxudpSjZjHaq2C5yt7vL8ZpUdwYOSofuDSeUHLUZCG43fJzTZL8phHZQ1xNVWx96cWKFVa94D9j5RaAK6E7WPPqhm3FgCTap_SVei_mydjUZurLaO-Oumac5VKetD_SBnD_cJmeedKZNRdHflG2ptWeEHYc6zMuprUal0xBXFlwfrtLwq1imsZNtOeUZPMIeDszIu89wWa9K71D3m_ZNQrGnX9EMGdkiEBz7BslXgT3mewXHtwB-TI7GKLfBGaI8ZYG_3ajsO6WbhsHikk0Z-7SuUwIOLOGcQREURXepqaQrmXw

Additional Context

Tested with Satori version 0.8.1

[mining016]

Dear @jabrks ,

I can see it is working fine. I suggest you to check the HTML, CSS, of the code. I recreated the following code and you can see it can easily detect the SPAN tag and apply the related style. Also note

to have explicit "display: flex" or "display: none" if it has more than one child node.

https://og-playground.vercel.app/?share=XVLJTsMwEP0VaxDqJRRD0xSs0gOLBAdOIHHJJa0nicGxo8TpQpV_Z5yQUnryzHszfrPtYWUlgoC5VOvYMFa7nca7_d7bjOWostwJNrri_HwU9OBGSZefYFLVpU52hKYatwPq7UdV4copa4hbWd0UZmATrTLz4rCoPYXGYTVQn03tVLp7sAQar_-fXiarr6yyjZEPVtuK-LM0TQ-qlPWmvlGwyfUR9PHbS8R5h7ZtbBbemNfr7Kizuxhm0xh6ZK1wc2-3hHHG2WzKogOVKq0JP-OcD9AwPFYkVaZ8xz6n3I46McY6ORIsE5czScmvk9l4eju-nupJNL6l38PncRT2zkUUfsewmF_66L7QS6q0t2hbp2rvthQs5Cw4XUbbLp5RaxtQp2Vi_vJoHd3wKpQ-iH3YSkuvQlGkSxokNrwQgC39HmsQe-gmBeKGZgn9kYAIvSNx2WQg0kTXGAAW9lO970p_YW7TefSP38ZTsUQJwlUNtgG4ZEkRua9y44uA9gc

Hope this will help you.

[zwily]

See this example:

https://og-playground.vercel.app/?share=7VRLa9wwEP4rg0pJCss-IIfiuntJCg20EEhoLnuRpbE9iSypeuyjy_73jvbVNj302EvA4PHMNy998rcVymkUlag1LRcWIKaNwY_bbbEBeqSuTxVczKbTtxejg3NFOvUvfJqiN3LD3tbg-uQt9g0FVImc5ZhyJg_2FJWGOnubcIglhDZhOIWeckzUbq4dO23p_2e4keq5Cy5bfe2MCxx_07btuStn3dMPrGB29Zvr8bjL1XR69HqpNdmugoWYTf16IYp7t1vYeTHqfja_k0F2Qfqel069ywmilzbC5cqFZ059V9UThu3hfv7QUwR-JFd-mSft5pA7hi8u4ADkYx5Al_khEgMGTCNQzkY-Lkw5gNTkKSpuA2gojeGrRD4HGcH3MmAKEqSC5AI_xfJsyYLKgYfwLmYMCA01aDW3itz0e-aIyiFmnuMuOLJnXM-ogIEnOVY8Jyo3DE67MdyjhiUa4ElzBOwwAXdiMzotDXJlZzUNTFUexnBTei2RiWwy085XpLMUI52WplKsJ5UND_3tF04y08fT8YGGcqQWWpkVxyO4oAhMVvsJEmSTAilufVpD5YYMybKkxA_1xDM5f7P5ePvweU8HXDbBPaP9N5H1Hn76PSDhOt2Xj3J7KPFdVgux280L3_WkYOec_sr4_2G8nrCc8VuMhPNFfKKotmIvXKJ6zwIgDsomqqIGQmOTO1G10kQcCRzcEz1sfJHFtNp_cZ0iIZ-GBrWoUsi4G4kkG0b0aIxjOTBa7H4C

It looks like all the children of the <p> are arranged in a flex-col. Is it not possible to have a text block with inline spans to style text with Satori?

[AaronFriel]

I took a look at this issue and it wasn't obvious how to repair the algorithm. It seems to me that Satori is incorrectly treating a tree of text nodes as a sequence of blocks, and it always behaves incorrectly when spans (or other inline elements) are present.

See my comment on:

• https://github.com/facebook/yoga/issues/968

[edenstrom]

This is an issue for us.

What we want to generate is pretty much text with highlights in it.

Reproduction of issue: og-playground

What we want is pretty much the mark element example on MDN. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#marking_text_of_interest

[Jan0707]

I am currently encountering this issue when implementing a text marker, just as @edenstrom mentioned.

[edwardhorsford]

Am also encountering this issue, by way of the Eleventy Opengraph plugin.

I'm wrapping each word within an h1 and p in a span so that I can do some styling. With no styles applied to spans, this is how the content renders:

Edit: I've also tested with i, var, and em and they all do the same - so my guess might be that all inline elements are broken.

[bhardy]

Yep, we're having the same issue. I can also confirm that it happens if you use <Fragment> tags as well

[hojberg]

This is still going on sadly :(

[hojberg]

Anyone found a workaround?

[wintercounter]

I solved this using flex-wrap: wrap + gap.

[PabloRamirezDev]

The issue is still happening. The workaround proposed by @wintercounter worked for me, though.

I would add that for cases in which you need to use a line break tag, you'll have to wrap the content that goes after the
in a div and use a transform to move it to the left, so that it's still aligned with the rest of the content. Otherwise, the gap from the parent tag will be applied to the left of this element.

For example:

<p
    style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 2,
    }}
>
    Hello,
    <br />
    <div style={{ transform: `translate(-2px, 0)` }}>
        World!
    </div>
</p>

In this case I used a gap of 2px, so the translate in the x axis was -2px.