Tag <ruby>

Tag <ruby>

Definition

Status: Aktueller Standard

Das Tag <ruby> steht für ruby ("Ruby"-Annotationen).

Der HTML-Tag <ruby> ist das Hauptelement für Ruby-Annotationen. Er dient als Container für Basistext und dazugehörige Annotationen (z. B. Aussprache oder Erklärungen). Ruby-Markup wird vor allem bei ostasiatischen Schriftsystemen verwendet. Es signalisiert dem Browser, dass der enthaltene Text nicht einfach hintereinander, sondern in einer speziellen typografischen Beziehung (meist übereinander) steht.

Syntax

<ruby>
  <rb>...</rb>
  <rp>(</rp>
  <rt>...</rt>
  <rtc>...</rtc>
  <rp>)</rp>
</ruby>

Attribute bzw. Unterelemente

lang

Nicht vergessen, da hier ja meist eine andere Sprache verwendet wird!

dir

Legt die Schreibrichtung fest (ltr = links-nach-rechts, rtl = rechts-nach-links).

title

Sollte Tooltip-Erklärung für das gesamte Wort enthalten

<rb> [Obsolet]

Basistext um den es geht (Wird mittlerweile als reiner Text ins Ruby geschrieben - ohne den Tag!)

<rt>

Annotation (Aussprache, Übersetzung...)

<rp>

Fallback für alte Browser. Enthält die runde Klammer die sonst automatisch gesetzt werden)

<rtc> [Obsolet]

Tag für Gruppierungen mehrerer Annotationen

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <ruby> - ---

Der Code:

<ruby>
  <!-- Wird aktuell ohne <rb></rb> eigefügt! -->
  <rb>漢</rb>
  <rp>(</rp>
  <rt>かん</rt>
  <rp>)</rp>
  <rb>字</rb>
  <rp>(</rp>
  <rt>じ</rt>
  <rp>)</rp>
</ruby>

Ergebnis:

Ergebnis: <ruby>-Demo 1
---

Beispiel <ruby> - <ruby> verschachtelt. Macht Übersetzung unterhalb möglich...

Der Code:

<ruby>
  <ruby>
    <!-- Wird aktuell ohne <rb></rb> eigefügt! -->
    <rb>猫</rb>
    <rt>ねこ</rt>
  </ruby>
  <rt style="ruby-position: under;">Katze</rt>
</ruby>

Ergebnis:

Ergebnis: <ruby>-Demo 2
<ruby> verschachtelt. Macht Übersetzung unterhalb möglich...

CSS-Tipps:

Im Gegensatz zu <rtc> muss hier das Property für Position der Übersetzung ("ruby-position") beim zweiten <ruby> stehen! Beim ersten <ruby> greift der Standard (obenhalb).

Anmerkungen

Das Tag <rb> (Basistag) kann bei aktuellen Browsern entfallen. Der Basistext wird innerhalb <ruby> von aktuellen Browsern selbständig erkannt.