diegomura / diegomura/react-pdf

Hyphenation is wrong on 'styled' letters

Open
#3,037 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

I'm working on a project where I'm styling individual chars of a single word. I do not need any hyphenation and prefer just to break between words on whitespace. But as I want to color individual characters I need to break up words in my text like this:

```
This is a great article
```

The hyphenation callbacks currently would get "This", "is", "a", "great", "arti", "c", "le". And would potentially add a break in the middle of the word. In my case I don't want that.

Not the best screenshot but it gives some idea:
![image](https://github.com/user-attachments/assets/82f000bd-c9c5-429f-b853-94a8e8ebe215)
This is a PDF viewer where you see the hyphenation appear and on top is the same rendered in HTML

(In case you're curious, this is all rendered as wrapped containers (per letter or sometimes combination). For this to work I've been tinkering with React-PDF to add margin/padding support for sub containers. So far it seems to be working quite nicely. Also applying border radius on background of a sub container - once I'm more in a finished state with this I'll create a PR with that code)

**Desktop (please complete the following information):**
- OS: Windows
- Browser Edge
- React-pdf version latest master

Contributor guide

Open the contributing guide

Research direction

No source file, test, or entry point is identified. First reproduce the report with styled letters and inspect the hyphenation callback behavior; done means styled character fragments no longer permit a hyphenation break within the original word while ordinary whitespace wrapping remains.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.