ruby-overhang CSS property

Probieren Sie es aus

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

Syntax

/* 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;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwörter angegeben:

auto

Wenn ein Ruby-Annotationscontainer länger als sein entsprechender Basiskontainer ist, kann die Annotation teilweise angrenzenden Text überlappen. Ob, und wie viel überlappend, wird vom Benutzeragenten bestimmt.

none

Ein Schlüsselwort, das angibt, dass die Ruby-Annahme niemals erlaubt ist, über angrenzende Container hinauszugehen.

Beschreibung

Die Eigenschaft ruby-overhang steuert, ob die Ruby-Annotationstextbox (<rt>) angrenzenden Text außerhalb der <ruby>-Containerbox überlappen darf.

Wenn die Ruby-Annotation nicht überhängen darf — wenn ruby-overhang: none auf das <ruby>-Element gesetzt ist — verhält sich dieses Element wie eine Inline-Box, als ob seine display-Eigenschaft auf inline gesetzt wäre, mit nur seinem eigenen Inhalt innerhalb seiner Grenzen und angrenzenden Elementen, die die Begrenzungsbox nicht überschreiten.

Standardmäßig darf der Inhalt eines <rt>-Elements überhängen, sodass der Inhalt die <ruby>-Containerbox überlappen kann und teilweise über oder unter umgebenden Inline-Inhalten gerendert wird. Bei auto, dem Standardwert, darf der Inhalt überhängen, aber er wird nicht überhängen, wenn dadurch angrenzende <rt>-Elemente oder Elemente mit einem display-Wert, der zu ruby-base oder ruby-text aufgelöst wird, überlappt würden.

Formale Definition

Formale Syntax

ruby-overhang = 
  auto    |
  spaces  

Beispiele

Ruby überhängender Basistext

Dieses Beispiel demonstriert beide Werte der ruby-overhang-Eigenschaft.

HTML

Wir enthalten zwei Absätze mit identischem <ruby>-Inhalt und -Strukturen, außer ihren Klassennamen.

<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

Eine rote outline von 1px hilft, die Textannotation von <rt>-Elementen hervorzuheben. Der erste Absatz hat ruby-overhang: auto und der zweite 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;
}

Ergebnisse

Wenn ruby-overhang auf none gesetzt ist, darf der Annotationstext die angrenzenden Boxen des Basis-Ruby-Textes nicht überlappen. Wenn Sie genau hinsehen, werden Sie bemerken, dass im ersten Absatz die rote Box, die den Ruby-Text umschließt, Teile des nicht zugehörigen <ruby>-Inhalts leicht überlappt, während im none-Beispiel in unterstützenden Browsern keine Überlappung zwischen Ruby-Inhalten und nicht zugehörigem Ruby-Text vorhanden ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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