TEST-[NOJIRA][bpk-stylesheets] Add locale-aware line-break rules (v42 dev release) - #4907
Open
GC Zhu (gc-skyscanner) wants to merge 8 commits into
Open
TEST-[NOJIRA][bpk-stylesheets] Add locale-aware line-break rules (v42 dev release)#4907GC Zhu (gc-skyscanner) wants to merge 8 commits into
GC Zhu (gc-skyscanner) wants to merge 8 commits into
Conversation
Add :lang() CSS rules to font.scss so kinsoku shori (JIS X 4051) and equivalent rules are enforced globally via the existing <html lang="..."> attribute — no per-component changes required. Key decisions: - line-break: strict for CJK/Korean fixes punctuation/particles appearing at line-start (を、に、の etc. must not begin a line) - overflow-wrap: anywhere for CJK as last-resort fallback; preserves Latin brand names and URLs on mixed-script pages unlike word-break: break-all - word-break: keep-all for Korean preserves syllable-block boundaries; overflow-wrap: break-word fallback handles 360–390px narrow viewports - bpk-breakpoint-query-small-tablet (48rem) loosens line-break to loose for CJK/Korean to avoid uneven rag on narrow screens - Thai uses break-all + overflow-wrap: anywhere — no word spaces, ICU dictionary failure leaves zero break points otherwise - Arabic/Hebrew: overflow-wrap only; direction left to existing html[dir] RTL system - Russian/Ukrainian: hyphens: auto degrades silently in Chrome Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The base :lang(ja) rule used word-break: keep-all, which forbids all breaks between space-less Japanese characters. Browsers without word-break: auto-phrase (Firefox, Safari) fell back to keep-all and overflowed the container instead of wrapping. - Drop keep-all from the base rule so non-Chromium browsers wrap per-character under kinsoku (line-break: strict) — the conventional, overflow-safe Japanese fallback. - Keep auto-phrase for Chromium via @supports. - Add :lang(ja):has(wbr) → keep-all so author-inserted <wbr> phrase hints become the only break points, giving phrase-aware breaks in every browser (incl. Firefox) with no consumer className. - Document the behaviour and <wbr> usage in the bpk-stylesheets README. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…r support docs - Remove word-break: break-all and line-break: loose from :lang(th) — break-all overrides ICU dictionary word segmentation causing incorrect mid-character breaks; line-break only affects CJK kinsoku and has no effect on Thai - Remove duplicate @include bpk-locale-line-breaks from larken.scss — font.scss already includes it, consumers importing both got duplicate rules - Update README to qualify <wbr> phrase-break support as "all modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+)" rather than "all browsers" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4907 to see this build running in a browser. |
GC Zhu (gc-skyscanner)
changed the title
Contributor
Dev Release PublishedVersion: Install with: You can also use the dev tag to install the latest dev release: Published from commit 8264382 by GC Zhu (@gc-skyscanner). |
GC Zhu (gc-skyscanner)
temporarily deployed
to
Publishing
July 17, 2026 05:50 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
Contributor
|
Visit https://backpack.github.io/storybook-prs/4907 to see this build running in a browser. |
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
Introduces global locale-aware line-breaking rules in bpk-stylesheets (with Storybook + docs to validate Japanese phrase breaking), and adjusts the dev-release workflow to force a v42-based dev version for consumer testing.
Changes:
- Add a
_locale-line-breaks.scssmixin and include it fromfont.scssto apply:lang()-based line-breaking rules globally. - Update the fonts Storybook story and README with Japanese line-break validation guidance (including optional
<wbr>hints). - Hardcode the dev-release workflow base version to
42.28.0to produce42.28.0-dev-v...artifacts.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/backpack-web/src/bpk-stylesheets/src/BpkStylesheetsFonts.stories.tsx | Adds locale line-break validation examples (Japanese with/without <wbr>, Korean comparison). |
| packages/backpack-web/src/bpk-stylesheets/font.scss | Imports and applies the new locale line-break mixin globally. |
| packages/backpack-web/src/bpk-stylesheets/_locale-line-breaks.scss | New global CSS rules for locale-aware line breaking via :lang(). |
| packages/backpack-web/src/bpk-stylesheets/README.md | Documents the new locale-aware line breaking behavior and <wbr> opt-in guidance. |
| .github/workflows/dev-release.yml | Pins dev-release base version to 42.28.0. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+54
to
+56
| :lang(ja):has(wbr) { | ||
| word-break: keep-all; | ||
| } |
Comment on lines
121
to
123
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
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.
This PR exists solely to trigger a dev release with a v42.x.x version number for testing PR #4732 changes against v42 consumers.
Based on latest main with PR #4732 changes cherry-picked on top. A
42.28.0tag is on the base commit so the dev release version is42.28.0-dev-v...instead of43.x.x-dev-v....Related: #4732