html - 什么是 CSS ruby​​-align 属性？

Question

我看到一篇文章提到了 ruby-align 属性，但我从未听说过。我查看了 w3schools 以获取有关此的一些示例，但我根本看不到它被提及。

http://www.w3schools.com/cssref/default.asp

我知道 Ruby 是 HTML5 的新标签，所以我想看看 HTML 引用中是否有任何内容。

我发现 ruby 被用作东亚字体。我在那里也没有找到任何关于它的 css 属性的信息。

我还看到 Stack Overflow 甚至没有这个属性的标签。

有人真的知道这个属性的作用吗？

这个属性或 ruby​​ 标签有什么用吗？

是否有任何地方提及此属性？它不在 w3schools 上。

Answer 1

我推荐阅读 Mozilla Hacks article .我在此处包含相关部分:

Introduction

What is ruby? In short, ruby is an extra text, which is usually small, attached to the main text for indicating the pronunciation or meaning of the corresponding characters. This kind of annotation is widely used in Japanese publications. It is also common in Chinese for books for children, educational publications, and dictionaries.

Basic Usage

Basically, the ruby support consists of four main tags: <ruby>, <rb>, <rt>, and <rp>. <ruby> is the tag that wraps the whole ruby structure, <rb> is used to mark the text in the normal line, <rt> is for the annotation, and <rp> is a tag which is hidden by default. With the four tags, the result above can be achieved from the following code:

<ruby>
  <rb>とある<rb>科学<rb>の<rb>超電磁砲</rb>
  <rp>（</rp><rt>とある<rt>かがく<rt>の<rt>レールガン</rt><rp>）</rp>
</ruby>

Advanced Support

Aside from the basic usage of ruby, Firefox now provides support for more advanced cases.

By default, if the width of an annotation does not match its base text, the shorter text will be justified as shown in the example above. However, this behavior can be controlled via the ruby-align property. Aside from the default value (space-around), it can also make the content align to both sides (space-between), centered (center), or aligned to the start side (start).