HTML中ruby标签排版错位问题的排查与解决-html教程-PHP中文网

ruby注音错位源于结构不合法：必须rb与rt成对嵌套，每个ruby仅含一个rb（纯文本或显式包裹），多字需拆分，rt须紧贴对应rb后；lang属性须为zh-cn/ja/ko；导出pdf时需js降级处理。

html中ruby标签排版错位问题的排查与解决

浏览器只认rb+rt成对嵌套在ruby里的结构，漏掉rb或把多个字塞进一个ruby里，就会导致拼音贴在字右边、换行脱钩、甚至完全不渲染。这不是样式问题，是语义缺失。

ruby里必须有且仅有一个基字单位：要么是纯文本（如汉），要么显式用rb包裹（如<rb>汉</rb>）
多字必须拆开：<ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby>，不能写成<ruby><rb>苹果</rb><rt>píng guǒ</rt></ruby>
rt必须紧贴对应rb之后，中间不能有空格、换行、span或em等标签
数字和英文也要套rb：<ruby><rb>123</rb><rt>yī èr sān</rt></ruby>，否则窄屏下容易断行错位

不同浏览器对rt的默认font-size（50%～60%）、line-height（继承混乱）、baseline（基线计算差异）处理不一致，直接导致Firefox压字、Safari留白过大、Chrome换行飘移。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

ruby依赖东亚文字排版引擎激活，如果或lang为空/为zh（非zh-CN），Firefox 和 Safari 就会把rt当普通文本忽略，Chrome 虽显示但语义链断裂，屏幕阅读器跳过注音。

检查的lang是否为zh-CN、ja或ko，不能是zh或en
语言切换时必须同步执行document.documentElement.lang = "zh-CN"
避免用dir="rtl"包裹ruby块——它干扰基线计算，rt可能偏左而非居上
:lang(zh) rt { color: #666; }在 Safari 中常无效，应改用:lang(zh) ruby { color: inherit; } rt { color: inherit; }

wkhtmltopdf、Puppeteer 和浏览器打印预览根本不实现ruby布局模块，遇到rt标签直接跳过，连 DOM 都不建。这不是 bug，是引擎能力缺失。

导出前必须用 JS 遍历所有ruby，提取rb和rt内容拼成降级文本，如汉(hàn)
别用innerHTML暴力替换，先克隆节点，再用textContent分别读取rb和rt子节点
Vue/React 动态渲染时，v-html或dangerouslySetInnerHTML若含未转义字符（如&），会导致rb标签被提前闭合，结构断裂
优先封装组件：<rubytext :char="c" :pinyin="p"></rubytext>，模板里固定结构，比字符串拼接可靠得多