HTML里的ruby标签在传统美学风格网页中的应用-html教程-PHP中文网

ruby标签本身仅为语义化注音容器，传统美学效果依赖css精准控制字音疏密、大小与留白；结构错误则字体再美亦无效。

html里的ruby标签在传统美学风格网页中的应用

ruby 标签本身不提供“传统美学风格”，它只是语义化注音容器；真正在传统风格网页里出效果的，是它配合 CSS 控制的字与音的疏密、大小、留白关系——但前提是结构写对，否则再美的字体也救不回来。

常见现象是：拼音挤在字顶上像贴纸、字号忽大忽小、横排时偏左、竖排时完全错位。这不是设计问题，而是结构或样式没压住浏览器默认行为。

ruby 默认渲染依赖浏览器内置排版引擎，Chrome/Firefox/Safari 对 rt 的缩放逻辑不一致，尤其在用「思源宋体」「小塚明朝」这类传统字体时，font-size: 70% 会失准
古风排版讲求“字距匀、音距松”，但 ruby 默认把 rt 紧贴基字顶部，中间几乎无留白，视觉压迫感强
若页面用了 line-height: 1.8 或 letter-spacing，ruby 内部会继承并放大错位，尤其多字连续 ruby 时，间距跳变明显

不用 JavaScript、不依赖 polyfill，只靠 HTML + CSS 就能稳住基本形制。关键不是“美化”，而是“止偏”：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

强制声明排版方向：ruby { ruby-position: over; ruby-align: center; }（ruby-align 防止 Safari 左偏）
rt 必须用固定像素字号，例如 rt { font-size: 14px; line-height: 1; }；搭配「思源宋体 CN」时，14px 比 12px 更易对齐基字中线
基字与拼音之间加垂直留白：ruby { line-height: 2.2; }（不是设在 rt 上），让行高撑开，避免拼音被上一行挤压
禁用所有影响内联流的属性：rt { vertical-align: text-top; } 比 super 更稳；绝对不要 position: relative 或 margin-top

用「臺灣大學」这种繁体+注音的组合，在 macOS 和 iOS 上显示良好，但在 Windows 仍可能缺字——不是 ruby 的锅，是字体支持断层：

Windows 默认「新細明體」对 Unicode 注音符号（U+3105–U+312F）支持不全，缺「ㄖ」「ㄥ」等常见符，会 fallback 到方框或空白
CSS 中必须指定后备链：font-family: "Microsoft JhengHei", "PingFang TC", "KaiTi", "Noto Sans CJK TC", sans-serif;
注音符号不能混入空格或全角标点，例如 <rt>ㄊㄞㄨㄢ</rt>（带空格）在 Safari 中会导致第二组偏右；正确写法是 <rt>ㄊㄞㄨㄢ</rt> 或分字写两个 ruby
若页面需打印或 PDF 导出，注音符号务必测试实际输出——某些 PDF 引擎（如 wkhtmltopdf）完全忽略 ruby，此时 rp fallback 就成了唯一可读保障