1009 [HTML5][CSS3] 縦書きにしてみる、ルビを振ってみる
HTML5でルビを振る
rubyタグを使います。
<ruby>ルビを振りたい漢字<rt>ルビ</rt></ruby>
こんな感じ。簡単。だけど結構面倒。いやがんばりました。置換置換。
しかしながらこのタグ、firefoxでは対応しておらず、普通の文字として認識されてしまいます。
そのため、firefox対策として、<rp>を加えます。
firefoxで見た場合、<rp>に囲まれた文字が表示されます。
ということで、下の場合…
<ruby>昼<rp>(</rp><rt>ひる</rt><rp>)</rp></ruby>
firefoxでは、「昼(ひる)」
それ以外のブラウザでは、「昼」（ルビ付き）で表示されます。
CSS3で縦書き表示にする
文字たちに対して
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
を指定すれば縦書きになります。厳密に言えば、縦書きの、右から左になります。
webkit、ms…あれ、mozは？ってところなんですが、残念ながら、firefoxは非対応だそうで。
ということで、残念ながら、縦書きなサイトを作っても、firefoxでは見られません。
firefox派なわたし涙目。IEは見られますきちんと。
見にくいのであまり使わない方が…とは思いますが、英語も縦書きにできます。
-webkit-text-orientation: upright;
せっかくなので、フォントも明朝スタイルにしてみるとnipponっぽさが出てよいかもです。
このfont-family指定でばっちり！
font-family: "ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
ザ・何か作ってみようのコーナー
ちょうど日本の伝統色なるものが気になっていたところだったので、その色合わせの勉強も兼ねつつ、今日学んだ技術でひとつサイト作ってみてるところです。
コンセプトは、伝統色×縦書きスタイル×フラワー。
くれぐれもfirefoxでは見ないように…。
こんな感じのWebサイト制作中。近く公開します。
