Mozillaでルビ表示3

tableのことを考えていて、ふと「CSS2にはdisplay:inline-tableというのがあったな」と思い出した。試してみるとMozillaでも対応しているようだったので、それでルビ表示ができないかとやってみる。

ruby {
  display:inline-table;
  text-align:center;
  white-space:nowrap;
  text-indent:0;
  margin:0;
  vertical-align:-20%;
}

/* ルビベース */
ruby>rb,ruby>rbc {
  display:table-row-group;
  line-height:90%;
}

/* 前側ルビテキスト */
ruby>rt,ruby>rbc+rtc {
  display:table-header-group;
  font-size:60%;
  line-height:40%;
  letter-spacing:0;
}

/* 後側ルビテキスト */
ruby>rbc+rtc+rtc {
  display:table-footer-group;
  font-size:60%;
  line-height:40%;
  letter-spacing:0;
}

/* 複雑ルビテキスト */
rbc>rb,rtc>rt {
  display:table-cell;
  letter-spacing:0;
}

rtc>rt[rbspan] {
  display:table-caption;
}

/* ルビ括弧 */
rp {
  display:none;
}

かなりあやしげな記述をしてるような気がするが、ともかくこれでもルビっぽい表示ができた。（比較のため、ルビのサンプルページを作り、前にやったpositionを使った表示とinline-tableを使った表示でスクリーンショットを取ってみました）

今のところ気付いた両者の利点と欠点をあげてみると：

• position方式
  • 利点
    • rb が省略されてもルビ表示できる。
    • 後側ルビありの複雑ルビでも、ルビつきテキストはずれずに表示される。
  • 欠点
    • ルビの一部或いは全部が欠けることがある（「全てを選択」すると表示される）。
    • ルビが長い場合、隣接するテキストにルビがオーバーハングして表示される。
    • 複雑ルビで、各rb要素とrt要素を対応付けて表示させることができない。
    • ルビベースに画像があると画像が欠けてしまう。
• inline-table方式
  • 利点
    • ルビの欠けがほとんど起こらない。
    • ルビが長い場合でも、隣接するテキストにオーバーハングされずに表示される。
    • rt要素のrbspan属性指定が省略されていて、rb・前側ルビのrt（・後側ルビのrt）の数がそれぞれ等しい場合には、各rt、rbは対応付けられて表示される。
    • ルビベースに画像があっても画像が欠けずに表示される。
  • 欠点
    • rbタグが省略されるとおかしな表示になる。
    • 後側ルビありの複雑ルビの場合、ルビつきテキストが上にずれた表示になる。

XHTML 1.1準拠のページで、単純ルビを使うのであれば（かなり限定された条件ではあるが）、inline-table方式の方が、見易く安定した表示ができると思う。

（2001年10月11日）

追記: 上記のスタイルはMozilla利用者がユーザスタイルシート(userContent.css)に追記して用いることを想定して書いています。ページ製作者が製作者スタイルシートとして用いる場合は、他のブラウザでの表示に影響しないよう、ブラウザがMozillaだった場合のみに上記スタイルを読ませるようにするなどの配慮が必要になると思われます。

userContent.cssについては、前に同様の試みをしたときのNetscape6/Mozillaでルビ表示にも記述があります。

（2001年11月24日）

北村曉 kits@akatsukinishisu.net