Ruby要素との比較
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; /* ルビを振る位置が親ボックスのプロパティによって変わらないように */ text-indent: 0; /* ルビを振る位置が親ボックスのプロパティによって変わらないように */ }
独自ルビを表示する過程は次のようになります。
(1) rb="ルビ" によって，rb属性の値にルビを代入 (2) attr(属性)という関数を用いて，属性の値を取得 (3) content: attr(属性)によって，属性の値をcontentプロパティに代入 (4) ::before擬似要素を用いて，contentを表示
属性は，span[rb]というように，要素と組み合わせて指定するのが一般的ですが，あえて単独の属性として指定しました。そうすることによって，たとえば <b rb="ふとじ">太字</b> と記述するだけで，太字と表示させることができます。
長所と短所 （△：長所 ▽：短所）
△ルビを振っても行間が変わりません。
△HTMLの構文が簡単です。
△ルビを自分でデザインすることができます。
△ブラウザに依存しないため，意図したデザインで表示されます。
▽ルビ用のCSSを準備する必要があります。
▽行高が小さいと，ルビを振ることができません。