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に戻って、[環境設定] の [詳細] 画面でファイルを指定してあげるだけです。

safari設定

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

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

サンプル

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

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

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です