如何通过CSS+HTML实现上下双行ruby文本（不使用<rtc>标签）

你可以通过嵌套Ruby元素+CSS调整位置或者自定义HTML结构+CSS定位两种方案实现需求，下面是具体实现：

方案一：嵌套Ruby元素（保留语义化） #

利用原生<ruby>标签的嵌套结构，配合ruby-position属性分别控制上下标注的位置，既保留Ruby语义，又能实现双行标注效果：

<style>
  /* 外层Ruby的标注置于上方 */
  .dual-ruby > rt {
    ruby-position: over;
  }
  /* 内层Ruby的标注保持在下方（默认值为under，可省略此规则） */
  .dual-ruby > ruby > rt {
    ruby-position: under;
  }
</style>

<ruby class="dual-ruby">
  <rt>朝日</rt>
  <ruby>Asahi<rt>Morning Sun</rt></ruby>
</ruby>

原理说明： #

• 外层<ruby>仅包含上方标注<rt>朝日</rt>和包裹主文本的内层<ruby>
• 通过ruby-position: over强制外层标注显示在主文本上方，内层标注默认显示在下方，以此实现上下双标注

方案二：自定义结构（更灵活的样式控制） #

如果场景对Ruby语义要求不高，可使用自定义块级结构模拟双行标注，样式调整更自由：

<style>
  .custom-ruby {
    display: inline-block;
    text-align: center;
    vertical-align: middle; /* 与周围文本基线对齐 */
  }
  .ruby-top, .ruby-bottom {
    font-size: 0.6em; /* 标注字体大小，可按需调整 */
    line-height: 1.2;
    display: block;
  }
  .ruby-base {
    font-size: 1em;
    line-height: 1.5;
    margin: 0.1em 0; /* 上下标注与主文本的间距 */
  }
</style>

<div class="custom-ruby">
  <span class="ruby-top">朝日</span>
  <span class="ruby-base">Asahi</span>
  <span class="ruby-bottom">Morning Sun</span>
</div>

优点： #

• 不受Ruby标签默认样式限制，可自由调整标注字体大小、间距、颜色等
• 兼容性更好，无需担心ruby-position的浏览器支持问题

内容的提问来源于stack exchange，提问作者Karma