Line break issue for chinese font (Noto Serif Simplified Chinese)

[meinjam]

Describe the bug
I’m experiencing an issue with line breaks in Chinese text when using @react-pdf/renderer. While text in other languages (e.g., English, French) automatically wraps within the set container width, Chinese characters are rendered in a single line, even when the text overflows the container width. This issue significantly impacts readability and layout in documents with Chinese text. I am using Noto Serif Simplified Chinese font.

Expected behavior
The Chinese text should wrap in next line when it exceeds the defined container width or page boundary.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu, Windows
• Browser: Chrome, Firefox
• React-pdf version: v3.4.4

[jonnny013]

This is my ugly work around for the same issue.

import React from 'react'
import {Text, View, StyleSheet } from '@react-pdf/renderer'
import { pdfStyles } from '../../../styles/mainStyles'

const isChinese = char => {
  const code = char.charCodeAt(0)
  return code >= 0x4e00 && code <= 0x9fff
}

// Helper function to check if a character is punctuation
const isPunctuation = char => {
  return /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(char)
}

// Helper function to split text into words and characters
const splitText = text => {
  if (typeof text !== 'string') {
    console.warn('splitText received non-string input:', text)
    return [String(text)]
  }

  let result = []
  let currentWord = ''

  for (let i = 0; i < text.length; i++) {
    const char = text[i]
    if (isChinese(char)) {
      if (currentWord) {
        result.push(currentWord)
        currentWord = ''
      }
      result.push(char)
    } else if (isPunctuation(char)) {
      if (currentWord) {
        result.push(currentWord)
        currentWord = ''
      }
      // Append punctuation to the previous segment if it exists
      if (result.length > 0 && !isChinese(result[result.length - 1])) {
        result[result.length - 1] += char
      } else {
        result.push(char)
      }
    } else {
      currentWord += char
    }
  }

  if (currentWord) {
    result.push(currentWord)
  }

  return result
}


const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  text: {
    fontSize: pdfStyles.text.textFontSize,
    width: '100%'
  },
})

const ChineseText = ({ text, padding }) => {
   const segments = splitText(text)
  return (
    <View style={{ ...styles.container, paddingTop: padding ? 10 : undefined }}>
      <Text style={styles.text}>
        {segments.map((segment, index) => (
          <React.Fragment key={index}>{segment}</React.Fragment>
        ))}
      </Text>
    </View>
  )
}

export default ChineseText