fix: weird align of text when there is no whitespace with `textWrap: …

…'balance'`
vercel · May 30, 2023 · ffc2c9d · ffc2c9d
1 parent 1c9e463
commit ffc2c9d
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()
+  })
 })