Zeilenumbruchbar <ruby> und CSS-Eigenschaft ruby-align.

Das HTML-Element <ruby> ist ein leistungsstarkes Tool zur Verbesserung der Textdarstellung, 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 am Zeilenende umgebrochen werden und Sie können Ruby-Text mit der CSS-Eigenschaft ruby-align formatieren.

Ein <ruby>-Element besteht aus zwei Hauptteilen: ruby base, dem Haupttext, und ruby text, dem Anmerkungstext, der mit dem Element <rt> markiert ist. 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 es Rubin?

Wenn Bücher mit beweglichen Schriftarten gesetzt wurden, wurden die Größen dieser beweglichen Schriftarten in Punktgrößen wie Perl und Diamond definiert. Im britischen System wurde „Ruby“ für eine Schriftgröße von 5,5 Punkten verwendet. Japanische Drucker verwendeten für Anmerkungstext eine ähnliche Größe wie Ruby (5,5 Punkt) und begannen, den Anmerkungstext in Drucken als Ruby (oder phonetisch als Rubi) zu bezeichnen. Wenn der Anmerkungstext in HTML enthalten war, wurde das Element als <ruby> definiert. Pica (pc) ist ein weiterer historischer Punkt-Größenname, der in CSS als Maßeinheit für die Schriftgröße verwendet wird.

Zeilenumbruchfähiger Ruby-Text

Bisher wurden Ruby-Base oder Ruby-Text, die länger als eine ganze Zeile waren, einzeln umgebrochen, was zu Layoutproblemen führte. Um dies zu vermeiden, markieren Webentwickler einen Text oft mit mehreren Ruby-Tags. Mit zeilenabsetzbarem Ruby können Sie das Erstellen solcher Markierungen überspringen.

Im folgenden Beispiel wird Pinyin (Romanisierung des Chinesischen) als eine Reihe von Ruby-Anmerkungen zu klassischer chinesischer Poesie hinzugefügt. Die aktuellen Renderingergebnisse werden im Textfeld für Ruby-Anmerkungen umgebrochen.

Beim Rendern in Chrome 128 mit zeilenabsetzbarem Ruby wird der eingerückte Ruby-Anmerkungstext über den eingerückten Basistext gelegt, um ein optimales Text-Rendering zu erzielen.

In einem anderen Beispiel aus der japanischen Literatur erfolgt der Zeilenumbruch vor dem langen Ruby-Element, wodurch in der ersten Zeile ein Leerraum entsteht.

Bei zeilenabsetzbarem Ruby wird der Zeilenwechsel in der Mitte des langen Ruby-Elements platziert, um ein ideales Layout zu erzielen.

Diese Funktion bricht kurzen Ruby-Text nicht, der maximal vier Basiszeichen und maximal acht Anmerkungszeichen enthält.

Wenn ein <ruby>-Element in einem anderen <ruby>-Element verschachtelt ist, wird für das innere <ruby>-Element kein Zeilenumbruch eingefügt.

Da sich dadurch das Verhalten aktueller Webseiten mit langem Ruby-Text ändert, können Sie dieses Verhalten für Zeilenumbrüche deaktivieren, indem Sie white-space:nowrap anwenden. Dadurch werden Zeilenumbrüche im Zielelement wie gewohnt deaktiviert.

Die CSS-Property ruby-align

Die neue CSS-Property ruby-align ist ab Chrome 128 verfügbar. Die Property akzeptiert einen der Keyword-Werte space-around, space-between, start und center und steuert die Ausrichtung des Ruby-Grundtexts und des Ruby-Hinweistexts.