Thanks to visit codestin.com
Credit goes to developer.mozilla.org

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>: Das Ruby-Annotationselement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Das <ruby> HTML-Element repräsentiert kleine Anmerkungen, die über, unter oder neben dem Basistext dargestellt werden. Es wird üblicherweise verwendet, um die Aussprache von ostasiatischen Schriftzeichen anzuzeigen. Es kann auch verwendet werden, um andere Arten von Text zu annotieren, aber diese Verwendung ist weniger verbreitet.

Der Begriff Ruby stammt ursprünglich aus einer Maßeinheit, die von Schriftsetzern verwendet wird. Er steht für die kleinste Größe, in der Text auf Zeitungspapier gedruckt werden kann, während er dennoch lesbar bleibt.

Probieren Sie es aus

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

Attribute

Dieses Element enthält nur die globalen Attribute.

Beispiele

Beispiel 1: Charakter

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 Fließinhalt, Phrasierungsinhalt, fühlbarer Inhalt.
Erlaubter Inhalt Eine oder mehrere Gruppen, jede bestehend aus zwei Teilen:
  1. Der Basistext, der entweder ist:
    • Phrasierungsinhalt, aber ohne <ruby>-Elemente und ohne <ruby>-Elementnachfahren, oder
    • Ein einzelnes <ruby>-Element, das selbst keine <ruby>-Elementnachfahren hat.
  2. Die Anmerkungen 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-Weglassung Keine, sowohl der Start- als auch der 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

Specification
HTML
# the-ruby-element

Browser-Kompatibilität

Siehe auch