HTML中ruby标签在日文注音中的应用-html教程-PHP中文网

日文注音必须用逐字标注假名，如日に本ほん，禁止单词级注音；需确保utf-8编码、选用cjk字体，并省略标签。

html中ruby标签在日文注音中的应用

日文注音必须用填假名，不能只写汉字

没就等于没注音，浏览器会把当普通容器处理。比如<ruby>東京</ruby>什么都不会显示，必须写成<ruby>東京<rt>とうきょう</rt></ruby>。日文常用平假名（如とうきょう）或片假名（如トウキョウ），但标签本身不校验内容——你填罗马字toukyou它也照显示，只是不符合语义规范。

多字词要拆开写，别指望一个覆盖整个词

日文词常有连浊、促音、长音等语音变化，浏览器不会自动切分。例如“日本”读にほん而非にっぽん，“学校”读がっこう带促音。如果写成<ruby>日本<rt>にほん</rt></ruby>，两个汉字共用一个，在窄屏或小字号下容易挤在一起、声调标记错位。更稳妥的是逐字标注：<ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby>。这样每个假名都能对齐对应汉字，也方便后续加CSS控制单字间距。

Doc To HTML

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

下载

字体和编码问题比拼音更敏感

日文假名字符集比拼音宽得多，Noto Sans CJK、Source Han Sans 等字体支持较好，但若用系统默认字体（如 macOS 的 Hiragino 或 Windows 的 Meiryo），在 Chrome 和 Safari 上可能渲染不一致：Safari 对ー（长音符）宽度计算偏大，导致注音整体右移；Android WebView 可能把っ（促音）显示为方块。必须确保 HTML 声明<meta charset="utf-8">，且服务端响应头也设为 UTF-8。不要用 JS 动态拼接时漏掉.encodeURI()或误用escape()——那会把ょ变成%E3%82%87，破坏渲染。

rp括号在日文场景里基本没用

<rp></rp>只在 IE ≤10 或极老 Android WebView 中生效，而这些环境早已不处理日文网页。现代项目中加<rp>( </rp><rt>とうきょう</rt><rp>)</rp>反而增加 DOM 复杂度，还可能干扰屏幕阅读器朗读顺序。iOS Safari 对<rp></rp>的渲染极弱，括号常不出现，不如直接省略。真正需要降级时，用 JS 检测document.createElement('ruby').tagName === 'RUBY'，不支持则生成東京(とうきょう)文本替代。

日文注音最麻烦的不是结构，而是语音规则得人工判断——同一个汉字在不同词里训读、音读完全不同，比如「行」在「行動」中读こう，在「行う」中读おこなう，标签不会帮你选，也不能靠库自动推导。