display:inline-table系を使った指定が使えるので、実に分かりやすい実装が出来ます。弊害として考えられるのは、オリジナルでRuby要素関連にユーザスタイルシートを当てている場合くらいでしょうが、まあ、そんなにはいないでしょうね。
私が作っているルビCSSは、そこの弊害を回避する一つのアイディア（と呼べるほどのものではないですが）で、Ruby要素に指定するのではなくSPAN要素にクラスを指定して、そのクラスに同じスタイルシートを適用するというやり方。
ソースが非常に煩雑になって見づらいことこの上ないのですが、まあ、そこそこ安定します。
ネックは、IE6,7での表示ですね。
Ruby要素の独自拡張を実装しているからと言って、
display:ruby-baseなんかを実装しているわけではないので、結局別の仕組みでIEでのルビを組まなければなりません。それがまた、スマートにはできないんですよねぇ……。絶対配置を使った非常に安直なやり方です。両者を比べるなら明らかに前者ではあるんですが、イマイチ踏み切れません。
そんなわけで、ルビCSSの別タイプを考えてみました。IE6/7では動きません（笑
ツッコミどころ満載のアレではありますが…。
/*
*
* [Ruby CSS Type2 v1.0]
*
* Example : <span class="ruby"><abbr title="[ruby text]"> [ruby base] </abbr></span>
*
* CSS Author : BENIT
*
* OS : Windows XP
*
* Browser : Internet Explorer8
* Firefox3.0
* Opera9.5
* Safari3.1.2 for win
*
* Not support [IE6/7]
*
* Last Updata //2008-8-03// Added Type2
*
*/
span.ruby2 abbr[title] {
font-size: 100%;
border-bottom-style: none;
}
html>/**/body span.ruby2 {
line-height: 1;
text-align: center;
padding: 0;
display: inline-table;
}
html>/**/body span.ruby2 { vertical-align: -28%; } /* Firefox2.x */
html>/**/body span.ruby2 , x:-moz-broken { vertical-align: 110%; } /* Firefox3.0 */
html[lang*=""]>/**/body span.ruby2 { vertical-align: 110%; } /* Opera9.5 (, IE8 and Safari) */
*:first-child+html/**/>body span.ruby2 { margin-bottom : -4px; vertical-align: baseline; } /* IE8 */
html[lang*=""]:not(:nth-child(n)) body span.ruby2 { vertical-align: -20%; } /* Safari3.1.2 */
span.ruby2:hover{ background-color: #bbb; }
html>/**/body span.ruby2 > abbr:first-child {
line-height: 1.1;
white-space: nowrap;
margin: 0;
display: table-cell;
}
html[lang*=""]:not(:nth-child(n)) body span.ruby2 > abbr:first-child { display: inline-table; } /* Safari3.1.2 */
html>/**/body span.ruby2 > abbr:first-child:before {
font-size: 64%;
line-height: 1.2;
letter-spacing: 1px;
width: 100%;
display: table-caption;
content: attr(title);
}
*:first-child+html>/**/body span.ruby2 > abbr:first-child:before { display: table-header-group; } /* IE8 */
基本的な考えかたは従来私がやってきたルビCSSと同じっちゃ同じなんですが、記述方式が根本的に違います。*
* [Ruby CSS Type2 v1.0]
*
* Example : <span class="ruby"><abbr title="[ruby text]"> [ruby base] </abbr></span>
*
* CSS Author : BENIT
*
* OS : Windows XP
*
* Browser : Internet Explorer8
* Firefox3.0
* Opera9.5
* Safari3.1.2 for win
*
* Not support [IE6/7]
*
* Last Updata //2008-8-03// Added Type2
*
*/
span.ruby2 abbr[title] {
font-size: 100%;
border-bottom-style: none;
}
html>/**/body span.ruby2 {
line-height: 1;
text-align: center;
padding: 0;
display: inline-table;
}
html>/**/body span.ruby2 { vertical-align: -28%; } /* Firefox2.x */
html>/**/body span.ruby2 , x:-moz-broken { vertical-align: 110%; } /* Firefox3.0 */
html[lang*=""]>/**/body span.ruby2 { vertical-align: 110%; } /* Opera9.5 (, IE8 and Safari) */
*:first-child+html/**/>body span.ruby2 { margin-bottom : -4px; vertical-align: baseline; } /* IE8 */
html[lang*=""]:not(:nth-child(n)) body span.ruby2 { vertical-align: -20%; } /* Safari3.1.2 */
span.ruby2:hover{ background-color: #bbb; }
html>/**/body span.ruby2 > abbr:first-child {
line-height: 1.1;
white-space: nowrap;
margin: 0;
display: table-cell;
}
html[lang*=""]:not(:nth-child(n)) body span.ruby2 > abbr:first-child { display: inline-table; } /* Safari3.1.2 */
html>/**/body span.ruby2 > abbr:first-child:before {
font-size: 64%;
line-height: 1.2;
letter-spacing: 1px;
width: 100%;
display: table-caption;
content: attr(title);
}
*:first-child+html>/**/body span.ruby2 > abbr:first-child:before { display: table-header-group; } /* IE8 */
IE6/7では使えないcontentプロパティを使い、titile属性を生成要素として出力し、それを
display:table-captionとして上に乗っけています。SPAN要素にクラスを指定するのは相変わらずですが、今回、中にはABBR要素を使ってみました。本来は略語の正式名を掲載するための要素ですが、まあ、超拡大解釈ということで（笑 DFN要素はスタイルきった時に全てのブラウザで斜体表示になって鬱陶しいから、最初考えたんですけど没にしました。ABBRだってSafariは確か斜体にしたはずですが、まあ、webkitを使ってスタイルをオフにすることは早々ないでしょう。別にSPAN要素にタイトルでもよかったんですが、こっちは少しでも短くしたかったので……（笑
……というのは建前で。
本当は、
<ruby><rb title="ruby text">ruby base</rb></ruby>としようかと思ったんですよ。ところが、この書き方だとIE8で動かないんですね。というより、RB要素に一切スタイルが効かない……。そうなると、RUBY要素の中にはRB要素RT要素他ルビ関連しか包含できないので、結局SPAN要素のお出ましというわけです（´д｀）まあでも、それなりに面白いとは思うんですよねー。IE8だと大量に使うとページがクソ重たくなるので実用性皆無ですけど（笑
でも、他のブラウザでは色んな意味で使い勝手が良いです。コピペしてもルビが入ってこないところとか、頑張れば手打ちでも打てるくらいの面倒くささとか(ﾉ∀｀)
結構苦労しましたよー。裏技的なことをやってるおかげでブラウザごとに微妙な挙動が発生するもので。Safariはベーステキスト部にtabel-cellを指定するとルビテキストのセンタリングが出来ないし、IE8は逆にルビ側がtable-captionだとセンタリングが出来ないし、上下のdisplayの設定次第だとSafari落ちるし（笑
下table-cell、上table-header-groupだったかな？ 謎仕様……。
つか、そもそも生成要素に本当はテーブル関連プロパティは設定できないことになってた気がします。CSS3からOKになりそう、だった筈。ま、動いてるからいいんですけどね（ﾟДﾟ）
サンプルはこちらからどーぞ
ブラウザ側で拡大縮小してもそんなに崩れない、はず。
今回のルビCSSをいじるに当たって、元祖の方も微調整しました。次ページに掲載ィー
円紫さんシリーズでは最高傑作
本好きな人必見！異色のミステリー♪
菊池寛が読みたくなる。
Comments