fix(preview): break Korean between words on the showcase pages (D-030) - #69
Merged
Merged
Conversation
Browsers break Hangul between any two syllables by default, so the
showcase split words mid-syllable ("브랜드 면 위 텍 / 스트는", "미달합 /
니다"): at 375px/1440px, index 22/5, components 3/1, icons 3/0 breaks
(Edge, per-character line boxes, as served at devslab.kr/dds/).
- Each preview page's inline <style> puts the rule on the language
root and lets it inherit:
:where([lang|="ko"]) { word-break: keep-all; overflow-wrap: break-word; }
:where([lang]:not([lang|="ko"])) { word-break: normal; overflow-wrap: normal; }
keep-all only under Korean: Japanese and Chinese have no spaces between
words, so it would remove their only break points. break-word, not
anywhere, so Latin min-content does not shrink to one letter.
- dds.css does not ship it (D-030). A base.css default would change Korean
line breaking in every product that loads dds.css on its next bump, the
reason D-029 left Korean kicker tracking to each product's root. It also
would not have fixed index.html, which does not load dds.css.
- Spec 3.2 (both languages) tells product pages which two rules to put on
their root and why per-element keep-all misses table cells.
- foundation-contracts pins the rule on all three pages, no per-element
word-break, and no keep-all in dds-css/src.
Measured after (320–1440px, 8 widths): 0 breaks between syllables on all
three pages, no new overflow. icons.html overflows at 320px (top nav link
reaches 336px) exactly as before.
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.
Summary
The showcase split Korean mid-word, because browsers break Hangul between any two syllables by default. For example "브랜드 면 위 텍 / 스트는" and "미달합 / 니다". Measured as served at devslab.kr/dds/ (Edge, per-character line boxes, breaks between two Hangul syllables):
Each preview page now puts two rules on its language root, which children inherit:
keep-allthere would remove their only break points. Elements that declare another language go back to the default.break-word, notanywhere.anywherealso shrinks Latin min-content to one letter; devslab.kr saw "cya / n" in a narrow flex cell.:where(), zero specificity. Any page or component rule wins.Not in dds.css (D-030)
A
base.cssdefault would change Korean line breaking in every product that loadsdds.css(VisionLinq, AskLinq, BookLinq, TraceLinq, FM덴탈) on its next bump.keep-allwidens the min-content of Korean table cells and chips, so each product would need a 375px check. D-029 left Korean kicker tracking to each product's root for the same reason. It also would not have fixedindex.html, which does not loaddds.css. Spec 3.2 (en + ko) now tells product pages which two rules to put on their root. D-030's revisit condition: when a second family product after devslab.kr adds the same rule.Verification
tests/foundation-contracts.test.mjs: new contract pinning the rule on all three pages, no per-elementword-break, and nokeep-allindds-css/src. It failed before the change ("preview/index.html must set keep-all on its Korean root"); 11/11 pass after.verify:source:stage1-2(22),verify:source:stage3-4(43),verify:foundation:core, and the fullpnpm run verify(docs sync; devslab/asklinq consumer copies in sync). Onlycheck-docs-sync.mjsand the contract test readpreview/*.htmlor the docs, so I didn't run the browser, Storybook or canary jobs locally. CI runs them.icons.htmloverflows at 320px (the top nav link reaches 336px), exactly as before this change.Known limitation, disclosed rather than fixed: Chromium's
keep-allglues only letters and digits, so a particle can still start a line after a closing quote, an ellipsis or).The consumer resync at devslab.kr is jlc488/devlab.kr#76 (it vendors this branch; merge this first).