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

View in English Always switch to English

HTML-Element <ruby> für Ruby-Annotationen

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 steht für kleine Annotationen, die über, unter oder neben dem Basistext dargestellt werden. Meist werden sie verwendet, um die Aussprache ostasiatischer Schriftzeichen anzuzeigen. Es kann auch zur Annotation anderer Textarten verwendet werden, was jedoch weniger verbreitet ist.

Der Begriff ruby stammt von einer Maßeinheit aus dem Schriftsatz. Sie bezeichnet die kleinste Schriftgröße, in der Text auf Zeitungspapier noch lesbar gedruckt werden kann.

Probieren Sie es aus

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

Attribute

Dieses Element hat nur die globalen Attribute.

Beispiele

Beispiel 1: Schriftzeichen

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 Flow content, phrasing content, wahrnehmbarer Inhalt.
Zulässiger Inhalt Eine oder mehrere Gruppen, die jeweils aus zwei Teilen bestehen:
  1. Der Basistext, der entweder aus Folgendem besteht:
    • Phrasing content, jedoch ohne <ruby>-Elemente und ohne untergeordnete <ruby>-Elemente, oder
    • einem einzelnen <ruby>-Element, das selbst keine untergeordneten <ruby>-Elemente enthält.
  2. Die Annotationen für den Basistext, die entweder aus Folgendem bestehen:
    • einem oder mehreren <rt>-Elementen oder
    • einem <rp>-Element, auf das ein oder mehrere <rt>-Elemente folgen, auf die jeweils wiederum ein <rp>-Element folgt (also rp, rt, rp, rt, ..., rp).
Weglassen von Tags Keines; sowohl das Start- als auch das End-Tag sind erforderlich.
Zulässige Elternelemente Jedes Element, das phrasing content zulässt.
Implizite ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Alle
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Spezifikation
HTML
# the-ruby-element

Browser-Kompatibilität

Siehe auch