React-pdf: Chinese characters can't wrap lines as automatically as English characters

Created on 16 Aug 2019  ·  19Comments  ·  Source: diegomura/react-pdf

Describe the bug

English can automatically wrap and add a hyphen,
Chinese is beyond。

image

Screenshots

Desktop (please complete the following information):

  • OS: [Windows]
  • Browser [chrome]
  • React-pdf version [1.6.4]

All 19 comments

When using the Font.registerHyphenationCallback, the Chinese characters that are exceeded can be successfully truncated,but will appear a -.

Is it possible to delete this?

em.. Wrapping fails when ( ) is included.

how did this happen?
image
<View style={{flexDirection: "row"}}> <View style={{ borderWidth: 1, backgroundColor: "red", width: "50%" }}> <Text>和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的</Text> </View> <View style={{ borderWidth: 1, backgroundColor: "blue", width: "50%" }}> <Text>の建物賃貸借契約書一時使用目的の建物賃一時使用賃貸借契約書一時(使用目的の建物賃一時使用賃貸借契約書一時使用目的の建物賃一時使用賃貸借契約書一時使用目的の建物賃一時使用目的の建物賃貸借契約書一時使用一時使用目的の建物賃貸借契約書一時使用貸借契約書一時使用一時使用目的の建物賃貸借)契約書一時使用目的の建物賃貸借契約書</Text> </View> </View>

the font is pingfang.

how did this happen?
image
<View style={{flexDirection: "row"}}> <View style={{ borderWidth: 1, backgroundColor: "red", width: "50%" }}> <Text>和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的和撒旦画哈师大话说得好暗红色的划划水的</Text> </View> <View style={{ borderWidth: 1, backgroundColor: "blue", width: "50%" }}> <Text>の建物賃貸借契約書一時使用目的の建物賃一時使用賃貸借契約書一時(使用目的の建物賃一時使用賃貸借契約書一時使用目的の建物賃一時使用賃貸借契約書一時使用目的の建物賃一時使用目的の建物賃貸借契約書一時使用一時使用目的の建物賃貸借契約書一時使用貸借契約書一時使用一時使用目的の建物賃貸借)契約書一時使用目的の建物賃貸借契約書</Text> </View> </View>

the font is pingfang.
请问 怎么让中文字 不乱的 我怎么试了 好多方法 都不对呢

我自己解决了

我自己解决了

试试换行有问题嘛? 我这换行一直有问题,换行也会带上连字符

我自己解决了

我为什么 不能显示中文呢
我的都是乱码

@rechun 先引用汉字字体

我发现了 已经解决了

America-first-melon notifications@github.com 于2019年9月28日周六 下午7:33写道:

@rechun https://github.com/rechun 先引用汉字字体


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/diegomura/react-pdf/issues/692?email_source=notifications&email_token=AHCLSQJCFA22D5RJK4EYLQDQL46HDA5CNFSM4IMF7UDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD72XHYA#issuecomment-536179680,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHCLSQJFQUL6GBYW6YFML4TQL46HDANCNFSM4IMF7UDA
.

中文换行的有解决吗

same issue

中文换行的有解决吗

换行

中文换行的有解决吗

换行

能行吗? 我没行。。 换其他的了,换成 chrome-to-pdf 了

我用react-pdfobject 和 jspdf 了

我用react-pdfobject 和 jspdf 了

有效果就行

try https://github.com/diegomura/react-pdf/issues/419#issuecomment-554844061

or

Font.registerHyphenationCallback(word => word.length === 1 ? [word] : Array.from(word).map(char => char));

动态数据加载,内容中的\n 或者回车怎么换行呢?

@America-first-melon

You can refer the following code snippet to remove the redundant hyphen character.

    Font.registerHyphenationCallback((word: string) => {
      if (word.length === 1) {
        return [word];
      }   

      return Array.from(word)
        .map((char) => [char, ''])
        .reduce((arr, current) => {
          arr.push(...current);
          return arr;
        }, []);
    });

@America-first-melon

You can refer the following code snippet to remove the redundant hyphen character.

    Font.registerHyphenationCallback((word: string) => {
      if (word.length === 1) {
        return [word];
      }   

      return Array.from(word)
        .map((char) => [char, ''])
        .reduce((arr, current) => {
          arr.push(...current);
          return arr;
        }, []);
    });

3q

Was this page helpful?
0 / 5 - 0 ratings