Description
When using nested <Text> components for inline bold formatting, @react-pdf/renderer may incorrectly break a line around the nested component boundary.
The issue can be reproduced in the React-PDF REPL:
Reproduction: [REPL]
Hyphenation is explicitly disabled:
Font.registerHyphenationCallback(word => [word]);
The problem disappears when the inline bold formatting is removed.
Expected behavior
Punctuation should remain attached to the preceding word. For example, the following text:
should render visually as:
If the line does not have enough space, the complete word and punctuation should move to the next line.
Actual behavior
With nested <Text> used for bold formatting, the renderer inserts a hyphen-like character at the end of the bold word and moves the comma to the beginning of the next line:
The same behavior occurs with other words, for example:
... consequat-
, interdum...
The attached screenshot shows the issue in the React-PDF REPL using Lorem Ipsum text.
Minimal reproduction
The linked REPL contains a minimal reproduction using:
- a parent
<Text> component,
- plain string children,
- nested
<Text> components for bold fragments,
Font.registerHyphenationCallback(word => [word]).
Environment
@react-pdf/renderer: 4.4.0 in the React-PDF REPL (it has 4.4.0 locked and does not allow selecting a newer version; I also reproduced the issue locally with the latest version, @react-pdf/renderer@4.5.1)- Hyphenation: disabled with
Font.registerHyphenationCallback(word => [word])
- Output: generated PDF
Additional information
The issue appears to be triggered by mixing plain string children with nested <Text> components inside a parent <Text>. It does not occur when the nested bold <Text> components are replaced with plain text.
Description
When using nested
<Text>components for inline bold formatting,@react-pdf/renderermay incorrectly break a line around the nested component boundary.The issue can be reproduced in the React-PDF REPL:
Reproduction: [REPL]
Hyphenation is explicitly disabled:
The problem disappears when the inline bold formatting is removed.
Expected behavior
Punctuation should remain attached to the preceding word. For example, the following text:
should render visually as:
If the line does not have enough space, the complete word and punctuation should move to the next line.
Actual behavior
With nested
<Text>used for bold formatting, the renderer inserts a hyphen-like character at the end of the bold word and moves the comma to the beginning of the next line:The same behavior occurs with other words, for example:
The attached screenshot shows the issue in the React-PDF REPL using Lorem Ipsum text.
Minimal reproduction
The linked REPL contains a minimal reproduction using:
<Text>component,<Text>components for bold fragments,Font.registerHyphenationCallback(word => [word]).Environment
@react-pdf/renderer:4.4.0in the React-PDF REPL (it has4.4.0locked and does not allow selecting a newer version; I also reproduced the issue locally with the latest version,@react-pdf/renderer@4.5.1)Font.registerHyphenationCallback(word => [word])Additional information
The issue appears to be triggered by mixing plain string children with nested
<Text>components inside a parent<Text>. It does not occur when the nested bold<Text>components are replaced with plain text.