CSSでルビを表示する
銑鉄網(暫定公開版)さんのページにて配布されているファイルです。
凄くきれいに表示できるルビのCSSを発見しました。いままでhFxやSafariなどではきれいに表示できなかったのですが、これだときれいに表示できます。
元ファイル
(銑鉄網(暫定公開版)さんのページにて配布されているファイルです。)
以下、一部抜粋したものです。
@charset "UTF-8"; /* 主にWii用の指定 */ @media tv { /* ルビの縦ずれを補正 rbやrtのfont-size、line-heightによらず0.5em */ html body ruby { padding-bottom: 0.5em; } } /* ruby(ルビ文字組み全体のインライン領域) ------------------------------------------- */ /* Firefox、Safari、Opera用指定 */ ruby { display : inline-table; text-align : center; text-indent : 0px; white-space : nowrap; border : none; margin : 0px; padding : 0px; line-height : 1; height : 1em; vertical-align : text-bottom; border : none; } /* IE7用指定 */ *:first-child+html ruby { white-space : normal; } /* IE6用指定 */ * html body ruby { white-space : normal; display : inline-table; vertical-align : baseline; } /* rb(本文) ------------------------------------------- */ /* Firefox、Safari、Opera用指定 */ rb { display : table-row-group; line-height : 1; text-align : center; border : none; margin : 0px; padding : 0px; white-space : nowrap; } /* IE7用指定 */ *:first-child+html rb { white-space : normal; } /* IE6用指定 */ * html body ruby rb { display : table-row-group; vertical-align : bottom; white-space : normal; } /* rt(フリガナ) ------------------------------------------- */ /* Firefox、Safari、Opera用指定 */ rt { display : table-header-group; font-size : 0.625em; /* 振り仮名のメインテキストに対する相対サイズ */ line-height : 1.1; text-align : center; white-space : nowrap; border : none; margin : 0px; padding : 0px; } /* IE7用指定 */ *:first-child+html rt { white-space : normal; } /* IE6用指定 */ * html body ruby rt { white-space : normal; line-height : 1em; display : table-header-group; position : static; top : 0em; } /* rp(CSS OFF状態での区切り文字、通常不可視) ------------------------------------------- */ /* 全ブラウザ共通指定 */ rp { display : none; } /* hn要素での振り仮名サイズ調整(必要な場合、適当に調整してください) ------------------------------------------- */ /* h1 rt { font-size: 0.39em; } h2 rt { font-size: 0.42em; } h3 rt { font-size: 0.45em; } h4 rt { font-size: 0.48em; } h5 rt { font-size: 0.52em; } h6 rt { font-size: 0.57em; } */ /* マウスオーバーで拡大、振り仮名適用範囲表示 ------------------------------------------- */ ruby:hover rt { font-size: 1em; } ruby:hover { border: 1px dashed #CCCCCC; } /* IE6でIE7.jsを使用していて、なおかつfixed配置ブロックがある場合、 振り仮名拡大時にfixedブロックが行方不明になるためIE6でのみ機能無効化 */ /* *:first-child+html ruby:hover rt { font-size: 1em!important; font-size: 0.625em; } *:first-child+html h1 ruby:hover rt { font-size: 1em!important; font-size: 0.39em ; } *:first-child+html h2 ruby:hover rt { font-size: 1em!important; font-size: 0.42em; } *:first-child+html h3 ruby:hover rt { font-size: 1em!important; font-size: 0.45em; } *:first-child+html h4 ruby:hover rt { font-size: 1em!important; font-size: 0.48em; } *:first-child+html h5 ruby:hover rt { font-size: 1em!important; font-size: 0.52em; } *:first-child+html h6 ruby:hover rt { font-size: 1em!important; font-size: 0.57em; } *:first-child+html ruby:hover { border: 1px dashed #CCCCCC !important; border: none; background-color: transparent !important; background-color: #CCCCCC; } */