W3docs
de
Anmelden

HTML <ruby> Tag

Der <ruby>-Tag definiert phonetische Hinweise in japanischen und ostasiatischen Sprachen. Beschreibung, Attribute und Beispiele.

Der HTML-Tag <ruby> definiert eine Ruby-Annotation — einen kurzen Textabschnitt, der neben (meist oberhalb) einem Basistext angezeigt wird, um dessen Aussprache oder Bedeutung zu verdeutlichen. Ruby-Annotationen sind vor allem in der ostasiatischen Typografie verbreitet: So kann zum Beispiel die phonetische Lesung eines chinesischen oder japanischen Schriftzeichens angezeigt werden, damit ein Leser, der das Zeichen nicht kennt, es trotzdem aussprechen kann.

Der <ruby>-Tag ist eines der HTML5-Elemente.

So arbeiten <ruby>, <rt> und <rp> zusammen

Eine Ruby-Annotation besteht aus einer kleinen Gruppe von Elementen, die als Einheit fungieren:

  • <ruby> ist der Container. Der Basistext (die annotierten Zeichen) steht direkt darin.
  • <rt> (Ruby-Text) enthält die Annotation — die Lesung oder den Hinweis, der über dem Basistext angezeigt wird.
  • <rp> (Ruby-Klammer) ist ein optionaler Fallback. Moderne Browser blenden dessen Inhalt aus, aber Browser ohne Ruby-Unterstützung zeigen ihn stattdessen an und schließen die Annotation in Klammern ein, sodass die Seite trotzdem verständlich bleibt.

Eine vollständige Annotation sieht so aus:

<ruby>base<rp>(</rp><rt>reading</rt><rp>)</rp></ruby>

Ein unterstützender Browser rendert reading gestapelt über base. Ein nicht unterstützender Browser fällt auf die Inline-Form base(reading) zurück, weshalb die <rp>-Klammern wichtig sind — ohne sie würde die Annotation direkt an den Basistext als basereading angrenzen.

Hinweis: In älteren Beispielen wird der Basistext manchmal in ein <rb>-Element (Ruby Base) eingeschlossen. <rb> ist veraltet — im modernen HTML steht der Basistext direkt ohne Wrapper innerhalb von <ruby>. Fügen Sie es nicht zu neuem Markup hinzu.

Syntax

Der <ruby>-Tag wird paarweise verwendet. Der Basistext und seine <rt>/<rp>-Annotationen werden zwischen dem öffnenden (<ruby>) und dem schließenden (</ruby>) Tag geschrieben.

Beispiel: Japanisches Furigana

Im Japanischen sind Furigana kleine Hiragana-Zeichen, die über Kanji gedruckt werden, um deren Lesung zu zeigen. Das <ruby>-Element ist die Standardmethode zur Auszeichnung von Furigana im Web. Hier wird das Kanji 明日 (bedeutet „morgen") mit seiner Lesung Ashita annotiert:

HTML <ruby> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
    </ruby>
  </body>
</html>
Probier es selbst »

Ergebnis

ruby tag example

Einzelne Zeichen separat annotieren

Innerhalb eines <ruby>-Elements können mehrere Basiszeichen-/<rt>-Paare stehen. Jedes Basiszeichen wird dann mit seiner eigenen Lesung annotiert, und die Lesungen werden korrekt über den entsprechenden Zeichen ausgerichtet:

<ruby>
  漢 <rt>kan</rt>
  字 <rt>ji</rt>
</ruby>

Dies ist nützlich, wenn ein mehrzeichiges Wort je nach Zeichen unterschiedlich gelesen wird. Dieselbe Struktur funktioniert auch für chinesisches Pinyin (lateinische Aussprache, z. B. 北京 mit Běi / jīng) sowie für Bopomofo / Zhuyin, bei dem die phonetischen Symbole neben den Basiszeichen platziert werden.

Ruby mit CSS gestalten

Der <ruby>-Tag unterstützt die Globalen Attribute und die Ereignis-Attribute. Er hat keine elementspezifischen Attribute — das Erscheinungsbild wird mit CSS gesteuert.

Basistext und Annotationstext können unabhängig voneinander eingefärbt werden, indem die Selektoren ruby und rt gezielt angesprochen werden:

ruby {
  color: blue;
}
rt {
  color: red;
}

Zwei CSS-Eigenschaften sind spezifisch für das Ruby-Layout:

  • ruby-position steuert, wo die Annotation relativ zum Basistext positioniert wird. Gängige Werte sind over (oberhalb des Basistexts — die Standardeinstellung für die meisten Schriften), under (darunter, manchmal für Bopomofo oder zur Kontrolle der Zeilenhöhe verwendet) und alternate.
  • ruby-align steuert, wie Annotation und Basistext verteilt werden, wenn sie unterschiedlich lang sind, zum Beispiel start, center oder space-between.
ruby {
  ruby-position: under;
  ruby-align: center;
}

Browser-Unterstützung: Die Elemente <ruby>, <rt> und <rp> werden von allen modernen Browsern gut unterstützt. Die Eigenschaft ruby-position ist ebenfalls weit verbreitet, während ruby-align eine eingeschränktere Unterstützung hat — testen Sie sie, bevor Sie sich darauf verlassen, und behalten Sie den <rp>-Fallback bei, damit die Bedeutung auch dort erhalten bleibt, wo das Ruby-Styling unvollständig ist.

Übung

Übung
Was ist der Zweck des HTML-Tags <ruby>?
Was ist der Zweck des HTML-Tags <ruby>?
Was this page helpful?