显示什么：ruby

Question

在查看 显示属性的 CSS 草稿规范时，遇到了这个属性

display:ruby

一点点搜索解释，用于显示日语字符。

• 这是唯一的用例吗？ （将它用于普通文本不会做任何特殊的事情，此外，chrome 将其标记为无效属性）
• 它和我们常用的块容器有什么不同？

Answer 1

来自 HTML5 文档

ruby 元素允许使用 ruby 注释来标记一个或多个短语内容。 Ruby 注释是 与基础文本一起呈现的短文本， 主要用于东亚排版，作为发音指南或包含其他注释

所以你基本上用它来发音任何语言。但它并不限制您仅将其用于此目的。

Answer 2

我在使用 a 标签将整个块放入 li 时遇到了麻烦，所以，我使用了 ruby，它没有占用整个块空间，也没有破坏其余视觉结构的格式。

Answer 3

来自 MDN 网络文档：

该元素的行为类似于内联元素，并根据 ruby 格式化模型布局其内容。它的行为类似于相应的 HTML 元素。

您可以将其与

display: ruby-base;

和

display:ruby-text

一起使用，其作用类似于

<rb>

和

<rt>

。

查看如何使用所有这些的示例：

body {
  font-size: 2em;
}

ruby {
  ruby-position: above;
}

.ruby {
  display: ruby;
}

p.ruby>span:nth-child(odd) {
  display: ruby-base;
}

p.ruby>span:nth-child(even) {
  display: ruby-text;
}

<p>
  <ruby>
      <rb>漢</rb>
      <rp>(</rp>
      <rt>kan</rt>
      <rp>)</rp>
      <rb>字</rb>
      <rp>(</rp>
      <rt>ji</rt>
      <rp>)</rp>
      <rb>が</rb>
      <rp>(</rp>
      <rt>ga</rt>
      <rp>)</rp>
      <rb>難</rb>
      <rp>(</rp>
      <rt>muzuka</rt>
      <rp>)</rp>
      <rb>しい</rb>
      <rp>(</rp>
      <rt>shii</rt>
      <rp>)</rp>
</ruby> ！
</p>

<p class="ruby">
  <span>漢</span>
  <span>kan</span>
  <span>字</span>
  <span>ji</span>
  <span>難</span>
  <span>muzuka</span>
  <span>しい</span>
  <span>shii</span>
  <span>!</span>
</p>

注意：

<rp>

元素用于为不支持<ruby>显示的浏览器显示

后备括号

。如果在不支持的浏览器上查看

<ruby>

元素，上面的示例将最终像这样渲染，而不是使用

<rp>

：

汉 (kan) 字 (ji) が (ga) 难 (muzuka) しい(shii)