行間を一定に保てるルビ（Webデザイン失敗の巻） | HTMLの部品 | 情報・デジタルの部屋

Ruby要素との比較

　ruby要素を使ったルビと，独自ルビを比較してみます。行間の変動がわかりやすいように，二段組で表示しました。なお行間の変動は行高1行の高さによって異なります。

▼行高が2文字分のとき（2文字分の行高は，「こひつじの家」の標準です。）

　ruby要素を使用

　思わぬ雨となって軒下に雨宿あまやどりをしたとき，目の前にある水たまりに落ちてくる雨う滴てきが，水面に次々と泡あわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生いっしょうは，しばしの時を楽しませてくれました。

　独自ルビを使用

　思わぬ雨となって軒下に雨宿りをしたとき，目の前にある水たまりに落ちてくる雨滴が，水面に次々と泡を作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生は，しばしの時を楽しませてくれました。

▼行高が1.5文字分のとき

　ruby要素を使用

　思わぬ雨となって軒下に雨宿あまやどりをしたとき，目の前にある水たまりに落ちてくる雨う滴てきが，水面に次々と泡あわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生いっしょうは，しばしの時を楽しませてくれました。

　独自ルビを使用

　思わぬ雨となって軒下に雨宿りをしたとき，目の前にある水たまりに落ちてくる雨滴が，水面に次々と泡を作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生は，しばしの時を楽しませてくれました。

　ruby要素を使用した場合は，行高が小さいほど行間の不揃いが目立ちます。ただしブラウザによって表示は異なります。Firefoxのルビは，比較的よくできていると思います。
　独自ルビを使用した場合は行間の不揃いはありません。
　ruby要素を使用した場合と独自ルビを使用した場合とでは，ブラウザの画面でコンテンツをコピーしたときのテキスト内容が異なります。たとえば「軒下に雨宿りをした」という部分をコピーすると，ruby要素の場合は「軒下に雨宿あまやどりをした」になりますが，独自ルビの場合は「軒下に雨宿りをした」となって，ルビが含まれません。

概要

　はじめに独自ルビのHTML部分ですが，基本的に，

<span rb="ルビ">漢字</span>

という構文になります。rb という属性に〔ルビ〕という値を与えています。これに対してruby要素を使用した場合は，

<ruby>漢字<rt>ルビ</rt></ruby>

となりますから，独自ルビの方がやや簡素なかたちになります。

　次にCSSの独自ルビ部分を示します。ここで rb は，〔ルビを付ける働きをする属性〕の名前です。私が勝手に短い名前をつけました。

[rb] {
  position: relative;  /* 漢字の位置を取得 */
  }

[rb]::before {  /* ::before擬似要素によって，contentプロパティの内容を表示 */
  content: attr(rb);  /* rbの値をcontentプロパティに代入 */
  position: absolute;  /* 以下4行は，ルビを振る場所の指定 */
  top: -0.9em;
  left: -0.2em;  /* ルビを振る場所の幅を，ルビを振る漢字の幅よりも少し拡大 */
  right: -0.2em;
  font-size: 0.5em;  /* 漢字1文字について，かな2文字を基準とする */
  text-align: center;  /* ルビは，ルビを振る場所の中央に表示 */
  white-space: nowrap;  /* ルビが長くなっても途中で改行しないように */
  line-height: 1;  /* 以下2行は，*/
  text-indent: 0;  /* ルビを振る位置が親ボックスのプロパティによって変わらないように */
  }

　CSSに詳しいコメントを付けておきましたが，独自ルビの動作原理はおおよそ次のようになります。

　(1) rb="ルビ" によって，rb属性の値にルビを代入
　(2) attr(属性)という関数を用いて，属性の値を取得
　(3) content: attr(属性)によって，属性の値をcontentプロパティに代入
　(4) ::before擬似要素を用いて，contentを表示

　独自の属性は，〔span[rb]〕というように，要素と組み合わせて指定するのが一般的ですが，あえて単独の属性として指定しました。そうすることによって，たとえば HTMLで〔<b rb="ふとじ">太字</b>〕と記述するだけで，〔太字〕と表示させることができます。

独自ルビの長所と短所（△：長所　▽：短所）

△ルビを振っても行間が変わりません。

△HTMLの構文が簡単です。

△ルビを自分でデザインすることができます。

△ブラウザに依存しないため，意図したデザインで表示されます。

▽ルビ用のCSSを準備する必要があります。

▽行間が狭いと，ルビを振ることができません。