Sky-Yard -Note-

現在IEのみで実装されているルビタグをCSSによって他のブラウザでも再現してしまえ、という企画。
実際にルビタグを使うわけではなく、SPAN要素にクラスを指定して実現しているので、CSSハックだらけ・フォント依存の部分がある・HTMLが読みづらくなる、という欠点以外はクリーンな実装だと思います。

/* 
 * [Ruby CSS v2.1]
 *
 * Example    : <span class="ruby"><span class="rb"> [ruby base] </span><span class="rp">《</span><span class="rt"> [ruby text] </span><span class="rp">》</span></span> 
 *
 * CSS Author : Akatsuki Kitamura 
 * Sourses    : http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.html  
 *              http://www.akatsukinishisu.net/itazuragaki/id/ruby_for_mozilla.html 
 *  
 * Customize  : BENIT(2008/06/21)
 *
 * OS : Windows XP
 *
 * Browser : Internet Explorer6
 *           Internet Explorer7
 *           Internet Explorer8
 *           Firefox3.0 // and less than
 *           Opera9.5 // and less than
 *           Safari3.1.2 for win // and less than
 *
 * rb == ruby base
 * rt == ruby text
 * rp == ruby parentheses?
 * 
 * Last Updata //2008-6-21// Added the new CSS for Firefox3. 
 *                           Fixed CSS for IE7/8 
 *
 */

/* -+-+-+-+-+-+-[Common CSS]-+-+-+-+-+-+- */
span.ruby {
  font-size: 100%;
  line-height: 2.2;
  text-indent: 0;
  white-space: nowrap;
  margin: 0;
  position: static;
}
span.ruby span.rt {
  font-size: 77%;    /* ruby size */
  line-height: 1.3;
  letter-spacing: 0;
}
span.rp {    /* parentheses for a browser that not support CSS */
  display:none;
}

/* -+-+-+-+-+-+-[For IE7/8]-+-+-+-+-+-+- */

/* IE7 only (not apply IE8) START*/
/*/*/
*:first-child+html span.ruby {
  line-height: 2.3;
  padding: 0 0.2em;
  position: relative;
}
/**/
/*/*/
*:first-child+html body span.ruby span.rt {
  position: absolute;
  top: -1.2em;
  left: 0.2em;
}
/**/
/* IE7 only END*/

/* Common of IE7/8 */
*:first-child+html body span.ruby span.rt {
  font-size: 77%;
}

/* -+-+-+-+-+-+-[For IE6]-+-+-+-+-+-+- */
* html span.ruby {
  line-height: 2.2;
  padding: 0 0.2em;
  position: relative;
}
* html span.ruby span.rt {
  font-size: 62%;
  position: absolute;
  top: -1.0em;
  left: 0.2em;
}

/* -+-+-+-+-+-+-[For IE8, Firefox, Opera and Safari]-+-+-+-+-+-+- */
html>/**/body span.ruby {
  display : inline-table;
  line-height : 1;
  text-align : center;
  padding : 0;
}

/* Adjustment of each browser */
html>/**/body span.ruby                          { vertical-align : -28%; } /* Firefox2.x */
html>/**/body span.ruby , x:-moz-broken          { vertical-align : 115%; } /* Firefox3.0 */
html[lang*=""]>/**/body span.ruby                { vertical-align : 125%; } /* Opera9.5 (, IE8 and Safari) */
*:first-child+html/**/>body span.ruby            { margin-bottom: -4px; vertical-align: baseline; } /* IE8 */
html[lang*=""]:not(:nth-child(n)) body span.ruby { vertical-align: -15%; } /* Safari3.1.2 */

html>/**/body span.ruby > span.rb {
  display : table-row-group;
  line-height : 1.2;
}
html>/**/body span.ruby > span.rt {
  display : table-header-group;
}

前回のエントリで見つけたハックを使って、Firefox3.0に対応しました。これで現行の最新ブラウザには一通り対応してると思います。
相変わらずvertical-alignの指定には細かい微調整が必要ですが……。


ルビサンプル

　六の宮の姫君の父は、古い宮腹《みやばら》の生れだつた。が、時勢にも遅れ勝ちな、昔気質《むかしかたぎ》の人だつたから、官も兵部大輔《ひやうぶのたいふ》より昇らなかつた。姫君はさう云ふ父母《ちちはは》と一しよに、六の宮のほとりにある、木高《こだか》い屋形《やかた》に住まつてゐた。六の宮の姫君と云ふのは、その土地の名前に拠《よ》つたのだつた。

図書カード：六の宮の姫君　-　芥川龍之介（青空文庫）

上に書いてない欠点が、ルビがある行と無い行で行間が変わることかな……。あとIE7以下はモダンブラウザと違う処理なので長いルビがあると読みづらいことも大欠点。

ちなみにソースはこんなことになります（笑

　六の宮の姫君の父は、古い<span class="ruby"><span class="rb">宮腹</span><span class="rp">《</span><span class="rt">みやばら</span><span class="rp">》</span></span>の生れだつた。が、時勢にも遅れ勝ちな、<span class="ruby"><span class="rb">昔気質</span><span class="rp">《</span><span class="rt">むかしかたぎ</span><span class="rp">》</span></span>の人だつたから、官も<span class="ruby"><span class="rb">兵部大輔</span><span class="rp">《</span><span class="rt">ひやうぶのたいふ</span><span class="rp">》</span></span>より昇らなかつた。姫君はさう云ふ<span class="ruby"><span class="rb">父母</span><span class="rp">《</span><span class="rt">ちちはは</span><span class="rp">》</span></span>と一しよに、六の宮のほとりにある、<span class="ruby"><span class="rb">木高</span><span class="rp">《</span><span class="rt">こだか</span><span class="rp">》</span></span>い<span class="ruby"><span class="rb">屋形</span><span class="rp">《</span><span class="rt">やかた</span><span class="rp">》</span></span>に住まつてゐた。六の宮の姫君と云ふのは、その土地の名前に<span class="ruby"><span class="rb">拠</span><span class="rp">《</span><span class="rt">よ</span><span class="rp">》</span></span>つたのだつた。