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

Свойство ruby-overhang CSS указывает, выступает ли аннотация <ruby> за пределы окружающего текста.

Попробуйте

ruby-overhang: auto;

ruby-overhang: none;

<section id="default-example">
  <p id="example-element">
    あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
    ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
  </p>
</section>

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

Синтаксис

/* Keyword values */
ruby-overhang: auto;
ruby-overhang: none;

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

Значения

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

auto

Если контейнер аннотации руби длиннее соответствующего базового контейнера, аннотация может частично перекрывать соседний текст. Агент пользователя определяет, будет ли аннотация выступать за границы и насколько.

none

Ключевое слово, указывающее, что руби ни при каких обстоятельствах не может выступать за границы соседних контейнеров.

Описание

Свойство ruby-overhang управляет тем, может ли текстовый блок аннотации руби (<rt>) перекрывать соседний текст за пределами блока контейнера <ruby>.

Если тексту аннотации руби запрещено выступать за границы — то есть для элемента <ruby> задано значение ruby-overhang: none, — этот элемент ведёт себя как встроенный блок, как если бы его свойство display имело значение inline: в его границах отображается только его собственное содержимое, а соседние элементы не пересекают границы блока.

По умолчанию содержимому элемента <rt> разрешено выступать за границы, поэтому оно может перекрывать блок контейнера <ruby>, частично отображаясь поверх или под окружающим встроенным содержимым. При значении auto, установленном по умолчанию, содержимое может выступать за границы, но этого не произойдёт, если такое выступание приведёт к перекрытию соседних элементов <rt> или элементов, значение display которых вычисляется как ruby-base или ruby-text.

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

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

ruby-overhang = 
  auto |
  none

Примеры

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

В этом примере показаны оба значения свойства ruby-overhang.

HTML

Добавим два абзаца с одинаковым содержимым и структурой <ruby>, отличающиеся только именами классов.

<p class="auto">
  あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
  ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>

<p class="none">
  あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
  ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>

CSS

Красная outline размером 1px помогает выделить текстовую аннотацию элементов <rt>. Для первого абзаца задано ruby-overhang: auto, а для второго — ruby-overhang: none.

p {
  font-size: 40px;
  display: block;
  margin: 0.5rem;
}
rt {
  font-size: 28px;
  outline: 1px solid red;
}
.auto {
  ruby-overhang: auto;
}
.none {
  ruby-overhang: none;
}

Результаты

Если для ruby-overhang задано значение none, тексту аннотации не разрешается перекрывать соседние блоки базового текста руби. Если присмотреться, можно заметить, что в первом абзаце красный блок вокруг текста руби немного перекрывает части несвязанного содержимого <ruby>, тогда как в примере с none в поддерживающих это браузерах содержимое руби не перекрывает несвязанный текст руби.

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

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

См. также

• ruby-align
• text-transform: full-size-kana
• <ruby>
• <rt>
• <rp>