CSS-свойство `ruby-align`

Базовая поддержка Недавно стало доступно

Эта функция работает в последних версиях устройств и браузеров. Она может не работать на старых устройствах или в старых версиях браузеров. Поддержка во всех браузерах доступна с декабря 2024 года.

Свойство ruby-align CSS определяет распределение различных элементов ruby относительно базового текста.

Синтаксис

/* 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: revert;
ruby-align: revert-layer;
ruby-align: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

start: Ключевое слово, указывающее, что ruby будет выровнен по началу базового текста.
center: Ключевое слово, указывающее, что ruby будет выровнен по центру базового текста.
space-between: Ключевое слово, указывающее, что дополнительное пространство будет распределено между элементами ruby.
space-around: Ключевое слово, указывающее, что дополнительное пространство будет распределено между элементами ruby и вокруг них.

Формальное определение

Начальное значение	space-around
Применяется к	базовым элементам ruby, аннотациям ruby, контейнерам базовых элементов ruby, контейнерам аннотаций ruby
Наследуется	да
Вычисленное значение	как задано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

ruby-align = 
  start |
  center |
  space-between |
  space-around

Примеры

Ruby выровнен по началу базового текста

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;
}

Результат

Ruby выровнен по центру базового текста

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;
}

Результат

Дополнительное пространство распределено между элементами ruby

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;
}

Результат

Дополнительное пространство распределено между элементами ruby и вокруг них

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;
}

Результат

Спецификации

Спецификация
Модуль компоновки аннотаций ruby в CSS, уровень 1 # ruby-align-property

Совместимость с браузерами

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`ruby-align`	128	128	38	114	18.2	128	38	85	18.2	28.0	128	18.2
`center`	128	128	38	114	18.2	128	38	85	18.2	28.0	128	18.2
`space-around`	128	128	38	114	18.2	128	38	85	18.2	28.0	128	18.2
`space-between`	128	128	38	114	18.2	128	38	85	18.2	28.0	128	18.2
`start`	128	128	38	114	18.2	128	38	85	18.2	28.0	128	18.2

См. также

ruby-position
Модуль компоновки ruby в CSS
Элементы Ruby в HTML: <ruby>, <rt>, <rp> и <rtc>

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/ruby-align