feat: use pixel-width-based word wrapping#4863
Open
hyperfinitism wants to merge 2 commits intoanuraghazra:masterfrom
Open
feat: use pixel-width-based word wrapping#4863hyperfinitism wants to merge 2 commits intoanuraghazra:masterfrom
hyperfinitism wants to merge 2 commits intoanuraghazra:masterfrom
Conversation
github-actions
Bot
added
repo-card
|
@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. |
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
force-pushed
the
fix/line-break
branch
2 times, most recently
from
075a625 to
6525f65
Compare
github-actions
Bot
removed
the
dependencies
hyperfinitism
changed the title
Signed-off-by: Takuma IMAMURA <209989118+hyperfinitism@users.noreply.github.com>
hyperfinitism
force-pushed
the
fix/line-break
branch
from
ba7d184 to
1a4ed98
Compare
github-actions
Bot
added
the
stats-card
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Uses pixel-width-based word wrapping using the existing
measureText()function instead of character count (59 chars).File changes
src/common/fmt.js:wrapTextMultiline()gains an optionalfontSizeparameter. When provided,widthis treated as a pixel budget and words are measured usingmeasureText()against the raw text (not HTML-encoded), so entities like—(em dash) are measured as single glyphs, not 7 characters.src/cards/repo.js:DESCRIPTION_LINE_WIDTHchanged from59[chars] to360[px] (== card 400 - x offset 25 - right margin 15). PassesDESCRIPTION_FONT_SIZE = 13to enable pixel wrapping.src/cards/gist.js: Same change: pixel-width wrapping at 360px / 13px font.src/common/render.js: fixmeasureTextwidth array using the actual widths of Segoe UI characters.tests/renderRepoCard.test.jsandtests/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
Before fix
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
measureTextaccording to the font or useforeignObject.