diegomura / diegomura/react-pdf

Nested <Text> causes punctuation to be separated from the preceding word

Open
#3,462 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

### Description

When using nested `` components for inline bold formatting, `@react-pdf/renderer` may incorrectly break a line around the nested component boundary.

Image

The issue can be reproduced in the React-PDF REPL:

**Reproduction:** [[REPL]](https://react-pdf.org/repl?code=1887b07602e07404e0a6073025819c271802409e0070059c60086112e00c2c4036d4046c40c6035801403b883002600100bc00f97806d4e3c02e804a00dc00a0e6370697ba001e1006f00061402b8c627490403bd73c327a02daaa4611926e7b22f00546fa933d283c01a5e303d5a625e044300372750ae47773762223862307f40b8465e14f4285e00493040a43a7c78eb620354348b107b5e14132ceb384d0f2f461f34a60eeb1414d52e082e2cba7888906a3d085c520f5c80554d08e0dc29d2385e22245b0f06882ee6cd256b6b106e1040e0af78803326246a542439de00392be25b08b87c240eeba42e0503678b10ba300eaf03a30604a1785108225e24a30020f470178001460b542a3ce8180b9041cc8e51c0008e7a599b802f6740f04111620c0903e7aa343c9f169a5ca10321c396d455a23d09b3036de24110963f0c4141c1686cc41c0d072d502b26708f0c0a63aeb1a5d08ab86e03544740a1291b381e9e264071385cfb372e5de24d5b50a224183d588b824111e2dc9a6f11e68eb87dac4a1809bbde56a0aaa9dc508786af61780145e3cd48082fac83e6a1e12624478830178c5d9c85a9bc5b8484f9cdb40a144a8e8136e26348f4c2bf178007a5600074dcc39120e50838032848dc007e61f0ea47d843c8e43717230c8e05e00165b000153806958006f286fda8dc7818002503bcd481bc002f9497827b92f1789603215581fcfef0000f21e1a1be779400f8a04fa08ff8016fa301795e44140282e08f040ac1b697a767c8606014850394b82b0ac0cc30040b4980dc11eaf9086fac170542ca268a800042ed96864740aab9128000ea263e0ac000e41e309af8006412798ccb4044370fc60922589b20288c401df8c0851b11c6cebc1feea5c1c051e9a33070360fc09ef63516a13ef5040d83c6965a08e4aa50161dc3410c6196f9712863c8c1c0ac0004c01000b4c15484fb798c6017d881100c13e6be00173e9315c15c465bc2a9ea4bed1519f1499494e5f2345cdb31bc0008a7a1206a080a2af6ac2d1c20194040022200f4668959fa019d8201b0b94e49ec35b96db70d8179ea6017b825f66b9ce439f18a0503a81034127bad4f9c5737150c5c5035c0255c59d775900c1aa6289558d70af693b2d7024e840b450230f03aca7bfe13760697be99710dc1d6a8bee202e069400ac00031f80c4cc40fd8083b17c880d61a5001b043b0c0308ea298170480005ee0222d406358ffe4fb63ea8687f4313709393913701a500230001cd4d53df7b674dc10ce407c5c048020f804069400ec50cc394dc82faae0012b249ba62ed700b03c9182b0804d5754351b1f6822a9400)

Hyphenation is explicitly disabled:

```ts
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:

```text
... lacus**, accum...
```

should render visually as:

```text
... lacus,
accum...
```

If the line does not have enough space, the complete word and punctuation should move to the next line.

### Actual behavior

With nested `` 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:

```text
... lacus-
, accum...
```

The same behavior occurs with other words, for example:

```text
... 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 `` component,
- plain string children,
- nested `` 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 `` components inside a parent ``. It does not occur when the nested bold `` components are replaced with plain text.

Contributor guide

Open the contributing guide

Research direction

Start with the linked React-PDF REPL and its minimal reproduction, keeping Font.registerHyphenationCallback(word => [word]) enabled while isolating the nested boundary. Done means the generated PDF keeps punctuation with the preceding word and moves the whole word-plus-punctuation to the next line when needed, without the hyphen-like artifact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.