Netscape6/Mozillaでルビ表示

IEはすでに<ruby>でルビ表示ができるというのに、自分の常用ブラウザであるところのMozillaはいつになったら対応するのだろう……とのんきに対応されるのを待っていたのですが、あるとき「そういえばMozillaの表示は全てスタイルシートで定義されているのだから、ユーザスタイルシートでなんとかすればルビ風に表示することもできるのでは？」と思いつきました。

いろいろと試行錯誤してみた末、以下のようなスタイルシートを作成。（指摘を受けて修正しました……Netscape6/Mozillaでルビ表示2参照）

ruby {
position:relative;
line-height:200%;
}

/* ベーステキスト */
ruby>rb,                /*単純ルビ*/
ruby>rbc {              /*複雑ルビ*/
  letter-spacing:0.2em;
}

/* ルビテキスト */
ruby>rt,                /*単純ルビ*/
ruby>rtc {              /*複雑ルビ*/
  position:absolute;
  left:0;
  font:normal 60%/1 sans-serif;
  text-indent:0;
}

/*前側ルビの位置と色*/
ruby>rt,
ruby>rbc+rtc {
  top:-1.2em;
  color:#900;
  background:transparent;
}

/*後側ルビの位置と色*/
ruby>rbc+rtc+rtc {
  top:1.4em;
  left:0;
  color:#009;
  background:transparent;
}

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

設定値はお好みで。

これを"userContent.css"という名のテキストファイル（これがユーザスタイルシートになります）としてchromeディレクトリに保存すると、結構うまいこと表示できました。試しにキッズgooで表示されたルビつき頁を表示してみるとこんな感じです。→画像(24.2KB)

chromeディレクトリはMozillaディレクトリの中にあります。Mozillaディレクトリの場所は以下の通り。

（Netscape 6.2 へのアップグレードより）

ユーザスタイルシートを変更した際には、一旦Mozillaを再起動して変更を有効にして下さい。

このルビ表示方法にも欠点がありまして、rb,rt,rpの終了タグが省略されていると、表示が大きく崩れます。あとルビつきテキストが隣り合った場合、ルビ文字が重なることがあります。

とはいえ自分の常用ブラウザでもルビ表示ができたことにより、今までどこか他人事のように思っていたrubyタグに、急に親近感が湧いて来ました。うちのサイトでも使ってみようかな。（しかしそれにはXHTML1.1にせねばならず、道は険しい……）

→Netscape6/Mozillaでルビ表示2、Mozillaでルビ表示3へ続く。

（2001年8月19日/2002年1月18日に一部変更）

北村曉 kits@akatsukinishisu.net