Bildunterschriften mit Ruby

Lange schon suchen Webautoren nach einer komfortablen und standardkonformen Möglichkeit, Bildern eine Bildunterschrift, wie sie in Printmedien üblich ist, mitzugeben. Für Tabellen existiert dafür das caption-Element, für img und object aber lediglich das title-Attribut. Hässliche zweizellige Tabellen waren bisher der Workaround. Bisher!

Ruby ist hauptsächlich für die Verwendung mit ostasiatischen »Alphabeten« gedacht, wo es üblich zu sein scheint, (sprachliche) Erläuterungen über und unter ein Wort zu schreiben. Das ganze lässt sich natürlich auch auf durch Bilder dargestellte Inhalte übertragen

Dieses Dokument besteht in drei verschiedenen HTML-Versionen und bindet diverse CSS-Dateien ein, von denen allerdings hier nur eine von Interesse sein soll:

ruby-hack.xhtml: XHTML 1.1, ausgeliefert wie vorgeschrieben als application/xhtml+xml, XML-Deklaration (<?xml version="1.0" encoding="UTF-8"?>) und über XML-PIs eingebundene CSS-Dateien (<?xml-stylesheet type="text/css" media="all" href="ruby.css"?>).
ruby-hackx.html: wie die .xhtml, aber ohne XML-Deklaration und als text/html ausgeliefert.
ruby-hack.html: HTML 4.01 Strict, wo es Ruby eigentlich gar nicht gibt, Content-Type-Header ist das hier korrekte text/html, CSS wird klassisch eingebunden (<link rel="stylesheet" type="text/css" media="all" href="ruby.css">).
ruby.css: CSS 2.0, Simulation der Ruby-Anzeige, die kommenden, richtigen Angaben auskommentiert am Ende.

Einfaches Markup ohne Fallback

Bei Ruby gibt es drei Hauptfälle der Anwendung, dies ist der erste, der nur die drei Grundelemente ruby, rb und rt benutzt.

Beispiel

Logo des W3C für valide Seiten

Code

<ruby>
  <rb>
    <a href="http://validator.w3.org:8001/check/referer" title="Dokument validieren.">
    <img src="../Bilder/W3C/valid-xhtml11" alt="Valides XHTML 1.1"/></a>
  </rb>
  <rt>Logo des W3C für valide Seiten</rt>
</ruby>

Einfaches Markup mit Fallback

Browser, die Ruby unterstützen, zeigen den Inhalt des rp-Elementes nicht an. Es bietet sich also an, dort Klammern einzusetzen.

Beispiel

[Logo des W3C für valide Seiten]

Code

<ruby>
  <rb>
    <a href="http://validator.w3.org:8001/check/referer" title="Dokument validieren.">
    <img src="../Bilder/W3C/valid-xhtml11" alt="Valides XHTML 1.1"/></a>
  </rb>
  <rp>[</rp><rt>Logo des W3C für valide Seiten</rt><rp>]</rp>
</ruby>

Komplexes Markup

Für komplexere Strukturen, z. B. wenn über jedem Zeichen eines japanischen Begriffes eine Erläuterung stehen soll, gibt es die beiden Containerelemente rbc und rtc; rp ist in diesem Fall nicht vorgesehen.

Beispiel

Logo des W3C für valide Seiten

Code

<ruby>
  <rbc><rb>
    <a href="http://validator.w3.org:8001/check/referer" title="Dokument validieren.">
    <img src="../Bilder/W3C/valid-xhtml11" alt="Valides XHTML 1.1"/></a>
  </rb></rbc>
  <rtc><rt>Logo des W3C für valide Seiten</rt></rtc>
</ruby>

Kompatibilität

Dieses Konstrukt funktioniert wie gewünscht und ohne extra CSS bisher in folgenden getesteten Browsern:

Internet Explorer 6.0 (stellt aber keine XHTML-1.1-Seiten dar, die als application/xhtml+xml ausgeliefert werden müssen).

Mit extra CSS

Mozilla 1.0 (Gecko/20020530)
Opera 6.0X, wenn das Stylesheet per <?xml-stylesheet href="ruby.css"?> eingebunden wird. Er zeigt dann aber als einziger bisher getesteter Browser den Titel unter dem Bild an.

Referenzen

Ruby wird vom W3C definiert in:

http://www.w3.org/TR/ruby/: Die erlaubten sechs Elemente.
http://www.w3.org/TR/css3-ruby/: Die CSS-Eigenschaften für Ruby-Elemente.
http://www.w3.org/TR/ruby-implementation/: Die Einbindung von Ruby.

Christoph Päper, christoph@paeper.de

URI: crissov.de/temp/ruby-hack.