ruby-align
Baseline
2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
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
/* 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 |
center |
space-between |
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>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align: start;
}
This gives the following result:
Ruby aligned at the center of the base text
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align: center;
}
This gives the following result:
Extra space distributed between ruby elements
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align: space-between;
}
This gives the following result:
Extra space distributed between and around ruby element
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align: space-around;
}
This gives the following result:
Спецификации
| Specification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |
Совместимость с браузерами
Loading…
Смотрите также
- HTML Ruby elements:
<ruby>,<rt>,<rp>, and<rtc>. - CSS Ruby properties:
ruby-position,ruby-merge.