This page was translated from English by the community.Learn more and join the MDN Web Docs community.
ruby-align
Baseline 2024Newly 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
Theruby-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
startIs a keyword indicating that the ruby will be aligned with the start of the base text.
centerIs a keyword indicating that the ruby will be aligned at the middle of the base text
space-betweenIs a keyword indicating that the extra space will be distributed between the elements of the ruby.
space-aroundIs 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 ofruby-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 |
Совместимость с браузерами
Смотрите также
- HTML Ruby elements:
<ruby>,<rt>,<rp>, and<rtc>. - CSS Ruby properties:
ruby-position,ruby-merge.