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 type | by 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
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
- HTML Ruby elements:
<ruby>
,<rt>
(en-US),<rp>
(en-US), and<rtc>
(en-US). - CSS Ruby properties:
ruby-position
(en-US),ruby-merge
.