fix: Add support for non-breaking space (#359)

fixes #293.

---------

Co-authored-by: Shu Ding <[email protected]>

src/utils.ts

@@ -175,9 +175,35 @@ export function segment(
  })
  }
 
- return granularity === 'word'
- ? [...wordSegmenter.segment(content)].map((seg) => seg.segment)
- : [...graphemeSegmenter.segment(content)].map((seg) => seg.segment)
+ if (granularity === 'grapheme') {
+ return [...graphemeSegmenter.segment(content)].map((seg) => seg.segment)
+ } else {
+ const segmented = [...wordSegmenter.segment(content)].map(
+ (seg) => seg.segment
+ ) as string[]
+
+ const output = []
+
+ let i = 0
+ // When there is a non-breaking space, join the previous and next words together.
+ // This change causes them to be treated as a single segment.
+ while (i < segmented.length) {
+ const s = segmented[i]
+
+ if (s == '\u00a0') {
+ const previousWord = i === 0 ? '' : output.pop()
+ const nextWord = i === segmented.length - 1 ? '' : segmented[i + 1]
+
+ output.push(previousWord + '\u00a0' + nextWord)
+ i += 2
+ } else {
+ output.push(s)
+ i++
+ }
+ }
+
+ return output
+ }
 }
 
 export function buildXMLString(

test/word-break.test.tsx

@@ -55,6 +55,31 @@ describe('word-break', () => {
  })
  })
 
+ it('should support non-breaking space', async () => {
+ const text = `She weighs around blah 50\u00a0kg`
+ const svg = await satori(
+ <div
+ style={{
+ color: 'red',
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ wordBreak: 'normal',
+ }}
+ >
+ <span>{text}</span>
+ <span>{text.replaceAll('\u00A0', ' ')}</span>
+ </div>,
+ {
+ width: 200,
+ height: 100,
+ fonts,
+ }
+ )
+
+ expect(toImage(svg, 200)).toMatchImageSnapshot()
+ })
+
  describe('break-all', () => {
  it('should always break words eagerly', async () => {
  const svg = await satori(