next/og does not generate correctly text with text-wrap: balance css property when there is only one word

[grzegorzpokorski]

Link to the code that reproduces this issue

https://github.com/grzegorzpokorski/nextjs-og-issue

To Reproduce

1. Clone reproduction repo: git clone https://github.com/grzegorzpokorski/nextjs-og-issue.git
2. Run project pnpm build && pnpm start.
3. Go to http://localhost:3000/api/og?title=Loremipsumdolor
4. You should see a simple image with text which is not centered.

Current vs. Expected behavior

Expected behawiour is to generate a image with centered text, as it is for example when you visit this path: http://localhost:3000/api/og?title=Lorem%20ipsum%20dolor%20sit%20amet,%20consectetur

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Oct 5 21:02:42 UTC 2023
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: N/A
  pnpm: 8.15.4
Relevant Packages:
  next: 14.1.2
  eslint-config-next: 14.1.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Middleware / Edge (API routes, runtime)

Which stage(s) are affected? (Select all that apply)

next start (local), Vercel (Deployed)

Additional context

No response

[philwolstenholme]

ImageResponse uses a package called Satori which implements its own version of text-wrap here: https://github.com/vercel/satori/blob/9bc47fd41937be1bc96db2c91420323d034bebef/src/text/index.ts#L375-L390

Is it maybe this bug that you're experiencing? vercel/satori#498

You could post in the Satori repo instead of the Next repo, it might get more attention :)

[grzegorzpokorski]

@philwolstenholme thanks, you have right

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.