<ruby>

Zuletzt aktualisiert am 6. Februar 2026

Das <ruby> Element ermöglicht es, kleinen Textannotationen über oder neben ostasiatischen Schriftzeichen anzuzeigen. Diese Annotationen, auch als Furigana (Japanisch) oder Pinyin (Chinesisch) bekannt, helfen beim Lesen komplexer Schriftzeichen, indem sie die Aussprache oder Bedeutung verdeutlichen.

Grundlagen

• Verwendung: Aussprachehinweise für chinesische, japanische oder koreanische Zeichen
• Typischer Einsatz: Bildungsmaterialien, Lehrbücher, Texte mit seltenen Kanji/Hanzi
• Display-Verhalten: Inline-Element, das Annotationen über dem Basistext positioniert
• Zusammenspiel: Benötigt <rt> für die Annotation und optional <rp> für Klammern in älteren Browsern
• Browser-Darstellung: Annotation wird automatisch über oder neben dem Basistext platziert

Syntax

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

Das typische Muster besteht aus dem Basiszeichen, gefolgt von <rt> mit der Ausspracheangabe. Für mehrere Zeichen wird das Muster wiederholt.

Beispiele

Japanisches Furigana mit Fallback

<ruby>日<rp>(</rp><rt>に</rt><rp>)</rp>本<rp>(</rp><rt>ほん</rt><rp>)</rp>語<rp>(</rp><rt>ご</rt><rp>)</rp></ruby>

Dieses Beispiel zeigt das vollständige Muster mit <rp> (ruby parenthesis) für Browser, die Ruby nicht unterstützen. Dort würden die Klammern um die Lesehinweise angezeigt werden.

Chinesisches Pinyin

<ruby>中<rt>zhōng</rt>国<rt>guó</rt></ruby>

Für chinesische Texte wird Pinyin als Aussprachehinweis verwendet. Die Töne werden durch diakritische Zeichen über den Vokalen dargestellt.

Japanischer Satz mit gemischten Annotationen

私は<ruby>学<rt>がく</rt>生<rt>せい</rt></ruby>です。<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>に住んでいます。

In einem Satz werden typischerweise nur die komplexeren Kanji mit Furigana versehen, während einfache Hiragana-Zeichen keine Annotation benötigen.

Ruby mit Styling

<ruby style="font-size: 1.5em; color: #0066cc;">
  東<rt style="color: #cc0000;">とう</rt>
  京<rt style="color: #cc0000;">きょう</rt>
</ruby>

Sowohl das <ruby> Element als auch die <rt> Annotationen können mit CSS gestylt werden, um das Aussehen anzupassen.

Barrierefreiheit

Ruby-Annotationen verbessern die Zugänglichkeit für Menschen, die mit ostasiatischen Schriftzeichen weniger vertraut sind. Screenreader behandeln den Inhalt von <rt> Elementen unterschiedlich, manche lesen ihn vor, andere überspringen ihn. Für maximale Barrierefreiheit sollte der Basistext auch ohne Annotation verständlich sein. Das lang Attribut hilft Screenreadern, die richtige Aussprache zu wählen: <ruby lang="ja">漢<rt>かん</rt>字<rt>じ</rt></ruby>.

Häufige Fehler

Ein häufiger Fehler ist es, <rt> außerhalb von <ruby> zu verwenden oder die Struktur zu vergessen. Ohne das umschließende <ruby> Element funktioniert die Annotation nicht korrekt:

<!-- Falsch: rt ohne ruby -->
漢<rt>かん</rt>字

<!-- Richtig: rt innerhalb von ruby -->
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

Ein weiterer Fehler ist die falsche Zuordnung von Annotation und Basiszeichen. Jedes Basiszeichen sollte seine eigene <rt> Annotation erhalten:

<!-- Falsch: Eine Annotation für mehrere Zeichen -->
<ruby>漢字<rt>かんじ</rt></ruby>

<!-- Richtig: Separate Annotationen -->
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

Browser-Kompatibilität

Das ruby-Element wird von allen modernen Browsern gut unterstützt. Die Darstellung ist konsistent, wobei die Annotationen standardmäßig über dem Basistext positioniert werden.

Email-Kompatibilität

Ruby-Annotationen sind in E-Mail-Clients problematisch. Die meisten Clients unterstützen weder das Element noch die spezielle Formatierung. Die Annotationen werden oft als normaler Text dargestellt oder komplett entfernt.

Für E-Mails mit ostasiatischen Texten ist es besser, die Aussprachehinweise als normalen Text in Klammern anzugeben: “漢字 (かんじ)” statt Ruby-Markup zu verwenden.

Verwandte Elemente