Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<ruby> HTML ruby-Annotationselement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <ruby> HTML-Element stellt kleine Annotationen dar, die über, unter oder neben dem Basistext angezeigt werden. Es wird üblicherweise verwendet, um die Aussprache von ostasiatischen Zeichen anzuzeigen. Es kann auch zur Annotation anderer Textarten verwendet werden, was jedoch weniger häufig ist.

Der Begriff ruby stammt ursprünglich aus einer Maßeinheit, die von Schriftsetzern verwendet wird, und bezeichnet die kleinste Größe, in der Text auf Zeitungspapier gedruckt werden kann, während er noch lesbar bleibt.

Probieren Sie es aus

<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
ruby {
  font-size: 2em;
}

Attribute

Dieses Element umfasst nur die globalen Attribute.

Beispiele

Beispiel 1: Zeichen

html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Ergebnis

Beispiel 2: Wort

html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasierungsinhalt, greifbarer Inhalt.
Erlaubter Inhalt Eine oder mehrere Gruppen, die jeweils aus zwei Teilen bestehen:
  1. Der Basistext, der entweder ist:
    • Phrasierungsinhalt, jedoch ohne <ruby>-Elemente und ohne Nachfahren eines <ruby>-Elements, oder
    • Ein einzelnes <ruby>-Element, das selbst keine Nachfahren eines <ruby>-Elements hat.
  2. Die Annotationen für den Basistext, die entweder sind:
    • Ein oder mehrere <rt>-Elemente, oder
    • Ein <rp>-Element, gefolgt von einem oder mehreren <rt>-Elementen, von denen jedes selbst von einem <rp>-Element gefolgt wird (d.h. rp, rt, rp, rt, ..., rp).
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Spezifikation
HTML
# the-ruby-element

Browser-Kompatibilität

Siehe auch