/* ============================================================ i18n.css — 语言相关的版式修正层(只在非源语言下生效) 英文平均比中文长 1.4~1.6 倍,同一套盒子在英文下会换行、撑高或截断。 这里只写「因为语言而必须不同」的规则,全部用 html[data-lang="…"] 收口, 中文视图与改造前逐字节一致。须最后 link(在 mobile.css 之后)。 ============================================================ */ /* ── 首页输入框工具条 ──────────────────────────────── tob.css 的原意是「不换行不裁切」,靠容器查询按宽度整颗减胶囊(4→3→2); 中文标签短够用,英文标签宽近一倍,同宽度下放不下,flex-wrap:wrap 兜底 把工具条撑成了两行。 处理沿用仓库里已验证的同类方案(mobile.css:71 移动端工具条): 不换行 + 横向滚动。这样标签变长只是可滚,不会撑高,也不用为每种语言 维护一组断点 —— 断点一旦估偏,就会像两行那样又空出一大块。 注:这里用 flex:0 1 auto(不是移动端的 1 1 0),让 .sp 继续吃掉剩余空间, 胶囊保持自然宽度、只在真的放不下时才收缩滚动。 */ html[data-lang="en"] .tob-dskills { flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } html[data-lang="en"] .tob-dskills::-webkit-scrollbar { display: none; } /* 工具条里除胶囊外的元件都不许被压缩:英文胶囊更宽,行内空间不够时 浏览器会挑没写 flex-shrink 的元素下手 —— 发送按钮被压成 30×38 的椭圆(见反馈截图)。 把缺口全部让给可滚动的胶囊行,固定元件保持原尺寸。 */ html[data-lang="en"] .tob-dctools > .tob-att, html[data-lang="en"] .tob-dctools > .tob-model, html[data-lang="en"] .tob-dctools > .tob-dsend, html[data-lang="en"] .tob-dctools > .tob-dskills-div { flex-shrink: 0; } /* 溢出时右缘渐隐:让「还能横向滑」读起来是可滚动,而不是被切了一刀 */ html[data-lang="en"] .tob-dskills { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); } /* ── 打字区(首页 / 对话输入框)──────────────────────── --sans 的字体栈是为中文排的:PingFang / 微软雅黑在前,英文字母走中文字体的 西文分支,字形偏窄、字距偏挤,长英文占位符尤其明显。英文下改用西文优先的栈, 并把行高与字距按拉丁文调松一档。只作用于输入区,不动全站正文。 */ html[data-lang="en"] .tob-composer-rich-input, html[data-lang="en"] .tob-dcomposer textarea, html[data-lang="en"] .tob-dcomposer .tob-at-tag, html[data-lang="en"] .tob-askhint, html[data-lang="en"] .tob-ta-wrap [contenteditable] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.005em; line-height: 1.55; } /* 占位符同源(部分内核不继承输入框的 font-family) */ html[data-lang="en"] .tob-dcomposer textarea::placeholder { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.005em; } /* ── 分段控件(设置面板 / 偏好项)──────────────────── 「Follow browser」「Green up / red down」这类标签在英文下会撑破轨道宽度。 */ html[data-lang="en"] .set-seg { flex-wrap: nowrap; } html[data-lang="en"] .set-seg button { white-space: nowrap; padding-inline: 10px; font-size: 12.5px; } /* ── 日本語 ────────────────────────────────────────── ⚠ body に和文フォントを当てない。 CJK は統合符号化のため、Hiragino / Yu Gothic を先頭に置くと**未翻訳の中国語まで 日本語字形で描かれる**(骨/直/今 などが別字形になる)。ja のカバー率が上がるまでは 中国語フォールバックの方が量が多いので、既定スタック(PingFang 系)のままにする。 html[lang="ja"] はすでに付いているので、ブラウザ側の言語別フォント選択に任せる。 入力欄だけは利用者が日本語を打つ場所なので和文フォントを明示。 */ html[data-lang="ja"] .tob-dcomposer textarea, html[data-lang="ja"] .tob-composer-rich-input, html[data-lang="ja"] .tob-dcomposer textarea::placeholder { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; } html[data-lang="ja"] .tob-dskills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } html[data-lang="ja"] .tob-dskills::-webkit-scrollbar { display: none; } html[data-lang="ja"] .tob-dctools > .tob-att, html[data-lang="ja"] .tob-dctools > .tob-model, html[data-lang="ja"] .tob-dctools > .tob-dsend, html[data-lang="ja"] .tob-dctools > .tob-dskills-div { flex-shrink: 0; } /* ── 侧栏「查看全部 N 个对话」────────────────────── 中文「查看全部」四个字排得下,英文 "View all … conversations" 在 190px 宽的侧栏里 会在 "View / all" 之间折行。整行不折,数字与箭头保持同一行。 */ html[data-lang="en"] .lib-history-all { white-space: nowrap; font-size: 12px; gap: 4px; /* 原本 space-between 是为中文「查看全部 N 个对话」四段撑满设计的; 英文去掉 "conversations" 后只剩三段,再撑满就变成大空档。改为左对齐、箭头贴右。 */ justify-content: flex-start; } html[data-lang="en"] .lib-history-all > :last-child { margin-left: auto; } html[data-lang="ja"] .lib-history-all { white-space: nowrap; gap: 4px; justify-content: flex-start; } html[data-lang="ja"] .lib-history-all > :last-child { margin-left: auto; } /* ── 账户 / 主菜单条目 ─────────────────────────────── 英文条目更长,超出时省略而不是换行顶高行高。 */ html[data-lang="en"] .tob-mm-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 状态胶囊 ──────────────────────────────────────── 胶囊按中文 2~4 字排的,英文换行会把所在行顶乱。 */ html[data-lang="en"] .tob-chip { white-space: nowrap; } /* ── 英文正文断行 ──────────────────────────────────── 中文不需要;英文长句在设置面板的窄栏里要 pretty 断行,避免孤字行。 */ html[data-lang="en"] .set-row-d, html[data-lang="en"] .set-sec-d { text-wrap: pretty; } /* ── 한국어 ────────────────────────────────────────── ⚠ body에 한글 폰트를 지정하지 않는다. ko 커버리지가 낮은 동안 화면 대부분은 미번역 중국어 폴백이고, Apple SD Gothic Neo / Malgun Gothic을 스택 앞에 두면 그 한자까지 한국식 자형으로 그려진다(ja에서 겪은 것과 같은 문제). 기본 스택(PingFang 계열)을 유지하고, html[lang="ko"]가 붙어 있으니 브라우저의 언어별 폰트 선택에 맡긴다. 커버리지가 올라간 뒤 전역 적용을 검토한다. 입력창만은 사용자가 한글을 직접 입력하는 곳이라 한글 폰트를 명시한다. */ html[data-lang="ko"] .tob-dcomposer textarea, html[data-lang="ko"] .tob-composer-rich-input, html[data-lang="ko"] .tob-dcomposer textarea::placeholder { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; } /* 한글은 중국어보다 길고(평균 1.3~1.5배) 어절 단위로 끊긴다 — ja와 같은 이유로 툴바 캡슐만 스크롤시키고 고정 부품은 압축을 금지한다. */ html[data-lang="ko"] .tob-dskills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } html[data-lang="ko"] .tob-dskills::-webkit-scrollbar { display: none; } html[data-lang="ko"] .tob-dctools > .tob-att, html[data-lang="ko"] .tob-dctools > .tob-model, html[data-lang="ko"] .tob-dctools > .tob-dsend, html[data-lang="ko"] .tob-dctools > .tob-dskills-div { flex-shrink: 0; } html[data-lang="ko"] .lib-history-all { white-space: nowrap; gap: 4px; justify-content: flex-start; } html[data-lang="ko"] .lib-history-all > :last-child { margin-left: auto; } html[data-lang="ko"] .tob-chip { white-space: nowrap; } /* 한글은 단어 중간에서 끊기면 읽기 어렵다 — 설정 패널의 좁은 칼럼에서 어절 단위 줄바꿈. */ html[data-lang="ko"] .set-row-d, html[data-lang="ko"] .set-sec-d { word-break: keep-all; text-wrap: pretty; } html[data-lang="ko"] .set-seg { flex-wrap: nowrap; } html[data-lang="ko"] .set-seg button { white-space: nowrap; padding-inline: 10px; } /* ── K 线事件流「当前分析」角标 ────────────────────── .kx-chip-cur 是钉在卡片右上、压住上边框的一枚小角标。原尺寸是按中文「当前分析」 四个字排的(约 40px);英文 "Current analysis" 近 100px、日文「現在の分析」、 韩文「현재 분석」也都更长,在 ~250px 宽的卡片上会横占大半条上边, 顶到相邻卡片、并被瀑布流容器的上边缘裁掉一截。 这里只收窄角标本身(字号、内边距、右锚点),不动卡片几何 —— 中文视图逐字节不变。 max-width + 省略号是兜底:再长的语言也只是被截断,不会撑破卡片。 */ html[data-lang="en"] .kx-chip-cur, html[data-lang="ja"] .kx-chip-cur, html[data-lang="ko"] .kx-chip-cur { top: -6px; right: 8px; padding: 2px 6px; font-size: 9px; letter-spacing: -0.01em; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 繁體中文 ───────────────────────────────────────── ⚠ 這一段與 ja / ko 的處理**相反**:那兩個語言刻意不給 body 指定字體, 因為覆蓋率低時螢幕上多半是未翻譯的中文,把日文/韓文字體放在字體堆疊最前面 會連那些漢字都畫成日式/韓式字形。繁中沒有這個問題 —— 它走的是轉換層, 覆蓋率天生 100%,畫面上不會有簡體殘留,所以整站掛正體字型才是對的。 不掛的話 PingFang SC / 微軟雅黑 會用大陸新字形去畫繁體字(骨、直、令、爭 的字形 與台灣標準字體不同),讀起來就是「繁體字用簡體字形」的違和感。 ⚠ 字型堆疊裡不要保留 SC 字型當後備 —— 一旦前面的 TC 字型缺字就會混用兩套字形, 比整段用 SC 還難看;後備直接落到系統 sans-serif。 */ html[data-lang="zh-TW"] body, html[data-lang="zh-TW"] .tob-dcomposer textarea, html[data-lang="zh-TW"] .tob-composer-rich-input, html[data-lang="zh-TW"] .tob-dcomposer textarea::placeholder { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif; } /* 版面上繁中與簡中逐字等寬(字數相同、全形寬度相同),所以**不需要** en / ja / ko 那一整套工具列橫向捲動、膠囊 nowrap、面板 pretty 斷行的補丁。 這裡刻意什麼都不寫 —— 繁中是唯一一個對版面零影響的語言,加了反而是噪音。 */ /* ── 语言选择控件 ───────────────────────────────────── 设置面板里同类偏好项都是分段控件(.set-seg):灰底轨道、无边框、12px/700。 语言有 5 个选项,段控件会被撑破,所以用原生