ruby-align

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Summary

The ruby-align CSS property defines the distribution of the different ruby elements over the base.

Начальное значениеspace-around
Применяется кбазовые элементы ruby, аннотации к ruby, базовые ruby контейнеры, контейнеры аннотаций к ruby
Наследуетсяда
Обработка значениякак указано
Animation typeby computed value type

Syntax

css

/* Keyword values */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/* Global values */
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;

Values

start

Is a keyword indicating that the ruby will be aligned with the start of the base text.

center

Is a keyword indicating that the ruby will be aligned at the middle of the base text

space-between

Is a keyword indicating that the extra space will be distributed between the elements of the ruby.

space-around

Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

Formal syntax

ruby-align = 
  start          | (en-US)
  center         | (en-US)
  space-between  | (en-US)
  space-around

Examples

This HTML will render differently with each value of ruby-align:

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

Ruby aligned at the start of the base text

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

css

ruby {
  ruby-align: start;
}

This gives the following result:

Ruby aligned at the center of the base text

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

css

ruby {
  ruby-align: center;
}

This gives the following result:

Extra space distributed between ruby elements

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

css

ruby {
  ruby-align: space-between;
}

This gives the following result:

Extra space distributed between and around ruby element

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

css

ruby {
  ruby-align: space-around;
}

This gives the following result:

Specifications

Specification Status Comment
CSS Ruby Layout Module Level 1
Определение 'ruby-align' в этой спецификации.		 Рабочий черновик Initial definition

Browser compatibility

BCD tables only load in the browser

See also