/* Contract: contracts/web/rules.md Japanese type. See I18N-DESIGN.md, phase 4. Applied under :lang(ja), which web/i18n.js sets on once it knows what it is speaking. Everything here is about glyphs and where a line may break; none of it touches the Latin layout, and none of it costs anything for a reader who is not in Japanese. Its own file because phase 4 put all of this in style.css, and the deck editor does not load style.css — it has its own five stylesheets and its own Latin face. So Japanese in the editor rendered in whatever each browser fell back to, which is the exact failure phase 4 was written to end, surviving in the one place phase 4 never reached. Found by bin/i18n-qa.mjs. */ /* The CJK faces, named once. font-family cannot be composed from parts, so a page with its own Latin stack has to restate it and put this on the end — which is why this is a variable rather than a rule. Every page owns its own Latin faces; none of them owns this list. */ :root { --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo; } /* Nothing here names a face, so it is right for every page regardless of what its Latin stack is. */ :lang(ja) { /* Japanese has no spaces, so a line may break almost anywhere — but not everywhere. `strict` keeps the kinsoku rules: a small kana, a long-vowel mark or a closing bracket must not start a line, and an opening bracket must not end one. The browser default is permissive and gets this wrong in exactly the places a reader notices. */ line-break: strict; word-break: normal; /* Latin line-height is set tight for 13–15px text and is tight for characters that fill their em box. This is the one number here a Japanese reader would notice first. */ line-height: 1.7; } /* The places that break a long unbroken run mid-character on purpose — an MCP URL, a bucket key, a filename, a colour value in the deck inspector. They are Latin strings wherever they appear, and `anywhere` inside Japanese prose would break between characters the rule above just decided belong together. The two .ins-diff-* spans are the deck history's before-and-after, and they carry exactly what .ins-face carries one panel away — "AvenirNext-DemiBold", "#0b0b0d", "rgba(255,255,255,0.18)". Both already declare `overflow-wrap: anywhere`, which is the same declaration every other selector in this list is here to protect. */ :lang(ja) .upname, :lang(ja) .failkey, :lang(ja) .ins-face, :lang(ja) .ins-diff-from, :lang(ja) .ins-diff-to, :lang(ja) #mcpurl, :lang(ja) #mcpurl2, :lang(ja) #mcpauth { line-break: auto; }