HTML多语言适配中拼音与注音标签的排版维护-html教程-PHP中文网

ruby多语言页面失效主因是未正确设为zh-cn/ja/ko等东亚语言码，或切换时未同步重置document.documentelement.lang，导致firefox/safari降级为普通内联元素，屏幕阅读器跳过注音；chrome虽兼容但语义链断裂。

html多语言适配中拼音与注音标签的排版维护

为什么`ruby`结构在多语言页面里更容易失效

不是因为lang属性没设，而是ruby本身依赖东亚文字排版引擎激活——如果漏了，或被动态脚本覆盖成en-US，Firefox 和 Safari 就会把<rb></rb>当普通内联元素处理，<rt></rt>直接降级为平铺文本。Chrome 虽宽容，但屏幕阅读器仍会跳过注音内容。

检查标签的lang是否始终为zh-CN、ja或ko等东亚语言码，不能是zh或空值
语言切换时，必须同步重置document.documentElement.lang，否则ruby语义链断裂
避免用dir="rtl"包裹ruby块——它会干扰基线计算，导致<rt></rt>错位到左侧而非上方

`ruby`与`:lang()`选择器配合时的样式陷阱

很多人想用:lang(zh)给拼音加特定颜色，但ruby的渲染优先级高于伪类，且<rt></rt>不继承父级color，直接写:lang(zh) rt { color: #666; }在 Safari 17.4 中可能无效。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

必须显式声明rt { color: inherit; }，再通过:lang(zh) ruby { color: #666; }间接控制
:lang(ja)下若同时存在平假名和汉字注音，别用同一套font-size——日文<rt></rt>默认比中文更小，建议单独设:lang(ja) rt { font-size: 0.55em; }
禁用:lang(zh) ruby { text-align: center; }——这会覆盖ruby-align: center，导致对齐偏移

混排英文/数字时`ruby`断行脱节怎么防

「第123页」加注音后，在移动端窄屏上常出现「第」和「123」分两行，但拼音还挂在第一行末尾，视觉完全错位。这不是 bug，是white-space: nowrap只作用于单个ruby元素，无法跨标签生效。

给整个注音片段外层包一层<span class="ruby-group"></span>，再设.ruby-group { white-space: nowrap; }
数字部分也要套<rb></rb>，例如<ruby><rb>123</rb><rt>yī èr sān</rt></ruby>，不能只给汉字加
避免在<rb></rb>里塞空格或全角逗号；如需分隔「第,123页」，用零宽空格替代