Skip to content

Commit

Permalink
fix: should render spaces other than U+0020 when white-space: normal (
Browse files Browse the repository at this point in the history
#557)

### Description
Should render spaces other than U+0020 when `white-space: normal`.

Before:

![image](https://github.com/vercel/satori/assets/22126563/132f9345-88ff-4ee7-8dcf-5a290a8f2ed6)

After:

![image](https://github.com/vercel/satori/assets/22126563/78d61815-7695-4b48-900b-b481d8891047)
  • Loading branch information
LuciNyan authored Nov 20, 2023
1 parent a2abe37 commit eb9a404
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 3 deletions.
1 change: 0 additions & 1 deletion src/text/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,6 @@ export default async function* buildTextNodes(
}
if (forceBreak || willWrap) {
// Start a new line, spaces can be ignored.
// @TODO Lack of support for Japanese spacing
if (shouldCollapseTabsAndSpaces && word === Space) {
w = 0
}
Expand Down
2 changes: 1 addition & 1 deletion src/text/processor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ function processWhiteSpace(
}

if (shouldCollapseTabsAndSpaces) {
content = content.replace(/([ ]|\t)+/g, Space).trim()
content = content.replace(/([ ]|\t)+/g, Space).replace(/^[ ]|[ ]$/g, '')
}

return { content, shouldCollapseTabsAndSpaces, allowSoftWrap }
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion test/white-space.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,19 @@ describe('white-space', () => {

describe('normal', () => {
it('should not render extra spaces with `white-space: normal`', async () => {
const EnSpace = String.fromCodePoint(Number('0x2002'))

const svg = await satori(
<div
style={{
whiteSpace: 'normal',
display: 'flex',
flexDirection: 'column',
}}
>
{' hello '}
<div>{'hello'}</div>
<div>{' hello '}</div>
<div>{EnSpace + 'hello'}</div>
</div>,
{
width: 100,
Expand Down

1 comment on commit eb9a404

@vercel
Copy link

@vercel vercel bot commented on eb9a404 Nov 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.