ルビのスタイル（2003年3月16日）

CSS/DHTMLバグ辞典スレッド ver2.0で前に作ったMozilla向けのルビスタイルをOpera 7に適用している方を見かけまして、バージョン6ではできなかったruby要素へのスタイル適用が7ではできるようになったことを知り、自分でも試してみました。

Mozillaでルビ表示3で試したinline-table方式は使えそうであり、しかしline-heightの解釈等がMozillaと違うようなので、調整して以下のように。

/* Opera 7向けルビスタイル */

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

ruby>rb,ruby>rbc {
  display:table-row-group;
  line-height:1.2;
}

ruby>rt,ruby>rbc+rtc {
  display:table-header-group;
  font-size:60%;
  line-height:1;
}

ruby>rbc+rtc+rtc {
  display:table-footer-group;
  font-size:60%;
  line-height:1;
}

rbc>rb,rtc>rt {
  display:table-cell;
}

rp {
  display:none;
}

複雑ルビの時に、前側ルビも後側ルビも両方上に表示されてしまう^*、という不具合があるものの、単純ルビ・後側ルビなし複雑ルビを表示する分はこれで何とかなりそうです。Opera 7で使うときにはこのスタイルを含んだCSSファイルをPreferences → Page Style → My style sheetで指定して、Author Mode欄の"My style sheet"にチェックを入れればOK。

* どうもdisplay:table-footer-groupの指定が上手く行かない様子。謎なことには、前側ルビを下(table-footer-group)に、後側ルビを上(table-header-group)に表示することは可能だったりしました。

Mozillaもバージョン1.3が出たので入れ替えたところ、これまた微妙にスタイルの解釈が変わっているようなので、ユーザCSSを以下のように変更してます。

/* Mozilla 1.3向けルビスタイル */

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

ruby>rb,ruby>rbc {
  display:table-row-group;
  line-height:1;
}

ruby>rt,ruby>rbc+rtc {
  display:table-header-group;
  line-height:1;
  font-size:60%;
}

ruby>rbc+rtc+rtc {
  display:table-footer-group;
  line-height:1;
  font-size:60%;
}

rbc>rb,rtc>rt {
  display:table-cell;
}

rp {
  display:none;
}

（2003年3月16日）

北村曉 kits@akatsukinishisu.net