火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

ruby 样式标准化:字号行高位置都要定

发布于 4天前
3

老站重构时,ruby 注音的渲染散落在各浏览器的默认样式里,同一页码在不同终端字号飘忽、行高错乱。重构阶段需要一份显式的标准化定义,把默认值全部接管过来。

放大镜下的书页文字
排版标准化从显式声明开始。图片来自 Pexels。

字号

rt { font-size: 0.65em; }

用 em 而不是固定像素,注音随正文缩放。0.65 到 0.7 之间阅读舒适度较好,低于 0.5 小屏上难以辨认。

行高

ruby { line-height: 1; }
rt { line-height: 1.2; }

ruby 默认行高会把整行撑高,段落的行距被注音行带乱。收紧 ruby 自身的行高,正文节奏才能保持。

位置

ruby { ruby-position: over; }

横排中文注音固定在上方。竖排场景另算,混排文档不要依赖默认值。

结构与语义

多字注音拆成独立的 ruby 单元,一个词一个,对齐与换行都更可控。rp 括号只放标点,嵌在 rt 外侧。多语言混排时给 ruby 标 lang,混排方向异常的段落用 bdi 隔离,读屏工具的发音依赖这两处信息。

验收清单

  1. 双端抽查注音字号与正文比例。
  2. 含注音段落的行距与纯文本段落一致。
  3. 长注音换行不断字。
  4. 读屏抽听一条注音。

常见问题(FAQ)

rt 字号应该设多少
用 em 相对单位,0.65 到 0.7 之间兼顾可读与美观,避免固定像素在缩放场景下比例失调。
ruby 为什么会撑乱行距
ruby 默认行高大于正文,注音会把所在行撑高,段落行距因此不一致,需要显式收紧。
注音位置怎么固定
ruby-position: over 把注音固定在正文上方,横排中文的标准位置,写进重置不依赖浏览器默认。
rp 和多字注音怎么处理
rp 只放括号标点且嵌在 rt 外侧,多字注音拆成多个 ruby 单元,每词一个。
多语言混排要注意什么
给 ruby 标 lang 属性,混排方向异常时用 bdi 包裹,读屏与渲染都依赖正确的语言标记。
CSS重置ruby标签无障碍交互注音排版浏览器差异
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1