diegomura / diegomura/react-pdf

SVG Text doesn't have a way to wrap

Open
#2,971 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

**Describe the bug**
I am trying to display some text in an svg rect. While this works for the first line it doesnt for any following lines since `\n` is ignored and doesnt wrap ever.

**To Reproduce**
Have a text like:

```
• Standalone is a web application
using Matrix as a storage backend and communications channel

• We can implement our own UI flow,
e.g. the NeoBoad dashbaord

• We have control about the application state, e.g.
- Deep link to boards
- Save changes when leaving a board
- Error handling and backoff

• Extended features (not yet there)
- Invite guests easily
- Account / subscription management
- Pop out NeoBoard from the small widget windows
```

Instead of preserving the newlines it will instead put it on a single line:

https://react-pdf.org/repl?code=3187b0760ce02e00400a0110188c0bc30050128d03e4c05030c00f0223002b80b60299852e471a5c02180e6b532cb240ca00dc38f5e3002409002ab4007ac009ea80378026000cea02f9340440431f9436600099b0036e168c00961061b1801dd6802307001c3f99bc0d941b7066184a081b300e1800597f00271b59077b47681058ce6b573660006b7a13075318506a6a4a305f7f40c862800b63305a7302027d00756b3f305b6a6f5a3a0618104a58a1a76e805500491800334b27001a60da003a0e5598285aeb00395a100021103602b3085aacb49316f6eb7ac14ef028589073075761d86deb362f1f3f005c030683f9688b181ac36c1002d0c010b45a078603e300e4b6201827cd8b11304161063623ceac62e3d89c3b6eb996844f0a451cd8dc41200a2b157a8deaa6547d28a595c88166b35b8c199f27cad00ab31a54046b47b060c020452d1be3b58ad0b004a9981043628358389439541ec34b0b9814048020b0140e558001e841945704180f10f103bad4630640650025c040c8af8c1f64713ae2e6af6a16c76209f799de4e1b098b8b014e98404e7c588f80e993c944bc1203a842260a901dec2e2894be42a3fa98580037010004a34e0141104855bab4cb45886048bd9803b70ad82100

~~Splitting for this seems to not work either as it results in `TypeError: font.layout is not a function` after having split the string and returning text inside of Array.map like usual in reactjs. (note: This was happening in vitejs + webworker for rendering)~~ (turned out that I had empty lines)

**Expected behavior**
It follows the wrap info

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**

- OS: Linux
- Browser: Firefox
- React-pdf version: 4.1.4

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.