HTML <rt>-Tag
Der <rt>-Tag fügt Annotationen ober- und unterhalb von Text hinzu, der im <ruby>-Tag steht.
Der <rt>-Tag enthält die Annotation — die Lesart, Aussprache oder Übersetzung — innerhalb eines <ruby>-Elements. Das <ruby>-Element verbindet einen Abschnitt Basistext mit einer oder mehreren <rt>-Annotationen. Diese Technik wird verwendet, um die Aussprache ostasiatischer Schriftzeichen anzuzeigen (japanisches Furigana, chinesisches Pinyin, Koreanisch) oder allgemein als kleine erklärende Notiz neben einem Text.
Standardmäßig rendert der Browser den Inhalt von <rt> in kleiner Schrift über dem Basistext. Der Basistext ist alles innerhalb von <ruby>, das nicht in <rt> eingeschlossen ist.
Der <rt>-Tag ist eines der HTML5-Elemente.
So funktioniert <rt> innerhalb von <ruby>
Eine Ruby-Annotation besteht aus zwei Teilen: dem Basistext und der Annotation. Die Annotation steht in <rt>; der Basistext bleibt unmarkiert.
<ruby>漢字<rt>かんじ</rt></ruby>Hier ist 漢字 der Basistext und かんじ die Lesart, die darüber angezeigt wird. Jedes Zeichen kann separat annotiert werden, sodass jede Lesart über dem eigenen Zeichen erscheint:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>Das moderne Muster mit <rp>-Fallback
Einige Browser (und die meisten Nur-Text-Kontexte, Screenreader oder beim Kopieren und Einfügen) können Ruby-Annotationen nicht rendern. Der <rp>-Tag ("Ruby-Klammer") stellt Fallback-Klammern bereit, die nur angezeigt werden, wenn die Ruby-Darstellung nicht verfügbar ist. Browser, die Ruby unterstützen, blenden den Inhalt von <rp> aus.
Dies ist das kanonische, empfohlene Muster:
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>- In einem Ruby-fähigen Browser wird
かんじüber漢字gerendert, und die Klammern werden ausgeblendet. - In einem Fallback-Kontext wird es lesbar auf
漢字(かんじ)reduziert.
Umschließen Sie jedes <rt> stets mit einem Paar <rp>-Elementen, wenn Sie einen robusten Fallback wünschen.
Vollständiges Beispiel
HTML <rt>-Tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
</body>
</html>Ergebnis
Syntax und Weglassen des schließenden Tags
Der <rt>-Tag kommt in Paaren, aber der schließende Tag kann weggelassen werden, wenn <rt> unmittelbar auf ein weiteres <rt> oder auf ein <rp>-Element folgt oder wenn kein weiterer Inhalt im übergeordneten <ruby>-Element vorhanden ist.
Hinweis zu <rb> und <rtc>
In älteren Tutorials werden möglicherweise <rb> (Ruby-Basis) und <rtc> (Ruby-Text-Container) verwendet, um komplexe, mehrstufige Annotationen auszuzeichnen. Diese Elemente wurden aus dem HTML-Standard entfernt und sind veraltet. Sie werden von Browsern uneinheitlich unterstützt und sollten in neuem Code nicht mehr verwendet werden.
Für den Basistext lassen Sie ihn einfach unmarkiert innerhalb von <ruby>, anstatt ihn in <rb> zu verpacken. Verwenden Sie das moderne <ruby> + <rt> (+ <rp>)-Muster wie oben gezeigt.
Die Position der Annotation stylen
Die CSS-Eigenschaft ruby-position steuert, wo die <rt>-Annotation relativ zum Basistext erscheint — over (darüber, der Standard für die meisten Schriftsysteme), under (darunter) oder inter-character. Beispiel:
ruby {
ruby-position: under;
}Dadurch wird die Lesart unter die Basiszeichen verschoben, was die Konvention für einige Sprachen ist. ruby-position wird von allen aktuellen gängigen Browsern unterstützt.
Browser-Unterstützung
Ruby-Annotationen (<ruby>, <rt> und <rp>) werden von allen modernen Browsern unterstützt, einschließlich Chrome, Edge, Firefox und Safari.
Attribute
Der <rt>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.