ruby是HTML5专用于东亚文字注音的语义化标签，必须严格搭配rb（基字）和rt（注音）使用；它不适合新闻卡片排版，因无容器功能、不支持常规布局属性、破坏语义且影响可访问性。
ruby 标签不是为新闻卡片排版设计的，强行用它做标题装饰或信息分组，大概率会破坏语义、影响可访问性，且在多数 CSS 框架中默认无样式支持。
ruby 是什么，为什么它不适合新闻卡片
ruby 是 HTML5 中专用于东亚文字注音（如日文假名标注汉字、中文拼音标注生僻字）的语义化标签，结构必须包含 rb（基字）和 rt（注音），还可选 rp（括号 fallback）。它的渲染逻辑由浏览器内置规则控制，不响应常规布局属性（比如 display: flex 或 margin 在部分浏览器中无效）。
新闻卡片需要的是结构清晰、可缩放、可交互、适配屏幕尺寸的容器模型——而 ruby 既不能作为卡片容器，也不能替代 header/section 等语义块，更无法承载图片、时间戳、摘要等多类型内容。
- 常见错误现象：
<ruby><span>热点新闻</span><rt>HOT</rt></ruby>—— 这违反了rb必须包裹实际文字的要求，rt会悬浮错位或完全不可见 - 使用场景错配：把它当“角标”“标签徽章”用，本质是滥用语义；真正需要的是
span+ CSSbadge类或伪元素 - 兼容性风险：Safari 对
ruby的display重置支持不稳定；NVDA、JAWS 等读屏器会把rt当作独立发音单元朗读，造成干扰
想实现类似 ruby 的视觉效果？用更可控的方式
如果你只是被 ruby 上下叠排的视觉吸引（比如标题旁加个「推荐」小标），直接用 CSS 实现更可靠：
立即学习“前端免费学习笔记（深入）”；
<h3 class="card-title"> 神舟二十号发射成功 <span class="tag tag-recommended">推荐</span> </h3>
对应 CSS 可以这样写（无需 JS，纯样式控制）：
.card-title {
position: relative;
padding-right: 60px;
}
.tag {
position: absolute;
top: -6px;
right: 0;
font-size: 0.65em;
line-height: 1;
padding: 2px 8px;
background: #ff6b6b;
color: white;
border-radius: 4px;
}
- 优势：完全可控定位、颜色、响应式缩放；不影响 DOM 结构语义
- 参数差异：比起
ruby的固定上下流式布局，CSSposition或grid能适配任意方向（左上角、右下角、内嵌行末） - 性能影响：无额外解析开销；
ruby在某些旧版 Chromium 中触发强制同步布局
真要标注汉字读音？ruby 的正确写法仅限于此
只有当卡片中某处确实存在需辅助阅读的汉字（如人名「?野」、地名「龜山」），才应使用 ruby，且必须严格遵循规范：
<p>日本<ruby><rb>?野</rb><rt>よしの</rt></ruby>町举办樱花节</p>
- 必须成对出现：
rb和rt缺一不可；rp仅在需要兼容 IE 时添加（现已基本无需考虑） - 禁止包裹块级元素：
ruby内只能是纯文本或内联元素（span、em等），不能放img或div - 无障碍要点：屏幕阅读器会读作「?野（よしの）」，若注音错误或缺失，反而降低可理解性
真正容易被忽略的点是：新闻卡片的语义骨架应由 article、header、time、figure 等构成，视觉修饰永远是第二层。用错一个 ruby 不会崩页面，但会让整张卡片在语义检查工具里亮红灯，也给后续 SEO 和无障碍审计埋下隐患。
