ruby-overhang
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die ruby-overhang
CSS-Eigenschaft gibt an, ob eine <ruby>
-Annotation über umliegenden Text hinausragt oder nicht.
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
auto
-
Wenn ein Ruby-Annotation-Container länger ist als sein entsprechender Basis-Container, kann die Annotation teilweise angrenzenden Text überlappen. Ob und wie viel überhängt wird, wird durch das User-Agent bestimmt.
none
-
Ein Schlüsselwort, das anzeigt, dass Ruby nie über angrenzende Container hinausragen darf.
Beschreibung
Die Eigenschaft ruby-overhang
steuert, ob das Ruby-Annotation-Textfeld (<rt>
) angrenzenden Text außerhalb des <ruby>
-Containerrahmens überlappen darf.
Wenn Ruby-Annotation-Text nicht überhängen darf — wenn ruby-overhang: none
auf dem <ruby>
-Element gesetzt ist — verhält sich dieses Element wie eine Inline-Box, als ob seine display
-Eigenschaft auf inline
gesetzt wäre, wobei nur der eigene Inhalt innerhalb seiner Grenzen gerendert wird und angrenzende Elemente die Begrenzungsbox nicht überschreiten.
Standardmäßig darf der Inhalt eines <rt>
-Elements überhängen, sodass der Inhalt den <ruby>
-Containerrahmen überlappen kann, teilweise über oder unter umgebenden Inline-Level-Inhalten. Mit auto
, dem Standardwert, darf der Inhalt überhängen, jedoch nicht, 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
Anfangswert | auto |
---|---|
Anwendbar auf | Ruby-Anmerkungscontainer |
Vererbt | Ja |
Berechneter Wert | the specified keyword |
Animationstyp | by computed value type |
Formale Syntax
ruby-overhang =
auto |
none
Beispiele
Ruby überhängender Basistext
Dieses Beispiel demonstriert beide Werte der ruby-overhang
-Eigenschaft.
HTML
Wir fügen zwei Absätze mit identischem <ruby>
-Inhalt und -Strukturen ein, abgesehen von 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
Ein roter outline
von 1px
hebt die Textannotation der <rt>
-Elemente hervor.
Der erste Absatz hat ruby-overhang: auto
, und der zweite hat 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 Annotierungstext die angrenzenden Rahmen der Basis-Ruby-Texte nicht überlappen. Wenn Sie genau hinsehen, werden Sie bemerken, dass im ersten Absatz die rote Box, die den Ruby-Text umschließt, teilweise Teile des nicht assoziierten <ruby>
-Inhalts überlappt, während im none
-Beispiel in unterstützten Browsern kein Überlappen zwischen Ruby-Inhalten und nicht assoziiertem Ruby-Text vorhanden ist.
Spezifikationen
Specification |
---|
CSS Ruby Annotation Layout Module Level 1 # propdef-ruby-overhang |
Browser-Kompatibilität
Siehe auch
ruby-align
text-transform
: full-size-kana<ruby>
<rt>
<rp>