Ruby-Annotationen in CSS: Lesehilfen für ostasiatische Typografie

1. Was Ruby-Text ist: Furigana als bekanntestes Beispiel

In der japanischen Schrift werden komplexe Kanji-Zeichen häufig mit kleinen Silbenzeichen, den sogenannten Furigana, versehen, die direkt über dem Kanji stehen und dessen Aussprache in der einfacheren Hiragana- oder Katakana-Silbenschrift angeben. Diese Anmerkungen helfen besonders Kindern, Sprachlernenden oder bei seltenen Eigennamen, ein Zeichen korrekt auszusprechen, ohne es im Wörterbuch nachschlagen zu müssen.

Das Konzept ist nicht auf Japanisch beschränkt: Im Chinesischen übernehmen Pinyin-Anmerkungen eine ähnliche Rolle, indem sie die lateinische Lautschrift über einem Schriftzeichen anzeigen. In beiden Fällen handelt es sich um Ruby-Text, kleinere, zusätzliche Textinformation, die typografisch eng mit dem Hauptzeichen verbunden ist, aber visuell klar davon getrennt bleibt. Wer beide Konventionen kennt, versteht schneller, warum Ruby-Text als eigenständiges HTML-Konzept und nicht bloß als CSS-Spielerei behandelt wird.

2. Das HTML-Grundgerüst: ruby, rt und rp

Das Element <ruby> umschließt sowohl das Basiszeichen als auch dessen Annotation. Innerhalb davon markiert <rt> (ruby text) den eigentlichen Anmerkungstext, der vom Browser automatisch oberhalb des Basiszeichens positioniert wird. Browser mit nativer Ruby-Unterstützung benötigen dafür kein zusätzliches CSS, die Grundpositionierung erfolgt bereits durch das HTML allein.

Das optionale Element <rp> (ruby parenthesis) enthält Klammerzeichen, die nur in Browsern ohne Ruby-Unterstützung sichtbar werden. Für Browser, die <ruby> verstehen, blendet die Spezifikation den Inhalt von <rp> automatisch aus, sodass die Klammern ausschließlich als textbasierter Fallback dienen, ohne die native Darstellung zu stören.

<p>
  <ruby>
    東京
    <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
  </ruby>
  ist die Hauptstadt Japans.
</p>

<!-- Browser ohne Ruby-Support zeigen: 東京(とうきょう) -->
<!-- Browser mit Ruby-Support zeigen die Annotation ueber dem Zeichen -->

3. Warum das für internationale Onlineshops relevant wird

Ein Onlineshop, der Kundschaft in Japan oder im chinesischsprachigen Raum bedient, begegnet Ruby-Text nicht nur bei literarischen Inhalten, sondern regelmäßig bei Produktnamen mit seltenen oder mehrdeutig lesbaren Kanji, bei Markennamen, deren Aussprache nicht offensichtlich ist, oder bei Ortsnamen in Versandinformationen. Fehlt die Aussprachehilfe, können Kundinnen und Kunden ein Produkt nicht sicher benennen, was bei Sprachsuche oder Kundenservice-Anfragen zu Reibung führt.

Auch aus SEO-Sicht lohnt sich der Einsatz, weil Suchmaschinen in ostasiatischen Märkten Ruby-Text als zusätzliches semantisches Signal werten können, ähnlich wie ein title-Attribut zusätzlichen Kontext liefert. Wer internationale Shop-Varianten pflegt, sollte Ruby-Annotationen deshalb nicht als exotisches Sonderfeature betrachten, sondern als festen Bestandteil der Lokalisierung für den ostasiatischen Markt. Zusätzlich verbessert eine korrekt gesetzte Aussprachehilfe messbar die wahrgenommene Sorgfalt der Lokalisierung, weil Nutzerinnen und Nutzer eine bloße maschinelle Übersetzung ohne Ruby-Konventionen schnell als unprofessionell wahrnehmen.

4. ruby-position: Annotation über, unter oder seitlich vom Basiszeichen

Die CSS-Property ruby-position steuert, wo relativ zum Basistext die Annotation erscheint. Der Standardwert over platziert den Ruby-Text oberhalb der Basiszeichen, wie es der klassischen japanischen Furigana-Konvention entspricht. Der Wert under verschiebt die Annotation stattdessen unter das Basiszeichen, was in manchen chinesischen Lehrbuch-Layouts üblich ist.

Bei vertikaler Schreibrichtung, wie sie in traditionellem japanischem Content häufig vorkommt, kann die Annotation zusätzlich seitlich neben dem Basiszeichen positioniert werden, wobei sich ruby-position automatisch an die im Dokument gesetzte writing-mode-Richtung anpasst. Für horizontale, westlich gelesene Layouts bleibt over in den allermeisten Fällen die richtige Wahl.

ruby {
  ruby-position: over; /* Standard, Furigana ueber dem Kanji */
}

.textbook-style ruby {
  ruby-position: under; /* alternative Lehrbuch-Konvention */
}

5. Styling von rt-Elementen: Größe, Farbe und ruby-align

Standardmäßig rendert der Browser den Text in <rt> deutlich kleiner als das Basiszeichen, meist um die Hälfte der umgebenden Schriftgröße, damit die Annotation sichtbar unterstützend bleibt, ohne mit dem Hauptzeichen zu konkurrieren. Diese Größe lässt sich mit normalem CSS auf dem rt-Selektor anpassen, ebenso wie Farbe, Schriftfamilie oder Deckkraft, wenn die Annotation dezenter oder auffälliger wirken soll.

Die Property ruby-align steuert zusätzlich, wie die Annotation horizontal relativ zum Basiszeichen ausgerichtet wird, etwa zentriert mit center oder gleichmäßig verteilt mit space-around, wenn der Ruby-Text kürzer ist als das Basiszeichen. Bei mehrsilbigen Furigana über einem mehrteiligen Kanji-Compound sorgt eine passende Ausrichtung dafür, dass jede Silbe optisch über dem richtigen Zeichenteil steht.

ruby {
  ruby-align: space-around;
}

rt {
  font-size: 0.55em;
  color: #6d28d9;
  font-weight: 500;
  user-select: none; /* Annotation nicht separat markierbar */
}

6. Mehrere Zeichen und komplexe Ruby-Konstruktionen

Ein einzelnes <ruby>-Element kann mehrere Basiszeichen mit einer gemeinsamen Annotation umschließen, was bei Wörtern sinnvoll ist, deren Aussprache sich nicht sauber auf einzelne Kanji herunterbrechen lässt. Für präzisere Zuordnung, bei der jede Silbe exakt über ihrem zugehörigen Zeichen erscheinen soll, empfiehlt sich stattdessen ein eigenes <ruby>-Element pro Zeichen mit jeweils eigenem <rt>.

Für doppelte Annotationen, etwa gleichzeitig Aussprache und Bedeutungsübersetzung über demselben Zeichen, definiert die Spezifikation zusätzliche Strukturen mit mehreren <rt>-Gruppen. Diese komplexeren Muster sind in der Praxis seltener, aber für Lernmaterialien oder zweisprachige Produktkataloge mit Übersetzung und Aussprache gleichzeitig durchaus relevant.

7. Fallback über rp: robuste Darstellung ohne Ruby-Support

Weil <rp>-Inhalte in Browsern mit Ruby-Unterstützung automatisch ausgeblendet werden, aber in Browsern ohne diese Unterstützung normal im Textfluss erscheinen, entsteht ein Fallback, der ganz ohne CSS oder JavaScript auskommt. Ein Screenreader oder ein sehr alter Browser zeigt die Annotation dann einfach in Klammern direkt hinter dem Basiszeichen an, was zwar weniger elegant aussieht, aber die Information vollständig erhält.

Diese eingebaute Redundanz macht Ruby-Text zu einem der robustesten internationalen Typografie-Features im Web-Plattform-Stack, weil selbst im ungünstigsten Fall keine Information verloren geht, sondern lediglich die visuelle Aufbereitung weniger ansprechend ausfällt. Ein Test mit deaktiviertem CSS zeigt zuverlässig, ob die <rp>-Klammern korrekt gesetzt wurden.

8. Barrierefreiheit und Screenreader-Verhalten

Aus Sicht der Barrierefreiheit ist entscheidend, dass Ruby-Annotationen semantisch korrektes HTML statt einer rein visuellen CSS-Lösung nutzen, weil Screenreader das <ruby>-Element und seine Kinder unterschiedlich behandeln können. Ein gut implementierter Screenreader liest Basiszeichen und Annotation in sinnvoller Reihenfolge vor, statt beides unstrukturiert hintereinander vorzulesen, was bei einer rein visuellen Nachbildung mit position: absolute kaum zuverlässig möglich wäre.

Für internationale Shops mit gesetzlicher Barrierefreiheitspflicht, etwa im Rahmen des European Accessibility Act, ist die native Ruby-Semantik daher nicht nur eine typografische Frage, sondern auch ein Compliance-Argument gegenüber selbstgebauten Annotation-Lösungen mit reinem CSS-Positioning. Eine native Implementierung minimiert außerdem den Aufwand für spätere Audits, weil Prüfwerkzeuge das semantische ruby-Element bereits kennen und korrekt auswerten.

9. Praktisches Beispiel: Produkttitel mit Aussprachehilfe

Ein japanischsprachiger Produkttitel mit einem seltenen Kanji-Zeichen im Markennamen profitiert direkt von einer Ruby-Annotation, die die korrekte Aussprache anzeigt, ohne den eigentlichen Produkttitel optisch zu verändern oder zusätzlichen Platz im Layout zu beanspruchen, weil die Annotation kompakt oberhalb des Zeichens sitzt. Für den restlichen internationalen Content-Bestand bleibt das Element ungenutzt, es kommt gezielt dort zum Einsatz, wo Lesbarkeit sonst leiden würde.

Bei der technischen Umsetzung im Shop-Frontend lohnt sich eine kleine Utility-Klasse, die Basisstyling wie Schriftgröße und Ausrichtung der Annotation zentral definiert, damit Redakteure beim Einpflegen von Produkttiteln nur noch das HTML-Markup mit <ruby>, <rt> und <rp> einfügen müssen, ohne sich um individuelles CSS pro Produkt kümmern zu müssen.

<h1 class="product-title">
  <ruby>
    煎茶
    <rp>(</rp><rt>せんちゃ</rt><rp>)</rp>
  </ruby>
  Premium Grüntee, 100g Dose
</h1>

10. Zusammenfassung

11. FAQ: Ruby-Annotationen: Das Wichtigste auf einen Blick