Das HTML-Element <ruby> ist ein leistungsstarkes Tool zur Verbesserung der Textpräsentation, insbesondere für ostasiatische Sprachen. Mit diesem Element können Sie phonetische Anmerkungen oder andere ergänzende Informationen über oder neben dem Basistext anzeigen. Ab Chrome 128 können Ruby-Anmerkungen Zeilenumbrüche enthalten und du kannst den Ruby-Text mit der CSS-Eigenschaft ruby-align gestalten.
Ein <ruby>-Element besteht aus zwei Hauptteilen: ruby base (Haupttext) und ruby text (roter Text) als Anmerkungstext. Diese sind mit dem <rt>-Element ausgezeichnet. Ruby-Text kann über oder unter der Ruby-Basis angezeigt werden, wie in den folgenden Beispielen gezeigt.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Warum heißt er Rubin?
Wenn Bücher mithilfe von beweglichen Typen typisiert wurden, wurden die Größen dieser beweglichen Typen in Namen mit Punktgröße wie "Perl" und "Diamant" definiert. Im britischen System wurde Ruby für die Größe 5,5 Punkt verwendet. Japanische Drucker verwendeten eine ähnliche Größe wie Ruby (5,5 Punkt) für Anmerkungstexte und bezeichneten den Anmerkungstext daher in Drucken als Ruby (oder Rubi phonetisch). Wenn der Anmerkungstext in HTML enthalten war, wurde das Element als <ruby> definiert. Pica (pc) ist ein weiterer historischer Punktgrößenname, der in CSS als Schriftgrößeneinheit verwendet wird.
Rubinrot
Wenn eine Ruby-Basis oder ein Ruby-Text zuvor länger als eine ganze Zeile war, wurden sie bisher einzeln umgebrochen, was Layout-Herausforderungen darstellt. Um dies zu umgehen, markieren Webentwickler oft einen Textabschnitt mit mehreren Ruby-Tags. Mit zeilenumbruchbarem Ruby können Sie das Erstellen eines solchen Markups überspringen.
Im folgenden Beispiel wird Pinyin (Lateinische Umschrift des Chinesisch) als eine Gruppe von Ruby-Anmerkungen zur klassischen chinesischen Dichtung hinzugefügt. Die aktuellen Rendering-Ergebnisse werden im Textbereich der Ruby-Anmerkung umgebrochen.
Das Rendering in Chrome 128 mit zeilenumbruchbaren Rubin-Anmerkungen, die über einen umschlossenen Basistext umschlossen sind, sorgt für ein ideales Textrendering.
In einem weiteren Beispiel aus der japanischen Literatur erfolgt der Zeilenumbruch vor dem langen Ruby-Element, wodurch ein Leerzeichen in der ersten Zeile entsteht.
Bei diesem Layout wird der Zeilenumbruch in der Mitte des langen Ruby-Elements platziert, um ein optimales Layout zu erzielen.
Mit dieser Funktion wird kein kurzer Ruby-Text mit weniger als vier Basiszeichen und höchstens acht Anmerkungszeichen unterbrochen.
Wenn ein <ruby>-Element in einem anderen <ruby>-Element verschachtelt ist, erfolgt kein Zeilenumbruch für das innere <ruby>-Element.
Da sich dadurch das Verhalten aktueller Webseiten mit langem Ruby-Text ändert, werden Zeilenumbrüche innerhalb des Zielelements wie gewohnt mit white-space:nowrap deaktiviert, wenn Sie diesen Zeilenumbruch deaktivieren müssen.
CSS-Eigenschaft ruby-align
Die neue CSS-Property ruby-align ist auch ab Chrome 128 verfügbar. Die Eigenschaft akzeptiert einen der Keyword-Werte space-around, space-between, start und center und steuert die Ausrichtung des Ruby-Basistexts und des Ruby-Anmerkungstexts.
