Five phases五行
然后由下面两条规则决定显示哪一个。选择这种做法而不是"用 JS 把 textContent 换成另一种语言"，原因有三： 1. 正文里有 / / / 内链。逐字替换会把这些 行内标记一起冲掉，或者需要把整段 HTML 塞进一个字符串再 innerHTML 回写 —— 那等于每次切换都重解析一遍 DOM，还容易丢事件监听。 2. 两种语言各自保留完整标记，排版（粗体、色块、链接下划线）天然一致。 3. 隐藏是纯 CSS 的，**没有 JS 也能正确显示英文**：静态 HTML 上写的是 data-lang="en"，命中第一条规则、藏掉中文；若是没有 data-lang 的旧页 （或有人把脚本拦了），两条规则都不命中 —— 页面回落成英文单语， 绝不会出现中英混排。 ⚠️ 两条规则的顺序不能合并成一条 .tx-en/.tx-zh 简写：必须让"当前语言的 那一侧"保持可见，漏掉任一条都会在某个方向上露出双语混排。 ============================================================ */ /* ⚠️ display:contents 是这里承重的一行，不是可有可无的润色。 包裹层必须"在布局上不存在"，否则会把父容器的子项数改掉： 正文里 .flow li 是 grid-template-columns: 196px 1fr（元素名 | 说明）， .flow-pair 是 1fr 24px 1fr（三列对齐箭头）。原来它们各有 2 / 3 个元素子项， 整段包进一个 后就只剩 1 个子项 —— 两列塌成一列、箭头不再对齐。 判定"能不能整体包裹"时只能看标签是不是行内标签，而 .flow-pair 这类 恰恰是行内标签却被 CSS 摆成了 grid。光看标签识别不出来， 所以不逐个判断，一律让包裹层 display:contents 退出布局。 对纯文本段落它同样是对的：文字重新成为的直接子节点，和加这层之前 完全一样。 */ .tx-en, .tx-zh { display: contents; } html[data-lang="en"] .tx-zh, html[data-lang="zh-Hant"] .tx-en { display: none; } /* ---------- 顶栏右侧分组 ---------- */ /* 按钮必须和导航链接同处一个行内分组，否则 .top-bar 是 flex + space-between，多出第三个子项会把导航链接挤到正中。 ⚠️ 这两条与 assets/article.css 里的同名规则**取值必须逐项相同** （base: flex / center / 22px；≤700px: 16px），由 tools/check-article-i18n.py 的 C5 断言盯着。理由： · 文章页自己定义了这条，值一样 → 本文件写在这里等于没写，不改变渲染； · 手写页（articles.html 这类）没有 .top-bar-right，本文件兜住它 —— 否则包裹层是个普通块级盒子，按钮会掉到导航链接的下一行去。 两处一旦取值不同，文章页就会被这份"后加载的同特异性规则"静默改掉间距 （先前正是踩了这个：14px 覆盖了 16px）。 */ .top-bar-right { display: flex; align-items: center; gap: 22px; } /* ---------- 切换按钮 ---------- */ /* ⚠️ 每个自定义属性都带兜底值 —— 这不是洁癖，是免疫一整类静默失效。 站上有两套 :root：文章页走 article.css（--border-gold / --ff-ui 都有）， 而列表页 articles.html 自带一套内联 :root，这两个变量都不存在。 而 var() 引到未定义的属性会让**整条声明**在计算值阶段作废：不报错、 控制台干净，只是边框凭空消失、字体掉回继承值 —— 正好是本项目最怕的 「不报错的错」。后面还有 33 页要逐个接入，靠"记得每页补变量"迟早会漏， 把兜底值写死在这里就一次免疫。 对已定义的页面没有任何影响：var() 一旦解析成功就用页面自己的值。 */ .lang-switch { display: flex; gap: 2px; border: 1px solid var(--border-gold, #5a4828); border-radius: 5px; padding: 2px; } /* 按钮的"选中态"不用 JS 打 class，而是让规则去匹配 。 否则会有个时序漏洞：脚本在
里就把 data-lang 定下来了（防闪动）， 而按钮要等 DOM 建好才存在 —— 若靠 JS 补高亮，从缓存里恢复成中文的读者 会先看到"EN 高亮"的按钮，过一帧才跳成"中"。 */ .lang-btn { font-family: var(--ff-ui, 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 12.5px; line-height: 1; letter-spacing: .08em; padding: 6px 11px; border: 0; border-radius: 3px; background: transparent; color: var(--muted, #9a8d78); cursor: pointer; transition: background .3s, color .3s; } .lang-btn:hover { color: var(--gold, #c9a050); } html[data-lang="en"] .lang-btn[data-lang-set="en"], html[data-lang="zh-Hant"] .lang-btn[data-lang-set="zh-Hant"] { background: rgba(201, 160, 80, .2); color: var(--gold-bright, #e8c97a); } /* 键盘可达性：按钮是 .nav-link 之外的独立控件，焦点环要自己给。 */ .lang-btn:focus-visible { outline: 1px solid var(--gold-bright, #e8c97a); outline-offset: 1px; } @media (max-width: 700px) { /* 窄屏把按钮自身收窄，直到**刚好不再挤压导航文字**。 ⚠️ 这条不是可选的美化。顶栏在 354px 宽下本来就只剩几像素余量，按钮一进来 就把最后那条导航链接压成两行。实测（five-elements / 354px）： · 桌面那套 padding（6px 11px + 外壳 2px）→ 第二条 nav-link 高 24.97 → 49.94（换行），整页 +25px，肉眼可见「← Back to Calculator」 断成两截； · 收窄到按钮 6px 7px、外壳 1px → 两条 nav-link 都回到 24.97 单行， 整页只 +4px（就是按钮自己高出的那一点）。 另两种"让按钮换到第二行"的写法能把链接救回来，但顶栏会涨到 71px （+47px）—— 用整页高度换一个次要控件的位置，不划算，故不取。 收窄后按钮仍高 24.5px、宽 ≥27px，不低于 WCAG 2.5.8 的 24px 可点击下限。 ⚠️ 这里刻意**不**去改 .top-bar / .top-bar-right 的排版。它们是各页自己 样式表管的事，而本文件是最晚加载的一张样式表 —— 同特异性下会静默 盖掉页面原值：先前写过一条 .top-bar-right{gap:14px}，实测把文章页 移动端的间距从 16px 改成了 14px，而且没有任何报错或提示。 把按钮自己的盒子改小就够了，不必去动别处的布局。 */ .lang-btn { padding: 6px 7px; } .lang-switch { padding: 1px; gap: 1px; } /* 与 article.css 的 ≤700px 取值保持一致（见上方 .top-bar-right 的说明）。 */ .top-bar-right { gap: 16px; } }