diff --git a/src/text.ts b/src/text.ts index ce1caadd..72bbfdfb 100644 --- a/src/text.ts +++ b/src/text.ts @@ -228,12 +228,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 +243,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 +281,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 +291,7 @@ export default async function* buildTextNodes( lineSegmentNumber.push(1) lineIndex = -1 } + prevLineEndingSpacesWidth = lineEndingSpacesWidth continue } if (forceBreak || willWrap) { @@ -299,7 +300,8 @@ export default async function* buildTextNodes( if (shouldCollapseTabsAndSpaces && word === ' ') { w = 0 } - lineWidths.push(currentWidth) + + lineWidths.push(currentWidth - prevLineEndingSpacesWidth) baselines.push(currentBaselineOffset) lines++ height += currentLineHeight @@ -376,6 +378,7 @@ export default async function* buildTextNodes( } i++ + prevLineEndingSpacesWidth = lineEndingSpacesWidth } if (currentWidth) { diff --git a/test/__image_snapshots__/line-clamp-test-tsx-test-line-clamp-test-tsx-line-clamp-should-work-correctly-when-text-align-center-1-snap.png b/test/__image_snapshots__/line-clamp-test-tsx-test-line-clamp-test-tsx-line-clamp-should-work-correctly-when-text-align-center-1-snap.png index 91912f31..903be6e4 100644 Binary files a/test/__image_snapshots__/line-clamp-test-tsx-test-line-clamp-test-tsx-line-clamp-should-work-correctly-when-text-align-center-1-snap.png and b/test/__image_snapshots__/line-clamp-test-tsx-test-line-clamp-test-tsx-line-clamp-should-work-correctly-when-text-align-center-1-snap.png differ diff --git a/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-center-1-snap.png b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-center-1-snap.png new file mode 100644 index 00000000..2e4008b8 Binary files /dev/null and b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-center-1-snap.png differ diff --git a/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-end-1-snap.png b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-end-1-snap.png new file mode 100644 index 00000000..b8db16cb Binary files /dev/null and b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-end-1-snap.png differ diff --git a/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-left-1-snap.png b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-left-1-snap.png new file mode 100644 index 00000000..463e0564 Binary files /dev/null and b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-left-1-snap.png differ diff --git a/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-right-1-snap.png b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-right-1-snap.png new file mode 100644 index 00000000..b8db16cb Binary files /dev/null and b/test/__image_snapshots__/text-align-test-tsx-test-text-align-test-tsx-text-align-should-work-correctly-when-text-align-right-1-snap.png differ diff --git a/test/line-clamp.test.tsx b/test/line-clamp.test.tsx index e6c5efea..a349b36c 100644 --- a/test/line-clamp.test.tsx +++ b/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 diff --git a/test/text-align.test.tsx b/test/text-align.test.tsx new file mode 100644 index 00000000..2a800c29 --- /dev/null +++ b/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( +
+
+ God kisses the finite in his love and man the infinite +
+
, + { 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( +
+
+ God kisses the finite in his love and man the infinite +
+
, + { 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( +
+
+ God kisses the finite in his love and man the infinite +
+
, + { 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( +
+
+ God kisses the finite in his love and man the infinite +
+
, + { width: 200, height: 200, fonts, embedFont: true } + ) + expect(toImage(svg, 200)).toMatchImageSnapshot() + }) +})