Safariでルビを表示

SafariはXHTMLのルビ表示に対応していません。

IEもFirefoxもルビが表示できるのに、くやしいなーと思って調べたら、ユーザースタイルシートで対応できることがわかりました。

やりかた

テキストエディタで、下記のような文書を作って、適当な場所に保存します。

ruby, rb, rbc, rt, rtc {
 text-align: center;
 white-space: nowrap;
 border: none;
 margin: 0;
 padding: 0;
}
 
/* ruby（ルビ文字組み全体のインライン領域）*/
ruby {
 display: inline-table;
 text-indent: 0;
 line-height: 1;
 height: 1em;
 vertical-align: text-bottom;
 border: none;
}
 
/* rb（本文） */
rb, rbc {
 display: table-row-group;
 line-height: 1;
}
 
/* rt（フリガナ） */
rt, rtc {
 display: table-header-group;
 font-size: 0.625em;   /* 振り仮名の相対サイズ */
 line-height: 1.1;
}
 
/* 複雑ルビーマークアップに対応 */
rbc rb,
rtc rt {
 display: table-cell;
}
 
/* rp（CSS OFF状態での区切り文字、通常不可視） - */
rp { display: none; }

で、Safariに戻って、[環境設定] の [詳細] 画面でファイルを指定してあげるだけです。

これでルビつきの文書も読めるようになるはず・・・

青空文庫 – 芥川龍之介の『羅生門』

サンプル

吾輩《わがはい》は猫である。名前はまだ無い。

どこで生れたかとんと見当《けんとう》がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪《どうあく》な種族であったそうだ。この書生というのは時々我々を捕《つかま》えて煮《に》て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌《てのひら》に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始《みはじめ》であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶《やかん》だ。その後《ご》猫にもだいぶ逢《あ》ったがこんな片輪《かたわ》には一度も出会《でく》わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙《けむり》を吹く。どうも咽《む》せぽくて実に弱った。これが人間の飲む煙草《たばこ》というものである事はようやくこの頃知った。