这次终于把浏览器里带声调的拼音标注功能实现了，不用再靠后端渲染。随手点开微博搜索，发现原来HTML标准里早就有这个叫<ruby>的标签。拿出这个老标签简单改改，五分钟就能让汉字说话了。最简的代码只有13个字符，在Chrome里打开就看得到效果，虽然汉字没变样，但框架已经搭好了。只要把<rt>子标签加进去，声调就会出现。这里需要注意的是，pinyin是纯拼音字母，要显示声调还得输入法配合。比如用搜狗输入法点右键选拼音字母软键盘，就能看到带声调的字母。把这些字母按顺序敲出来放到<rt>里就能用了。 浏览器兼容性这块几乎全线绿灯，Chrome、Edge、Firefox和Safari（iOS/macOS）都支持。看MDN的数据图就能知道兼容度很高，主流浏览器都覆盖到了。 如果担心拼音和汉字对不齐的问题，其实是因为声调长度不一样造成的。解决办法也很简单，把每个汉字单独包进<ruby>标签里就行。这样一来每个汉字都成了独立的音节块，长度一致了就自然对齐了。 这样一来，带声调的拼音标注就彻底完成了。不需要后端支持也不需要额外插件，用一行HTML代码就能马上上线了。