should properly align text when there is no whitespace with text-wrap…

…: balance
vercel · May 30, 2023 · 0321742 · 0321742
1 parent 1c9e463
commit 0321742
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/src/text.ts b/src/text.ts
@@ -401,7 +401,7 @@ export default async function* buildTextNodes(
  // When doing `text-wrap: balance`, we reflow the text multiple times
  // using binary search to find the best width.
  // https://www.w3.org/TR/css-text-4/#valdef-text-wrap-balance
- if (textWrap === 'balance') {
+ if (textWrap === 'balance' && content.includes(' ')) {
  let l = width / 2
  let r = width
  let m: number = width

diff --git a/...operly-align-text-when-there-is-no-whitespace-with-text-wrap-balance-1-snap.png b/...operly-align-text-when-there-is-no-whitespace-with-text-wrap-balance-1-snap.png
diff --git a/test/text-wrap.test.tsx b/test/text-wrap.test.tsx
@@ -54,4 +54,39 @@ describe('text-wrap', () => {
 
  expect(toImage(svg, 100)).toMatchImageSnapshot()
  })
+
+ it('should properly align text when there is no whitespace with text-wrap: balance', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ width: 100,
+ height: 100,
+ fontSize: 18,
+ color: 'red',
+ background: 'green',
+ }}
+ >
+ <span
+ style={{
+ background: 'blue',
+ // @ts-ignore: This isn't a valid CSS property supported by browsers yet.
+ textWrap: 'balance',
+ }}
+ >
+ Playground
+ </span>
+ <span style={{ background: 'yellow' }}>Playground</span>
+ </div>,
+ {
+ width: 100,
+ height: 100,
+ fonts,
+ }
+ )
+
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
 })