Skip to content

feat: CSS-compatible workBreak, hyphens and hyphenateChracter - #3288

Open
exoego wants to merge 5 commits into
diegomura:masterfrom
exoego:custom-hyphenation
Open

exoego wants to merge 5 commits into
diegomura:masterfrom
exoego:custom-hyphenation

Conversation

@exoego

@exoego exoego commented Jan 27, 2026 •

Copy link
Copy Markdown
Contributor

This PR leverages https://github.com/foliojs/linebreak which is used in foliojs/pdfkit

Long paragrah was borrowed from MDN for word-break

image

hyphens, hyphenateCharacter and wordBreak follow CSS Text Level 4. A hyphen shows only at hyphenation breaks, not at breaks after - or /, between CJK characters, or with break-all. Unlike CSS, hyphens defaults to auto to keep the existing behavior.

@changeset-bot

changeset-bot Bot commented Jan 27, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 17be8c5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@exoego
exoego force-pushed the custom-hyphenation branch from 15b555f to 4874827 Compare January 27, 2026 13:56
@exoego
exoego force-pushed the custom-hyphenation branch 2 times, most recently from ee0c48b to b9f8ed3 Compare April 12, 2026 04:40
@Ravi-puniya

Copy link
Copy Markdown

@diegomura 👋

I came across this draft PR and it seems to address the word-breaking issue in react-pdf.

From a quick look/testing, it behaves closer to native CSS word-break support, which has been a common limitation.

Would love your review on whether this approach makes sense.

@exoego
exoego force-pushed the custom-hyphenation branch 2 times, most recently from 1d0641e to 3e415a5 Compare April 16, 2026 06:42
@@ -1,9 +1,60 @@
import LineBreaker from 'linebreak';

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@exoego
exoego force-pushed the custom-hyphenation branch from 3e415a5 to 2d04568 Compare April 16, 2026 09:30
@exoego
exoego marked this pull request as ready for review April 16, 2026 09:37
@exoego
exoego force-pushed the custom-hyphenation branch from 2d04568 to dcafeee Compare May 3, 2026 06:02
@exoego
exoego marked this pull request as draft May 3, 2026 06:10
@exoego
exoego force-pushed the custom-hyphenation branch from dcafeee to 724bddf Compare May 3, 2026 06:26
@exoego
exoego marked this pull request as ready for review May 3, 2026 06:26
# Conflicts:
#	packages/layout/tests/text/layoutText.test.ts
#	packages/textkit/src/engines/linebreaker/index.ts
exoego added 2 commits October 6, 2026 13:33
# Conflicts:
#	packages/stylesheet/src/types.ts
#	packages/textkit/package.json
@vercel

vercel Bot commented Oct 6, 2026

Copy link
Copy Markdown

@exoego is attempting to deploy a commit to the diegomura Team on Vercel.

A member of the Team first needs to authorize it.

@exoego

exoego commented Oct 6, 2026

Copy link
Copy Markdown
Contributor Author

@diegomura Fixed conflict. Could you take a look 🙇

Soft wrap opportunities and hyphenation opportunities were mixed in one
list, so a hyphen showed at any break inside a word. URLs got "/-",
hyphenated words got "--", and break-all added hyphens.

Syllables now record the kind of each break. Only hyphenation breaks
show the hyphenate character.

- hyphens: none does not hyphenate, even at soft hyphens
- hyphens: manual hyphenates only at soft hyphens
- break-all applies no hyphenation and keeps punctuation rules
- keep-all keeps letters together but still breaks after punctuation
- breaks between text runs follow UAX diegomura#14

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment