ruby-align

Experimental

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

Summary

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

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

Syntax

/* 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

start | (en-US) center | (en-US) space-between | (en-US) space-around

Examples

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

<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

ruby {
    ruby-align:start;
}

This gives the following result:

Ruby aligned at the center of the base text

ruby {
    ruby-align:center;
}

This gives the following result:

Extra space distributed between ruby elements

ruby {
    ruby-align:space-between;
}

This gives the following result:

Extra space distributed between and around ruby element

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Нет  38 (38) Нет [1] Нет  Нет
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Нет  38.0 (38) Нет [1] Нет  CompatNo

[1] Internet Explorer, since IE9, implements an early draft of CSS Ruby where ruby-align had the following properties: auto, left, center, right, distribute-letter, distribute-space, and line-edge. Here is a rough conversion table:

IE syntax Standard syntax
auto Don't use ruby-align
left Use start (in ltr scripts)
center center
right Use start (in rtl scripts)
distribute-letter No direct equivalent, use space-between or space-around
distribute-space space-around
line-edge No direct equivalent.

See also