多音字必须逐字拆分为独立+对,禁止共用;因W3C要求严格一对一绑定,否则语义断裂、屏幕阅读器跳过、浏览器渲染不可控且无法CSS精细控制。

多音字必须拆成独立 + 对,不能共用一个 ,否则语义断裂、屏幕阅读器跳过注音。
为什么重是错的
这种写法把两个读音塞进同一个 ,浏览器无法判断哪个音对应哪个语境,语音合成器会朗读为“chóng/zhòng”,失去注音意义;更严重的是,W3C 规范要求 必须与单个基字(即 )严格一对一绑定,结构不合规会导致 Safari 和旧版 Chrome 完全忽略注音。
- 语义失效:辅助技术(如 VoiceOver、NVDA)只识别标准
–对,混排拼音会被跳过 - 渲染不可控:不同浏览器对斜杠分隔的拼音解析方式不一,有的截断、有的重叠、有的直接不显示
- 无法 CSS 精确控制:比如想给“zhòng”标红、“chóng”标蓝,但共用
就没法加 class 区分
不能省,哪怕单字也要包
写成 重 看似简洁,但在 Safari 16 及更早版本、部分 iOS WebView 中, 会失去基线锚点,导致拼音左飘、右偏甚至垂直错位一整行——因为浏览器只有在 明确包裹基字后,才能计算宽度和基线位置,进而居中对齐 。
- 正确写法:
(单字也必须套重 ) - 多音并列时:
重 重 - Vue/React 中注意:
必须是的**直接子节点**,中间不能插或空格,否则结构断裂
动态生成时最容易漏掉的三件事
用 pypinyin 或前端框架批量生成注音 HTML 时,90% 的问题出在结构松散或字符归一化缺失,不是拼音算错了,而是标签没对齐。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 非汉字字符(数字、英文、标点)必须原样保留,且不能被
包裹——用正则切块:re.findall(r'[\u4e00-\u9fff]+|[^\u4e00-\u9fff]+', text),只对汉字块调lazy_pinyin() - 每个汉字字符都得走一遍
,不能靠字符串替换偷懒,否则 emoji 或组合字符(如「ā」)会导致索引错位字 - 必须显式设
ruby { ruby-align: center; },Safari 16 及更早版本不实现默认居中,不声明就会左贴字,尤其在窄容器里特别明显
轻声、儿化、变调怎么标才靠谱
ruby 不处理语义,只呈现。所有“音变”必须由人工或上下文词典确定后,再填进 ,不能指望自动规则。
- 轻声不标调号:如“妈妈”标为
(第二个妈 妈 ma无声调) - 儿化音只加
r,不标“儿”字音节:如“花儿”是,不是花 huā ér - 多音字必须按上下文选:如“重庆”的“重”读
chóng,“重要”的“重”读zhòng,不能共用一套拼音输出
最常被忽略的其实是 的强制存在性和 ruby-align 的显式声明——这两项不落实,再多的拼音数据也白搭,注音要么看不见,要么读不准。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










