Свойство CSS `ruby-position`

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

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

Свойство ruby-position CSS задаёт положение элемента ruby относительно его базового элемента. Он может располагаться над элементом (over), под ним (under) или справа от него (inter-character).

Попробуйте

ruby-position: over;

ruby-position: under;

<section id="default-example">
  <ruby id="example-element"> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>

#example-element {
  font-size: 2em;
}

Синтаксис

/* Keyword values */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;

/* Global values */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

over: Ключевое слово указывает, что ruby располагается над основным текстом для горизонтального письма и справа от него для вертикального.
under: Ключевое слово указывает, что ruby располагается под основным текстом для горизонтального письма и слева от него для вертикального.
alternate: Ключевое слово указывает, что при наличии нескольких уровней аннотации ruby чередуется между положениями сверху и снизу.
inter-character: Ключевое слово указывает, что аннотация ruby располагается справа от символов базового текста. Это значение предназначено для руби-бопомофо (чжуинь фухао).

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

Исходное значение	alternate
Применяется к	контейнерам аннотаций ruby
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

ruby-position = 
  [ alternate || [ over | under ] ] |
  inter-character

Примеры

Ruby над текстом

HTML

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-position: over;
}

Результат

Ruby под текстом

HTML

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-position: under;
}

Результат

Чередование ruby

HTML

<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

ruby {
  ruby-position: alternate; /* this is also the initial value */
}

Результат

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`ruby-position`	84 1 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	84 79 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`). 12–79	38	70 15 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	18.2 7 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	84 18 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	38	60 14 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	18.2 7 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	14.0	84 4.4 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).	18.2 7 Реализовано как нестандартная версия с префиксом свойства `ruby-position`, `-webkit-ruby-position`: оно включает два свойства — `before` и `after` (оба соответствуют стандартному значению `over` для письма ltr и rtl, используемому с `ruby-align: start`).
`alternate`	Нет	Нет	88	Нет	Нет	Нет	88	Нет	Нет	Нет	Нет	Нет
`inter-character`	84 Это значение поддерживается только в версии свойства с префиксом.	84 Это значение поддерживается только в версии свойства с префиксом.	Нет	70 Это значение поддерживается только в версии свойства с префиксом.	18.2 Safari располагает руби `inter-character` справа от базового символа, но неправильно размещает тоновые знаки в аннотациях бопомофо (чжуинь фухао).	84 Это значение поддерживается только в версии свойства с префиксом.	Нет	60 Это значение поддерживается только в версии свойства с префиксом.	18.2 Safari для iOS располагает руби `inter-character` справа от базового символа, но неправильно размещает тоновые знаки в аннотациях бопомофо (чжуинь фухао).	14.0 Это значение поддерживается только в версии свойства с префиксом.	84 Это значение поддерживается только в версии свойства с префиксом.	18.2 WebView для iOS располагает руби `inter-character` справа от базового символа, но неправильно размещает тоновые знаки в аннотациях бопомофо (чжуинь фухао).
`over`	84	84	38	70	18.2	84	38	60	18.2	14.0	84	18.2
`under`	84	84	38	70	18.2	84	38	60	18.2	14.0	84	18.2

См. также

<ruby>, <rt>, <rp> и <rtc> — HTML-элементы
ruby-align
Модуль компоновки руби в CSS

© 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-position