中药多音字须人工查药典校验，禁用自动拼音库；ruby注音须一对一包裹、显式设置CSS居中与行高；生僻字需字体支持；data-pinyin属性替代title或伪元素备份读音。
多音字必须人工判读，不能靠自动拼音库硬套
中药名里“当”“行”“薄”“荷”“壳”等字高频多音，pinyin-pro 或 pypinyin 默认返回常用读音（如“当归”里的“当”被标为 dāng），但实际应读 dàng。自动工具不理解药典语境，强行使用会导致注音错误，尤其在面向医学生或药师的页面中不可接受。
实操建议：
- 优先查《中华人民共和国药典》2020年版或《中药学》教材附录读音表，确认标准读法
- 对每个中药名逐字核对，例如：“白术”读
bái zhú（非shù），“川芎”读chuān xiōng（非gōng） - 若用脚本批量生成
，必须把人工校验后的读音存入映射表，而非依赖库的get()方法直接输出
每个字单独套
像“金银花”这种三字药名，常见错误是写成 金银花——这违反 的语义要求：浏览器无法将拼音与对应汉字绑定，屏幕阅读器会整词朗读，失去教学意义；Safari 中还可能错位、换行或垂直偏移。
正确结构必须一对一、显式包裹基字：
<ruby><rb>金</rb><rt>jīn</rt><rb>银</rb><rt>yín</rt><rb>花</rb><rt>huā</rt></ruby>
实操要点：
-
䗪 虫 - 轻声处理按实际发音，如“甘草”后字不轻读，写
gān cǎo；但“茯苓”中“苓”在口语里常轻读，可标fú líng（不加调号），不写líng - 儿化音如“地龙”不作“地龙儿”，不标
lóng ér；若确需体现（如方言教学），标lóngr即可
CSS 必须显式声明 ruby-align: center 并配对设置 line-height
未设 ruby-align 时，Safari 16 及更早版本默认回退到 start，拼音紧贴汉字左侧；Chrome/Firefox 在 text-align: right 容器中也会失效。更隐蔽的问题是：只调 font-size 不调 line-height，会导致拼音被上下挤压、截断，居中形同虚设。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
最小可用样式组合：
ruby { ruby-align: center; -webkit-ruby-align: center; line-height: 1.3; }
rb, rt { font-size: 1em; }
rt { font-size: 0.65em; line-height: 1; }
注意：
- 不要给
rt设margin-top或position: absolute——破坏可访问性，语音合成器无法同步定位 - 中药名常含生僻字（如“䗪”“虻”），确保字体支持，必要时用
@font-face引入 Noto Sans CJK 或思源黑体 - 在
contenteditable区域内（如在线方剂编辑器），iOS Safari 17.4 需加transform: translateZ(0)防止渲染错位
多音字旁注建议用 data-pinyin 备份，不塞进 title 或伪元素
有些页面想“兼顾自动识别和人工校验”，把正确读音存在 title="dàng" 或 ::before 里，这是无效的：语义缺失，屏幕阅读器不读 title 中的拼音，伪元素内容不可选、不可复制、不参与 DOM 搜索。
真正可落地的备用方案：
- 为
data-pinyin属性，如当 - 在药名后加小字号脚注，例如：
当归①，并在页末说明“①此处读dàng，非dāng” - 若需响应式切换（如点击显示/隐藏拼音），用
aria-hidden="true/false"控制的可访问性状态，而非 display:none
最易被忽略的是：中药名常跨词连读变调（如“黄连解毒汤”中“解”读 xiè 而非 jiě），但 只处理单字标注。此时必须拆开词组、分段标注，并用文字说明语境规则——技术能保准确，逻辑得靠人补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
