Skip to content

feat: use pixel-width-based word wrapping#4863

Open
hyperfinitism wants to merge 2 commits intoanuraghazra:masterfrom
hyperfinitism:fix/line-break
Open

feat: use pixel-width-based word wrapping#4863
hyperfinitism wants to merge 2 commits intoanuraghazra:masterfrom
hyperfinitism:fix/line-break

Conversation

@hyperfinitism
Copy link
Copy Markdown

@hyperfinitism hyperfinitism commented Apr 7, 2026 •
edited
Loading

Summary

Uses pixel-width-based word wrapping using the existing measureText() function instead of character count (59 chars).

File changes

  1. src/common/fmt.js: wrapTextMultiline() gains an optional fontSize parameter. When provided, width is treated as a pixel budget and words are measured using measureText() against the raw text (not HTML-encoded), so entities like — (em dash) are measured as single glyphs, not 7 characters.
  2. src/cards/repo.js: DESCRIPTION_LINE_WIDTH changed from 59 [chars] to 360 [px] (== card 400 - x offset 25 - right margin 15). Passes DESCRIPTION_FONT_SIZE = 13 to enable pixel wrapping.
  3. src/cards/gist.js: Same change: pixel-width wrapping at 360px / 13px font.
  4. src/common/render.js: fix measureText width array using the actual widths of Segoe UI characters.
  5. tests/renderRepoCard.test.js and tests/renderGistCard.test.js — Updated the expected number of pixels and the expected line break position within the assertion to reflect the changes.

Examples

Sample repository description

iiii iiii iiii iiii iiii iiii iiii iiii iiii iiii iiii iiii OOOO OOOO OOOO OOOO OOOO OOOO OOOO OOOO OOOO OOOO OOOO OOO

Before fix

hyperfinitism-sample-repo-before-fix

After fix

hyperfinitism-sample-repo-after-fix

Testing

All (but one) tests have been passed. One test fails because of the preexisting issue reported in #4732.

Related issue

#4862 — To resolve this issue completely, we need to adjust measureText according to the font or use foreignObject.

@hyperfinitism hyperfinitism requested a review from qwerty541 as a code owner April 7, 2026 14:34
@github-actions github-actions Bot added repo-card Issues related to the pin/repo card. dependencies Pull requests that update a dependency file gist-card labels Apr 7, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 7, 2026

@hyperfinitism is attempting to deploy a commit to the github readme stats Team on Vercel.

A member of the Team first needs to authorize it.

@hyperfinitism
fix: use pixel-width word wrapping to prevent overflow on macOS
6525f65 
The repo/gist card description used character-count wrapping (59 chars),
which fit Segoe UI (Windows) but overflowed on macOS Chrome where
Helvetica Neue — with wider glyphs — is the CSS font fallback.

Switch wrapTextMultiline() to measure actual pixel widths via
measureText() when a fontSize is provided, and set a 360px budget
(card width minus padding) instead of a fixed character count.
Also measure raw text before HTML-encoding so entities like —
(em dash) count as single glyphs, not 7 characters.

Signed-off-by: Takuma IMAMURA <209989118+hyperfinitism@users.noreply.github.com>
@hyperfinitism hyperfinitism force-pushed the fix/line-break branch 2 times, most recently from 075a625 to 6525f65 Compare April 7, 2026 14:41
@github-actions github-actions Bot removed the dependencies Pull requests that update a dependency file label Apr 7, 2026
@hyperfinitism hyperfinitism mentioned this pull request Apr 8, 2026
Open
@hyperfinitism hyperfinitism changed the title fix: use pixel-width word wrapping to prevent description overflow on macOS feat: use pixel-width-based word wrapping Apr 10, 2026
@hyperfinitism
fix(render): change widths based on actual Segoe UI font
1a4ed98 
Signed-off-by: Takuma IMAMURA <209989118+hyperfinitism@users.noreply.github.com>
@github-actions github-actions Bot added the stats-card Feature, Enhancement, Fixes related to stats the stats card. label Apr 10, 2026
@martin-mfg martin-mfg mentioned this pull request Apr 27, 2026
Closed
@martin-mfg
Copy link
Copy Markdown
Contributor

martin-mfg commented Apr 27, 2026

Hi @hyperfinitism, thanks a lot for this well-written PR!

Work on this project has moved to stats-organization/github-stats-extended. I have adapted your changes and created stats-organization#189 over there.

As you described in #4862, even with your improvement in place there are still reflow problems. I think we should start using foreignObject to solve this. #1633 contains some additional thoughts on this topic and also mentions https://github.com/vercel/satori as a possible alternative. I think ideally we should switch directly to a foreignObject-based solution without merging the changes from this PR in between in order to avoid changing the user-visible behaviour twice.

Would you be willing to work on the introduction of foreignObject? :)

@hyperfinitism
Copy link
Copy Markdown
Author

hyperfinitism commented Apr 27, 2026

Yes. I have implemented the foreignObject patch, but based on this repo's main branch. I am currently in the process of migrating this to the -extended repository.

@hyperfinitism
Copy link
Copy Markdown
Author

hyperfinitism commented Apr 27, 2026

I created a pull request to the -extended repository based on foreignObject: stats-organization#191.

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

Reviewers

@qwerty541 qwerty541 Awaiting requested review from qwerty541

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

gist-card repo-card Issues related to the pin/repo card. stats-card Feature, Enhancement, Fixes related to stats the stats card.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@hyperfinitism @martin-mfg