【中二WEB小説向け】Firefoxでもそこそこ見えるルビを振るCSS(暫定)

やはり14歳児たるもの、難読漢字にはそれっぽい片仮名でルビを振りたいわけです。
いやまぁ別に難読漢字じゃなくてもかっちょいいルビを振りたいわけです。
西尾維新のように。清涼院流水のように。奈須きのこのように。

で、HTML5でようやくマトモにrubyタグが使えるようになるかなーと思ってたんですけど、未だにFirefoxさんが対応してくれないので、だったらもう自分でそれっぽいCSS書いちゃえ、と思って書いたメモ。

多分その内もうちょっと色々改善する。しないかもしれない。

つーわけでとりあえず書いたCSSがこれ。

ruby {
	display: inline-table;
	height: 1em;
	vertical-align:text-bottom;
	text-align: center;
}

ruby rt {
	display: table-header-group;
	text-align: center;
	font-size: 65%;
	line-height: 0.65em;
}

HTMLはこう。

<ruby>死線の蒼<rt>デッドブルー</rt></ruby>

で、表示がこう。

【死線の蒼】デッドブルー

もしかしたら更にrpタグにdisplay:none;仕込んでもいいかもしれないけど、ひとまず今んとこ無しで。使わないし。
あと文字数が違いすぎたりするとやや違和感あるかもだけど、とりあえずFirefoxでもルビっぽく見えればそれでいいかな。
なお、ルビが長いとこうなります→【害悪細菌】グリーングリーングリーン
いや、こっちの方がバランス悪いか→【屍】トリガーハッピーエンド

ちなみにFirefox以外での表示の確認はこの記事公開してから後追いでやります(適当)
多分IEとchromeはデフォでrubyタグに対応してるので、余程のことが無い限り変な表示はされないはず。safari? 知らんブラウザだ。

そんな感じで。

【追記1】
本文中で使っているルビのサンプルは戯言シリーズに登場した用語であって僕の中学二年生力とは無関係です。

【追記2】
chromeとIE11で表示かくにん!よかったv

  1. コメントはまだありません。

  1. トラックバックはまだありません。