ruby-align

Ограниченная доступность

Эта функция не является базовой, так как она не работает во всех широко используемых браузерах.

Свойство 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;
}

Результат

END_OF_DOCUMENT_MARKER

Дополнительное пространство между и вокруг элементов 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;
}

Результат

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

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

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

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

См. также

Элементы HTML ruby: <ruby>, <rt>, <rp> и <rtc>.
Свойства CSS ruby: ruby-position, ruby-merge.

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