Skip to content

fix(preview): break Korean between words on the showcase pages (D-030) - #69

Merged
jlc488 merged 1 commit into
mainfrom
fix/korean-keep-all
Sep 25, 2026
Merged

jlc488 merged 1 commit into
mainfrom
fix/korean-keep-all

Conversation

@jlc488

@jlc488 jlc488 commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

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):

page 375px 1440px
index.html 22 5
components.html 3 1
icons.html 3 0

Each preview page now puts two rules on its language root, which children inherit:

:where([lang|="ko"]) { word-break: keep-all; overflow-wrap: break-word; }
:where([lang]:not([lang|="ko"])) { word-break: normal; overflow-wrap: normal; }
  • Korean only. Japanese and Chinese have no spaces between words, so keep-all there would remove their only break points. Elements that declare another language go back to the default.
  • break-word, not anywhere. anywhere also 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.css default would change Korean line breaking in every product that loads dds.css (VisionLinq, AskLinq, BookLinq, TraceLinq, FM덴탈) on its next bump. keep-all widens 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 fixed index.html, which does not load dds.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-element word-break, and no keep-all in dds-css/src. It failed before the change ("preview/index.html must set keep-all on its Korean root"); 11/11 pass after.
  • Locally green: verify:source:stage1-2 (22), verify:source:stage3-4 (43), verify:foundation:core, and the full pnpm run verify (docs sync; devslab/asklinq consumer copies in sync). Only check-docs-sync.mjs and the contract test read preview/*.html or the docs, so I didn't run the browser, Storybook or canary jobs locally. CI runs them.
  • Measured after the change, all three pages at 320, 360, 375, 390, 414, 768, 1024 and 1440px: 0 breaks between syllables, no new horizontal overflow, no text escaping its box. icons.html overflows at 320px (the top nav link reaches 336px), exactly as before this change.
  • Screenshots checked at 375/1440 before and after: line counts and component sizes are unchanged. Only the break positions moved.

Known limitation, disclosed rather than fixed: Chromium's keep-all glues 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).

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.
@jlc488
jlc488 merged commit db4a8a5 into main Sep 25, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant