fix: text-align

src/text.ts

@@ -183,7 +183,6 @@ export default async function* buildTextNodes(
     } else {
       originWidth = measureText(text)
     }
-
     const afterTrimEndWidth =
       text.trimEnd() === text ? originWidth : measureText(text.trimEnd())
 
@@ -228,12 +227,12 @@ export default async function* buildTextNodes(
     // @TODO: Support different writing modes.
     // @TODO: Support RTL languages.
     let i = 0
+    let prevLineEndingSpacesWidth = 0
     while (i < words.length && lines < lineLimit) {
       let word = words[i]
       const forceBreak = requiredBreaks[i]
 
       let w = 0
-      let lineEndingSpacesWidth = 0
 
       const {
         originWidth,
@@ -243,7 +242,7 @@ export default async function* buildTextNodes(
       word = _word
 
       w = originWidth
-      lineEndingSpacesWidth = endingSpacesWidth
+      const lineEndingSpacesWidth = endingSpacesWidth
 
       // When starting a new line from an empty line, we should push one extra
       // line height.
@@ -281,7 +280,7 @@ export default async function* buildTextNodes(
         words.splice(i, 1, ...chars)
         if (currentWidth > 0) {
           // Start a new line, spaces can be ignored.
-          lineWidths.push(currentWidth)
+          lineWidths.push(currentWidth - prevLineEndingSpacesWidth)
           baselines.push(currentBaselineOffset)
           lines++
           height += currentLineHeight
@@ -291,6 +290,7 @@ export default async function* buildTextNodes(
           lineSegmentNumber.push(1)
           lineIndex = -1
         }
+        prevLineEndingSpacesWidth = lineEndingSpacesWidth
         continue
       }
       if (forceBreak || willWrap) {
@@ -299,7 +299,12 @@ export default async function* buildTextNodes(
         if (shouldCollapseTabsAndSpaces && word === ' ') {
           w = 0
         }
-        lineWidths.push(currentWidth)
+        console.log(
+          ':::2 currentWidth, lineEndingSpacesWidth',
+          currentWidth,
+          lineEndingSpacesWidth
+        )
+        lineWidths.push(currentWidth - prevLineEndingSpacesWidth)
         baselines.push(currentBaselineOffset)
         lines++
         height += currentLineHeight
@@ -376,6 +381,7 @@ export default async function* buildTextNodes(
       }
 
       i++
+      prevLineEndingSpacesWidth = lineEndingSpacesWidth
     }
 
     if (currentWidth) {

test/line-clamp.test.tsx

@@ -155,6 +155,8 @@ describe('Line Clamp', () => {
             fontSize: 32,
             textAlign: 'center',
             lineClamp: 2,
+            backgroundColor: '#ff6c2f',
+            color: 'white',
           }}
         >
           Making the Web. Superfast

test/text-align.test.tsx

@@ -0,0 +1,149 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('Text Align', () => {
+  let fonts
+  initFonts((f) => (fonts = f))
+
+  it('Should work correctly when `text-align: left`', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          fontSize: 20,
+          fontWeight: 600,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            maxWidth: '190px',
+            textAlign: 'left',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#ff6c2f',
+            color: 'white',
+            letterSpacing: '1px',
+          }}
+        >
+          God kisses the finite in his love and man the infinite
+        </div>
+      </div>,
+      { width: 200, height: 200, fonts, embedFont: true }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
+  it('Should work correctly when `text-align: center`', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          fontSize: 20,
+          fontWeight: 600,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            maxWidth: '190px',
+            textAlign: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#ff6c2f',
+            color: 'white',
+            letterSpacing: '1px',
+          }}
+        >
+          God kisses the finite in his love and man the infinite
+        </div>
+      </div>,
+      { width: 200, height: 200, fonts, embedFont: true }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
+  it('Should work correctly when `text-align: right`', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          fontSize: 20,
+          fontWeight: 600,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            maxWidth: '190px',
+            textAlign: 'right',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#ff6c2f',
+            color: 'white',
+            letterSpacing: '1px',
+          }}
+        >
+          God kisses the finite in his love and man the infinite
+        </div>
+      </div>,
+      { width: 200, height: 200, fonts, embedFont: true }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
+  it('Should work correctly when `text-align: end`', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          fontSize: 20,
+          fontWeight: 600,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            maxWidth: '190px',
+            textAlign: 'end',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#ff6c2f',
+            color: 'white',
+            letterSpacing: '1px',
+          }}
+        >
+          God kisses the finite in his love and man the infinite
+        </div>
+      </div>,
+      { width: 200, height: 200, fonts, embedFont: true }
+    )
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+})